Discover customized morning & evening routines for your face, body, and beard (if ya got one). Finally, a skincare routine that’s easy to follow and realistic to maintain.
Routini Maker Full Flow
Background
I’ve chosen to create a skincare app that develops customized routines for all genders. Simple yet effective, each routine is based off of a user’s skincare goals while also utilizing AI facial recognition for initial assessment and day-to-day progress comparison.
Objective
To create an inviting and simple skincare app that allows users to adopt and maintain a customized routine, compare their day-to-day progress, and learn about skincare best practices from dermatologists, influencers, and reputable publications.
Project Duration
3 Weeks at 40 hours / week.
Phase 1: Research
Competitive Landscape
Audible’s top 3 competitors include:
Skincare Routine
Cloe
Trove Skin
Competitive Analysis
Competitive Analysis Findings
Most of the competitor apps track your day-to-day progress while a few focus on helping you create a custom routine. None of the apps sell tangible products like other popular skincare apps i.e. Curology and Neutrogena 360.
The competitor apps all offer at least one important feature but they don’t encompass the absolute necessary features one looks for when starting a maintainable skincare routine.
Routini Maker is an app that incorporates the most important basic features such as tracking day-to-day progress, creating a customized routine based off AI advice and your own goals, offering alternate product suggestions, and giving reputable advice from a dermatologist.
The competitor apps have a narrow-minded focus, only focusing on facial skincare. Routini Maker offers a broader focus, allowing the user to improve facial and/or body skincare. There’s also an option to improve facial hair. The additional options offer relatability to men and non-binary genders.
The competitor apps use more typically feminine UI –– purple & pink colors, their icons have rounded edges, etc. which make the apps more woman gender focused. Routini Maker uses gender neutral UI –– blues & oranges, icons with edges that aren’t super round or sharp, etc. This allows for a more inclusive user base (shows that the app is made for all genders).
Indirect Markets
In comparison to other markets in the digital space, the skincare routine market is a newer and niche market so it makes sense that many of Routini Maker’s competitors are relatively young brands. I wanted Routini Maker’s similar features to be a step up from its young competitors so I decided to research more established brands in older markets that offer similar features but use better technology and/or better UX & UI.
Below, I’ve noted the specific apps and features that have inspired Routini Maker’s features.
Weight Watchers App
I decided to research the health & diet market because many of the apps within this category offer day-to-day progress tracking and reputable advice offerings (from dietitians, professional trainers etc.) Weight Watchers is a long standing brand (established in 1963) that uses a sticky calendar for single day and day-to-day progress comparison. Inspired by this app, I also added the sticky calendar for single and day-to-day progress comparison.
The Magic 5
I researched the Eyewear industry to see how different apps approach the use of facial recognition (which many eyewear brands use for measuring the user’s face before ordering frames). I found that The Magic5, a custom fitted swimming goggles company, utilized facial recognition by incorporating it within user friendly UX / UI making the entire fitting process a breeze. The Magic5 app gives the user clear instruction and progress markings for the facial recognition process. These small yet important details inspired Routini Maker’s UX / UI AI selfie scanning feature.
Beginning Interviews
Participants
8 participants, ages 25-40
4 men & 4 women
Questions
What does a skincare routine mean to you?
What do you think the benefits would be from a good skincare routine?
Does a skincare routine seem like it’s for health and/or appearance?
Would seeing before and after photos inspire you to maintain a routine?
Answers
All participants thought that skincare was a time consuming and somewhat complicated routine.
All participants thought the benefits of a skincare routine are both health and appearance related.
Women were concerned mostly about their facial skincare for appearance and health reasons.
Men were slightly more concerned about body skincare and facial hair care for health reasons.
All participants agreed that they would like to see before and after photos.
Men mentioned that they would like to have options for more specific parts of the body i.e. a spot on their leg (instead of just facial skincare before and after progress images).
Interview Findings
The participants all have an idea of what skincare is but women are more informed on how to create a skincare routine that fits their specific needs.
Both men and women are concerned about skin cancer risks and would be more motivated to maintain a skincare routine if it educated them on how to protect their face and body.
Phase 2: Define
User Persona
To better understand the user’s needs, I created a user persona.
User Flow
After creating the user persona, I was able to establish a specific situation on how they may use the app.
Key
Sitemap
After creating the user flow, I was able to create a sitemap
Phase 3: Design
Wireframes
After creating the new feature’s site map chart, I sketched and digitized all the flows.
Beginning Survey Wireframes
Visual Exploration & Development
Then, I created a UI kit for the app.
It was important to keep the color palette gender neutral so I stayed away from typical female colors (pinks) and male colors (greens).
I used icons that are already familiar to the user / commonly used in the digital world (i.e. the battery icon is similar to the iPhone’s battery icon, the thumbs up icon is similar to Facebook’s “Like” icon.)
Sticking with the familiar and simplistic theme, I used sun and moon icons several times throughout the app (i.e. within the logo, to represent the user’s progress during the intro survey, and on the routine, profile, and product screens wallpapers to represent if the user was viewing the app during the morning or evening.
Mobile Screens with UI
With the UI & UX fully developed, I was able to digitize my final design.
I created 6 flows including:
Intro Survey flow (including selfie scanning screens)
Routine page flow
Progress page flow (including ingle day progress screen and also a progress comparison of 2 days screen),
Profile page flow
Products page flow
Learn page flow
*Please note that the Intro Survey flow represents a different date than the Routine and Progress pages flows –– this is to best exemplify the selfie day-to-day progress comparison.
You can view all flows below.
Intro / Survey Flow
Progress Flow
Routine Scroll
Products Scroll
Profile Scroll
Learn Scroll
Phase 4: Testing
Usability Testing
Using Figma, I created a high fidelity prototype for the mobile app.
I conducted remote usability testing with 5 total participants –– 3 male participants and 2 female participants.
I gave the users one situational task based off of a real life situation.
You can test the prototype yourself.
Usability Test Findings
All participants commented that they loved the UI –– the icons and color palette were simple and neutral yet feel trendy and go with the simple yet effective UX.
All of the participants were enthusiastic about actually using Routini Maker (if it were a real app) because of its gender neutral aesthetic, straight forward education feature (Learn page), and option to create / track a skincare routine for more areas than just your face (i.e. full body skincare and facial hair routine options).
All participants thought that Routini Maker would inspire them to begin and/or maintain a skincare routine because it would give them positive appearance and health results.
Phase 5: Conclusion & Next Steps
Challenges & Decisions
UX
Challenge:
A simple yet effective way to customize and track your skincare routine.
Design Decisions:
Use AI and user survey results to create a custom routine for the user (for multiple parts of the body i.e. face, body, facial hair).
Create a daily selfie and calendar system where they can note daily skincare routine habits (the Routine page) and also compare their progress (Progress page).
UI
Challenge:
Create UI that appeals to both genders and is trendy making it stand out from its competitors.
Design Decisions:
Create UI that focusses on being gender neutral (color palette, icons, etc.)
Create UI that is already semi familiar to the user (i.e. similar calendar system to Weight Watchers, etc.)
Overall Conclusion:
Users are willing to follow a skincare routine that is custom created for them, offers skincare routines for more than just your face, is easy to maintain, shows their day-to-day progress, is educational, and gives promise for positive health and appearance results.
Users are enthusiastic to follow routines when they better understand their purpose and know it’s created with their specifics in mind. They love the flexibility of learning about skincare from a variety of people (dermatologists and influencers).
Creating a skincare app that’s gender neutral feels most appropriate for today’s society where gender norms are becoming outdated.
Next Steps
To create additional flows for the Routine and Progress pages –– i.e. an evening routine for the face, and morning/evening routines for the body and facial hair. After, I would perform additional usability tests and update the design and prototype based off of the user feedback.
Thank you.