top of page
Frame 59.png

CASE STUDY

Lumi

Overview

Lumi is a beauty app that gives product recommendations according to a user's preference and needs for skin care. 

Group 288.png

  • UX research

  • Interface Design

  • Prototyping

Role

171594_work_icon.png
Group 288.png

Timeline

3507754_iconoteka_time_timeline_icon.png

6 weeks

Group 288.png
1564515_call_device_mobile_phone_smartphone_icon.png

Platform

iOS Mobile App

Problem

Since the recent rise of the concept of  "self-care", hugely fueled by social media, skin care has become a ritual element that has coincided with the corporatization of self-care. Skincare, as a market segment, is growing faster than any other part of the beauty industry, and existing and new skincare brands have launched thousands of skin care products to follow the trends. Yet, it has created the Paradox of Choice where consumers are confronted with too many choices, making it more challenging to make decisions or to be satisfied with the decisions they do make.

 

Moreover, deceptive or misleading marketing in skin care negatively affects consumer behavior which shows the decision to repurchase a product and results in disloyalty towards the brand. 

Goal

The goal of this case study was to create a beauty app that incorporates customer analysis and the beauty market, provides an easier yet effective skin care product search for users, and displays trends into the experience in real-time to increase the level of customer satisfaction and engagement. 

So...?

Rubik's Cube

Create an app that curates a product recommendation and customized skincare routine through machine learning algorithms that analyze the given data. 

My​

49827_check_done_icon_edited.png

User Experience Design Process

1_33khN9zpFCMWnF8pLqeVTQ_edited.png

  • Usability Testing

  • Analysis 

  • Secondary Research

  • User Survey

  • Data Visualization

  • User Journey

  • Competitive Analysis

  • Pain points

  • Task Flow

  • Card Sorting

  • Information Architecture

  • Paper Wireframe

  • High Fidelity Wireframe

  • Prototying

01 Empathize

Quantitative research: User Survey

Group 288.png

# of Q

 

10 Q

Group 288.png

Duration

 

7 days

Group 288.png

Participants

 

19

Survey participants were asked to answer closed & open questions about their attitude/perspectives on skin care and any concerns they have when purchasing products.  

Participant Demographics

Gender

Age group

How knowledgeable are you about skincare?

More than half of the participants showed confidence in knowing skin care to some degree.

 

This indicates they will be more likely to be uncertain and unconfident when building a new skincare routine or buying new products.

 

Having knowledge of skincare is important because the skin is essential to general health and it can help to take care of oneself. This is why it is so important to be knowledgeable and have a well-thought-out skincare routine. 

Do you need different skincare products/routines for morning and evening?

Do you change your skincare routine seasonally?

63% of the participants expressed that they need to adjust their skincare routine for the changing seasons and from day to night. It means that they tend to purchase various skincare products for separate routines.  

What is your attitude towards skincare? 

The majority of the participants were willing to try out new skincare products and hoped to discover more effective products for their skincare.

​

It demonstrates customers will be more likely to have an easier time looking out for new products and be more satisfied with the products they purchase if there is some type of assistance or advice. 

Before purchasing any skin care product,

The survey indicates that the majority likes to know about products prior to purchasing them. 

​

The big difference in how or where they ask for recommendations indicates that participants tend to do self-research or ask someone they know. Getting out of their way to ask an unknown person, such as a store associate, might discourage them to ask for advice. 

How interested are you in building the correct order or routine for your skin care?

The majority expressed their interest and acknowledged the importance of having the correct skincare routine. 

​

Since the majority of the participants showed a positive attitude toward skincare, they will be more likely to be content if they are able to discover products that work well with their skin type and attribute positively to their skincare routine. 

Rate your concern when purchasing skin care products.

The survey demonstrates participants care most about the effectiveness and the ingredient combination of different products when looking for skin care products. Meanwhile, cost and user-generated content were chosen as the least important factors.

​

To increase customer satisfaction, it is essential for customers to obtain correct information about products, and proper guidance might be helpful for them if they are trying to explore new skincare products or routines.

Have you ever answered questions to receive product recommendations for your skin care before purchasing products online?

39% of the participants have gotten online product recommendations through answering questions or quizzes. 

​

This could potentially mean either the skincare quiz has not been widely implemented in the beauty market or customers are reluctant to take their time to answer questions. 

Key Insights

Secondary Research

Vogue

"Zero-party data"​

​

  • data, collected consensually, that is used to customize products, services and experiences to the shopper. 

  • increase engagement and build loyalty from the customer side 

