Read Skin: Beauty Ingredients Checker

Designed a user-friendly app that provides comprehensive information on beauty ingredients, helping users understand the products they use or plan to use.

Role

UI/UX Designer & Researcher

Company

Independent Project

Duration

2 months

Project Overview

Background

Throughout the day and night, cosmetics come into contact with our skin. According to a 2010 survey conducted by WebMD, over 30% of the 900 participants reported experiencing allergic reactions due to cosmetic ingredients.

Problem

Many chemicals in cosmetics can trigger allergic reactions or skin irritation. Despite this, many individuals struggle to identify the chemicals in each cosmetic product and determine which ones might be harmful to their skin, leading to allergic reactions or irritation.

Product

To prevent allergic reactions or irritation caused by a lack of understanding of chemical ingredients in cosmetics, I designed an innovative app named 'Read Skin.' This app provides users with easy-to-understand information about the chemical ingredients in each cosmetic and allows them to share their valuable experiences with the products.

Project Goals

  1. Help users easily understand the chemical ingredients in cosmetics by providing information in an easy-to-understand format.

  2. Enable users to avoid harmful ingredients and use cosmetics with ingredients suitable for their skin types.

  3. Build a community where users can share their experiences with cosmetics and gain helpful information from each other.

My Roles

  • To understand users' needs, behaviors, and pain points, I conducted in-depth interviews with potential users who have experienced allergies or itching due to cosmetics.

  • Created personas and journey maps to better understand the target users and designed an app that meets their expectations and delivers a superior user experience.

  • Produced detailed wireframes to visualize the app's conceptual layout and developed prototypes to demonstrate its functionality and interactions.

  • Designed the visual elements, including color schemes, typography, and icons, to make the app visually appealing and increase user engagement.

  • Developed an information architecture that organized the app's content and features, ensuring users could intuitively find the needed information.

  • Conducted usability tests with potential users to identify usability issues and gather feedback, making the product more user-centered.


Project Overview

Background

Throughout the day and night, cosmetics come into contact with our skin. According to a 2010 survey conducted by WebMD, over 30% of the 900 participants reported experiencing allergic reactions due to cosmetic ingredients.

Problem

Many chemicals in cosmetics can trigger allergic reactions or skin irritation. Despite this, many individuals struggle to identify the chemicals in each cosmetic product and determine which ones might be harmful to their skin, leading to allergic reactions or irritation.

Product

To prevent allergic reactions or irritation caused by a lack of understanding of chemical ingredients in cosmetics, I designed an innovative app named 'Read Skin.' This app provides users with easy-to-understand information about the chemical ingredients in each cosmetic and allows them to share their valuable experiences with the products.

Project Goals

  1. Help users easily understand the chemical ingredients in cosmetics by providing information in an easy-to-understand format.

  2. Enable users to avoid harmful ingredients and use cosmetics with ingredients suitable for their skin types.

  3. Build a community where users can share their experiences with cosmetics and gain helpful information from each other.

My Roles

  • To understand users' needs, behaviors, and pain points, I conducted in-depth interviews with potential users who have experienced allergies or itching due to cosmetics.

  • Created personas and journey maps to better understand the target users and designed an app that meets their expectations and delivers a superior user experience.

  • Produced detailed wireframes to visualize the app's conceptual layout and developed prototypes to demonstrate its functionality and interactions.

  • Designed the visual elements, including color schemes, typography, and icons, to make the app visually appealing and increase user engagement.

  • Developed an information architecture that organized the app's content and features, ensuring users could intuitively find the needed information.

  • Conducted usability tests with potential users to identify usability issues and gather feedback, making the product more user-centered.


Project Details

Process


Stage 1. Empathize

User Research: To gain insights into people's knowledge of cosmetic ingredients, the difficulties they experienced due to a lack of understanding, and the key features they desired in a cosmetic ingredient-checking app, I conducted thorough user research, including user interviews. Three potential users interested in skin health participated in the interviews.

Key Observations

  1. Allergies & skin irritation: All three participants reported experiencing allergies and skin itchiness caused by cosmetics.

  2. Lack of knowledge: Participants found it challenging to understand the role or function of each ingredient because the ingredients were not commonly encountered in everyday life, and they had no idea unless they worked in a chemistry-related field.

  3. Different skin types: Individuals' different skin types and characteristics made it difficult for them to understand which ingredients were beneficial or harmful to their skin.


Stage 2. Define

User Personas: To design an app tailored to users' needs, behaviors, and preferences, I created user personas based on key observations from user research. These personas guided the prioritization of features and design elements, ensured that design decisions were user-centered, and facilitated a clear understanding of user needs throughout the design process.

Journey Maps: I crafted user journey maps to visualize and understand Read Skin's interactions with users from a user-centered perspective. These maps highlighted key pain points, clarified user needs, and identified opportunities for enhancing the user experience, ensuring that Read Skin effectively meets diverse user needs and delivers a positive and engaging experience.


Stage 3. Ideate

Design Ideas

  1. Clear & user-friendly information

    The app provides ingredient information in a clear and user-friendly way, helping users easily identify the beneficial and harmful ingredients in each cosmetic product.


  2. Tailored information to skin types

    The app categorizes skin types into five categories: normal, dry, oily, combination, and sensitive. Users can select their skin type to receive customized information.


  3. Reliable product reviews

    In the app, users can share their honest experiences with products and obtain helpful, valuable information from reviews by other users with similar skin conditions.


Information Architecture: I created an information architecture that organizes content and features to enhance usability, supports intuitive navigation, and ensures users can efficiently find and interact with the information they need.


Stage 4. Prototype

Wireframes: To visualize the product's structure and functionality, I created sketches and digital wireframes. This approach enabled early identification of usability issues, efficient iteration, and clear communication among stakeholders.


Typography & Color Palette


Prototypes


Stage 5. Test

Usability tests & results: Usability tests with prototypes are essential to the UX design process because they provide valuable insights, help create user-centered designs, and save time and resources by addressing issues early in the design phase. I conducted usability tests with three potential users who had participated in user research and identified three usability issues.


⚠️ Issue 1: The product images in the search tool (recently viewed) were relatively small, making them difficult to read. Users preferred larger images that were easier to view.

🛠️ Solution: Increase the size of product images to make them easier for users to view.


⚠️ Issue 2: When users attempted to find products that include or exclude specific ingredients, the absence of a 'Select All' button proved inconvenient, as they had to click on each ingredient individually.

🛠️ Solution: Add a 'Select All' button to enhance efficiency and ensure accessibility.


⚠️ Issue 3: Participants suggested manually typing product names to search for products and access information is cumbersome.

🛠️ Solution: Install a barcode scanning feature to streamline the process. Users can scan barcodes to access product information easily and efficiently.




Future Scope

Design Iteration

To develop user-friendly and effective solutions that address diverse user needs, the next phase involves design iteration. Through a series of iterative refinements, I will identify and resolve usability issues, continuously enhance the design, and improve the overall user experience, all while encouraging creativity and innovation.

Future Scope

Design Iteration

To develop user-friendly and effective solutions that address diverse user needs, the next phase involves design iteration. Through a series of iterative refinements, I will identify and resolve usability issues, continuously enhance the design, and improve the overall user experience, all while encouraging creativity and innovation.