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
Product, engineering and content partners
Clinical-site staff, recruitment, Trial Information Center
Medical, Legal and Regulatory review
Development vendor — implementation
Product, engineering and content partners
Clinical-site staff, recruitment, Trial Information Center
Medical, Legal and Regulatory review
Development vendor — implementation
Product, engineering and content partners
Clinical-site staff, recruitment, Trial Information Center
Medical, Legal and Regulatory review
Development vendor — implementation
TIMELINE
Design [请填写具体月份，例如 June–August 2025] · Shipped September 2025 · Live
SCOPE
Navigation across Lilly.com and Trials · discovery · trial detail with guided matching and calculators · a Research Areas hub template used across conditions · clinical-trial education · error and compliance surfaces
English + Spanish · Responsive 375px → 1440px+ · Built on LDS 3.0
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 what one person sees. The last two are about what every page inherits.
Four decisions. The first two are about what one person sees. The last two are about what every page inherits.
Four decisions. The first two are about what one person sees. The last two are about what every page inherits.
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 the condition. Others know only that they’re sick and out of options, and can’t turn that into search criteria.
Considered: Search only · guided matching only · both, converging.
Chose: Both. The homepage refocuses on one task — Find a Trial — while Match to a Trial runs alongside for people who can’t form criteria. Both land on the same trials, the same eligibility information, the same next step.
Cost: Advanced filters moved off the homepage into Find, where results give them context. Experienced users take one extra step — they can enter Find directly from the nav.
Shipped: Both paths, September 2025.
Some people arrive knowing the condition. Others know only that they’re sick and out of options, and can’t turn that into search criteria.
Considered: Search only · guided matching only · both, converging.
Chose: Both. The homepage refocuses on one task — Find a Trial — while Match to a Trial runs alongside for people who can’t form criteria. Both land on the same trials, the same eligibility information, the same next step.
Cost: Advanced filters moved off the homepage into Find, where results give them context. Experienced users take one extra step — they can enter Find directly from the nav.
Shipped: Both paths, September 2025.
Some people arrive knowing the condition. Others know only that they’re sick and out of options, and can’t turn that into search criteria.
Considered: Search only · guided matching only · both, converging.
Chose: Both. The homepage refocuses on one task — Find a Trial — while Match to a Trial runs alongside for people who can’t form criteria. Both land on the same trials, the same eligibility information, the same next step.
Cost: Advanced filters moved off the homepage into Find, where results give them context. Experienced users take one extra step — they can enter Find directly from the nav.
Shipped: Both paths, September 2025.
Scroll to explore the homepage
Find as the comparison workspace
Find as the comparison workspace
Find as the comparison workspace
Search terms, filters, result counts, states and result cards stay together, while full study information moves to Trial Detail. One filter logic serves desktop and mobile.
Search terms, filters, result counts, states and result cards stay together, while full study information moves to Trial Detail. One filter logic serves desktop and mobile.
Search terms, filters, result counts, states and result cards stay together, while full study information moves to Trial Detail. One filter logic serves desktop and mobile.
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. Eligibility criteria are written for investigators, and the person reading them is a patient deciding about their own body.
Considered: Simplify the criteria — but precision here is regulated · add a glossary — which moves the work back onto the reader · build the translation into the product.
Chose: The third, at three levels. Trial Detail front-loads the decision: summary → key requirements → next step → locations → resources. Calculators turn criteria like BMI into something you can answer about yourself. A knowledge quiz teaches the concept before the page asks you to act on it.
Cost: Three surfaces to maintain instead of one page. Each removes a different barrier, so none of them was optional.
The barrier isn’t finding a trial. Eligibility criteria are written for investigators, and the person reading them is a patient deciding about their own body.
Considered: Simplify the criteria — but precision here is regulated · add a glossary — which moves the work back onto the reader · build the translation into the product.
Chose: The third, at three levels. Trial Detail front-loads the decision: summary → key requirements → next step → locations → resources. Calculators turn criteria like BMI into something you can answer about yourself. A knowledge quiz teaches the concept before the page asks you to act on it.
Cost: Three surfaces to maintain instead of one page. Each removes a different barrier, so none of them was optional.
The barrier isn’t finding a trial. Eligibility criteria are written for investigators, and the person reading them is a patient deciding about their own body.
Considered: Simplify the criteria — but precision here is regulated · add a glossary — which moves the work back onto the reader · build the translation into the product.
Chose: The third, at three levels. Trial Detail front-loads the decision: summary → key requirements → next step → locations → resources. Calculators turn criteria like BMI into something you can answer about yourself. A knowledge quiz teaches the concept before the page asks you to act on it.
Cost: Three surfaces to maintain instead of one page. Each removes a different barrier, so none of them was optional.
Tap to View Mobile Version
Tap to View Mobile Version
Match to a Trial launched in September 2025 as a conditional guided flow for people who needed help forming search criteria. It distinguishes matched, unmatched and unknown states, and points toward possibly relevant trials and next steps without presenting itself as a final medical eligibility decision.
Match to a Trial launched in September 2025 as a conditional guided flow for people who needed help forming search criteria. It distinguishes matched, unmatched and unknown states, and points toward possibly relevant trials and next steps without presenting itself as a final medical eligibility decision.
Match to a Trial launched in September 2025 as a conditional guided flow for people who needed help forming search criteria. It distinguishes matched, unmatched and unknown states, and points toward possibly relevant trials and next steps without presenting itself as a final medical eligibility decision.
Decision 3 — One contract, repeated everywhere
Decision 3 — One contract, repeated everywhere
Decision 3 — One contract, repeated everywhere
Navigation is the only thing on every page. If it means different things in different places, nothing else can be consistent.
Chose: Specify navigation as a state set, not a layout — nine content sections × signed-out and signed-in × fourteen interaction states, plus keyboard behaviour, search input and the region selector.
Responsive: Desktop expresses it with hover, mobile with a drawer. The state set is identical: twelve mobile states map one-to-one onto the desktop contract.
Cost: Specifying every state took far longer than designing a nav bar. It is the reason the vendor could build it without asking me what “active” meant.
Navigation is the only thing on every page. If it means different things in different places, nothing else can be consistent.
Chose: Specify navigation as a state set, not a layout — nine content sections × signed-out and signed-in × fourteen interaction states, plus keyboard behaviour, search input and the region selector.
Responsive: Desktop expresses it with hover, mobile with a drawer. The state set is identical: twelve mobile states map one-to-one onto the desktop contract.
Cost: Specifying every state took far longer than designing a nav bar. It is the reason the vendor could build it without asking me what “active” meant.
Navigation is the only thing on every page. If it means different things in different places, nothing else can be consistent.
Chose: Specify navigation as a state set, not a layout — nine content sections × signed-out and signed-in × fourteen interaction states, plus keyboard behaviour, search input and the region selector.
Responsive: Desktop expresses it with hover, mobile with a drawer. The state set is identical: twelve mobile states map one-to-one onto the desktop contract.
Cost: Specifying every state took far longer than designing a nav bar. It is the reason the vendor could build it without asking me what “active” meant.
One template, every condition
One template, every condition
One template, every condition
Research Areas needed a page for every condition Lilly studies. Writing each one by hand would have reproduced the inconsistency the rebuild was meant to remove.
Chose: One hub structure — plain-language education, relevant trials, next-step calls to action — so people move straight into Find, Match or Alerts, and a new condition ships without new design work.
Cost: Conditions with unusual content had to be argued into the template or explicitly excepted. That negotiation is slower than drawing a one-off page, and it is why the template still holds.
Research Areas needed a page for every condition Lilly studies. Writing each one by hand would have reproduced the inconsistency the rebuild was meant to remove.
Chose: One hub structure — plain-language education, relevant trials, next-step calls to action — so people move straight into Find, Match or Alerts, and a new condition ships without new design work.
Cost: Conditions with unusual content had to be argued into the template or explicitly excepted. That negotiation is slower than drawing a one-off page, and it is why the template still holds.
Research Areas needed a page for every condition Lilly studies. Writing each one by hand would have reproduced the inconsistency the rebuild was meant to remove.
Chose: One hub structure — plain-language education, relevant trials, next-step calls to action — so people move straight into Find, Match or Alerts, and a new condition ships without new design work.
Cost: Conditions with unusual content had to be argued into the template or explicitly excepted. That negotiation is slower than drawing a one-off page, and it is why the template still holds.
Where the contract had to hold
Where the contract had to hold
Where the contract had to hold
The same rules had to survive different states, page types, embedded screening flows and breakpoints.
That includes the 404 page, the site map, the accessibility statement, and the interstitial that warns people before they leave Lilly.com — the surfaces nobody designs for, and the ones a regulated site gets judged on.
The same rules had to survive different states, page types, embedded screening flows and breakpoints.
That includes the 404 page, the site map, the accessibility statement, and the interstitial that warns people before they leave Lilly.com — the surfaces nobody designs for, and the ones a regulated site gets judged on.
The same rules had to survive different states, page types, embedded screening flows and breakpoints.
That includes the 404 page, the site map, the accessibility statement, and the interstitial that warns people before they leave Lilly.com — the surfaces nobody designs for, and the ones a regulated site gets judged on.
Decision 4 — Put the decision in the system, not in the file
Decision 4 — Put the decision in the system, not in the file
Decision 4 — Put the decision in the system, not in the file
Every rule I solved locally would be re-solved by whoever touched the page next. So I moved the rules out of my file and into the shared one.
Components: Each shared component carries usage limits, a full state matrix and stress tests. Button: 3–5 words, verb first, 48px minimum for icon-only, 288px maximum on mobile; five states across light, dark and image backgrounds; tested at five viewport ranges. Link, select and input follow the same pattern.
Every rule I solved locally would be re-solved by whoever touched the page next. So I moved the rules out of my file and into the shared one.
Components: Each shared component carries usage limits, a full state matrix and stress tests. Button: 3–5 words, verb first, 48px minimum for icon-only, 288px maximum on mobile; five states across light, dark and image backgrounds; tested at five viewport ranges. Link, select and input follow the same pattern.
Every rule I solved locally would be re-solved by whoever touched the page next. So I moved the rules out of my file and into the shared one.
Components: Each shared component carries usage limits, a full state matrix and stress tests. Button: 3–5 words, verb first, 48px minimum for icon-only, 288px maximum on mobile; five states across light, dark and image backgrounds; tested at five viewport ranges. Link, select and input follow the same pattern.
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, so the rule answers the question instead of a person answering it every time.
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, so the rule answers the question instead of a person answering it every time.
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, so the rule answers the question instead of a person answering it every time.
Reduced-motion guidance is part of the standard, not appended to it.
Foundations, and what I left open
Foundations, and what I left open
Foundations, and what I left open
Typography scale, grid, 8-pt spacing and shape geometry codified into the Web 3.0 system.
Left open: The button specification still reads “tbd” against motion and accessibility, with four questions logged: hover, active and focus states; character limit; minimum and maximum width; size variants. I documented them instead of guessing.
Cost: Slower than styling a page, and it needed agreement from people outside Trials. [待确认：这套规范现在是否仍在使用？属实则补一句 “It is the part of this work that outlived the pages I designed with it.”；不确定则删除本括号]
Typography scale, grid, 8-pt spacing and shape geometry codified into the Web 3.0 system.
Left open: The button specification still reads “tbd” against motion and accessibility, with four questions logged: hover, active and focus states; character limit; minimum and maximum width; size variants. I documented them instead of guessing.
Cost: Slower than styling a page, and it needed agreement from people outside Trials. [待确认：这套规范现在是否仍在使用？属实则补一句 “It is the part of this work that outlived the pages I designed with it.”；不确定则删除本括号]
Typography scale, grid, 8-pt spacing and shape geometry codified into the Web 3.0 system.
Left open: The button specification still reads “tbd” against motion and accessibility, with four questions logged: hover, active and focus states; character limit; minimum and maximum width; size variants. I documented them instead of guessing.
Cost: Slower than styling a page, and it needed agreement from people outside Trials. [待确认：这套规范现在是否仍在使用？属实则补一句 “It is the part of this work that outlived the pages I designed with it.”；不确定则删除本括号]
Shipped
WHAT SHIPPED
Live since September 2025 at trials.lilly.com, in English and Spanish.
Navigation and motion across Lilly.com and Trials 3.0 · homepage · Find a Lilly Trial · Trial Detail with guided matching and calculators · a Research Areas hub template used across every condition · clinical-trial education covering what to expect, considering participation and trial diversity · error, site map and compliance surfaces.
HOW IT GOT THERE
Recurring review with product and content partners; handoff to the development vendor through Figma comments, annotated flows, prototypes and FOR DEV packages.
[待确认：MLR（Medical / Legal / Regulatory）是否参与了设计评审？参与则在上句加入 “and Medical, Legal and Regulatory review”；若只参加了工作坊，保持现状并删除本括号]
WHAT I CAN AND CAN’T CLAIM
Confirmed: Shipped September 2025 and live at trials.lilly.com, in English and Spanish.
Not measured: No success metric was defined for this engagement and no public metrics exist. I can’t tell you this performed better, because nobody measured it.
Reconstructed: The options and trade-offs behind each decision are written from the shipped files roughly a year later. The decisions are real; the framing on this page is retrospective.
Shared work: The workshops, personas and flows were cross-functional outputs. I contributed to them and owned what came after — the IA, templates, pages and the standards above.
Redacted: Selected internal artifacts are withheld in this password-protected case.
EVIDENCE
Workshop boards · 5W1H and affinity clustering outputs · three audience mindsets · end-to-end user flow
Navigation state specification — desktop, mobile, keyboard · component specifications — button, link, select, input · Motion Standards · foundation standards — typography scale, grid, 8-pt spacing, shape
Template strategy and component requirements list · error, interstitial, site map and accessibility statement pages · FOR DEV and vendor-ready delivery packages
[附录素材待补：导航状态矩阵全图、键盘交互列、知识测验三态、Button spec 三栏、Motion duration 决策表]
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.