.svg){kind=small}
UX CaSE STUDY
Happy Skin Club
📅
Timeline
10 Weeks
👔
Roles
UX Researcher & Designer
🔧
Tools
Figma, Invision, Adobe Illustrator, Adobe Photoshop
📁
Project Type
BrainStation Capstone Project
PROJECT OVERVIEW
Background
Skincare has become a major industry, with the global market estimated to be worth $134 billion in 2018. Despite the growth of the industry, many people still struggle to find effective skincare solutions due to the vast number of products on the market, the complexity of product and ingredient information, and the lack of skincare knowledge. The explosion of information on social media platforms has further compounded these challenges, making it difficult for people to navigate the skincare landscape and find solutions for their skin concerns.
Problem Space
Skin conditions are a common problem, with 1 in 3 Americans affected. These conditions can lead to self-esteem issues for many people, as 67 percent of Americans have reported self-esteem issues linked to their skin conditions. Additionally, the abundance of skincare information available online can make it difficult for consumers to make informed decisions, as the sheer volume of information can be overwhelming and not all of the information available is accurate.
Initial Design Challenge
How might we help young adults find a skincare routine in order to boost their self esteem?
Solution Overview
Introducing Happy Skin Club
ANALYZE
Analyze Skin Health
AR technology provides an in-depth look at your skin and shows the impact of your skincare routine in real-time. With a skin health score, tracked skin data, and goal-oriented features, users can easily achieve healthier skin.
Personalize
Tailored Skincare Recommendations
AI-based algorithms deliver personalized product suggestions based on users' skin analysis outcomes, skin health score, and data from their journal entries and photos.
Simplify
Decoded Ingredient Lists
Users can gain clarity and confidence in their skincare choices by understanding the ingredients in their products. Our approach simplifies complex ingredient lists and provides users with easy-to-understand information about what they're applying to their skin.
convenience & accessibility
Available on Apple Watch
The goal of Happy Skin Club is to make personalized skincare routines simple, accessible, and enjoyable for all. With the integration of the solution on the Apple Watch, users can easily track their routines and mark them as completed, making it easier to stay on track and achieve their skin goals.
DESIGN THINKING PROCESS
Framework to human-centered solutions
Empathize
Research
Empathy Mapping
Define
Persona
User Journey
Refined HMW
Ideate
User Stories
Epics
Task Flow
Sketching
Prototype
Wireframes
Visual Design
Test
Usability Testing
Implementing Feedback
EMPATHIZE
Understanding the Users' Needs
I started this project by doing thorough research to understand the problem and the people involved. I created a research plan with clear goals, important assumptions, relevant questions, and chosen methods to ensure a well-rounded approach. The research findings provided a strong foundation for coming up with creative solutions in the later stages of the project.
Secondary Research
During the secondary research phase, I studied the skincare industry to understand its size, scope, and key players. This in-depth exploration provided valuable insights into how the industry operates and helped me grasp its dynamics more clearly.
of beauty consumers are overwhelmed by too many beauty product choices
(Automat)
of Americans have self esteem issues linked to their skin conditions
(StudyFinds)
of millennials say their purchase decisions are influenced by social media
(Deloitte)
Primary Research
I conducted primary research by speaking with 3 young adults to gain a deeper understanding of their skincare experiences and the difficulties they encounter in creating a personalized routine.
Participant Requirements
- Skincare experience: Actively engaged in skincare
- Age: Young adults, 18-32
I'll be looking up, "I have this specific skin problem" or "I need a new moisturizer" on Reddit or something, and then someone recommends something to me and then I realize that it doesn't work for me.
Jane Doe, Interviewee
The brand I primarily use is one that a friend who has really nice skin uses, and has been really into their skincare for a long time. So, I had seen it on social media that they ordered products from there. And then I was like, "Ooh, let me check it out."
Jane Doe, Interviewee
Validated findings
Revealing User Insights
Young adults use the internet for skincare research and purchases
Participants reported they used social media to learn about skincare and bought products based on marketing and recommendations.
Young adults are not talking to skincare professionals
Participants said they didn't go to dermatologists for skin issues and instead trusted online reviews from skin experts.
Young adults want clear skin
Participants mentioned that maintaining healthy skin was a motivation for using skincare products.
Empathy Mapping
With the validated findings from the primary and secondary research, I was able to delve deeper into the user's experience and gain a deeper understanding of their motivations, behaviors, and pain points. To further analyze the data, I used empathy mapping to categorize the insights gathered from the user interviews and uncover key themes. This helped me to gain a more comprehensive understanding of the user's skincare journey and to identify areas of opportunity for design solutions.
Key Themes
Overall, I found 2 key themes from my primary and secondary research.
After careful consideration, I decided to focus on professional skincare as the main theme to guide my design choices.
I discovered that young adults often find consulting with a skincare professional to be incredibly helpful in establishing a reliable skincare routine. Unfortunately, many of them face constraints such as limited budget and time availability. This theme highlights a common challenge in the skincare industry and presents an opportunity for innovative design solutions. I can create a product that helps people find effective skincare solutions without relying on constant consultations with professionals. With this in mind, I became really excited about the potential of designing a product that fulfills these needs.
Persona
In order to guide my product design decisions, I created a primary persona based on the insights I gathered from my research.
My user, a millennial woman, is motivated to improve her self-esteem through skincare but is overwhelmed by the abundance of information available online. She wants a convenient solution to receive reliable skincare product recommendations and make informed purchasing decisions.
User Journey
To gain a deeper understanding of the process by which Natalie engaged with skincare products without the guidance of an esthetician, I created a user journey map. This visualization helped me to track her journey, from researching online and purchasing a product, to experiencing disappointment when the product did not live up to her expectations. By constructing the journey map, I was able to pinpoint areas of difficulty and opportunities for enhancing Natalie's skincare experience.
Refined Design Challenge
Based on the user journey and research insights, I revised my design challenge to focus on personalization as the core epic.
How might we help Natalie find a reliable and long-term skincare routine in order to reduce the stress of having to research and purchase new products?
Ideate
Generating Solutions
User Stories
Understanding the needs of my persona I created a list of 27 user stories that address various aspects of Natalie's skincare journey, such as personalization, information access, and product recommendations.
I organized user stories into groups based on common themes or goals. As a result, I discovered 6 core epics.
Tracking & Progress
Personalization
Accessible Information
Professional Consultation
Shopping & Purchasing
Social Community & Features
Core Epic
PERSONALIZATION
I selected "personalization" as the core epic because it addresses a common challenge faced by many people in the skincare industry - the difficulty of finding a reliable skincare routine that addresses their specific skin concerns. This epic highlights the need for design innovation that can help people find effective skincare solutions without the need for regular consultations with a skincare professional, which many young adults may not have the budget or time for.
Sketching
I assembled a UI inspiration board to gather information on existing digital solutions. I used this board as a reference as I engaged in exploratory sketching. Through creating multiple versions of each page, I aimed to find the best options for a seamless user experience. After evaluating the sketches, I selected the most effective ones and documented the design process with annotations in a set of final solution sketches.
PROTOTYPE & Testing
Creating and Validating Solutions
Wireframing
I used my sketches to develop mid-fidelity wireframes that included screens for a signup flow, onboarding flow, routine customization flow, and profile editing flow. These screens were more detailed than the initial concept sketches but did not include final design elements.
Usability Testing
To create a user testing plan for my mid-fidelity prototype, I identified my specific research objectives and determined the most appropriate method for gathering feedback. This included recruiting participants that represented my target audience, creating a testing script and tasks for the participants to complete, and selecting any necessary tools for recording and analyzing the results.
After conducting 2 rounds of user testing, a refined and finalized mid-fidelity prototype was created. The design changes were made based on the feedback.
Key Takeaways
Enhancing the User Experience
BRAND
Building the brand
Brand Exploration
In my digital product development journey, I established a strong brand identity. I carefully chose a color palette, typography, and created a unique wordmark that would reflect the values of my product and target audience. This cohesive visual identity was then applied to all aspects of my application, from the application icon to the marketing website.
More "A than B" list
I started developing the brand by pinpointing descriptive adjectives that best represented it. I came up with a “More A Than B” list and found that the most appropriate words to define the brand were dreamy, fresh, glossy, and happy.
More happy than sad
More vibrant than dull
More friendly than formal
More dreamy than practical
More fun than serious
More glossy than matte
More fresh than stale
More youthful than mature
Moodboard
I used the core values of dreamy, fresh, glossy, and happy to craft a moodboard that captures the spirit of my brand. The moodboard showcases the brand's personality through visuals, textures, and colors. To ensure consistency in the tone of my app's user interface, I selected colors from the moodboard.
Brand Name
During my search for the perfect brand name, I was looking for a name that captured the essence of fun, community, and youthfulness.
Effortless skincare
Healthy skin
Glowy
Renewal
Dewy delight
A skin hug
Happy Skin
Treasure Trove
My search resulted in the selection of Happy Skin Club. This name effectively conveys my brand's purpose of delivering personalized skincare solutions that lead to clear skin and creates a cheerful, youthful, and optimistic atmosphere for my users.
App Icon and Logo Exploration
The process of creating the logo for the Happy Skin Club started with my search for typographic inspiration and the creation of a design and typographic inspiration board. I then began arranging the brand name in various sizes, weights, and orientations, adding uniqueness and nuance by converting the mark to vector outlines and modifying the letterforms.
I chose the option with the text wrapped around the illustration as the logo because it offers the greatest versatility in terms of variations and submarks. For the app icon, I decided to simply use the brand name’s initials written in the same font used for the wordmark.
Mobile App Design
After defining my product brand and color palette, I started thinking about how to bring my high-fidelity visual design elements to my prototype. I knew that I needed to focus on color, photography, illustrations, icons, typography, copywriting, as well as design layout, spacing, and interaction states.
I revisited the output document from my user testing session and my UI inspiration board. I focused on refining my high-fidelity visual design elements such as typography, colors, icons, illustrations, and copywriting.
Next, I created a style guide to assist with my high-fidelity design choices. This guide is concise and covers key elements such as the color palette, main logo, submarks, and typography, providing a unified visual language for my project.
Style Guide
High Fidelity Prototype
With the style guide in place, I was able to bring my high-fidelity design to life. I created a high-fidelity prototype that not only looked polished and professional, but also functioned like a real app, allowing for interactive elements and transitions to be tested and refined.
Expanding the brand
To effectively communicate the value of Happy Skin Club to potential users, I designed a responsive website that showcases the innovative features of my personalized skincare solution. The design journey involved finding inspiration, creating sketches, and refining the design through multiple grayscale wireframe drafts until a high-fidelity prototype was obtained.
Conclusion
Coming Next
Next Steps
Refine UI Library
It is important to refine the UI library to ensure that all the design elements, colors, typography, and components are consistent and well-documented. This will help streamline the development process and reduce the chances of miscommunication or misinterpretation.
Collaborate with Development Team
It is crucial to have a smooth handoff process from design to development. Collaborating closely with the development team will ensure that the final website meets the desired design specifications, functionalities, and user experience.
Continuously Refine
App design is not a one-time process. It is important to continuously refine the design to keep up with changing trends and user preferences. This will help ensure that the website remains engaging, effective, and relevant over time.
Key Learnings
- Getting feedback from colleagues is super helpful in gaining fresh perspectives and insights, which can lead to better design solutions.
- Through user testing, I found areas where my designs were causing friction and made improvements. This ensures a smoother and more enjoyable experience for users, increasing the likelihood of them taking the desired action.
- Drawing inspiration from different sources fuels my creativity and helps me come up with unique and inventive designs.
Thanks for
Reading!
OTHER Projects
My Work
See all
