Section 1 // Defining the vision
Figure 1. SkinTheory's anticipated demographic
A bit of background information...
In 2021, SkinTheory launched with the premise of being a simple skincare tracking app. The product revolves around the scientific method; allowing users to create daily skincare entries and see long-term patterns. As someone who struggles with acne myself-- I was very excited to join them in early March and conduct a complete visual overhaul -- this was my process.
First, I led the team through branding exercises to empathize with users and define our idea of a collective SkinTheory. The initial brand words we settled on were simple, personal, and transparent; while the founders described their app as for people “overwhelmed by the complexity of their skin and the science behind treating it.”
🧍 Using information about our current and target users, I also created a user persona to guide design explorations:
With this in mind, the founders realized they were leaning towards their old accent color of blue, and the idea of being more playful. While many consider skincare tracking a chore, the mundane task has lots of potential to be fun. This stuck with us throughout, eventually leading to the incorporation of more ‘gamey’ elements in the UI.
I imagined SkinTheory as a personified companion for students struggling with acne, fulfilling the need for positive technology that is communicative, friendly, and human.
Section 2 // Explaining the brief
Initially, I'd been contracted solely for logo design and branding, however, the founders felt our visions aligned well and decided to extend my contract to include design and UXR for a "shelf" feature, with secondary focus on a general redesign.
To begin research, I looked to SkinTheory's interactions on a macro scale.
Figure 2. An excerpt of my usability audit
Conducting a usability audit
When I first browsed the app as a new user, my unfamiliarity helped me identify potential issues that led to early drop-offs, and UX confusions. I was able to use my own notes and Jakob Nielsen's Usability Heuristics to inform a list of severe and recurring issues:
✏️ Hard to understand + non-scannable copy
🌋 Inconsistent design behaviour & practices
🏝️ Lack of feedback from actions
Section 3 // Conducting some UXR
Understanding where core UX issues lay, I felt a need to dive deeper into specific problem areas. Here, I conducted several 1 on 1 interviews and synthesized findings from 84 google form surveys. Through these, I found that users experienced 4 main issues:
😕 Missing features waste time
SkinTheory has several time consuming steps in its tracking process (ie. typing out your routine), de-motivating already tired users.
Furthermore, our public feature wishlist is incredibly long; highlighting the problem that basic functionality is missing.
“I can’t quickly add or manage my products.”
“I want a way to compare photos easily between two periods of time”
😔 Lack of delight
Where public perception of quality is formed in seconds, lack of visual delight (important among the younger audience) is needed to create trust & differentiate an app. Skincare tracking already has the perception of being boring and tedious, so how we can push users along a fun journey?
20% of users responded that “SkinTheory could be more fun”
🤕 Lack of consistency hurts retainment
Users often forget to make entries, but are reluctant to turn on notifications because a lack of transparency + notification fatigue.
21 users found it “Hard to track my skin routinely” or “forgot to make entries”
🤔 App is confusing for new users
SkinTheory's onboarding is confusing for new users-- the current solution is general and repetitive copy before dumping them on a blank entry page with no empty state.
“I imagine people who are new to skin tracking would be at a loss on how to start”
Section 4 // Establishing common themes
Figure 3. Interview questions from 1 on 1 meetings
Figure 3.5. Early design goals derived from interview questions
Analyzing Sentiments
Through common themes from survey quotes (see above) and social media, I created a set of design goals we didn’t want to deviate too far from. My primary takeaway was that SkinTheory isn't very feature complex in it's current state–- but its simplicity is also why it's liked. The big questions I wanted to address were:
HMW add features while keeping core functionality easily accessible?
HMW motivate new and existing users to consistently use SkinTheory?
Section 5 // Focusing on the entry page
Figure 5. Entry page user flow (focusing on the notes section)
If we want to keep SkinTheory simple, why do we need a new feature?
Newly armed with context on SkinTheory's demographic and its primary problem areas, I wanted to zoom into the specific "shelf" feature I was to design. To properly understand where this feature would live and why it's so urgent-- it’s important to first look at the old IA of the entry screen (arguably one of the most important parts of the app). There are multiple places where users are forced to leave: breaking their flow state, leaving them prone to distractions, and roughly doubling the time it takes them to create an entry.
An opportunity space I noticed was potentially incorporating this feature into onboarding so that users felt more invested and “locked into” a product (sunk-cost fallacy). Eliminating lengthly steps would also allow us to show value early in the process and create that "wow" moment that helps with early retention.
Section 6 // Screen-level pain points
Depreciating and replacing old features is a delicate matter that naturally raises a few problems. As Hyrum’s Law states, at a certain scale, every feature will be used by someone out there-- no matter how confusing or poor the UX may be. My task was only made more delicate by SkinTheory's simplicity; I worried about long task times and potential feature bloat. In my last step before ideation, I summarized my notes to identify which essential problems we were solving:
🕒 Entry writing takes a while, but it doesn't have to
After setup, it's possible to have the skincare routine process be fully hands off. By allowing users to assign recurring dates to products, we would eliminate the need to have users input information on every entry, while also removing opportunities for future human error (ie. misspellings).
🪟 The old solution includes some unnecessary feature overlap
Previously, users had to manually change their notes depending on the day of the week, or click the “same as last” function every single entry (incorrectly assuming that most users only have 1 routine). Furthermore, the 2 “notes” fields offer the same UI and text input, causing confusion over which is the 'right' spot.
👣 The entry page to timeline funnel is fundamentally flawed
SkinTheory's important halves are tracking, and analyzing-- the timeline deals with the latter half by storing entries so users can spot patterns and causes of breakouts. Only text input means that the current timeline is a non-scannable wall of words. Imagine if a user wanted to look back at which day they started using Retionol. Assuming they filled out a full entry with 3 sentences/day for 2 weeks, this would take countless scrolls and over 14 pages of unoptimized screen real estate (SkinTheory doesn't offer filtering). I re-imagined this process as a new visual data funnel into the timeline; differentiating content and planning for the long-term.
Figure 5. A screen recording of SkinTheory's old process
Section 7 // Brainstorming solutions
Figure 6. Lo-fi designs and corresponding UX flows (See image to the right and below)
Our intended flow was decided upon as: go to entry page -> see empty state -> add products -> and view product list. We kicked off the "develop" stage with some Crazy Eight sketches and a competitive analysis for the add products flow— I digitized and continued to flesh out the directions that we thought of, ending up with:
Review: Are we providing the right solution?
Figure 7. User Interview Insights
At this point, I had to do some testing in order to uncover how users envisioned the feature, rather than the team. I was at an impasse where I wasn't sure which of the many solutions we should to go forward with. There are more than 4 combinations of solutions possible, but the main divide is between routines and products. We had been approaching this as an “add to shelf feature” surrounding individual products, but was that how users approached skincare?
Research revealed that most people didn’t have morning or night routines, instead, using different products at different times.
This meant that I could approach this problem on a more individual scale and solution number 2 was ideal.
Figure 9. Impact vs Effort Matrix
Displaying products: How can we differentiate between more than 5 options?
When designing the display of the product list, I had to consider that the average skincare routine had 5 steps. My main challenges were optimizing screen real estate and differentiating between a lot of products. Because the engineers weren’t yet sure of about the desired scope or complexity of the feature, I first explored different ways of visualizing information, and the corresponding bandwidth each solution would need.
Levels of personalization ranged from allowing users to upload images, select pre-made illustrations, cards with different colors, emoji options, customizable palettes and even pulling in product info via APIs.
Crit: Accounting for accessibility
Figure 10. Exploring product cards
When reviewing my iterations, I found my early work was problematic because of its dependance on color, and the unreadable font size. In general, color shouldn't be the only method of differentiation because it can translate to contrast issues for color-blind and low-vision friends. My takeaways for later iterations were to rely on color less and focus on distinguishing products through photography, illustrations, and tags.
Section 9 // Converging on UI
Figure 11. Beginning the design process (cool speed trick- turn designs into variants to make visual mockups even faster)
At this point in time, pretty illustrations and design critiques were the only the sustenance keeping me going. As I was re-building SkinTheory’s design system from the ground up (previously in Adobe UX), I was pretty picky with UI. Everything from the smileys and their jelly coats, to the subtlety blue tinted greys were meticulously adjusted upon, considering both WCAG AA guidelines and aesthetics. Learning lessons from SkinTheory's old problems, I added appropriate system dialogue, used conventional design patterns (including common interactions like swiping to make things efficient), and used affordances to show what was and wasn’t clickable.
Figure 12. A peek into my iteration train, and thought proccess
Figure 13.
A screen recording of my Figma prototype, shipped for V1 (
reach out to see the more complex designs I made for V2)
& finally, presenting...
the MVP!
Due to engineering and time constraints, we shipped a very barebones V1 (number two, user-uploaded images) with limited tagging functionality. After saving, users can tap to edit but there are no daily override capabilities and minimal customization options. While I don't presently have any numbers to present, I am immensely happy to have been part of creating a scalable design system— one that I think will grow far beyond my designs with future employees.
Section 10// Challenges & takeaways
Figure 14. Screenshots of my components, Figure 15. Text Styles chart
A peek at the final components
SkinTheory was the perfect time to put all of the design tricks I had learned in theory- in the file. I reduced the number of extraneous components and baked functionality into the existing ones by using tricks like renaming icon layers to preserve overrides, nesting interactive components inside of larger slots, and using variants to replace multiple components.
my learnings
What I would do differently
For the purposes of brevity, my full research process and redesign aren't public. If you’d like to see how I applied all of these findings, please reach out to me
here to learn about my full process :)
🔎 Zoom in, zoom out
As a designer, I can sometimes struggle with balancing macro and micro-thinking-- leading to a well-designed piece that functions oddly in the scheme of a greater product. In this project, I didn't quite fall into that trap (the shelf feature sits nicely in SkinTheory), however, I felt there were some places where I came close to slipping.
I spent too much time on minimal UI improvements when my time would've been better served polishing the final concepts, especially because I was working on the redesign and new shelf feature simultaneously (things ballooned out of hand). Overall, it's almost always better to establish a clear scope and do thorough product requirements before touching any hi-fi work.
🎙️ Reach out to others (more)
Throughout, I had a lot of opportunities to speed things up by asking the co-founders for their input. With hindsight, no one has more access to data than the company itself, and they were incredibly helpful at my product vs. routine roadblock. Being a good freelancer doesn't mean designing afraid, or alone.
📍 Account for human error
Building this case study almost 8 months after I first started this project, I'm noticing a lot of missing edge cases. Before, I tended to associate the term with empty states and "user error" like mistakenly deleting items. This fails to consider the broader category it encompasses; as good design accounts for short-term memory, physical constraints, and the need to provide ways to fix slip ups. Arguably, this is much more indicative of good design than adding an undo button. With time, I find that I'm maturing as a designer and growing to spot more edge cases than smaller Aileen.
my learnings
⌛ Be crafty and considerate for dev time cuts
Something that I've recently learned to understand more is the necessary balance between pre-made and new components. For a smaller startup, a design system might mean a combination of default system components, adjustments to pre-made components, and unique ones built from scratch. I've since adjusted my freelance design process to reserve time for auditing a company's design maturity, and understand what is publicly available in their stack (ie. visiting the MUI website and community Figma files).
Challenges I faced
🎐 Developer strain vs better design practices
A constant challenge in the design world is limiting developer strain, while simultaneously making optimal UX improvements. As they are occasionally contradictory, I tried my best to advocate for an objective decision, making my best recommendation for what should be prioritized. In this case, we kept the entry design roughly the same (other than small cosmetic improvements), putting more effort into optimizing UX for the new "shelf" feature.
Figure 16. 1st image is the old SkinTheory design, 2nd & 3rd are the new entry designs
my learnings
🔌 Establish consistency early
Keeping my Figma files clean is important because not everyone thinks like me. I had to continuously remind myself to write my thought processes down, even for unused components that didn't ship— future SkinTheory employees might not be designers. Above, some of the documentation I wrote; my hope is that I can support good design practices as the design system is young so they are continued as it matures.
my learnings
🔮 A final word
In real life, this project was a lot bumpier than my case study. It was a chaotic clash of deadlines, job applications, and freelance work that taught me all too well about the struggle of being a designer. I thought that being fully in control from branding to app design meant I'd be able to execute my vision freely, but in reality, I was the one who holding myself back. On the plus side, this project made me a much faster and more efficient designer-- the company even offered me equity to continue with them. I feel that I've improved a lot since this project, and I hope to continue improving. For all of my Concerned Beakers, I'll be back (& better).
(c.) May —2022
Next Case Study
Other Fun Projects
(c.) 2021—2022
