UX Audit + Design System
increased 34% CVR + $1.8M in just 6 months
2020 - 2023 / Work Experience
When I joined The Ayurveda Experience (TAE), their product catalog was rich, their community loyal - but the digital experience didn’t reflect the same trust or warmth their brand stood for.
Pages were cluttered, design elements inconsistent, and critical product details were buried. For a wellness brand promising clarity and calm, the digital storefront felt overwhelming. My goal was to change that - to make Ayurveda feel more accessible, intuitive, and human through design.
https://theayurvedaexperience.com/
Background
Uncovering Hidden Gaps in the User Journey
The Ayurveda Experience (TAE) is a global wellness brand rooted in ancient Ayurvedic science. But in 2020, its digital experience didn’t reflect that heritage. The product catalog was rich, and customer loyalty strong - especially among women aged 40+ - yet the site felt overwhelming and fragmented. Pages looked visually inconsistent, and users faced friction while trying to find or trust products.
The homepage, product pages, and navigation lacked visual harmony.
My redesign initiative set out to unify the brand’s digital voice and structure through a scalable design system - creating a calmer, more intuitive journey that mirrored the brand’s core promise of harmony.
The Challenge
Unify a fragmented brand and boost user trust.
Despite a loyal customer base and growing global presence, The Ayurveda Experience faced rising drop-offs and low conversion on key product pages. Customers - mostly women over 40 - struggled to navigate the cluttered interface, conflicting design elements, and inconsistent brand voice.
Our goals were to —
Create a cohesive design language across products.
Reduce decision fatigue and boost trust for first-time buyers.
Build a scalable design system speeding collaboration and handoffs.
My Role
Lead UX, Visual Designer
I led the UX redesign and design system creation over 6+ months, collaborating closely with a cross-functional team of 8 - including developers, marketers, and senior executives.
I was responsible for —
Auditing screens across product lines to identify inconsistencies.
Analyzing behavior patterns of returning and first-time users.
Designing and testing UX strategies for 20+ top-performing pages.
Building a modular design system balancing brand language.
Syncing handoffs with engineering and marketing teams.
By July 2023, the new design system was implemented across core user touchpoints - reducing bounce rates, increasing conversions, and unifying the brand’s UX.
Outcome
Imagining a Seamless Ayurvedic Buying Experience.
How might a first-time skincare buyer feel confident purchasing Ayurvedic products online - without feeling overwhelmed by jargon, cluttered interface, or inconsistency?
Inspired by Atomic Design Principle's, we defined the website's design system.
Our Approach — Start with atoms, and the rest will follow.
Typography
ATOM
Headings
Merriweather
Regular
Body Lotion
Italic
Body Lotion
Medium
Body Lotion
Medium Italic
Body Lotion
Bold
Body Lotion
Bold Italic
Body Lotion
Open Sans
Regular
Body Lotion
Italic
Body Lotion
Medium
Body Lotion
Medium Italic
Body Lotion
Bold
Body Lotion
Bold Italic
Body Lotion
Body
Open Sans
Light
Lightweight Silk Pomade
Regular
Lightweight Silk Pomade
Medium
Lightweight Silk Pomade
Bold
Lightweight Silk Pomade
Iconography
ATOM
Google Material Icons
Color
ATOM
Backgrounds
Interactive
Borders
Solid
Text
Cal Poly Green
#195128
Dark Moss Green
#195128
Moss
#8FA373
Secondary
Fandango
#195128
Dark Purple
#371E30
Baby Powder
#FAF9F6
Neutral
Raisin Black
#D6D5B3
Slate Gray
#D6D5B3
Sea Salt
#F7F7F7
White
#FFFFFF
Functional
Links
#D6D5B3
Error
#F90201
Warning
#F8D11A
Success
#89DE00
Overlay
#000000-0.40
Grid and Spacing Units
ATOM
12 Column Grid
16px Grid
Components — how might atoms live in the geography of molecules?
Inspired by Atomic Design Principle's, we defined the website's design system.
Buttons
MOLECULE
Primary Button
SHOP NOW
SHOP NOW
Secondary Button
VIEW ALL
VIEW ALL
Button
VIEW ALL
VIEW ALL
Button
Read More
Read More
Link Button
Read More
Read More
Product Views
MOLECULE
Typography + Media + Iconography + Color
Descriptive Product Title
Descriptive Product Title
Accordions
MOLECULE
Typography + Iconography + Color
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Title
Title
Title
Cards
MOLECULE
Typography + Media + Iconography + Color + Buttons
Descriptive Product Title can extend up to 2 lines of content.
Brand Name
Short Product Description content should fit in 2 lines to maintain consistency.
4.4
$$
SHOP NOW
SALE
Descriptive Product Title in uppercase up to 2 lines.
Brand Name
Short Product Description content should fit in 2 lines to maintain consistency.
$$
Sections — how might organisms adapt to various contexts?
Product Description
ORGANISM
Typography + Media + Iconography + Color + Accordion + Button + Grid
Descriptive Product Title
Brand Name
2343 Reviews
$$
Short Product Description content should fit in 2 lines to maintain consistency.
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Title
Title
Title
ADD TO CART
Descriptive Product Title
Brand Name
2343 Reviews
$$
Short Product Description content should fit in 2 lines to maintain consistency.
Title
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Title
Title
Title
ADD TO CART
Section of Multiple Cards with Button
ORGANISM
Typography + Media + Iconography + Color + Accordion + Button + Grid
Section Title
VIEW ALL
Descriptive Product Title in uppercase
Brand Name
Short Product Description content should fit in 2 lines.
$$
ADD TO CART
Descriptive Product Title in uppercase
Brand Name
Short Product Description content should fit in 2 lines.
$$
ADD TO CART
Descriptive Product Title in uppercase
Brand Name
Short Product Description content should fit in 2 lines.
$$
ADD TO CART
Quick Links
ORGANISM
Typography + Media + Iconography + Color
title
title
title
title
title
title
*Limited view of design system due to Company Policy.
What’s in the Component Library?
Component Name
Clear, consistent naming conventions to ensure designers and developers stay aligned - minimizing confusion and implementation errors.
State Variants
Default styles and all possible interactive states (default, hover, focused, pressed, disabled) documented for consistent behavior.
Annotations
Descriptive notes and context added to each component, helping teams quickly understand purpose and usage.
Breakpoints
Responsive guidelines indicating how components adapt across screen sizes including specific breakpoints for developers.
Built for Configurability, Scale, and Clarity
Configurable in figma
Components like accordions, banners, or modals could be easily customized - no overrides or duplications needed, speeding up design work and maintaining consistency across screens.
Scalable across viewports
With responsive auto-layout baked into every component, the library worked seamlessly from 375px mobile to 1440px+ desktop widths. Drag, drop, and adapt without breaking the layout or rebuilding from scratch.
Interactive by default
Each component came with micro-interactions. Including hover state on a button or a loading animation.
Universal across products
Since our products spanned different user types - from appointment scheduling to wellness quizzes - the system offered flexible visual styles.
Accessible from the start
Followed WCAG 2.0 guidelines across the board - checking for contrast, screen reader behavior, and keyboard navigation.
Structured for speed
Following atomic design principles, the system was organized from atoms to full-page templates. I also included a UX wireframe kit, documentation templates, and page-level controls to help teams move fast without sacrificing structure.
Implemented Design System on the Website
https://theayurvedaexperience.com/
Atoms
Atoms
Atoms
Merriweather
Regular
Body Lotion
Medium
Body Lotion
Bold
Body Lotion
Organisms
title
title
title
title
title
title
Organisms
Section Title
VIEW ALL
Product Title
Brand Name
Product Description
$$
ADD TO CART
Product Title
Brand Name
Product Description
$$
ADD TO CART
Product title
Brand Name
Product Description
$$
ADD TO CART
Molecules
Descriptive Product Title
Descriptive Product Title
Kickoff
Starting with bits and pieces of visuals and voice.
At the onset of the project, there was no clear direction for unifying the user experience across The Ayurveda Experience's fast-growing ecommerce platform. With fragmented design elements, inconsistent brand language, and no shared design framework, I partnered with stakeholders across marketing, content, and dev to investigate how users were navigating the site - and where confusion, drop-offs, and distrust were breaking the brand experience.
Methods
Uncovering barriers in the natural skincare journey.
Many first-time buyers are curious about Ayurveda but feel overwhelmed by unfamiliar ingredients, long routines, and contradictory product claims. Our goal was to design an experience that built trust, simplified decision-making, and aligned with Ayurvedic wisdom - without sacrificing clarity or conversion.
Through product reviews, usability audits, competitor analysis, and customer interviews, we uncovered five core friction points in the buyer journey. From confusing product benefits to information overload and visual clutter, these insights pointed to opportunities where design could build both confidence and clarity.
Analyzed insights from 83+ pre-recorded interviews
Women over 40
Product Managers + UX Researchers
Executives
Interviews helped me learn that —
Customers need to understand why a product is right for them in under 5 seconds.
Ayurvedic language and benefits must be translated into clear, everyday outcomes.
Users rely heavily on visual cues, ingredient callouts, and reviews to make decisions.
Journey Mapping from Product Ad to Product Page
Pain Points
Opportunity
Products and benefits sound too complex or vague.
Use simplified, benefit-first copy with digestible Ayurvedic insights.
Multiple product lines confuse users about what’s right for them.
Introduce guided flows and filters based on user skin/hair goals.
Users abandon pages due to dense or text-heavy visuals.
Replace heavy blocks with modular, scannable layouts and visual cues.
Customers don’t know which ingredients are effective for them.
Highlight hero ingredients visually and connect them to skin/hair benefits.
Users feel unsure post-purchase, impacting return rates.
Add educational touchpoints post-checkout to reinforce usage confidence.
Journey Maps helped me learn that —
Clarity and confidence drive conversion - not just brand trust.
Educational design can elevate Ayurveda from "alternative" to actionable.
Buyers need a blend of tradition and transparency to engage deeply.
Results
+34% conversion rate.
17% increase in returning customers.
5-figure revenue jump in 3 months.
The website overhaul - including simplified product stories, ingredient-led education, and modular UX - delivered measurable impact:
Conversion rate rose by 22% after launch.
Reviews mentioned trust 3x more frequently.
Return customer rate increased by 17%.
Revenue grew by 5 figures within the first quarter.
The updated visual and content system brought coherence to web design, brand storytelling, and product discovery across channels.
Last Update: 07.24.25
Made with iteration & feedback
© Sanskriti Bhatnagar 2025