Product Designer
3 months
Design Systems
Prototyping
What’s the problem?
CONTEXT
Drunk Elephant is a skincare brand known for their “clean” approach to skincare and is sold in multiple cosmetic stores. Their branding is characterized by its playful, yet scientific approach to skincare. However, they have experienced a decline in sales; with a drop of nearly 65% in the past year.
THE CHALLENGE
Many shoppers feel overwhelmed by the skincare aisle and leave without finding products that suit their needs. At the same time, Drunk Elephant has struggled to convert curious browsers into buyers, signaling a need for clearer in-store guidance and brand engagement.
SOLUTION
Comparative Research on Physical and Online Domains
I divided my research up in two different realms: in-store ordering kiosks and online skincare quizzes. I aimed to combine my findings from both areas to clearly define goals for the kiosk.
IN-STORE ORDERING KIOSKS
I conducted a heuristic evaluation of an in-store ordering kiosk at a local bubble tea shop, focusing on how the ordering process and overall UI aligned with Nielsen’s 10 usability heuristics.
ONLINE SKINCARE QUIZZES
I researched and took several online skincare quizzes, including Curology, Ulta, CeraVe, and The Inkey List. I used these as inspiration to determine what kind of questions to ask, how to present the results, and how to apply the Drunk Elephant branding to my product.
GOALS
Based on my research, I wanted to design a skincare kiosk that was:
Developing the Concept and Features
BUSINESS REQUIREMENTS
When brainstorming features, I thought about what would appeal most to customers while also making the kiosk stand out. Using the findings from user research and my goals, I wrote a list of business requirements and consolidate them into a MOSCOW chart to determine MVP features.
I used ChatGPT to refine the kiosk requirements and evaluate edge cases— for example, I was unsure how to implement payment in the case that a customer would leave before getting their items. ChatGPT helped me decide to print out the order instead of initiating payment.
USER FLOWS
Following the goals and MVP features, I created a comprehensive user flow for the kiosk. I focused on several flows, including starting with the quiz or the catalog. I also considered several functionalities, such as adding a timeout feature and navigating between flows.
Framing the Interface
I moved onto designing low-fidelity wireframes for the main screens - I only designed the one screen for certain flows (such as the quiz questions) to save time.
Feedback-Driven Iterations
While moving to high-fidelity designs, I incorporated feedback from other to improve the designs incrementally. Below are some of the key changes made over time.
WHAT’S YOUR SKIN TYPE? - QUIZ QUESTION
CATALOG PAGE
BAG PAGE
Aligning Drunk Elephant’s Brand & Design Components
While I adhered to the Drunk Elephant branding style, including their fonts and light pastel color scheme, I created a UI design system to to design efficiently and ensure consistency. I kept in mind edge cases such as overflow text and secondary button states.
Putting it together!
To showcase the final designs, I created animated prototypes using Figma and After Effects. They are separated into the catalog and quiz flows for easier viewing.
QUIZ FLOW
CATALOG FLOW
GET AS MUCH FEEDBACK AS POSSIBLE
While this project mainly focused on designing an engaging UI and micro-interactions, that doesn’t take away the importance of user research. I got feedback from my professors and peers, but if I had more time, I would conduct formal usability testing sessions to discover usability issues. Despite time constraints, I’m happy I was able to iterate several times.
Having a detailed workflow prepared before designing makes the process much smoother. When I went into the design phase, I realized I hadn’t accounted for all the interactions in the flow: from how one screen leads to another to small buttons that perform big actions, it’s important to think about all the potential errors.