︎



Dermatology Funnel


The Pill Club

Role/Team
Myself (Product Design Intern)
Nurah Ali (Product Design Intern)
Margaret Sommers (Manager/Senior Designer)
Elaiza Clemen (Manager/Senior Designer)
Tools
Fullstory, Figma, Zeplin, Jira
Duration
3 weeks

The Challenge


When I joined the product team at The Pill Club, the company was preparing to launch their new skincare feature. This product would help the company remain competitve amongst the market of healthcare delivery solutions. I was tasked with creating the dermatology questionaire wireframes and designing thumbnail images for interstitial pages.

Main Questionaire Screens
My challenge was to prototype high fidelity screens that followed the design system and effectively communicated complicated information.

Interstitial Pages
My goal was to develop interstitial pages that ease the users’ cognitive load during a lengthy questionaire experience, promote empathy, maintain accessiblity, and prepare users for the next steps.


Interface Design

Learning from Birth Control Product

As my first project with The Pill Club, I realized the best way for me to familiarize myself with their interface and interaction design would be to use the product. In addition to interacting with the live product, I also evaluated the details of the birth control questionaire and design system in Figma. From here I became well-versed in the components on the backend. Understanding the backend language was necessary in my effectivley communicating my questions to senior designers and product managers. Additionally, referencing the birth control onboarding questionaire was integral in desigining the onboarding experience. Taking queues from The Pill Club’s deisgn system, I knew the same simplicity and brand identity would need to be apparent in this new expansion of The Pill Club.





User Flow

Studying the Branching Logic

Through studying the copy and logic of the user flow, I was able to indentify different interactions and the correlating components. The order of questions is designed dynamically based on the users’ responses. At certain points in the flow if a user selects a particular answer, they must answer an additional group of questions that other users, who provided a different response, skip over. Since the questionaire is meant to determine user eligibility, certain responses trigger a hard stop meaning the user is not eligible to use the skin care products and the questionaire is stopped mid-funnel.

Components and Interaction Scenarios
  • Radio buttons: When a question only requires a single response
  • Checkboxes: When a question might have multiple responses
  • Free Response: When a question requires a unique response that the user types in directly
  • Pop-ups: Occur in 3 different situations
  1. Hard stop: If a user triggers a hardstop they are asked to confirm their answer in a pop up.
  2. More info (icon): If a user selects the more info icon a pop up will provide an explanation related to the question
  3. Hyperlink (text): The same interaction as more info except the clickable hyperlinked text is a question in the perspective of the use




Brainstorm Imagery

Graphic Designing Interstitial Thumbnails

Referencing the intersitial page language, I brainstormed possible thumbnail imagery by writing possible visual scenarious. Using free iconography from the internet, I put together low-fi examples of these illustrations directly in Figma. Before creating higher fidelity versions, I met with a member of the brand team for feedback on my ideas and tips on how to improve visual communication. At this phase the example visuals did not allign with the brand identity and my ability to create visuals unique to the brand was expanded once I brought my ideas to the Adobe Creative Suite.





High Fidelity




Live prototype in figma (clickable)




Gif of prototype




Reflections and Next Steps


In having a graphic design background, I was happy to be able to succesfully provide illustrations that fit within the brand guidelines. Although fully prototyping wireframes was not the norm on the design team, animating all the pop-ups helped communicate to stakeholders how the funnel will function when live. If I had the chance to continue working on this project, I would have loved to evaluate the success of the onboarding funnel through fullstory.

This assignment challenged me to advocate for myself in connecting with stakeholders beyond my own team and articulating my design to technical teams. As my first project I anticipated support from my manager but she was on vacation. Through navigating this indepedence, I was able to learn that my collegues were more than willing to support and meet with me.







MXD Media 2024