Interactive Skincare Quiz
for Smart Purchase
UX/UI Design, New Feature, Olive Young
Project Timeline
7 weeks (Jun 2022 – July 2022)
UX/UI Designer
UX Researcher
My Roles
Miro
Figma
Maze
Tools
Olive Young is the most famous health and beauty store in South Korea for over 20 years. They sell various Korean beauty (K-beauty) products as well as healthcare products like a drug store. Olive Young has a number of beauty products with affordable prices from multiple brands and categories.
Context
Olive Young’s current website suggests multiple products to users, it does not share information between skin types and each product with them it also has lack of visibility and of showing product ingredients in detail and reviews. On top of that, users are only able to refer to reviews (text and image) from other customers when they browse products.
Problem
- Suggest skincare quiz to give users better insight to find the right products that suits their skin types, skin concerns and skincare goals
- Show improved filtering systems that users can find proper skincare products by skin type and keyword
- Improve visibility and information hierarchy in product details with product ingredients, reviews and product comparison
- Olive Young can improve the users’ online experience through better filtering systems
- Olive Young gives the users knowledge about K-beauty and its value
- Olive Young can prove the users the quality of K-beauty products through professional evaluation and validation -> Increase selling points
Opportunities
Research
In the research phase, I conducted competitive research, surveys, and user interviews. I expected to find out what people think about K-beauty products (differences between K-beauty products and American beauty products and their preferences), where they purchase them, what they consider the most when they purchase beauty products they want.
Methodologies & Research Goals
- Understand people’s thoughts about K-beauty products
- Find which platform people use mostly when they browse and purchase K-beauty products
- Find how they choose K-beauty products
- Find what consider the most before they choose K-beauty products
Objectives
- People are between 20 to 35
- People who have an experience with purchasing and using K-beauty products
- People who have no experience with K-beauty products (who want to try them)
Participants
I conducted user interviews with 4 participants who have experiences with skincare products. Interviews helped me recognize each participant’s goals and pain points from browsing and purchasing skincare products also findings from the user interviews led me to generalize a persona.
Competitive Analysis
Surveys showed me 22 participants’ experiences in browsing, purchasing, and using Korean skincare products. I learned the participants’ experiences of usage of Korean skincare products, and similarities in selecting the products. This helped me build in-depth questions for user interviews.
Surveys
- The participants use a variety of skincare products from basic skincare products to special treatment products
- Over 70% of the participants majorly consider if skincare products suit their skin type well when they select the products
- After considering products matching with their skin types, Over 60% of the participants consider product ingredients
- 50% of the participants consider price and customer reviews after the two categories
- Over half of the participants get product resources from their family or friends
- Majority of the participants learn about new skincare products from online such as YouTube, articles, or social media platforms
- 70% of the participants think that skincare products improve their skin concerns
- Over 80% of the participants had allergic reaction or irritation after using skincare products
- Over 90% of the participants used (or still using) Korean skincare products and they had positive experience since the products have good ingredients with less/none allergic reactions
Findings
Researching 3 different competitors in a cosmetic industry gave me each competitor’s strengths and weaknesses. Through this process, it helped me to understand how the competitors approach users with skincare quiz, product information, and review system to explain about products and match them with users’ skin types and concerns and give them a direction to purchase the products. It gave me a better understanding of of how Olive Young’s website would be improved to increase user activity and selling points.
User Interviews
Interview Findings
Define
After collecting data and understanding multiple users’ needs and frustrations, I created user persona and empathy map. Through the user persona, I was able to understand what features and product information I should add to Olive Young website to meet goals and also how I minimize pain points. The empathy map also helped me what I should focus on the website especially in skincare quiz and browsing products. These helped me finalize the structure of the features and build task and user flows.
User Persona & Empathy Map
Task flow is a method to understand and visualize the most necessary actions that would need to be performed by a user to take a quiz, get recommendations, browse products, purchase a skincare product. It gave me an idea of creating a user flow to provide a little bit more complex interactions which could be possible in using the website. After the task flow, I created a user flow to show how a user acts at each decision point.
Task Flow & User Flow
Ideate
I sketched design layouts of the website with new features such as quiz, navigation, icons, product detail, and additional elements. I was able to predict which layout would work well for good usability.
Pen & Paper Wireframes
It is page layouts in greyscale that would be required for building high-fidelity wireframes. It helped me understand overall layouts before seeing the high-fidelity design and organized information hierarchy via visual.
Low-Fidelity Wireframes
Before going to high-fidelity wireframes, I looked Olive Young’s current typography style and brand colors. Also, to give improved visual, I decided to add icons for the skincare quiz and product detail pages.
Style tile
High-fidelity wireframes of Olive Young’s website with brand identity and color palette, icons, images and copies. With the skincare quiz, improved product detail page, I added check out pages to show user flow that how users can browse product, check product details, and purchase the product. Also, product listing page is shown as well for how users can search specific products through new filtering system. Creating wireframes and prototype based on the brand styles made me feel what the actual prototype would look like. This process made me want to see what potential users think about this wireframes and how they complete tasks through this.
High-Fidelity Wireframes
Prototype
I created a prototype with the high-fidelity wireframes for testing the new features that are skincare quiz, product detail page, and product list page. This showed all the possibilities that a potential user can make such as getting recommendations and checking product ingredients and reviews.
High-Fidelity Prototype
Usability Testing
I conducted a usability test for Olive Young website via Maze to understand potential user’ performances when they proceed with 4 tasks. It gave me a chance to see what they thought of my output, how they complete the given tasks and why they incomplete the tasks. I was able to analyze what worked well and what needed to be improved. I was able to analyze what worked well and what needed to be improved. It also helped me to iterate the high-fidelity wireframes based on findings from the user testing.
User Testing via Maze
After the user testing, I created an affinity map based on the testing results and users’ comments. It showed me that which part of the prototype worked well and which part made that users got confused. It also gave me a direction to improve design for better usability.
Affinity Map
Iterate
Based on few suggestions from the users, I edited the high-fidelity prototype. I decided to add icons to each navigation menu to give users better visibility and understanding of the navigation since some of the users was unable to find Skin Quiz at first. Also, it was a minor change, I used more engaging copy on the first page of the Skin Quiz to make them interest about finding skincare products.
Improvements
Reflection
From researching to creating the final mockups, I was able to learn understanding what users need when they select skincare products and what they care about the most before purchasing. The whole processes gave me how to build an intuitive, straightforward, and efficient product to meet both business’s and users’ goals.
What I learned…
Next Steps
- Since the current Olive Young’s website layout is a bit far from modern and young aesthetics, I would like to try to redesign the whole website to meet the young generation’s visual taste.
- Further testing and iteration: I would like to experiment what users think about new design of the website and if the design is usability enough that they can complete tasks from browsing to completing purchase.