MENU
Quick Links
Quick Links
At a glance
At a glance
At a glance
ROLE
ROLE
ROLE
Primary UX/UI designer, Trials.Lilly.com 3.0
Contributor to the Lilly Web 3.0 Design System
Primary UX/UI designer, Trials.Lilly.com 3.0
Contributor to the Lilly Web 3.0 Design System
Primary UX/UI designer, Trials.Lilly.com 3.0
Contributor to the Lilly Web 3.0 Design System
TEAM
TEAM
TEAM
Partners: Product, engineering and content
Inputs: Clinical-site staff (SC/PI), recruitment, Trial Information Center
Approval: Medical, Legal and Regulatory review
Build: Development vendor
Partners: Product, engineering and content
Inputs: Clinical-site staff (SC/PI), recruitment, Trial Information Center
Approval: Medical, Legal and Regulatory review
Build: Development vendor
Partners: Product, engineering and content
Inputs: Clinical-site staff (SC/PI), recruitment, Trial Information Center
Approval: Medical, Legal and Regulatory review
Build: Development vendor
SCOPE
SCOPE
SCOPE
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.
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.
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.
What had to change
What had to change
What had to change
People don’t browse clinical trials. They arrive because something is wrong, and they’re deciding whether to put their body into a study.
Trials.Lilly.com’s legacy experience was not built to support high-stakes, non-expert decision-making at scale. Web 3.0 needed a system-level redesign, not a reskin.
Three problems showed up on every page type.
People don’t browse clinical trials. They arrive because something is wrong, and they’re deciding whether to put their body into a study.
Trials.Lilly.com’s legacy experience was not built to support high-stakes, non-expert decision-making at scale. Web 3.0 needed a system-level redesign, not a reskin.
Three problems showed up on every page type.
People don’t browse clinical trials. They arrive because something is wrong, and they’re deciding whether to put their body into a study.
Trials.Lilly.com’s legacy experience was not built to support high-stakes, non-expert decision-making at scale. Web 3.0 needed a system-level redesign, not a reskin.
Three problems showed up on every page type.
People couldn’t build a mental model
People couldn’t build a mental model
People couldn’t build a mental model
Navigation, entry points and pathways had no shared logic. Nothing told users where they were, where to start, or what came next.
Navigation, entry points and pathways had no shared logic. Nothing told users where they were, where to start, or what came next.
Navigation, entry points and pathways had no shared logic. Nothing told users where they were, where to start, or what came next.
High-stakes content had no hierarchy
High-stakes content had no hierarchy
High-stakes content had no hierarchy
Complex trial information wasn’t structured for people who don’t read medical language, the hardest decisions sat on the densest screens.
Complex trial information wasn’t structured for people who don’t read medical language, the hardest decisions sat on the densest screens.
Complex trial information wasn’t structured for people who don’t read medical language, the hardest decisions sat on the densest screens.
Template and component debt
Template and component debt
Template and component debt
No unified templates or component governance. Inconsistent experiences, high maintenance cost, unreliable scalability.
No unified templates or component governance. Inconsistent experiences, high maintenance cost, unreliable scalability.
No unified templates or component governance. Inconsistent experiences, high maintenance cost, unreliable scalability.
How I framed the problem
How I framed the problem
How I framed the problem
The 3.0 direction was set with the product team, then tested against the people who actually run and join trials.
The 3.0 direction was set with the product team, then tested against the people who actually run and join trials.
The 3.0 direction was set with the product team, then tested against the people who actually run and join trials.
Workshops — who was in the room
Workshops — who was in the room
Workshops — who was in the room
Trial participants and caregivers · clinical-site staff (SC/PI) · recruitment and patient engagement · Trial Information Center · Medical, Legal and Regulatory · engineering and content
Method: 5W1H to align on user tasks, content roles, critical pathways and support needs. Affinity clustering to turn the output into opportunity areas and priorities.
I took it into: Web 3.0 IA and site-wide navigation principles, a template strategy, and a component requirements list — what had to exist before any page could be designed.
Trial participants and caregivers · clinical-site staff (SC/PI) · recruitment and patient engagement · Trial Information Center · Medical, Legal and Regulatory · engineering and content
Method: 5W1H to align on user tasks, content roles, critical pathways and support needs. Affinity clustering to turn the output into opportunity areas and priorities.
I took it into: Web 3.0 IA and site-wide navigation principles, a template strategy, and a component requirements list — what had to exist before any page could be designed.
Trial participants and caregivers · clinical-site staff (SC/PI) · recruitment and patient engagement · Trial Information Center · Medical, Legal and Regulatory · engineering and content
Method: 5W1H to align on user tasks, content roles, critical pathways and support needs. Affinity clustering to turn the output into opportunity areas and priorities.
I took it into: Web 3.0 IA and site-wide navigation principles, a template strategy, and a component requirements list — what had to exist before any page could be designed.
Audiences — three mindsets
Audiences — three mindsets
Audiences — three mindsets
All three are navigating high-uncertainty health decisions, but they differ in comprehension needs, trust thresholds and preferred support.
I used them to: drive information architecture, template strategy and Design System requirements.
Source: Distilled from the workshops with Lilly’s user researchers.
All three are navigating high-uncertainty health decisions, but they differ in comprehension needs, trust thresholds and preferred support.
I used them to: drive information architecture, template strategy and Design System requirements.
Source: Distilled from the workshops with Lilly’s user researchers.
All three are navigating high-uncertainty health decisions, but they differ in comprehension needs, trust thresholds and preferred support.
I used them to: drive information architecture, template strategy and Design System requirements.
Source: Distilled from the workshops with Lilly’s user researchers.
The journey
The journey
The journey
Search, Match, results, Trial Detail and next steps are one journey. The legacy site built them as five separate pages — so the same status word could mean different things depending on which page you were on.
So I: mapped every point where someone has to decide something, and what each screen has to show at that moment, before drawing any layout. Then one label per action, one meaning per status word, across all five.
Search, Match, results, Trial Detail and next steps are one journey. The legacy site built them as five separate pages — so the same status word could mean different things depending on which page you were on.
So I: mapped every point where someone has to decide something, and what each screen has to show at that moment, before drawing any layout. Then one label per action, one meaning per status word, across all five.
Search, Match, results, Trial Detail and next steps are one journey. The legacy site built them as five separate pages — so the same status word could mean different things depending on which page you were on.
So I: mapped every point where someone has to decide something, and what each screen has to show at that moment, before drawing any layout. Then one label per action, one meaning per status word, across all five.
Decisions
Decisions
Decisions
Four decisions. The first two are about the journey and the page. The last two are about the platform and the system underneath them.
Four decisions. The first two are about the journey and the page. The last two are about the platform and the system underneath them.
Four decisions. The first two are about the journey and the page. The last two are about the platform and the system underneath them.
Decision 1: Two entry paths, one journey
Decision 1: Two entry paths, one journey
Decision 1: Two entry paths, one journey
Some people arrive knowing exactly which condition they’re searching for. Others know only that they’re sick and out of options, and can’t turn that into search criteria. The homepage had to serve both without making anyone pick a lane first.
Considered: search only, guided matching only, or both converging.
Chose: Both, side by side. One search block on the homepage for condition and location, with two buttons under it. Find a Trial takes the primary button. Match to a Trial sits beside it as the alternate, so the page has an opinion about the default without closing the other door. Both paths converge on the same trials, the same eligibility information, the same next step.
Some people arrive knowing exactly which condition they’re searching for. Others know only that they’re sick and out of options, and can’t turn that into search criteria. The homepage had to serve both without making anyone pick a lane first.
Considered: search only, guided matching only, or both converging.
Chose: Both, side by side. One search block on the homepage for condition and location, with two buttons under it. Find a Trial takes the primary button. Match to a Trial sits beside it as the alternate, so the page has an opinion about the default without closing the other door. Both paths converge on the same trials, the same eligibility information, the same next step.
Some people arrive knowing exactly which condition they’re searching for. Others know only that they’re sick and out of options, and can’t turn that into search criteria. The homepage had to serve both without making anyone pick a lane first.
Considered: search only, guided matching only, or both converging.
Chose: Both, side by side. One search block on the homepage for condition and location, with two buttons under it. Find a Trial takes the primary button. Match to a Trial sits beside it as the alternate, so the page has an opinion about the default without closing the other door. Both paths converge on the same trials, the same eligibility information, the same next step.
Scroll to explore the homepage
Find a Trial is where a long list gets narrowed. Filters sit above the results on the same screen, and a count above the cards shows how many of the matching trials are currently enrolling. Every result card carries the same four things: status, age range, conditions and trial name, which is what makes trials comparable row by row. Full study information stays on Trial Detail, so this page stays scannable. Mobile runs the same filter logic, not a reduced version.
Find a Trial is where a long list gets narrowed. Filters sit above the results on the same screen, and a count above the cards shows how many of the matching trials are currently enrolling. Every result card carries the same four things: status, age range, conditions and trial name, which is what makes trials comparable row by row. Full study information stays on Trial Detail, so this page stays scannable. Mobile runs the same filter logic, not a reduced version.
Find a Trial is where a long list gets narrowed. Filters sit above the results on the same screen, and a count above the cards shows how many of the matching trials are currently enrolling. Every result card carries the same four things: status, age range, conditions and trial name, which is what makes trials comparable row by row. Full study information stays on Trial Detail, so this page stays scannable. Mobile runs the same filter logic, not a reduced version.
Tap to View Mobile Version
Tap to View Mobile Version
Decision 2: Translate before asking people to decide
Decision 2: Translate before asking people to decide
Decision 2: Translate before asking people to decide
The barrier isn’t finding a trial. A trial record is written for investigators, with inclusion and exclusion criteria, endpoints and phase. The person reading it is deciding about their own body.
Considered:
Present the registry record as it comes.
Layer a glossary on top of it.
Reorder the page around the questions a patient asks.
Chose: the third. Every trial page runs the same order: Trial Summary, Key Requirements, See if You May Qualify, Trial Locations, Resources.
Summary comes before the criteria, so what the study is and whether you’re in range is settled first: age, condition, duration, phase.
Qualifying sits between the criteria and the logistics. You find out you might fit before you go looking for a site near you.
The barrier isn’t finding a trial. A trial record is written for investigators, with inclusion and exclusion criteria, endpoints and phase. The person reading it is deciding about their own body.
Considered:
Present the registry record as it comes.
Layer a glossary on top of it.
Reorder the page around the questions a patient asks.
Chose: the third. Every trial page runs the same order: Trial Summary, Key Requirements, See if You May Qualify, Trial Locations, Resources.
Summary comes before the criteria, so what the study is and whether you’re in range is settled first: age, condition, duration, phase.
Qualifying sits between the criteria and the logistics. You find out you might fit before you go looking for a site near you.
The barrier isn’t finding a trial. A trial record is written for investigators, with inclusion and exclusion criteria, endpoints and phase. The person reading it is deciding about their own body.
Considered:
Present the registry record as it comes.
Layer a glossary on top of it.
Reorder the page around the questions a patient asks.
Chose: the third. Every trial page runs the same order: Trial Summary, Key Requirements, See if You May Qualify, Trial Locations, Resources.
Summary comes before the criteria, so what the study is and whether you’re in range is settled first: age, condition, duration, phase.
Qualifying sits between the criteria and the logistics. You find out you might fit before you go looking for a site near you.
Tap to View Mobile Version
Tap to View Mobile Version
Match to a Trial Tests are made for people who can't turn a diagnosis into search criteria. Each answer decides what gets asked next, and one pass screens multiple studies at once. Three states: matched, unmatched, unknown. Unknown is there because some answers can't settle it, and saying so beats forcing a verdict.
Match to a Trial Tests are made for people who can't turn a diagnosis into search criteria. Each answer decides what gets asked next, and one pass screens multiple studies at once. Three states: matched, unmatched, unknown. Unknown is there because some answers can't settle it, and saying so beats forcing a verdict.
Match to a Trial Tests are made for people who can't turn a diagnosis into search criteria. Each answer decides what gets asked next, and one pass screens multiple studies at once. Three states: matched, unmatched, unknown. Unknown is there because some answers can't settle it, and saying so beats forcing a verdict.
Across the platform
Across the platform
Across the platform
Navigation Bar
Navigation Bar
Navigation Bar
I designed a new Navigation Bar and motion system for Lilly.com 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.
I designed a new Navigation Bar and motion system for Lilly.com 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.
I designed a new Navigation Bar and motion system for Lilly.com 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.
Research Areas Pages
Research Areas Pages
Research Areas Pages
Under Research Areas, I 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, I 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, I 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.
The pages nobody designs for
The pages nobody designs for
The pages nobody designs for
The same navigation, templates and states carry through to the pages: the blog, the frequently asked questions, and the rest of the long tail. On a regulated site these get checked too.
The same navigation, templates and states carry through to the pages: the blog, the frequently asked questions, and the rest of the long tail. On a regulated site these get checked too.
The same navigation, templates and states carry through to the pages: the blog, the frequently asked questions, and the rest of the long tail. On a regulated site these get checked too.
Design system contribution
Design system contribution
Design system contribution
Four decisions. The first two are about the journey and the page. The last two are about the platform and the system underneath them.
Four decisions. The first two are about the journey and the page. The last two are about the platform and the system underneath them.
Four decisions. The first two are about the journey and the page. The last two are about the platform and the system underneath them.
Motion, keyed to object size
Motion, keyed to object size
Motion, keyed to object size
Four easing curves, four durations from 250ms to 700ms, defined travel distances and fade rules, with duration keyed to object size. Reduced-motion guidance is part of the standard, not appended to it.
Four easing curves, four durations from 250ms to 700ms, defined travel distances and fade rules, with duration keyed to object size. Reduced-motion guidance is part of the standard, not appended to it.
Four easing curves, four durations from 250ms to 700ms, defined travel distances and fade rules, with duration keyed to object size. Reduced-motion guidance is part of the standard, not appended to it.
Foundations
Foundations
Foundations
Contact Me
Ready to bring your vision to life? Let's connect and explore the possibilities together. Reach out today!
2026 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!
2026 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!
2026 All rights reserved. Design by Shankun Zhou.