Quick Links
Quick Links
Project Overview
Project Overview
Project Overview
GOAL
GOAL
GOAL
Build Trials.Lilly.com 3.0 by modernizing the visual system and refining the experience structure—reducing cognitive load for first-time and non-expert users, improving findability and pathway clarity (find a trial, understand what to expect, take the next step), and strengthening consistency, accessibility, and mobile responsiveness to deliver a more unified and trustworthy clinical-trial experience.
Build Trials.Lilly.com 3.0 by modernizing the visual system and refining the experience structure—reducing cognitive load for first-time and non-expert users, improving findability and pathway clarity (find a trial, understand what to expect, take the next step), and strengthening consistency, accessibility, and mobile responsiveness to deliver a more unified and trustworthy clinical-trial experience.
Build Trials.Lilly.com 3.0 by modernizing the visual system and refining the experience structure—reducing cognitive load for first-time and non-expert users, improving findability and pathway clarity (find a trial, understand what to expect, take the next step), and strengthening consistency, accessibility, and mobile responsiveness to deliver a more unified and trustworthy clinical-trial experience.
MY ROLE
MY ROLE
MY ROLE
As the primary UX/UI designer (and a contributor to the Lilly Web 3.0 Design System), I focused on:
Core experience + key page design for Trials.Lilly.com 3.0: elevating the main “find a trial / filter / trial details / next-step” journey through updated UI and interaction patterns.
3.0 visual foundation and page template rollout: standardizing typography hierarchy, component styling, and responsive rules to improve clarity and consistency.
Design System contribution and reuse enablement: codifying key components and standards (including motion and accessibility) into the Web 3.0 system to support scalable iteration and faster delivery.
As the primary UX/UI designer (and a contributor to the Lilly Web 3.0 Design System), I focused on:
Core experience + key page design for Trials.Lilly.com 3.0: elevating the main “find a trial / filter / trial details / next-step” journey through updated UI and interaction patterns.
3.0 visual foundation and page template rollout: standardizing typography hierarchy, component styling, and responsive rules to improve clarity and consistency.
Design System contribution and reuse enablement: codifying key components and standards (including motion and accessibility) into the Web 3.0 system to support scalable iteration and faster delivery.
As the primary UX/UI designer (and a contributor to the Lilly Web 3.0 Design System), I focused on:
Core experience + key page design for Trials.Lilly.com 3.0: elevating the main “find a trial / filter / trial details / next-step” journey through updated UI and interaction patterns.
3.0 visual foundation and page template rollout: standardizing typography hierarchy, component styling, and responsive rules to improve clarity and consistency.
Design System contribution and reuse enablement: codifying key components and standards (including motion and accessibility) into the Web 3.0 system to support scalable iteration and faster delivery.
About Clinical Trial
About Clinical Trial
About Clinical Trial
What a clinical trial is?
What a clinical trial is?
What a clinical trial is?
A structured research study that tests a medical intervention (e.g., a new drug, vaccine, device, or care approach) in people to understand safety and effectiveness.
A structured research study that tests a medical intervention (e.g., a new drug, vaccine, device, or care approach) in people to understand safety and effectiveness.
A structured research study that tests a medical intervention (e.g., a new drug, vaccine, device, or care approach) in people to understand safety and effectiveness.
What users need most (especially first-time / non-expert users)?
What users need most (especially first-time / non-expert users)?
What users need most (especially first-time / non-expert users)?
Clear, plain-language answers to “What will happen?” “Am I eligible?” “What are the risks/benefits?” “How much time will it take?” “What’s the next step?”, without having to decode medical jargon or hunt across scattered pages.
Clear, plain-language answers to “What will happen?” “Am I eligible?” “What are the risks/benefits?” “How much time will it take?” “What’s the next step?”, without having to decode medical jargon or hunt across scattered pages.
Clear, plain-language answers to “What will happen?” “Am I eligible?” “What are the risks/benefits?” “How much time will it take?” “What’s the next step?”, without having to decode medical jargon or hunt across scattered pages.
How my design connects to that need:
How my design connects to that need:
How my design connects to that need:
We designed Trials.Lilly.com 3.0 to reduce cognitive load and increase confidence by making trial information more scannable and understandable, improving the core journey: find a trial → filter → review details/eligibility → take the next step, and strengthening consistency and accessibility so users can move from uncertainty to informed action.
We designed Trials.Lilly.com 3.0 to reduce cognitive load and increase confidence by making trial information more scannable and understandable, improving the core journey: find a trial → filter → review details/eligibility → take the next step, and strengthening consistency and accessibility so users can move from uncertainty to informed action.
We designed Trials.Lilly.com 3.0 to reduce cognitive load and increase confidence by making trial information more scannable and understandable, improving the core journey: find a trial → filter → review details/eligibility → take the next step, and strengthening consistency and accessibility so users can move from uncertainty to informed action.
Problem and Challenges
Problem and Challenges
Problem and Challenges
Trials.Lilly.com’s legacy experience was not built to support high-stakes, non-expert decision-making at scale, so Web 3.0 required a system-level redesign to unify navigation and pathways, reduce cognitive load, and standardize templates/components across the entire site.
Trials.Lilly.com’s legacy experience was not built to support high-stakes, non-expert decision-making at scale, so Web 3.0 required a system-level redesign to unify navigation and pathways, reduce cognitive load, and standardize templates/components across the entire site.
Trials.Lilly.com’s legacy experience was not built to support high-stakes, non-expert decision-making at scale, so Web 3.0 required a system-level redesign to unify navigation and pathways, reduce cognitive load, and standardize templates/components across the entire site.
Fragmented Experience, Users Can’t Build a Mental Model
Fragmented Experience, Users Can’t Build a Mental Model
Fragmented Experience, Users Can’t Build a Mental Model
The legacy site lacked a coherent logic across navigation, entry points, and pathways, preventing users from quickly forming a clear mental model of where they are, where to start, and what to do next.
The legacy site lacked a coherent logic across navigation, entry points, and pathways, preventing users from quickly forming a clear mental model of where they are, where to start, and what to do next.
The legacy site lacked a coherent logic across navigation, entry points, and pathways, preventing users from quickly forming a clear mental model of where they are, where to start, and what to do next.
High-Stakes Content
High-Stakes Content
High-Stakes Content
The legacy site did not structure complex clinical-trial information with sufficient hierarchy, making it difficult for non-expert users to quickly understand, evaluate, and take action.
The legacy site did not structure complex clinical-trial information with sufficient hierarchy, making it difficult for non-expert users to quickly understand, evaluate, and take action.
The legacy site did not structure complex clinical-trial information with sufficient hierarchy, making it difficult for non-expert users to quickly understand, evaluate, and take action.
Template & Component Debt
Template & Component Debt
Template & Component Debt
The legacy site lacked unified templates and component governance, resulting in inconsistent experiences, high maintenance cost, and unreliable scalability.
The legacy site lacked unified templates and component governance, resulting in inconsistent experiences, high maintenance cost, and unreliable scalability.
The legacy site lacked unified templates and component governance, resulting in inconsistent experiences, high maintenance cost, and unreliable scalability.
Research & Discovery
Research & Discovery
Research & Discovery
Trials.Lilly.com’s legacy experience was not built to support high-stakes, non-expert decision-making at scale, so Web 3.0 required a system-level redesign to unify navigation and pathways, reduce cognitive load, and standardize templates/components across the entire site.
Trials.Lilly.com’s legacy experience was not built to support high-stakes, non-expert decision-making at scale, so Web 3.0 required a system-level redesign to unify navigation and pathways, reduce cognitive load, and standardize templates/components across the entire site.
Trials.Lilly.com’s legacy experience was not built to support high-stakes, non-expert decision-making at scale, so Web 3.0 required a system-level redesign to unify navigation and pathways, reduce cognitive load, and standardize templates/components across the entire site.
Design Thinking Workshop
Design Thinking Workshop
Design Thinking Workshop
After aligning on the Lilly Trail 3.0 direction with the product team, we ran multiple Design Thinking workshops with real trial participants (patients) and caregivers, clinical-site staff (SC/PI), recruitment & patient engagement, Trial Information Center/customer support, Medical/Legal/Regulatory stakeholders, plus engineering and content partners. These sessions helped us map the end-to-end journey and converge on actionable 3.0 design inputs.
We used 5W1H to align on user tasks, content roles, critical pathways, and support needs, then translated outcomes into Web 3.0 IA and site-wide navigation principles for consistent, explainable journeys.
We synthesized outputs via affinity clustering to define opportunity areas and priorities, codifying them into a Web 3.0 template strategy and component requirements list to scale consistent page delivery.
After aligning on the Lilly Trail 3.0 direction with the product team, we ran multiple Design Thinking workshops with real trial participants (patients) and caregivers, clinical-site staff (SC/PI), recruitment & patient engagement, Trial Information Center/customer support, Medical/Legal/Regulatory stakeholders, plus engineering and content partners. These sessions helped us map the end-to-end journey and converge on actionable 3.0 design inputs.
We used 5W1H to align on user tasks, content roles, critical pathways, and support needs, then translated outcomes into Web 3.0 IA and site-wide navigation principles for consistent, explainable journeys.
We synthesized outputs via affinity clustering to define opportunity areas and priorities, codifying them into a Web 3.0 template strategy and component requirements list to scale consistent page delivery.
After aligning on the Lilly Trail 3.0 direction with the product team, we ran multiple Design Thinking workshops with real trial participants (patients) and caregivers, clinical-site staff (SC/PI), recruitment & patient engagement, Trial Information Center/customer support, Medical/Legal/Regulatory stakeholders, plus engineering and content partners. These sessions helped us map the end-to-end journey and converge on actionable 3.0 design inputs.
We used 5W1H to align on user tasks, content roles, critical pathways, and support needs, then translated outcomes into Web 3.0 IA and site-wide navigation principles for consistent, explainable journeys.
We synthesized outputs via affinity clustering to define opportunity areas and priorities, codifying them into a Web 3.0 template strategy and component requirements list to scale consistent page delivery.
Persona
Persona
Persona
Based on multiple cross-functional Design Thinking workshops and user feedback, we distilled Trials.Lilly.com Web 3.0 audiences into three primary mindsets. All of them are navigating high-uncertainty, high-emotion health decisions, but they differ in comprehension needs, trust thresholds, and preferred support. These personas directly informed our 3.0 information architecture, template strategy, and Design System requirements.
Based on multiple cross-functional Design Thinking workshops and user feedback, we distilled Trials.Lilly.com Web 3.0 audiences into three primary mindsets. All of them are navigating high-uncertainty, high-emotion health decisions, but they differ in comprehension needs, trust thresholds, and preferred support. These personas directly informed our 3.0 information architecture, template strategy, and Design System requirements.
Based on multiple cross-functional Design Thinking workshops and user feedback, we distilled Trials.Lilly.com Web 3.0 audiences into three primary mindsets. All of them are navigating high-uncertainty, high-emotion health decisions, but they differ in comprehension needs, trust thresholds, and preferred support. These personas directly informed our 3.0 information architecture, template strategy, and Design System requirements.
Optimized User Flow
Optimized User Flow
Optimized User Flow
In the final phase of discovery, we synthesized our findings into a simplified, end-to-end Web 3.0 user flow, optimizing the legacy experience that was previously fragmented and hard to follow. By consolidating entry points and aligning pathways around clear user goals, the updated flow reduces navigation friction, minimizes drop-offs, and establishes a scalable foundation for consistent templates and site-wide delivery.
In the final phase of discovery, we synthesized our findings into a simplified, end-to-end Web 3.0 user flow, optimizing the legacy experience that was previously fragmented and hard to follow. By consolidating entry points and aligning pathways around clear user goals, the updated flow reduces navigation friction, minimizes drop-offs, and establishes a scalable foundation for consistent templates and site-wide delivery.
In the final phase of discovery, we synthesized our findings into a simplified, end-to-end Web 3.0 user flow, optimizing the legacy experience that was previously fragmented and hard to follow. By consolidating entry points and aligning pathways around clear user goals, the updated flow reduces navigation friction, minimizes drop-offs, and establishes a scalable foundation for consistent templates and site-wide delivery.
Final Design
Final Design
Final Design
All final designs were fully developed and launched in September 2025 and are now live at https://trials.lilly.com/en-US
All final designs were fully developed and launched in September 2025 and are now live at https://trials.lilly.com/en-US
All final designs were fully developed and launched in September 2025 and are now live at https://trials.lilly.com/en-US
Navigation Bar
Navigation Bar
Navigation Bar
We designed a new Navigation Bar and motion system for Lilly.com / Trials 3.0 to create a clearer, more consistent wayfinding experience across the site—so users always know where they are and what they can do next. Subtle, polished transitions (expand/collapse, page changes, and focus feedback) reinforce the modern Web 3.0 look and feel and strengthen trust, while keeping interactions lightweight and the overall browsing flow smooth and engaging.
We designed a new Navigation Bar and motion system for Lilly.com / Trials 3.0 to create a clearer, more consistent wayfinding experience across the site—so users always know where they are and what they can do next. Subtle, polished transitions (expand/collapse, page changes, and focus feedback) reinforce the modern Web 3.0 look and feel and strengthen trust, while keeping interactions lightweight and the overall browsing flow smooth and engaging.
We designed a new Navigation Bar and motion system for Lilly.com / Trials 3.0 to create a clearer, more consistent wayfinding experience across the site—so users always know where they are and what they can do next. Subtle, polished transitions (expand/collapse, page changes, and focus feedback) reinforce the modern Web 3.0 look and feel and strengthen trust, while keeping interactions lightweight and the overall browsing flow smooth and engaging.
Homepage Redesign
Homepage Redesign
Homepage Redesign
This homepage update refocused the experience on the core task "Find a Trial" using clearer hierarchy and a more intentional information rhythm so users can quickly understand where to start and what to do next, while a more unified, modern Web 3.0 visual language and component system improves overall polish and appeal, making the page feel more trustworthy, more readable, and more inviting to explore.
This homepage update refocused the experience on the core task "Find a Trial" using clearer hierarchy and a more intentional information rhythm so users can quickly understand where to start and what to do next, while a more unified, modern Web 3.0 visual language and component system improves overall polish and appeal, making the page feel more trustworthy, more readable, and more inviting to explore.
This homepage update refocused the experience on the core task "Find a Trial" using clearer hierarchy and a more intentional information rhythm so users can quickly understand where to start and what to do next, while a more unified, modern Web 3.0 visual language and component system improves overall polish and appeal, making the page feel more trustworthy, more readable, and more inviting to explore.
Scroll to explore full Page
Find a Lilly Trial
Find a Lilly Trial
Find a Lilly Trial
Find a Lilly clinical trial in minutes—filter by condition and location to quickly see your best matches and take the next step.
Find a Lilly clinical trial in minutes—filter by condition and location to quickly see your best matches and take the next step.
Find a Lilly clinical trial in minutes—filter by condition and location to quickly see your best matches and take the next step.
Tap to View Mobile Version
Tap to View Mobile Version
Trial Detail Pages
Trial Detail Pages
Trial Detail Pages
The Trial Detail Page redesign front-loads critical decision info and the next-step CTA, restructuring the summary, eligibility requirements, locations, and enrollment pathway into a scannable, comparable, and actionable flow, while applying a unified Web 3.0 visual language and component system to improve trust and cross-device consistency.
The Trial Detail Page redesign front-loads critical decision info and the next-step CTA, restructuring the summary, eligibility requirements, locations, and enrollment pathway into a scannable, comparable, and actionable flow, while applying a unified Web 3.0 visual language and component system to improve trust and cross-device consistency.
The Trial Detail Page redesign front-loads critical decision info and the next-step CTA, restructuring the summary, eligibility requirements, locations, and enrollment pathway into a scannable, comparable, and actionable flow, while applying a unified Web 3.0 visual language and component system to improve trust and cross-device consistency.
Tap to View Mobile Version
Tap to View Mobile Version
We also introduced a “Match to a Trial” guided check and supportive calculators to capture key criteria through progressive questions and surface clear fit signals and next-step recommendations, helping users quickly assess whether the trial is right for them.
We also introduced a “Match to a Trial” guided check and supportive calculators to capture key criteria through progressive questions and surface clear fit signals and next-step recommendations, helping users quickly assess whether the trial is right for them.
We also introduced a “Match to a Trial” guided check and supportive calculators to capture key criteria through progressive questions and surface clear fit signals and next-step recommendations, helping users quickly assess whether the trial is right for them.
Research Areas Pages
Research Areas Pages
Research Areas Pages
Under Research Areas, we created a consistent hub page for every condition, using a shared Web 3.0 template and component system to connect plain-language education, relevant trials, and next-step CTAs—so users can understand faster and move seamlessly into Find / Match / Alerts.
Under Research Areas, we created a consistent hub page for every condition, using a shared Web 3.0 template and component system to connect plain-language education, relevant trials, and next-step CTAs—so users can understand faster and move seamlessly into Find / Match / Alerts.
Under Research Areas, we created a consistent hub page for every condition, using a shared Web 3.0 template and component system to connect plain-language education, relevant trials, and next-step CTAs—so users can understand faster and move seamlessly into Find / Match / Alerts.
Other Pages
Other Pages
Other Pages
Design System
Design System
Design System
Motion Standards
Motion Standards
Motion Standards
We created a site-wide motion standard for Trials 3.0, covering easing, duration, distance, fades, and accessibility, so every interaction feels natural, consistent, and trustworthy.
We created a site-wide motion standard for Trials 3.0, covering easing, duration, distance, fades, and accessibility, so every interaction feels natural, consistent, and trustworthy.
We created a site-wide motion standard for Trials 3.0, covering easing, duration, distance, fades, and accessibility, so every interaction feels natural, consistent, and trustworthy.
Shape and Grid Standards
Shape and Grid Standards
Shape and Grid Standards
We also codified Web 3.0 foundation standards, Grid System, 8-pt spacing, and Shape (radius/component geometry) into the Design System
We also codified Web 3.0 foundation standards, Grid System, 8-pt spacing, and Shape (radius/component geometry) into the Design System
We also codified Web 3.0 foundation standards, Grid System, 8-pt spacing, and Shape (radius/component geometry) into the Design System
Contact Me
Ready to bring your vision to life? Let's connect and explore the possibilities together. Reach out today!
Work
About
Contact
2025 All rights reserved. Design by Shankun Zhou.
Contact Me
Ready to bring your vision to life? Let's connect and explore the possibilities together. Reach out today!
Work
About
Contact
2025 All rights reserved. Design by Shankun Zhou.
Contact Me
Ready to bring your vision to life? Let's connect and explore the possibilities together. Reach out today!
Work
About
Contact
2025 All rights reserved. Design by Shankun Zhou.