Start
IN·HALE
Lead with respiratory support and first-use clarity, so the range opens with an easy entry point.
Supplement Ecommerce · 2026
Built to earn trust
before it asks for the sale.
Designed to reduce hesitation, clarify product decisions, and guide buyers from first impression to purchase.
The Problem
Most supplement stores add features. None sequence decisions. The result: scattered trust, unordered proof, and buyers lost at every friction point.
The Goal
Design a complete ecommerce UI/UX system from blank canvas. Built to reduce hesitation, guide product decisions, and convert through clarity.
The Result
A cohesive system where every page has a defined role in moving the user from first impression to confident purchase.
The entry point has to establish the ritual before it explains the formula.
- Problem
- Visitors arrived with no signal of who this was for or why to trust it.
- Decision
- Lead with brand clarity, routine context, and category cues before product mechanics. Earn orientation before demanding evaluation.
- Outcome
- A homepage that answers “which wellness world is this?” before it asks visitors to compare products.
The problem this system solves
Most ecommerce stores don't have a traffic problem. They have a decision problem.
Common ecommerce friction
- No offer hierarchy — visitors don't know what to evaluate first
- Trust signals arrive too late — after doubt has already formed
- Product differences require effort — buyers can't distinguish without reading everything
- Bundles and subscriptions add confusion — more options, no guidance
What this system introduces
- Decision sequencing built into page structure — every screen knows its role
- Trust timing tied to hesitation moments, not page position
- Product hierarchy that communicates differences without extra effort
- Offer logic that frames subscriptions and bundles as a natural next step
Brand expression becomes the fastest way to qualify the right customer.
- Problem
- The formulas had personality, but the shopping layer flattened them into generic supplement UI.
- Decision
- Let typography, imagery, and product grouping carry the same natural-premium logic as the packaging itself.
- Outcome
- The brand qualifies intent earlier, so product pages inherit trust instead of having to rebuild it.
Product family logic
A product family that reads like a routine, not a shelf.
Mullein needed more than attractive packaging. The ecommerce system had to make the range legible at a glance, so buyers could understand where each formula fits in a daily habit and why expanding into bundles feels natural.
Support
SOOTHE
Use merchandising and product order to show how the system expands from a single formula into a broader routine.
Continue
EX·HALE
Frame repeat purchase and subscription as continuity of the ritual, not a separate upsell moment.
The PDP has to explain where the formula fits before it asks for commitment.
- Problem
- Benefits, proof, ingredients, and purchase options all competed at once, making the formula feel harder to place inside a real routine.
- Decision
- Sequence the page around one reading path: what this product is for, why it feels credible, then which purchase option fits.
- Outcome
- The product page works as a guided decision instead of a feature dump, which makes the range easier to compare and choose from.
Credibility works best when it travels with the formula, not behind it.
- Problem
- Credibility content existed but appeared too late, after doubt had already formed.
- Decision
- Bring science, ingredients, and reassurance closer to the point where buyers are deciding whether this formula belongs in their routine.
- Outcome
- Trust stops feeling like supporting content and starts functioning as part of the product story itself.
The second offer works when it feels like completing the ritual, not adding complexity.
- Problem
- Bundles and subscriptions added options without structure. More choice, less clarity.
- Decision
- Use package hierarchy, savings logic, and routine framing so the offer expands naturally from single formula to full regimen.
- Outcome
- Bundles and subscriptions read as continuity of use, which makes higher-intent purchase paths feel simpler instead of heavier.
What actually changed
Five system decisions.
Built around the product family.
The goal was not to make
every page look refined in isolation. It was to make the range easier to understand, compare, trust, and
expand into.
Product hierarchy shifted from feature listing to routine-based merchandising.
Packaging, headlines, and section order now work together to show what belongs where in the ecosystem, so the range reads as a guided family of formulas rather than isolated SKUs.
Proof and authority moved closer to hesitation points.
Science and reassurance now support product evaluation in the moment instead of arriving too late to influence the decision.
Each page now has a clearer reading path.
Visitors understand the formula first, then credibility, then purchase logic, which keeps the interface from asking for too many decisions at once.
Bundles and subscriptions were reframed as continuation, not complication.
The offer system expands from a single product into a broader regimen without breaking the buyer’s momentum.
Visual consistency now supports the conversion logic across the full funnel.
The same editorial language carries through homepage, PDP, content, and offer states, so the brand feels stable while the user moves deeper into the purchase journey.
What the system changed
Built to remove friction between interest and action.
No fabricated metrics. Impact is defined through structural and behavioral improvements built directly into the system.
Clear product hierarchy reduces decision fatigue
Structured flow guides users toward purchase
Trust appears when users actually need it
Every screen supports the same conversion goal
Business impact
- • Homepage answers 'is this for me?' before asking for a click. Users arrive at the product page already interested.
- • Product differences are legible at a glance. Buyers can evaluate without reading the full page twice.
- • Credibility lands where doubt typically forms. The offer appears after trust is established, not before.
- • Subscription is framed as the logical next step, not an alternative to weigh.
Strategic shift
- • Page hierarchy restructured around how buyers actually decide
- • Trust positioned at the exact moments hesitation is highest
- • Each screen assigned a single role in the conversion sequence
- • Offer logic that makes upsells feel like the natural next step
Data note
This is a new project built from zero in Figma. No live performance data exists. Impact is described through structural and behavioral improvements built into the design system — not through before/after comparison.
Built to earn trust before it asks for the sale.
UI
system used across PDP, bundles and decision points ·
2026
Color System
Green
Forest
00643A
Deep
003B22
Lime
Lime
17BB3B
Lime bg
CCF542
Yellow
Highlight
FFEC48
Yellow bg
FFF9C2
Red
Burgundy
4A0721
Rose
D73659
Amber
Amber
EA8B08
Amber bg
FFD27A
Neutral
Ink
1C1917
Cream
F5F1EC
Display · Canela Trial Light
Breathe.
The clarity
of nature.
UI · Lufga Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0 1 2 3 4 5 6 7 8 9
Clear science.
Clean system.
Designed to convert.
Good UI looks clean.
Great UI makes decisions easier.