Parsley Health
WEB + MOBILE
UI/UX DESIGN
BRAND DESIGN
Short on time? Skip to a section ✨
Project Overview
Parsley Health is a functional medicine provider offering physician-led, root-cause care through a membership model. I was brought in to redesign their main website, translating a detailed content brief from the product marketing team into a cohesive visual experience across the Homepage, Complete Care page, and Insurance page.
My Role
My role as a designer was to translate structured content and messaging that was handed to me and making decisions about visual hierarchy, layout, component selection, and how to guide users through a conversion-focused experience. The copy and section strategy came from the PM; the design language, structure, and execution were mine.
The Challenge
Parsley sits in a crowded, often confusing space — somewhere between traditional healthcare, telehealth, and wellness. Their audience arrives skeptical: they've been dismissed by conventional doctors, overwhelmed by data from DTC lab platforms, or priced out of concierge care.
The site needed to do three things simultaneously:
Build immediate trust and credibility
Clearly explain a care model most people have never encountered
Convert visitors toward two distinct entry points, which include joining Complete Care or checking insurance coverage
Previous Design
Design Decisions
HOMEPAGE
The brief called for a full-bleed hero with text overlay, which I treated this as an opportunity to lead with emotion and confidence rather than clinical sterility. The icon grid below the hero immediately conveys the key selling points.
The stats section needed weight without overwhelming the page. I used a stats grid with no imagery, letting the numbers breathe.
The comparison table positioning Parsley against traditional PCPs, DTC lab platforms, and concierge clinics, required careful visual treatment so that it translated across different screen sizes.
INSURANCE PAGE
Trust and clarity were the primary design goals here. Insurance is inherently anxiety-inducing, because people worry about hidden costs and coverage surprises. The brief handled this well in copy, so my job was to make the "Coverage Clarity" module (what insurance covers vs. what membership provides) as scannable and reassuring as possible. Two-column treatment, no visual clutter.
What I learned
Working from a PM-written brief is closer to real-world product design than starting from a blank canvas. The design problem I was faced with weren't "what should this say", they were "how do I make this hierarchy work," "where does this user need a pause vs. a push," and "how do I translate this copy into visuals."
Measuring success
To measure success, we'd want to see significant improvements in two key areas: insurance eligibility check-starts (a primary acquisition lever) and Complete Care enrollment conversions.
Supplement Store Redesign - Project Overview
Parsley Health is a functional medicine company that combines board-certified physicians with root-cause care. Their supplement line is formulated by Parsley clinicians and manufactured to pharmaceutical-grade standards. The existing supplement store had grown organically, which left it feeling disconnected from the brand Parsley portrays on its main site and the clinical credibility that differentiates their products. The store looked like a wellness brand, but Parsley is a medical authority. The gap was costing conversions.
My Role
I led design on a full redesign of Parsley Health's supplement store, spanning the homepage, collection pages, product detail pages, and global navigation. Working from a detailed PM brief, I collaborated with content, engineering, and creative stakeholders to translate Parsley's clinical authority into a shopping experience that actually looks and feels like the brand.
The Challenge
1. The store didn't look like Parsley
The existing store leaned heavily on pink, which is no longer used in the brand, and it used lifestyle imagery + gradient washes that read as generic consumer wellness. The store had drifted visually from the overall brand, which has a deep forest green as a basis. A shopper moving from the main site to the store encountered a stark visual shift that felt disjointed.
2. Clinical authority was being undersold throughout
Parsley's differentiator is that their supplements are formulated by actual physicians trained in functional medicine. The old store did little to highlight this. It mentioned "physician formulated" the way any supplement brand might, but never showed the clinicians, explained their credentials, or made the case for why a Parsley supplement is categorically different from what's on a pharmacy shelf.
The redesign needed to make clinical credibility a structural feature of the store instead of a footnote.
3. Product pages didn't convert
The existing PDPs lacked fuctionality. They showed a product image, a price, an add-to-cart button, and a wall of accordion copy. Critical conversion elements were either absent or poorly designed:
No star ratings visible in the hero zone
No benefit-forward positioning copy before the price
No scannable hero bullets for the skeptical shopper who won't read 250 words
A confusing subscription/one-time purchase toggle that didn't clearly communicate value
No inline bundle prompts to encourage multi-product purchases
"How it works" ingredient detail buried inside a collapsed accordion, invisible to most visitors
A "You May Also Like" related products module that felt generic and undesigned
4. Navigation and collection pages lacked structure
The old navigation was so minimal, it was unhelpful. It didn't expose category structure at a glance, making discovery harder than it needed to be. On collection pages, the product grid launched immediately with no context, no health-goal navigation, and no mechanism for shoppers to self-select based on their symptoms or goals. The subscription value proposition (10% off, free shipping) existed but wasn't surfaced prominently enough anywhere in the browsing or purchase flow.
Design Approach
HOMEPAGE
"Shop by Health Goal", a category navigation module, was buried below the product grid in the old design. It was a secondary element when it should have been the primary orientation tool for first-time visitors.
The redesign moves "Shop by Health Goal" immediately after the hero, before the product grid, & redesigns it as a horizontally scrollable row of shoppable tiles. A visitor landing on the store for the first time can immediately self-select by health concern before encountering any individual product. The browsing journey becomes goal-first rather than product-first.
The homepage also received a dedicated "Clinician Credibility + Differentiation" zone, surfacing three elements the old store either buried or omitted: the us-vs-them comparison table , the "Why Parsley Clinicians Are Different" module, and an editorial Dr. Robin Berzin quote block designed to feel more like a magazine feature than a generic testimonial.
COLLECTION PAGES
Each collection page received a full-width hero lifestyle image, a header title, and 50–80 words of intro copy that leads with customer benefit and primary keywords before the product grid.
Product cards were redesigned to default to subscription pricing, displaying the monthly price prominently with the one-time price crossed out. This communicates the subscription value proposition at the point of discovery rather than only at the PDP. Quick-add functionality defaults to the subscription option. Capsule count tags were removed from cards as irrelevant to the purchase decision.
Three new badge types (Best Seller, Dr. Robin's Pick, and New) were designed for product cards. "Dr. Robin's Pick" in particular carries weight for Parsley's audience: it's a physician endorsement attached directly to the product grid, not tucked into a description page.
A new "Sound Familiar?" module below the product grid presents 3–4 problem-framed tiles that create a self-selection moment. The shopper identifies their situation and continues with more intention.
PRODUCT PAGES
The PDP was rebuilt from the ground up. Star ratings now appear directly below the header, which is a standard e-commerce pattern the old design omitted entirely. There is also a short benefit-first positioning line before the price, and three icon bullets that address the shopper who won't read past the fold.
The subscription toggle was redesigned as a stacked card layout: the monthly option as the primary, highlighted card with checkmarks and slashed pricing, the one-time purchase grayed out below. The hierarchy makes the recommended choice obvious without hiding the alternative. A new inline bundle module below Add to Cart introduces cross-sell for the first time on the PDP.
Ingredient science (previously buried in a "How it Works" accordion) was promoted to a full-width, always-visible module with expandable per-ingredient detail cards alongside an editorial product image. A new "Is This Right For You?" section presents 3–4 problem-framed use-case tiles so visitors with specific health contexts can see themselves in the product.
The lower page rounds out with the Parsley Promise comparison table, a highlighted reviews section, a full FAQ, and a Related Articles module linking to relevant Parsley Health editorial content bridge the store and the main site for both SEO and brand coherence. Related products were renamed from "You May Also Like" to "Often Paired With," framing recommendations as clinical guidance instead of an algorithmic suggestion.
NAVIGATION
The global navigation was redesigned with a clear hierarchy: Shop (expanding to all five category collections), Bundles, and Best Sellers on the left; the Parsley logo centered; Log In and Cart on the right.
The dropdown pre-expands to the Shop submenu so the category structure is immediately visible on hover rather than requiring an extra click.
A persistent promo bar above the nav (configurable via Shopify) was designed as a reusable component applicable across all store pages.
Outcomes
The redesign addressed each of the four problems identified at the outset:
The store now looks like Parsley. Dark green, editorial photography, and full-bleed imagery align the store with the parent brand and communicate medical authority at first glance.
Clinical credibility is well-integrated. The Us vs. Them table, the "Why Parsley Clinicians Are Different" module, ingredient science breakdowns, and Dr. Robin's Pick badges make the physician-formulated positioning concrete and visible throughout the browsing journey — on the homepage, on every collection page, and on every PDP.
PDPs are built to convert. Star ratings, positioning copy, hero bullets, a redesigned subscription toggle, inline bundle prompts, and always-visible ingredient science give visitors the information architecture to make a decision at every stage of the page.
Collection pages orient before they sell. Health-goal navigation, editorial hero zones, problem-framing modules, and subscription-defaulted product cards meet shoppers at their intent and guide them toward purchase with context rather than confronting them immediately with a product grid.
Design system to code: an AI-assisted workflow
Parsley Health had a design system that lived entirely in Figma. It was well-organized, with color tokens, typography scales, component libraries, interaction states, but it existed in isolation. Engineers worked from the Figma files but had no single source of truth for how components should behave in code.
The Opportunity
I'd been watching the conversation around AI-assisted development closely. Tools like Claude Code were starting to make it possible for non-engineers to produce real, production-quality code. Could a designer with no engineering background use AI to bridge the design-to-code gap?
The outcome I was aiming for wasn't just working code. It was a hosted, documented Storybook, which is the tool engineering teams use, with components that matched the Figma source of truth at the pixel level and documentation written for both designers and developers.
The Approach
Hour 1: Setup and foundations
The first hour was environment setup and foundations. Claude Code scaffolded the React + TypeScript + Storybook project, configured the build tools, and extracted all color tokens directly from the Figma file via the Figma MCP, which is a live API connection between Claude and Figma.
Done manually, this stage alone would have taken the better part of a day. A designer starting from scratch would need to research the right stack, install and configure each tool, debug version conflicts, and then manually transcribe every color value from Figma into code. That's easily 2–3 days before a single component is written. With AI: 1 hour, including troubleshooting a Node version conflict that could have halted progress.
Hour 2: First component and pattern-setting
The Button component took about an hour from start to finish. That included the component code, nine Storybook stories, full prop documentation, accessibility notes, and when-to-use copy for every state. A developer building this manually could spend roughly half a day on a single well-documented component. For a designer learning the stack from scratch, this could take a week.
This hour also established the pattern everything else would follow: how components are structured, how stories are written, how documentation is formatted.
Hour 3: Scaling to the full system
Once the pattern was set, I attempted to scale using eight parallel Claude agents (one per Figma page) running simultaneously. This is where I hit the first real obstacle: the Figma MCP rate limit. My Figma seat tier capped the number of API calls, and all eight agents hit the wall at the same time.
So, I generated a Figma Personal Access Token and switched to calling the Figma REST API directly. This gave me complete design data for every component: exact hex values, font sizes, font weights, border radii, padding, component states, variant names, everything needed for accurate implementations.
From that data, I built five components with full stories and documentation in roughly an hour:
Tag — 8 color variants, mobile and desktop sizes
TextField — label, placeholder, helper text, error and focus states
Radio & Checkbox — all five interaction states, mobile and desktop label sizes
Card — badge, note area, discontinued state
Typography — full mobile and desktop type scales with live examples
Hour 4: Problem-solving and polish
I hit a few bumps along the way. Tailwind's dynamic class system couldn't handle runtime color values, so I had to switch the styling approach entirely to inline styles. Storybook's MDX documentation hit a package version conflict that required uninstalling a library and rethinking the documentation strategy. The Figma rate limit forced a pivot to the REST API.
Each of these problems took time to diagnose/solve, and with AI, each obstacle became a conversation. I described what I was seeing, and we worked through it together. None of them cost more than 20–30 minutes.
Results
View the storybook here
The project produced a fully functional Storybook with:
2 foundation pages — Colors and Typography, both with live examples
6 component pages — Button, CategoryIcon, Tag, TextField, RadioCheckbox, Card
50+ stories covering every variant, state, and usage context
Documentation for every component: when to use it, when not to, accessibility notes, and prop-level guidance
Exact design fidelity — every value sourced directly from Figma
The Storybook is deployable to Vercel or Chromatic with one command. Engineers can browse components, copy props, read usage guidance, and see every state without opening Figma.
What I learned
Prompting AI is a design skill. The quality of the output was directly proportional to the quality of my direction. When I gave Claude a clear component spec and explicit constraints, the output was accurate. When I was vague, the output was generic. Knowing what to ask for requires design knowledge.
The time savings compound at scale. The first component took an hour, and then it took an additional 2 hours to completion. Once the pattern is established, each additional component is completed more easily.
Why this matters
I wanted to see if I could remove a problem from the workflow: the disconnection between design intent and engineering implementation, in a fraction of the time it would have taken with coding alone.
For startups/small companies with one or two designers and small engineering teams, a 3–4 week engineering project that can be delivered in a week by a designer is a huge improvement. It means engineering capacity stays focused on product and the design system stays current because the person who owns the designs can update the code directly. Handoff stops being a bottleneck.