BasicSkin. ai

Mobile app design for personalized skincare 

Product type:

End to end mobile app design

Role & year:

Sole researcher & Designer

2024

Tools:

  1. Figma

  2. FigJam

  3. Optimal Workshop

Contributions:

User Interviews
Define
Ideation
Wireframe
Prototyping & User Testing
Iteration

Overview

BasicSkin.ai is a mobile app designed to help people reach their overall skin goal by providing them proper skin analysis, personalized skin care products & routines and being able to chat with an AI dermatologist with any skin concerns on the go.


The problem

Over the last decade, there has been a massive cultural shift toward self-care and overall wellness. People are increasingly aware of their skin health and skincare is seen as an important part of self-care, as it involves nurturing your body and prioritizing well-being.

Many individuals struggle to find effective skincare solutions tailored to their unique skin types, concerns, and lifestyles. Existing skincare resources often lack personalized recommendations, resulting in overwhelming choices and ineffective routines.

My goal is to create a user-friendly skincare app that provides personalized product recommendations, customized routines, and educational resources to help users achieve their skincare goals effectively and confidently.

User Research

  1. Competitive Research

    I compared 4 other most used skincare apps (TroveSkin, Skin Bliss, YouCam Makeup, FeelinMySkin) out on the market to analyze their strengths, weaknesses, features and pricing. 

    • Strengths:

      • product recommendations

      • ingredient transparency

      • educational resources

    • Weaknesses:

      • limited user engagement

      • limited personalization

      • limited product offerings

      • no free plan with sufficient features

      • clutered interface

      • difficult to navigate (information overload)

    • My opportunities

      • increase user engagement, personalization

      • provide wide range of products

      • display enough information but keep the interface simple

2. User Interview

I interviewed 6 people between the ages 19 to 39 (4 females, 1 male) and it helped me gather qualitative insights that can shape the app’s features, design, and overall user experience.

Research Goal:

  • Find out how do users address their skin concerns currently

  • Learn how to users feel about their skin with current method

  • Understand what difficulties users face when it comes to improving their skin.

After conducting user interviews, I put all the info I gathered into an affinity map in order to help organize and synthesize insights gathered during the interviews to identify patterns, themes, and actionable takeaways. 

Insights:

  • Personalization is Key

    • Users express a strong desire for personalized product recommendations based on their specific skin types, concerns, and preferences.

  • Usability Concerns

    • Feedback indicates that some existing skincare apps can be confusing or cluttered. Users prefer a clean, intuitive design that allows easy navigation and quick access to information.

  • Diverse Skin Needs

    • There’s a recognition of the diversity in skin types and conditions. Users want an app that accommodates various needs, including sensitive skin, acne-prone skin, and aging concerns.

  • Time saving

    • Users would like to address their skin concerns in a timely manner without the whole process of researching for a Dermatologist including all the time spent on scheduling / waiting for an in-office visit.

  • Educational Resources

    • Users seek educational content about skincare routines, product usage, and ingredient benefits. They want to learn more about how their life choices can affect their skin health in order to achieve better skin results.

Define

The competitive analysis and user interviews gave me a better understanding of who the users were and how they might use a skincare app. I focused on expanding those findings into concrete visualizations that would help me empathize with users and define the product.

  • User Persona

    Understanding the user perspective, we created the persona (Tatiana) to help us move forward with our decision-making.

  • POV/ HMW

    • I’d like to explore ways to help skin enthusiasts to have a personalized skin care routine for their specific skin types because they don’t know what’s the right steps for them.


      How might we help skin enthusiasts to have a personalized skin care routine for their specific skin type when they have no idea what needs to be done to reach their skin goal?

      Solution: Tailored routine recommendations

    • I’d like to explore ways to help frustrating consumers to stop playing the guessing game when it comes to purchasing skin care products because they don’t know have the proper skin analysis to know what would be beneficial for them.

      How might we provide proper skin analysis when frustrating consumers are playing the guessing game when it come to purchasing the right skin care products ?

      Solution: Face scanner, product recommendations

    • I’d like to explore ways to help busy individuals to address their skin concerns in a timely manner because they are looking for easier access when it comes to skin care solutions.


      How might we help busy individuals to address their skin concerns in a timely matter when they are too occupied to call and schedule a dermatology appt along with researching for the right skin care professional?

      Solution: Chat with Ai Dermatologist on the go

Ideation

  • User Flow

    User’s primary path within BasicSkin.ai includes signing up/ signing in, creating their profile (by entering personal information and using the face scanner), navigating the profile page, unlocking premium features, and receiving personalized routines and advice through the AI Derm chat.

  • Site Map

    I did a card sorting exercise through Optimal Workshop in order to understand user categorization preferences and organize content intuitively. It helped me create a user-friendly interface that facilitates easy navigation, enhances the overall user experience, and ultimately leads to a more effective and satisfying skincare app.

10/10 people completed the card sort and I originally had 4 main pages on the app (profile, product, routine, insights), but the result I got for profile and insights were borderline 50/50 so I made changes to my site map and merges them into one page and added chat with Ai as it’s separate page since that is one of my main selling features of the app.

  • Hi Fidelity Wireframes

  • Mid Fidelity Wireframes

Mid-fidelity wireframes help me establish the structure, key functionalities, and overall flow of the app. They provide clarity on how users will navigate the app and interact with features like uploading photos for skin analysis, viewing their results, and receiving personalized product recommendations.

High-fidelity wireframes act as a blueprint that outlines both the aesthetics and functionality of the app. They help to ensure that my design delivers a seamless, personalized, and user-friendly experience, from performing the skin analysis to receiving tailored product recommendations and feedback.

  • UI Kit

  1. Purple is linked to luxury, sophistication, creativity, and calmness. It is often seen as a color of high-end products and self-care rituals, I thought that would make it a great primary color for this skincare app design.

  2. Blue has a calming, refreshing effect and can suggest purity and clarity, which aligns well with skincare routines/ products focused on clarity, hydration, and other benefits.

  3. I also wanted a simple interface with modern feel to it. Colors and design can be suitable for all genders and ages.

Prototype & Test

  • Usability Testing

I did 5 usability testing with potential users between ages 22 to 50 and it helped me to identify usability issues and gather insight on user behavior, preferences, and challenges while interacting with the app. 

5/5 participants indicated that BasicSkin.ai is a product that would be really helpful to them when it comes to reaching their overall skin goal. Also the app is easy to use,straightforward, extremely insightful but without having information overload. 
4/5 participants found the chat with AI Derm feature convenient and would pay for the premium to use this feature.
2/5 participants thought where to find on the product page wasn’t clear/ easy to find. 
3/5 participants enjoyed the product page and were able to find everything they were looking for.
1/5 participants did not understand the numbers that were representing her skin concern.

  • Final Iteration

    • Made where to buy more visible on the product page.

    • Provided description when clicked on user concerns explaining what the numbers meant. 

    • Adjusted spelling on creating account (skin concern) page.

    • Added link icon to the where to buy links so users can see they are being directed to another website to purchase.

Conclusion

  1. BasicSkin.ai resonated with users like my user persona- and they could see this product being useful in helping them to reach their over all skin goals.

  1. If I had more time, I would have completed few more usability tests to better my iteration as well as user interviews in my research phase.

  2. While working on this project I learned to really trust the research and discovery process as I started working on it with different assumption and realized it’s what the users want and not what I (the designer) assumed they wanted.

Previous

NVFP Responsive Website
Next

Spotify Added Feature