Defining a new product offering
TOOLS
Figma, Jira, Zeplin, Photoshop, Fullstory
TEAM
1 Designer, 2 PMs
DURATION
3 weeks, 2021
OVERVIEW
Delivered production-ready wireframes, interaction states, and visual assets, for the launch of a new product line.
Delivered high‑fidelity screens aligned with the design system to simplify complex information, while creating empathetic, accessible interstitials that reduced cognitive load and guided users through the experience.
CHALLENGE
Turning raw logic into an intuitive interface.
The product team defined the copy and branching logic for a new dermatology onboarding experience. My challenge was to translate this complex matrix into a seamless, user-friendly interface. I needed to design an intuitive questionnaire flow that accommodated various interaction states (like single-select vs. multi-select) while maintaining the brand's visual identity through strategic interstitial pages.
SOLUTION
Structuring the questionnaire with interaction design.
I built out the complete user flow in Figma, ensuring every branch of the logic tree was accounted for. A key focus was designing clear, accessible input methods such as single select, multi select, and modal pop-ups to keep the core interface uncluttered during complex data entry.
SOLUTION
Pacing the experience with visual branding.
To prevent user fatigue during a lengthy medical questionnaire, I designed key interstitial screens to act as emotional pauses. Using Photoshop, I assembled and integrated brand assets to create a welcoming introductory screen and reassuring transitional pages that aligned with the established design system.
Introductory interstitial.
We begin the onboarding funnel with a visual pause to prepare users for the time commitment and value of the product.
Allowing an emotional pause.
Pacing a lengthy, personal intake flow with intentional visual breaks eases the cognitive burden of answering sensitive medical questions.
PROCESS
Balancing interface design with imagery exploration.
Brainstormed visual scenarios for interstitial pages and built low‑fi iconography examples in Figma. Brand required illustration styles to match existing birth control assets. Collaborated with the brand team to refine visual communication, then advanced to Adobe Creative Suite to create higher‑fidelity illustrations aligned with The Pill Club’s identity.
OUTCOME
Handoff and launch!
Engineering adopted the new funnel into the design system within 5 sprints.
Rather than leaving the complex branching logic open to interpretation, I structured the Figma file to act as a definitive blueprint for engineering: Mapping the complete decision tree using dedicated flow connectors. Built the core UI components using rigorous Auto Layout rules for responsive scaling. Bound semantic color variables and strict typography styles across the text layers. This project reinforced the value of designing with both clinical accuracy and user clarity in mind. Working within medical constraints pushed me to simplify complex decision trees into an experience that felt approachable, trustworthy, and fast for users while still meeting the needs of dermatology providers. It also highlighted how essential cross‑functional alignment is when translating medical logic into UI patterns that engineers can implement reliably. If I were to continue developing this feature, I’d focus on deeper usability testing with a broader range of skin concerns, refining the branching logic to reduce cognitive load, and exploring ways to surface provider‑level insights earlier in the flow. There’s also an opportunity to strengthen personalization and transparency so users better understand how their answers shape the recommendations they receive.