Demystify
An end-to-end iOS app for empowering consumers of skincare products
Introduction
When I first set out to design an app focused around skincare, I assumed that users would benefit from an app that tracked their skincare routine and pushed them notifications to remind them of when to use it.
However, very early on in the initial conversations of my research, I realized that users didn’t have a need for such a feature. Instead, what I heard over and over again was that users had different problems with skincare; they didn’t know which ingredients would work best for them, why some products would cause unexpected changes in their skin, and which products would work best together. They also consistently felt like it was hard to trust a company’s own site for accurate information about their products, because everything was so heavily laden in marketing language and buzz words.
I quickly shifted gears to create Demystify, an iOS app that gives users information about products and ingredients, tells them which products have interactions, and lets them read honest and unsponsored reviews from other users who share their same type of skin and care goals or concerns.
Project Overview
Goal: Create an end-to-end iOS app that empowers skincare users with knowledge and honest peer advice
Timeline: 2 weeks, 80 hours
Role: UX/UI Designer, UX Researcher, Visual Designer
Demystify gives users a reliable and unbiased resource free of marketing lingo and confusing claims where they can better understand their skincare needs and routine.
A Deep Dive into Skincare Apps
Understanding existing offerings
After my preliminary conversations helped me understand my direction better, I tried to find competitors in the App Store that claimed usefulness for both tracking a user’s routine and for providing greater detail about ingredients and product reviews. There is a wide array of apps currently available in this category, but the following four seemed closest to the direction I saw emerging. My biggest takeaway was that most pushed sponsored content and failed to provide unbiased details about products and ingredients.
But what do users really want?
I spent extra time on my user interviews because I wanted to ensure I was best understanding what users felt a need for when it came to their skincare routine. I got consistent answers from everyone I asked; users felt confused about what products could actually do for their skin, and they didn’t always understand which ingredients were responsible for which effects. I also learned that the most rewarding part for nearly all those I asked was seeing a visible change in their skin. Lastly, users most commonly turned to online bloggers and their friends for advice on which products to buy and why, as these sources seem most trustworthy and genuine.
Asking the Greater Userbase
To solidify the feedback I got in interviews, I sent a survey out to an additional 15 skincare users, whose responses mostly corroborated those of my interviewees. Furthermore, I discovered that the majority of skincare users were seeking to address a specific concern with their skin, always checked reviews before purchasing a product, and were were comfortable with sharing the details of their routine and concerns with others.
87% of those interviewed said the primary goal of their skincare was to address a specific concern like acne, dark circles, or dark spots.
74% of users felt that their current skincare routine was not adequately addressing all of their concerns and needed further refinement.
The three sources participants reference most for information about their skincare are their friends, their dermatologist, and skincare bloggers.
My research showed that users wanted informative and unbiased advice about skincare, from real users or trusted voices and specialists.
Forming the Ideal Potential User
My interviews and further research gave me a good idea of who the ideal user for my skincare app would be; someone who had already delved into skincare, but was looking to learn more, empower their decisions when it came to product purchases, and refine their routine to deliver better and more visible results. Enter my persona Daniel, who doesn’t just want to get better results, but also know exactly which ingredients are responsible for them.
Define
Defining the Essentials
As I began my feature matrix for the app, I thought about which pain points my interviewees had mentioned most, and started from there to develop my MVP. I knew the app needed three essential functions; searching for a product or ingredient, informational pages for those products and ingredients, and a system of reviews and message boards for peer-to-peer advice. The full list can be found here.
The priority features would allow users to quickly gain new knowledge to inform purchase decisions. I wanted to follow up with a few delightful extras, however, like specified groups for users with the same skin type.
I wanted the features to reflect the needs of the users, but also create an environment that would delight them. Those further features included a system of direct messaging, smaller group pages for users of the same skin type and concerns, an automated routine organizer, and a daily skin check-in.
How would users organize these features?
I wanted to best understand how users felt features would be best organized in the app when it came to designing the primary navbar, so I conducted an open card sort exercise with 7 participants. When I separated the search functions, which participants had seemed to split across categories, the most common grouping seemed to be Profile / My Skincare, Products and Ingredients, Social Skincare, and Search Functions. I was shocked by how consistently participants created these 4 categories; I had assumed there would be at least 5, maybe even 6! The clarity of the responses allowed me to simplify and condense my planned IA approach.
What Goes Where
The card sort was very illuminating and made it very straightforward to lay out the remainder of the app and its pages and features. The final version of that organization is below.
From Point A to Points B-Z
I imagined that if my persona, Daniel, were to come to the app for the first time, he’d likely be searching for a particular product or ingredient that he was considering adding to his routine. My user flow reflects that process, and includes loops for finding products that have been flagged because they contain irritants and tapping on links to purchase products that seem to fit his needs best.
Design
Building out my new 4-category architecture
Keeping the functionality of my MVP that I had established in research front of mind, I created my initial lo-fi wireframes to understand the best way to layout all of the app’s features and pages. I actually found this but to be very straightforward based on the four main nav categories that emerged in my card sort exercise.
Fixing my misguided branding
My work up to this point had revealed just how incompatible my first branding drafts were with the actual product users wanted. Initially, I though to call the app Peau (French for ‘skin') and use a light green as the brand color. However, as the functionality of the app shifted towards peer-to-peer advice and education about ingredients, a more trustworthy blue and the name “Demystify” felt more appropriate. The logo also evolved from a playful misting canister into a more education-focused molecule shape taking the place of the ‘m’ in the apps title. The final branding is meant to evoke this sense of trustworthiness without seeming too high-end or high-brow.
V1 of Branding / Logo
V2 of Branding / Logo
V3 of Branding / Logo with refined molecule logo
Revised V3 of logo with refined blue color palette
My first go at branding was a complete miss! The final branding and logo use more mature blues to create a sense of trustworthiness and educational content, without seeming intimidating or out-of-reach.
Creating a better-informed look and feel
Inspired by the new branding and logo I created, I began creating new icons for the app’s navbar and illustrations to accompany text on buttons. I wanted to keep the shapes and colors simple and consistent, and convey meaning with only two planes.
‘Message Board’ Icon
‘Browse Products’ Icon
‘Community’ Icon
Navbar Icons
Creating the first draft
After I had a good understanding of my color palette and branding direction, it was time to apply it to my wireframes and create the first draft of the user-facing app screens. I wanted to keep the app clean and clear, making use of whitespace to prevent information from feeling cramped or overwhelming. I also made sure to link every page to each other to best emulate a fully-developed version.
Putting Demystify in Users’ Hands
Time to test!
Using my high-fidelity prototypes, I began user testing with 2 closely observed participants and an additional 10 through Maze. The test included four missions for each participant, which I selected to observe how users found navigating the app and where they might look to find certain features and functionalities. The Maze summaries of those four tasks are shown below:
My usability tests uncovered a feature that needed overhauling; the system of flagging irritants was not adequately alerting users. They frequently tapped on products that the app was meant to steer them away from.
The most impactful iterations
Based on the results of my usability testing, I amended the major issue of my inadequate allergen flagging system, but also improved upon some key areas of usability and accessibility that I saw some users come across.
Users were still tapping on the product boxes that were flagged for their identified irritants in testing, so I created an iteration that better emphasized the warning label and included a red background, which stands out more than the red border.
Some users commented on the inactive gray color (#c4c4c4) on the site being a bit hard to read on certain pages, so I swapped it out for a darker gray (#969696).
A few users were uncertain where to find their routine on their profile page, as it sat below the fold. I moved it up higher so that it is more immediately visible to users.
The work still on the to-do list
Several further expansions could help to create an even sharper vision of how Demystify could truly come to life for users, including:
Building out prototypes for every function. Many users tried to access functions that were beyond the scope of the first prototype, like filtering their searches and using their notifications drawer to navigate to pages. Having a functional prototype for these features would give an even better sense of how users would really operate within the app.
Adding a Side-by-Side Product Comparison feature. Multiple users made mention of the fact that when they shop for products on their own, they like to see the ingredients and details of two or more products juxtaposed to help them make a decision.
Expand testing to emulate the passing of time. Because one of the app’s major features is tracking how a product affects a users skin over time, it would be beneficial to test a version that emulated the passing of time and showed users how they could log their progress or update their reviews.
Conclusion + Summary
Key Takeaways
The concept for this app went through an extensive evolution as I designed it, based on the feedback I got from users and my iterations on its design. I’m glad that I was able to keep an open mind throughout the process, because my interviews and testing showed me that what I assumed would be the most valuable feature was actually several rungs below what users were actually looking for.
Challenges
Trying to integrate all of the features that I knew users would find valuable was a bit time-consuming, and it took some strategy to make them integrate well with each other.
I thought that I knew the kind of functionality and look this app should have, and I was completely wrong. Leaning into my user research allowed me to quickly turn around from these assumptions.
Insights
I ended up with a product that really excites my users, but is completely different from my initial vision. It was so important to hear users’ thoughts to pull this off.
Sometimes stylistic choices can obstruct usability, which I saw with my flagging system in my testing. It was essential to test that design, as otherwise it may have really frustrated users in a final version.
Final Thoughts
The way that this design completely changed direction from what I had initially expected was a little surprising, but by leaning into it I found great reward in making something that users truly saw value in.
My usability testing was key for this design, because without it I wouldn’t have noticed shortcomings of my design that didn’t stand out to me after several hours working on it.
Designing from the ground up for a concept that caters to a smaller subset of users seemed a bit daunting at first, but the users I spoke with provided invaluable feedback that really informed the whole of my process. In the end, the users really made this design so fulfilling to complete!
