Ethereal Elixirs
•
2024 – Present
Ethereal Elixirs
The identity, storefront, and Shopify checkout for a founder-led body care brand, and the component library that keeps them consistent from first visit to order.
As the sole product designer, I worked alongside the founder, a licensed esthetician, on the early UX build-out, the design system, and the component library behind every page.
Role
Product Designer
Timeline
2024 – Present
Client
Ethereal Elixirs
Team
Freelance
Deliverables
Design System, Brand Identity & Guidelines, E-commerce Storefront, Shopify Checkout
Context
A product line with a point of view, and nowhere to sell it.
Ethereal Elixirs is a body care line founded by a licensed esthetician. It's made for people whose skin needs more than standard body care gives it: dryness, irritation, sensitivity, and discoloration. The formulas are gentle and effective, so customers don't have to choose between comfort and results.
People with skin concerns are cautious buyers. They need to understand what goes on their skin before they trust it. That set the brief for the site: teach before selling, the way an esthetician would in a treatment room.
The expertise and the products existed. The infrastructure didn't. There was no website to present the line, and no reliable way to take orders. Two things had to be built at once:
E-commerce storefront: where customers learn what each product does and where to start
Shopify checkout: how they buy
The design system sits underneath both levers, so a decision made once carries everywhere.
Problem One
Which product fits my skin?
Before the site, the founder ran every new client through the same intake: What are your current skin concerns? Are you using any medication? Have you recently had a baby, or are you pregnant? The answers decide what's safe to recommend. Online, no one was asking. A shopper with irritated skin who lands on an unfamiliar product grid either guesses or leaves.
The center of the experience is a multi-step question intake quiz modeled on the founder's in-person consultation. It asks about skin concerns, medication or retinoid use, and pregnancy or recent birth, then adjusts the recommendation so customers aren't steered toward products that aren't suited to them. A progress indicator keeps the quiz short and predictable, and the result shows a starting product, the concern it addresses, and the full routine, with the option to retake.
One question at a time, every state accounted for
The intake breaks into five steps behind a labeled stepper, so customers always know where they are, and they can save and return later. Each step does one job. Date of birth uses three numeric fields that advance automatically. Skin type uses full-width option cards. Concerns are searchable, with selections shown as removable pills, so a list of sixteen options stays manageable.
Medication and allergies start as a simple Yes or No. Only a Yes opens a follow-up field, which keeps the flow short for most customers and detailed for those who need it. Continue stays disabled until an answer is valid, errors appear inline beside the field, and every step works by keyboard and screen reader. Under each sensitive question, a privacy line states that health information is shared only with the esthetician.
Outcome
The full intake flow is ready for development across desktop web, mobile web, and the native app. It covers five steps (age, skin type, skin concerns, medication, and allergies), with a labeled stepper on desktop, a progress bar on mobile, and save-and-exit throughout. A "Yes" on medication or allergies opens a follow-up field; a "No" skips it. Every screen ships with annotations covering input behavior, validation rules, and layout changes between breakpoints.
States: default, selected, focused, inline error, disabled Continue, empty search, and the result screen with a recommended routine and retake
Accessibility: keyboard navigation, screen-reader labels with live error announcements, and 48px minimum tap targets
Platforms: web (desktop and mobile) and native app
System
No rules to build from.
The brand started with a logo and defined colors but no design direction, type, or spacing. With the experience going to both web and a native app, every new screen would have been designed from scratch, and the two platforms would have drifted apart.
Principles
Three principles guided the system. Define each decision once and use it everywhere. Keep brand and product on one shared source, so the identity and the interface never disagree. And let web and app share the same system, adapting only where each platform demands it.
What we built
The system starts with foundations: color, type, and spacing defined as Figma variables, with light and dark modes so every screen works in either theme from the same source. Those foundations feed a library of 45+ components, from the quiz’s option cards, chips, inputs, and stepper to the storefront’s product tiles, cards, carousels, testimonials, and marquees. Every page in Problem One is composed from that library, following a single chain from foundations to components to finished screens.
Try It Out
Take the intake
This is the mobile intake as handed off, running in dark mode from the same variables as the light version. Step through all five questions. Answer "Yes" on medication or allergies to see the follow-up appear, and try continuing without an answer to see validation in action.