Esther - the revolutionary
AI enabled skincare app.

From ideation to prototyping and brand design, I designed Esther from the ground up.

Esther allows skincare novices to tackle their minor skincare concerns at home. This powerful AI-enabled app informs users of the root cause of their skincare issues and how to use accessible products to address them. Reaching this goal, of course, came with challenges.

The main challenge was designing an approachable way to present a vast amount of information without overwhelming beginners. Thus, Esther is an interactive guide to the world of skincare with personalized product recommendations and step-by-step instructions to using each item, all with the individual needs in mind.

ROLE
TIMELINE
TOOLS USED
Product Designer
12 Weeks
Figma, InVision
WHAT I DID
UX Research, UI Prototyping, Visual Branding
Why this matters
Imagine you are constantly battling skincare issues, like acne. The wait to see a dermatologist is months out, but your self esteem is taking a major hit every time you look at yourself in the mirror... or on zoom.
‍
Life doesn't stand still until you're confident in your skin appearance and you're ready to address this now. Where do you begin to build an effective routine? The process can be painstaking and daunting.

Young adults tie their self-esteem to skin appearance and are willing to try new products but want to confirm the products will actually address their personalized concerns before reporting they are truly “satisfied” with their regimen and their skin health.
‍

Constraints
Limited data to drive design decisions.
‍
Lack of time to properly user acceptance test.

First end-to-end solo design project.



Solution
A digital solution that uses AI technology to analyze your skin and develops a personalized product plan and regimen from the vast information on skincare and beauty.
Design Process
To ensure I was addressing the user's needs, I had to fully understand their problems, goals, and potential barriers that would arise. This process was anything but linear.
Empathize
‍
How might we
‍
Survey
‍
User interviews
‍
Affinity mapping
Define

Persona
‍
User stories & Epics

Task flow
‍
Ideate

Sketches
‍
Wireframing
‍
Prototyping
‍
Usability Tests
Deliver

High-fidelity prototype

UI library
‍
Branding
‍
Marketing site
01/ Empathize
Objective
Gain insight on young adults (20-30 years) values and motivations behind using a digital resource to build a skincare routine, and how overall skin appearance affects their mental health.

Research Questions:
‍
1. What are the key motivations for learning about skincare?
2. What is the general attitude about people's current skincare routine?
3. How do people currently value skincare knowledge? Is there a need for this?
4. How are people currently seeking information about what products to use?
5. How do people feel about getting skincare advice through an app?
‍
Methods
Research was conducted through user interviews and online survey to gain both qualitative and quantitative insights. I facilitated five 30-minute interviews via video call which users were asked 20 questions.


Participant Criteria:
‍
- Young adults between 20 - 30 years old
- Beginner - intermediate skincare knowledge
- Expressed interest in maintaining their health and wellness
- At least one minor skincare concern
- Owns at least one digital device (ie. Smartphone, Tablet, or Computer)
‍
Challenge
Research identified beginners were the primary market for this product, which was a departure from my initial assumption that skincare fanatics would be my target user. Therefore, I had to pivot my designs to support skincare novices.
Key findings
60%
45%
use online research to gain knowledge about their skincare
think ingredients are most important when choosing a new product
1. Seeking Assurance
Young adults have a skincare routine that they follow, but, they are not sure if the products are addressing their concerns. Especially among beginners, there is an overall lack of information about skin health in general and moreso details about their specific skin (i.e. skin type, exposure, aging, etc.).

People are willing to buy any product without restriction, if they were ensured it would yield positive results.
‍
2. Emotionally Charged Decisions
There is a strong connection between skin appearance and overall self confidence & happiness. When people are unhappy about their skin, it permeates into their day to day life and negatively impacts their life.

3. Impressionable Consumers
People are highly impacted by friend, influencer, or ad recommendations when choosing products. Social media and online forums are the first places people look when creating a skincare routine for themself.

If people see that a product worked for either their favorite influencer or a loved one they are more inclined to try it themself.

02/ Define

Primary persona
Epic development
User task flow
Complete facial scan analysis to unlock product recommendations and your personalized skincare routine.
Objective - Build trust with the user that Esther understands their needs and facilitate consistency to ensure users gain value from the app daily.
Challenge
Designing a task flow that would fulfill the varying high level needs of the users while maintaining clarity and simplicity. With more time to iterate, I would rework the flow of the app to prompt users more clearly on how to move through from the home page to the routine page, as this is where users saw the most value from the app.