increased order value by 134%

Global

Cosmetic

Industry

Always on the lookout for new facial skin care products

​

Seek out advice/recommendations on skin care products

Always on the lookout for something better, even if satisfied with her current skin care

InStyle

Images from InStyle

4 major

skin types

15 major skin concerns

Key Insights

02 Define

Competitive Analysis 

Why? 

A web-based magazine focused on beauty that offers beauty tips, trends & product reviews

French multinational retailer of personal care and beauty products 

Beauty retailer with powerful digital marketing used for building customer base and sales

Key Insights

User Journey

A chart that focuses on the overall experience, including actions, emotions, and thoughts, of an individual user and provides personal narratives. 

highlighter_edited.png

Pain Points

Proposed Solutions

Time

Time-consuming and challenging to searching for skin care products that fits the right skin type without correct knowledge

Satisfaction

Purchasing an uncertain product can lower consumer dissatisfaction due to unmet expectation 

Product Side Effects

Potential risks of using products with harmful ingredients can cause short/long term health issues

Engagement

Frustration on wasting money on wrong products can result passive attitude in purchasing products  

Easy Navigation

Create an organized, easy navigation for users to easily explore and learn about products

Product Recommendations

Create a quiz for users to help them figure out their skin type and effective products that target their skin concerns

Ingredient Label

Generate ingredient labels to alert users the level of harmfulness

Support

Create a community/forum to provide skin care advice/tips for users.

03 Ideate

Card Sorting

This diagram is designed to categorize all the features under different sections to help organize the information architecture in the later ideate stage. 

Since the purpose of the app is to provide informative skincare information and make it more effortless for users to discover skincare products that work well with their skin type, the main features of the app will be providing essential product information that addresses the user's skin type or concerns. 

Information Architecture

The purpose of IA is to focus on the organization of the information and structure content to present to users in the best possible way before the wireframing stage. 

As mentioned above, the user dashboard and profile will be focused on customer individuality and product personalization in order to make it easier for the user to discover the right information, instead of having to go through other unnecessary products. 

04 Prototype

Paper Wireframes

The goal of paper wireframing is to map information architecture and visualize user flows.

The onboarding section includes the app start page, 3 feature demonstration pages, and a login page. As users go through the onboarding process, they will be able to skip the process. 

​

Pop-up messages will share details about the core features of the app and aim to give a friendly, conversational feel to new users. 

This section includes the dashboard and a user's profile page. The sketches demonstrate the user's flow from browsing the dashboard to taking a skin care quiz in her profile section. 

​

Two types of quizzes will include about 5-7 questions for a thorough analysis to present the most accurate result possible. 

This section demonstrates the user flow from searching for a specific skin care product to reading product info. 

​

The product search page will provide 3 search types and 6 different categories for products.  

​

 

Horizontal scrolling containers will be added for an easier browsing experience. 

Design Elements

Colors

curved-arrow.png

Bright, happy, uplifting

Hope, health, happiness 

curved-arrow.png

Neutrality, balance

curved-arrow.png

Peace, harmony, sophistication

#FBE0C3

#FFBB98

#7D8E95

#344648

The colors I used for this project mostly have a pastel tone to them. Instead of using primary colors, I decided to use pastel colors to give a more delicate, feminine, and softer feel to it to match the skincare theme. They also work well with neutral colors to create a feeling of relaxation and sophistication.

 

