Project overview
Project overview
Lumi is an educational skincare management app where users can scan products to instantly access ingredient information, product details, and usage instructions, helping them assess compatibility with their needs and optimize their skincare routines. Lumi makes skincare simple, educational, and accessible to all, fostering confidence and consistency in skincare journeys.
Background
Skincare routines can be complex and overwhelming, especially with so many products on the market and the challenge of understanding all their ingredients, benefits, and risks. Research shows that 69% of consumers have purchased health or beauty products without fully understanding the label. Without clear product and ingredient information, many people are left guessing which products will work for their skin, how to build a routine that meets their needs, and how to avoid harmful combinations or irritating ingredients when adjusting that routine.
Problem
Without a resource to verify product information and learn about active ingredients, many people struggle to understand ingredients, determine application order, and ensure compatibility with their skin, often leading to frustration, adverse reactions, or ineffective routines. As more users become skincare-conscious, there is a growing need for a tool that helps individuals confidently build and adjust routines tailored to their needs.
Identifying key challenges
Research
While my recent interest in skincare and skincare knowledge inspired me to explore this topic, I recognized that relying on just one perspective wouldn’t be enough to design an app that truly meets the needs of a broad audience. To make sure this project was not just another skincare app with generic recommendations, I started with research.
Goals:
Understand user struggles with product selection and routine management.
Understand how users research and gather information about skincare products.
Understand how users interpret and utilize ingredient information and compatibility tools to minimize risk.
Methods:
User interviews
Competitive analysis
Competitive analysis
I did some research on direct competitors to see what is currently being offered and identify what gaps a new platform can focus on improving, specifically focusing on education, flexibility, and reliability.
Key takeaways
Avoid information overload
Many existing apps offer detailed information but end up overwhelming and confusing users. The sheer volume of content, combined with complex layouts, negatively impacts the overall usability of the product.
Ensure ingredient transparency
Many apps restrict access to product and ingredient information behind paywalls, which reduces accessibility and alienates users who cannot afford to pay for these essential features.
Predictive & proactive skincare management
Current recommendations often feel generic and focus on reactive skincare management. Using AI to offer predictive, proactive guidance would help users optimize their routines before problems occur.
User interviews
I conducted virtual interviews with six participants, ages 22 to 56, to uncover their needs, goals, motivations, and pain points. My focus was on understanding what users prioritize when selecting a new product to add to their skincare routine. This would allow me to begin shaping a feature set that would be more closely aligned with their actual needs.
Shaping a solution
Affinity mapping
I used the data from my user interviews to create an affinity map, helping me identify recurring themes and pinpoint key problems to solve.
Key insights
Users feel lost and overwhelmed with all the skincare advice out there.
Users want help building a routine without worrying about product or ingredient compatibility.
Users need clear ingredient information because ingredient details are hard to understand.
Users need help applying products in the right order to see skin improvements.
Design an app that:
Offers personalized routine adjustments
Tailor recommendations and proactive tips to individual skin types, concerns, and lifestyles for optimal results
Improves skin health outcomes
Provide users with clear, digestible product and ingredient information to help them confidently choose the right products and obtain visible skincare improvements
Aids in efficient routine management
Simplify skincare routines by helping users understand correct product order, while also informing them of ingredient warnings and risks
User personas
I was surprised to learn that, regardless of their level of skincare knowledge—whether beginner or expert—users struggled with understanding ingredient information and the overwhelming amount of content available. This insight led me to create two personas: The Relaxed Beginner and The Consistent Guru. Developing empathy maps for these personas helped guide my designs to address the unique challenges faced by both types of users.
Task flows
Using insights from user interviews, I identified three key tasks to focus on for future testing. I created task flows to ensure the design matched user priorities and determine which screen designs to prioritize.
Site mapping
After defining the main features I wanted to include in the MVP (tailored recommendations, product scanning, routine optimization), I designed a site map to structure the app. My focus was on creating a user-friendly layout that prioritized accessibility and intuitive navigation.
Lofi wireframes
With task flows in mind, I sketched out some key screens to prioritize organization and structure. After researching effective design patterns, I decided on a user-friendly interface featuring key screens such as educational product/ingredient breakdowns, a user-friendly onboarding flow, and a routine optimization modal, to address main user pain points brought up during interviews.
Mid-fidelity wireframes
When digitizing the sketches, I focused on visual hierarchy and clear navigation.
Early usability testing
To improve usability and validate interactions throughout the design, I conducted early usability testing, focusing on flow navigation, clarity of information on detail-heavy screens, and understanding of the scanning process.
While all participants were able to complete main tasks, and the skin quiz and product/ingredient details were easy to understand, there were some key issues that came up during testing:
Some users noted that the amount of text on certain screens, particularly the Home screen and Ingredient Details screen, felt overwhelming, causing them to skip over large paragraphs.
Users wanted additional context on the routine page, since the current list of product types left them unsure if it represented a starting template or a completed routine.
Users suggested incorporating a rescan option to avoid navigating to the results page and having to restart the scan process entirely.
Visuals
Branding
I focused on branding by first defining four core values: transparency, personalization, accessibility, and education. I selected Raleway as the typeface for its elegant sans-serif style, complementing the logo and fine-line aesthetic of the brand.
I also designed a simple and minimal, yet elegant logo to convey sophistication and credibility. This approach avoided creating a playful or unprofessional feel for the app, aligning the brand with a more educated and trustworthy image.
For the color palette, I chose green/earthy tones as primary colors and skin tones as secondary accents. I validated my color palette through feedback from fellow designers, resulting in a cohesive and well-integrated UI library.
High-fidelity designs
After incorporating the visual elements into the design, I focused on improving the user experience by simplifying and structuring information to minimize cognitive overload on key screens.
The proactive recommendations on the home screen were reorganized into a carousel format with imagery, introducing interactive elements that enhanced both visual engagement and user interaction.
The routines screen and cards were redesigned to display product names and visuals, mimicking a shelf-like layout. This enables users to quickly view and identify their skincare products easily, reducing the need to click into each routine for detailed information.
Prototyping
Fixed Elements
In my prototype, I prioritized ensuring that the bottom navigation and primary buttons remained fixed and visible, regardless of the user's scroll position. This eliminated the need for users to scroll all the way down on screens with extensive content, such as the product details page, enhancing usability and accessibility.
Animating the scan feature
When prototyping the scan feature, I animated the screens to display the scanned product's results at the bottom of the screen after scanning, giving users the flexibility to decide how they want to interact with the results rather than being automatically redirected to the product details page—an issue identified during the initial round of usability testing.
Usability Testing
I conducted a second round of testing with the high-fidelity prototype to evaluate three key flows: onboarding, product scanning, and routine creation. The goal was to validate the revisions made after the initial usability test and identify any remaining issues or potential improvements to further enhance the design.
Key metrics:
Task completion rate (>90%)
Error rate (Low)
Time on Task (low)
User satisfaction (High)
Priority Revisions
Is there more?
While observing user reactions to the product details screens, users expressed a desire for more information. They appreciated the clear separation of sections, which made the content easier to read and digest, but felt additional details, such as product benefits and uses, were missing.
When informed that product uses were displayed only after adding the product to their routine, users indicated they wanted this information upfront to make more informed decisions. This feedback prompted a redesign of the screen to include these essential details before adding a product to a routine.
Optimize your routine
The optimize routine modal now includes interaction warnings and suggestions to inform and warn users about specific details/products in their routine. This redesign addressed user feedback from usability testing about missing details and information that they expected to see in this section.
Unexpected feedback
When testing the product scanning and "Add to Routine" process, users gave surprising feedback about the feedback notification. Since adding a product takes three intentional taps, they found the "Undo" less helpful and preferred a "View Routine" option instead. This would allow them to quickly review their updated routine or check for any missing products right after adding a new one.
Final Designs
Proactive recommendations
Lumi offers a unique approach to skincare by providing proactive tips based on environmental factors like weather, humidity, and location. For example, users in humid areas may need less moisturizer than those in dry climates. Lumi uses this data to customize the app experience, tailoring recommendations specifically to each user.
Onboarding
Users can easily set up an account using their email or speed things up by signing in with their social media profiles. Our new user feature screen highlights the app’s main features, giving users a preview of what the app offers.
A tailored experience
The skin quiz gathers information about users' skin type, concerns, and preferences, enabling the app to deliver personalized recommendations for optimal skin results. By understanding each user's unique needs, the app provides customized product suggestions and routine tips, ensuring a skincare journey that is both effective and enjoyable.
Manage your routines
The routines feature allows users to easily create, manage, and track their skincare routines in one place. Each routine can be individually built and optimized, with the app highlighting potential product interactions and providing specific recommendations based on the products in that routine. This personalized guidance ensures users achieve the best results while maintaining a safe, optimized skincare regimen—directly addressing a key pain point highlighted during user interviews.
What is this product?
The product scanning feature allows users to quickly identify products and access detailed ingredient information, helping them make informed decisions and confidently add products to their routine. Many users shared in interviews that they often rely on trial and error, so this feature saves them time and helps them avoid products that aren’t the right fit.
Final Prototype
Next Steps
Future considerations
In designing the MVP, I faced the challenge of determining which screens to include. After referencing my research and user data, I decided not to design the additional screens that would be accessed through the home page CTA and carousel items. For example, screens that would lead to more specific search pages for types of products or ingredients were not included in the initial designs. This decision allowed me to focus on addressing the main problem, as discovery was not a key goal for this product.
However, I would include these screens in future iterations, particularly during further development in collaboration with developers. I would prioritize adding these features to enhance product discovery, creating a more comprehensive user experience. This approach will help us address more specific user needs and expand Lumi's functionality in subsequent phases.
Reflection
A key challenge in designing for this topic was learning about skincare and understanding what users prioritize, especially as someone who was new to the subject myself. I enjoyed interviewing both novice and experienced users, gaining insights from their journeys. Their tips and experiences helped shape my understanding and allowed me to design a better, more tailored experience that meets their needs and enhances their current experience.
A highlight for me was showing the prototype to these users and seeing how impressed and valued they felt when key features addressed their most significant pain points. Many encouraged me to take the project further, inspiring me to start conversations with developers about turning Lumi into a personal project for full development.
Thank you for reading!
Final Prototype
Next Steps
Future considerations
In designing the MVP, I faced the challenge of determining which screens to include. After referencing my research and user data, I decided not to design the additional screens that would be accessed through the home page CTA and carousel items. For example, screens that would lead to more specific search pages for types of products or ingredients were not included in the initial designs. This decision allowed me to focus on addressing the main problem, as discovery was not a key goal for this product.
However, I would include these screens in future iterations, particularly during further development in collaboration with developers. I would prioritize adding these features to enhance product discovery, creating a more comprehensive user experience. This approach will help us address more specific user needs and expand Lumi's functionality in subsequent phases.
Reflection
A key challenge in designing for this topic was learning about skincare and understanding what users prioritize, especially as someone who was new to the subject myself. I enjoyed interviewing both novice and experienced users, gaining insights from their journeys. Their tips and experiences helped shape my understanding and allowed me to design a better, more tailored experience that meets their needs and enhances their current experience.
A highlight for me was showing the prototype to these users and seeing how impressed and valued they felt when key features addressed their most significant pain points. Many encouraged me to take the project further, inspiring me to start conversations with developers about turning Lumi into a personal project for full development.
Thank you for reading!
Project overview
Lumi is an educational skincare management app where users can scan products to instantly access ingredient information, product details, and usage instructions, helping them assess compatibility with their needs and optimize their skincare routines. Lumi makes skincare simple, educational, and accessible to all, fostering confidence and consistency in skincare journeys.
Background
Skincare routines can be complex and overwhelming, especially with so many products on the market and the challenge of understanding all their ingredients, benefits, and risks. Research shows that 69% of consumers have purchased health or beauty products without fully understanding the label. Without clear product and ingredient information, many people are left guessing which products will work for their skin, how to build a routine that meets their needs, and how to avoid harmful combinations or irritating ingredients when adjusting that routine.
Problem
Without a resource to verify product information and learn about active ingredients, many people struggle to understand ingredients, determine application order, and ensure compatibility with their skin, often leading to frustration, adverse reactions, or ineffective routines. As more users become skincare-conscious, there is a growing need for a tool that helps individuals confidently build and adjust routines tailored to their needs.
Identifying key challenges
Research
While my recent interest in skincare and skincare knowledge inspired me to explore this topic, I recognized that relying on just one perspective wouldn’t be enough to design an app that truly meets the needs of a broad audience. To make sure this project was not just another skincare app with generic recommendations, I started with research.
Goals:
Understand user struggles with product selection and routine management.
Understand how users research and gather information about skincare products.
Understand how users interpret and utilize ingredient information and compatibility tools to minimize risk.
Methods:
User interviews
Competitive analysis
Competitive analysis
I did some research on direct competitors to see what is currently being offered and identify what gaps a new platform can focus on improving, specifically focusing on education, flexibility, and reliability.
Key takeaways
Avoid information overload
Many existing apps offer detailed information but end up overwhelming and confusing users. The sheer volume of content, combined with complex layouts, negatively impacts the overall usability of the product.
Ensure ingredient transparency
Many apps restrict access to product and ingredient information behind paywalls, which reduces accessibility and alienates users who cannot afford to pay for these essential features.
Predictive & proactive skincare management
Current recommendations often feel generic and focus on reactive skincare management. Using AI to offer predictive, proactive guidance would help users optimize their routines before problems occur.
User interviews
I conducted virtual interviews with six participants, ages 22 to 56, to uncover their needs, goals, motivations, and pain points. My focus was on understanding what users prioritize when selecting a new product to add to their skincare routine. This would allow me to begin shaping a feature set that would be more closely aligned with their actual needs.
Shaping a solution
Affinity mapping
I used the data from my user interviews to create an affinity map, helping me identify recurring themes and pinpoint key problems to solve.
Key insights
Users feel lost and overwhelmed with all the skincare advice out there.
Users want help building a routine without worrying about product or ingredient compatibility.
Users need clear ingredient information because ingredient details are hard to understand.
Users need help applying products in the right order to see skin improvements.
Design an app that:
Offers personalized routine adjustments
Tailor recommendations and proactive tips to individual skin types, concerns, and lifestyles for optimal results
Improves skin health outcomes
Provide users with clear, digestible product and ingredient information to help them confidently choose the right products and obtain visible skincare improvements
Aids in efficient routine management
Simplify skincare routines by helping users understand correct product order, while also informing them of ingredient warnings and risks
User personas
I was surprised to learn that, regardless of their level of skincare knowledge—whether beginner or expert—users struggled with understanding ingredient information and the overwhelming amount of content available. This insight led me to create two personas: The Relaxed Beginner and The Consistent Guru. Developing empathy maps for these personas helped guide my designs to address the unique challenges faced by both types of users.
Task flows
Using insights from user interviews, I identified three key tasks to focus on for future testing. I created task flows to ensure the design matched user priorities and determine which screen designs to prioritize.
Site mapping
After defining the main features I wanted to include in the MVP (tailored recommendations, product scanning, routine optimization), I designed a site map to structure the app. My focus was on creating a user-friendly layout that prioritized accessibility and intuitive navigation.
Lofi wireframes
With task flows in mind, I sketched out some key screens to prioritize organization and structure. After researching effective design patterns, I decided on a user-friendly interface featuring key screens such as educational product/ingredient breakdowns, a user-friendly onboarding flow, and a routine optimization modal, to address main user pain points brought up during interviews.
Mid-fidelity wireframes
When digitizing the sketches, I focused on visual hierarchy and clear navigation.
Early usability testing
To improve usability and validate interactions throughout the design, I conducted early usability testing, focusing on flow navigation, clarity of information on detail-heavy screens, and understanding of the scanning process.
While all participants were able to complete main tasks, and the skin quiz and product/ingredient details were easy to understand, there were some key issues that came up during testing:
Some users noted that the amount of text on certain screens, particularly the Home screen and Ingredient Details screen, felt overwhelming, causing them to skip over large paragraphs.
Users wanted additional context on the routine page, since the current list of product types left them unsure if it represented a starting template or a completed routine.
Users suggested incorporating a rescan option to avoid navigating to the results page and having to restart the scan process entirely.
Visuals
Branding
I focused on branding by first defining four core values: transparency, personalization, accessibility, and education. I selected Raleway as the typeface for its elegant sans-serif style, complementing the logo and fine-line aesthetic of the brand.
I also designed a simple and minimal, yet elegant logo to convey sophistication and credibility. This approach avoided creating a playful or unprofessional feel for the app, aligning the brand with a more educated and trustworthy image.
For the color palette, I chose green/earthy tones as primary colors and skin tones as secondary accents. I validated my color palette through feedback from fellow designers, resulting in a cohesive and well-integrated UI library.
High-fidelity designs
After incorporating the visual elements into the design, I focused on improving the user experience by simplifying and structuring information to minimize cognitive overload on key screens.
The proactive recommendations on the home screen were reorganized into a carousel format with imagery, introducing interactive elements that enhanced both visual engagement and user interaction.
The routines screen and cards were redesigned to display product names and visuals, mimicking a shelf-like layout. This enables users to quickly view and identify their skincare products easily, reducing the need to click into each routine for detailed information.
Prototyping
Fixed Elements
In my prototype, I prioritized ensuring that the bottom navigation and primary buttons remained fixed and visible, regardless of the user's scroll position. This eliminated the need for users to scroll all the way down on screens with extensive content, such as the product details page, enhancing usability and accessibility.
Animating the scan feature
When prototyping the scan feature, I animated the screens to display the scanned product's results at the bottom of the screen after scanning, giving users the flexibility to decide how they want to interact with the results rather than being automatically redirected to the product details page—an issue identified during the initial round of usability testing.
Usability Testing
I conducted a second round of testing with the high-fidelity prototype to evaluate three key flows: onboarding, product scanning, and routine creation. The goal was to validate the revisions made after the initial usability test and identify any remaining issues or potential improvements to further enhance the design.
Key metrics:
Task completion rate (>90%)
Error rate (Low)
Time on Task (low)
User satisfaction (High)
Priority Revisions
Is there more?
While observing user reactions to the product details screens, users expressed a desire for more information. They appreciated the clear separation of sections, which made the content easier to read and digest, but felt additional details, such as product benefits and uses, were missing.
When informed that product uses were displayed only after adding the product to their routine, users indicated they wanted this information upfront to make more informed decisions. This feedback prompted a redesign of the screen to include these essential details before adding a product to a routine.
Optimize your routine
The optimize routine modal now includes interaction warnings and suggestions to inform and warn users about specific details/products in their routine. This redesign addressed user feedback from usability testing about missing details and information that they expected to see in this section.
Unexpected feedback
When testing the product scanning and "Add to Routine" process, users gave surprising feedback about the feedback notification. Since adding a product takes three intentional taps, they found the "Undo" less helpful and preferred a "View Routine" option instead. This would allow them to quickly review their updated routine or check for any missing products right after adding a new one.
Final Designs
Proactive recommendations
Lumi offers a unique approach to skincare by providing proactive tips based on environmental factors like weather, humidity, and location. For example, users in humid areas may need less moisturizer than those in dry climates. Lumi uses this data to customize the app experience, tailoring recommendations specifically to each user.
Onboarding
Users can easily set up an account using their email or speed things up by signing in with their social media profiles. Our new user feature screen highlights the app’s main features, giving users a preview of what the app offers.
A tailored experience
The skin quiz gathers information about users' skin type, concerns, and preferences, enabling the app to deliver personalized recommendations for optimal skin results. By understanding each user's unique needs, the app provides customized product suggestions and routine tips, ensuring a skincare journey that is both effective and enjoyable.
Manage your routines
The routines feature allows users to easily create, manage, and track their skincare routines in one place. Each routine can be individually built and optimized, with the app highlighting potential product interactions and providing specific recommendations based on the products in that routine. This personalized guidance ensures users achieve the best results while maintaining a safe, optimized skincare regimen—directly addressing a key pain point highlighted during user interviews.
What is this product?
The product scanning feature allows users to quickly identify products and access detailed ingredient information, helping them make informed decisions and confidently add products to their routine. Many users shared in interviews that they often rely on trial and error, so this feature saves them time and helps them avoid products that aren’t the right fit.
Final Prototype
Next Steps
Future considerations
In designing the MVP, I faced the challenge of determining which screens to include. After referencing my research and user data, I decided not to design the additional screens that would be accessed through the home page CTA and carousel items. For example, screens that would lead to more specific search pages for types of products or ingredients were not included in the initial designs. This decision allowed me to focus on addressing the main problem, as discovery was not a key goal for this product.
However, I would include these screens in future iterations, particularly during further development in collaboration with developers. I would prioritize adding these features to enhance product discovery, creating a more comprehensive user experience. This approach will help us address more specific user needs and expand Lumi's functionality in subsequent phases.
Reflection
A key challenge in designing for this topic was learning about skincare and understanding what users prioritize, especially as someone who was new to the subject myself. I enjoyed interviewing both novice and experienced users, gaining insights from their journeys. Their tips and experiences helped shape my understanding and allowed me to design a better, more tailored experience that meets their needs and enhances their current experience.
A highlight for me was showing the prototype to these users and seeing how impressed and valued they felt when key features addressed their most significant pain points. Many encouraged me to take the project further, inspiring me to start conversations with developers about turning Lumi into a personal project for full development.
Thank you for reading!