03/ Ideate

Design principles
Encouraging
‍‍
Care for the sensitivity that comes with addressing concerns with appearance.
Reputable

Build trust with the user so that a digital solution is the first place the user turns to when seeking advice.
‍
Approachable

A wellness app should be simple to pick up and gain value from immediately.
Sketches
Idea generation and concept development
From paper to digital
Using my sketches and UI inspiration, I created initial greyscale wireframes to demonstrate the flow and main features of Esther.
Challenge
Many of the design decisions from my wireframes did not carry over to my final design. As I gathered more inspiration and feedback, the overall flow and focus of my app shifted to highlight the products and routine experiences rather than the data-heavy features. Redesigning from square one was a lengthy process, which impacted my project timeline.
Prototypes
Wireframes were turned into clickable prototypes for two rounds of user testing with five participants each. Users were asked to complete five tasks as they explored the app. The results from this testing informed the next iterations of Esther.
User testing
Target sample size of 5 participants (10 total) for two rounds of user testing. Participants were chosen based on convenience sampling.

Task: Complete facial scan analysis to unlock product recommendations and add a product to your personalized skincare routine.
Methods
Phase 1:
‍
Participants navigate through the main task flow and speak aloud their experience.

Facilitator prompts users to complete five specific scenarios without leading.

Phase 2:
‍
Free association. Users can ask the facilitator specific questions, or, the facilitator can ask participants why they made certain decisions to gain more insights.

How does the user feel? Appeal to their pathos to find out what feelings are evoked when using the app.


‍
Results & Iterations
Among many changes to the fonts, colors, button sizes, animations, and interactions; highlighted below are the larger UI changes that were informed by the user acceptance testing I conducted.
10
4
user testing sessions
prototype iterations
Final prototype
After user testing and finalizing the task flow, I began the exciting task of injecting color and graphical components to bring Esther to life. Below is Esther as it stands today.

Esther is a mobile app which allows young adults take control of their skin concerns and begin addressing them at the source all while building a routine and gaining vital knowledge along the way.

Key Features:
‍
1. Facial scanning for in-depth skin analysis
2. Benchmarks for skin health and root causes of problem areas
3. Curated product and ingredient recommendations
4. Routine builder with video tutorials
‍

04/ Deliver

Branding
UI Library
Marketing website
Responsive website created to highlight the key features of Esther. To view full prototype click here

05/ Reflections

I learned a lot...
1. Lean on your resources and your inspiration
Esther was my first solo end-to-end design and I came away from this experience with a lot more knowledge than I had going in. That said, I am able to reflect on the design and recognize both the wins and the flaws which I would have mitigated with more time.

I learned the importance of consulting other designers during each step of the process as well as spending adequate time UI inspiration gathering. In hindsight, I would have benefitted from more of each of those things.
‍
2. Design is a discipline
I am in the exciting spot in my design career where every experience accelerates my knowledge by tenfold. At times I was hard on myself for my inability to know exactly how to design something, or, to be highly optimized when doing so.

I take comfort in the fact that as a designer I am forever evolving and learning new ways of doing things to create designs I am proud of.

3. Insight driven, not process driven
There is no one way to approach starting a design process and it is important not to stick too rigid to doing steps "in order".

Especially during the research and user story / epics phases, I wish that I would've taken a step back and asked more questions so that I had a greater picture of the users' needs. Rather than feeling like once I had done wireframes that I was stuck to the path I was on.
‍
3. Iterate, iterate, iterate
The power of feedback and iteration is real. My design really started to come into perspective once I got my wireframes in front of users. I wish I would have given users a more thought out flow with more capabilities prior to testing.

I found that the usability feedback was vital and time permitting I would have overhauled more of the experience. I got too ahead of myself with the tight timeline making it difficult to instill vast changes once it became clear what the users desired from my design.

Esther mobile first solo design

Esther mobile first solo design

Esther mobile first solo design

Esther mobile first solo design

Esther mobile first solo design

Esther mobile first solo design

Esther mobile first solo design

Esther mobile first solo design

Esther mobile first solo design

Esther
Lift Me Up!
Treat