Skincare gives a well-deserved serotonin boost. Warm pastel orange colors are used to provoke comfort and warmth and dark olive color (#344648) to have a concrete contrast with the other lighter colors, instead of using black as a body text color. 

 

Because the target audience of the app is users who are interested in improving their skincare, they will be more attracted to neutral colors that provoke a calming, soothing, peaceful vibe.  

Typography

curved-arrow_edited.png

Titles, headings

curved-arrow_edited.png

Body text

NT Josefine is used to create a feeling as if users are reading fashion blogs and magazines since the app features not only product information but also skincare tips and articles. Because of its high-contrast stokes and stylish effects, it captures users' attention better when reading headings and titles. 

​

Chivo is the first Omnibus-type neo-grotesque typeface family. Its solidness and balanced stokes make the font ideal for body texts. Because the font has both feminine and masculine characteristics, it works well in digital projects and textbooks and incorporates practicality when reading body texts. I used this font for the body texts to create contrast with the other heading font yet still make it easier for users to capture text elements. 

curved-arrow.png

Hi-Fi Wireframes

A high fidelity wireframe captures the look and feel of the app and includes actual content, typefaces, colors image dimensions, and branding elements. 

Onboarding

Animated loading icon

curved-arrow_edited.png

Blob background

Social Login option

Animated loading icon

As the user begins the onboarding process, I incorporated design elements (drop shadows, blobs, ellipsis) to make the process more interesting and interactive. 

 

Blobs are added to create separations and add visual variety & more depth to the design. 

Animated loading icons after each specific onboarding process are added to separate contents and boost engagement. 

​

There is an option to sign in with the user's social account to create a more efficient and accessible registration process.

Dashboard + Navigation

Dashboard revised.png
Dashboard 2.png

Automatic slide animation

curved-arrow_edited.png

Navigational

dots

Button

Dashboard 3.png

Navigation bar

curved-arrow_edited.png

Horizontal carousel

The main dashboard features three different banners that display the core functionalities of the app. By clicking the banners, the user will be able to access the page directly. The shape of the banners are blobs to add a sense of brand cohesion, visual continuity, spatial separation, and softness. The dots indicate how many slides total and where is the slide deck the user is now. The arrow button enables manual navigation. 

​

The horizontal carousel contains the image of products without a product title to offer a more simplified, clean look. The carousels on the dashboard page work as a gallery, which the user can simply browse through without having to be overloaded with too much information. Automatic animation allows the user to effortlessly scroll through the slides; yet, the arrow button also enables manual navigation. 

​

The search bar is located in the middle of the page to provide easier access for the user to find a targeted item. When the user taps the navigation bar, a dark, blurred background will instantly cover the dashboard, which helps the user keep her focus on the navigation bar. 

User Profile + Quiz 

Horizontal carousel

curved-arrow_edited.png

Module tabs

Progress indicator

The user profile page features two types of quizzes, goals, and a brief description of the user's skin conditions. Those features enable the user to discover the needs for her skincare routine. The quizzes are added right below the user profile content to signify one of the primary features of the app and make it more straightforward for the user to locate the quizzes. The shape of the user profile image is also a blob, instead of a perfect oval, to maintain the visual consistency of the app.

​

The progress indicator in the quiz section is to inform the user about the status of ongoing processes and encourage the user to stay on course. The square card optimizes efficiency and productivity by including both images and the context, which drives an easy comprehension of each answer. The user will be able to skip every question since she might be uncertain about the question or her skin condition. 

Animated loading icon

Module tabs

Download,

share icon

After the user successfully completes the quiz, the app will show the result, including the description of her skin type, causes, and advice. The module tabs maximize the space of the page as well as deliver easier access to each category.  

Furthermore, the user will be able to navigate a personalized routine with several recommended products, according to the result, by accessing the product recommendation tab located in the bottom left corner. 

Recommended Product/Routine

Toggle tabs

Horizontal carousel

Dark mode

The user will be able to get a personalized routine according to her skin type, and/or the quiz result, and browse recommended products for each skincare routine. Products are chronologically organized by each step to provide the user with a less complicated way to discover new products.

 

The toggle tabs allow the user to switch from morning to night routine, making it effortless for the user to differentiate between the morning and night routine. Likewise, a dark mode get turned on when the user taps on the night tab, and it provokes a night feel and gives a clear difference between the morning and night routine.  

Product Search

To browse a product, the user will be able to access the product search page through the navigation bar. The first product search page includes three categories (category, ingredient, brand), and the user can select a specific product category according to her preference. 

​

When a specific product category is selected, a vertical scrolling effect enables the user to browse through products, and the toggle tabs offer the user to option to accommodate her needs in line with an appropriate skin type. 

Toggle tabs

Vertical scroll

Ingredient indicator

curved-arrow_edited.png

Swipeable card

curved-arrow_edited.png

Save, share icon

The product information page gives a detailed description of a selected product, including its product core features, the suitability for different skin types, and the list of ingredients. The user can also save and share the product with the save and share icon. 

 

The ingredient indicator, separated by the colors green and red, informs the user the harmful level of a product. To further inform the user, the entire list of the ingredients appears in a card when the user taps on the "view all" button. This is designed as a swipeable card to not overload the user with too much information. 

Beauty Tips 

This page intends to inform and deliver beauty tips/advice for the user to improve her skin care practices. The toggle tabs offer the user an option to choose a topic according to her interest and needs. The tabs include various topics, such as tips, products, news, and wellness, to provide diversified information to accommodate the user's interests. 

 

With the vertical scrolling effect, it allows the user to continuously browse numerous articles, and the search icon makes it easier to search for a specific topic or an article. 

​

The blob background is used as the lowest design layer of the page to give a deeper spatial separation between the background and content. 

Search icon

Toggle tabs

Blob background

Vertical scroll

Group 95.png

The Results

05 Test & Feedback

Process

​

  1. 12 interviewees who previously participated in the survey were asked to test the Figma prototype.

  2. During the 1:1 session, each participant was given a detailed scenario/task to complete and also questions to consider prior to launching the test. 

  3. After the session, each user was asked to answer a few questions that were given prior to the testing. 

  4. After gathering the responses, I assessed the findings and their feedback and organized shared comments in a feedback capture grid. 

Scenario/Task

  1. You want to know the list of all ingredients in a product. 

  2. Browse one of the latest skincare news.

  3. Because you are new to skincare, you want to know what your skin type is and explore products that match your skin type. 

  4. Discover your recommended skincare routine. 

  5. After taking the skin type quiz, find the description, causes, and advice for your skin type.

  6. Search for a serum that is recommended for oily skin types. 

Questions to Consider

  1. Do you like the interface? Is it easy to use?

  2. What do you think about how information and features are laid out?

  3. Overall, what's your experience with the app?

  4. If you could change one thing about the app, what would it be?

  5. How was your experience completing the task?

  6. What did you think of the design overall?

  7. What one thing are you most excited about with the app? Why?

Feedback Capture Grid

It allows participants to contribute useful critiques and ideas to improve the prototype design and gather their feedback into 4 quadrants:

​

Likes, Criticism, Questions, Ideas. 

  • The overall design of the app looks simple and clean.

  • The colors are well-coordinated and make it easy to read information.

  • Seamless transitions and animation.

  • Informative and helpful to know product/routine recommendations. 

  • Mismatching font for some headings and titles.

  • No shortcut to access the recommended product/routine.

  • Missing a button that can load more articles.

  • Why isn't there a detailed description of a product?

  • Will the content of the quizzes be updated regularly?

  • Is it possible to access the product/skincare recommendations content without taking the quiz?

  • Micro-interaction icons.

  • A button to access the recommendation content.

  • More specific product categories (eye cream, facial oil, etc...)

  • User-generated content to increase engagement

Reflection

Challenges

  • The number of responses did not match the number of survey participants. One participant began the survey but never finished.

  • Incorporating new Figma prototyping animation features.

  • Importing high resolutions images to the design 

  • Gathering a survey population that ranges from under 18 to 52.

  • Organizing products according to specific skin types and concerns.

  • Learning about skincare routines.

What I learned

  • Carousel and automatic slide prototyping animation in Figma

  • Balancing between design, features, and content

  • Including the onboarding procedure

  • Importing and incorporating animated icons into the design

  • Conducting a remote user survey through Maze and remote usability testing in Figma by sharing the prototype with participants

  • Creating icons as components and using an auto-layout feature in Figma

  • Importance of user-friendly UI buttons and appropriate spacing and alignment

  • Incorporating a dark mode to enhance one of the app features

  • Analyzing the survey result and converting the analysis into visual graphs that are easier to comprehend 

  • Applying various types of prototyping animation to boost UI interaction

  • Blobs create separations and add visual variety & more depth to the design

  • Creating mockup designs

warning.png

Mistakes 

  • Unable to track a survey participant who did not complete the survey

  • Needed more thorough research about skincare to target a wider range of skin concerns

  • The use of low-resolution images for the skin type quiz and the result

  • Overwhelming users with too much information on the quiz result page

  • Not making sure that the colors used in the design pass the Web Content Accessibility Guidelines (WCAG) 

Next steps

  • Run color contrast accessibility evaluation tools, such as the WebAim Contrast Checker Tool, to maintain color contrast standards. 

  • Learn other UX/UI terms for better explanations and communication 

  • Choose a new design or wireframing tool and conduct the next project

  • Build deeper foundation typography to enhance readability and usability 

  • Consider making the next project to be more social and include more features that connect to social platforms

  • Learn to use other visual images, such as videos, 3D models, etc..., to optimize content readability

Task Flow

A diagram that represents a user's journey through a specific task and gives an understanding the complexity required to get a user from intent to completion. 

Layla, the 28 year old accountant who is interested in learning about her skin type and purchasing her new skin care products. 

bottom of page