InspoMirror Application Design
Shopping for cosmetics and skincare online can be tricky. InspoMirror, equipped with augmented reality (AR), lets users try products virtually, discover personalized techniques, find the perfect match for their skin, create a skincare routine tailored to their needs, and get recommendations for both high-end and budget-friendly brands.
If you want to see the prototype, please click the button below to access the Figma file.
Project Overview
Team
1 Lead UX Designer
4 UX Researcher & UI Designer
My Role
UX Researcher & UI Designer
Duration
Overall: 4 weeks
Discovery & Research: 2 weeks
Design & Testing: 2 weeks
Tools
Google Suits
Miro
Figma
Trello
Zoom
Slack
My Contribution
User Research
Market Research
Persona Development
Wireframing
Prototyping
Interaction Design
User Testing
Stakeholder Presentations
Problem
Users encounter difficulties selecting makeup and skincare products online, resulting in mistakes that adversely affect their skin, beauty, and budget.
How might we create an intuitive online selection experience for makeup and skincare products that empowers users to make informed choices, thus enhancing their beauty routine without compromising their skin health or budget?
Solution
By leveraging augmented reality (AR) technology, users can virtually try on makeup shades, explore application techniques, and assess skincare product quality.
Our design thinking process is dynamic and non-linear
Empathy helped us define the problem, and we moved from ideas to prototypes. Prototypes inspired new ideas, and testing revealed insights that reshaped the problem.
User journey map
Wireframe
Affinity diagram
"I like, I wish, what if" diagram
Feature Prioritization Matrix
Prototype
Iteration
Usability Testing
Survey
User interview
Empathy map
Competitor analysis
User persona
How should we approach research in the design process?
We collected quantitative data from 17 participants through a survey on Instagram and Facebook. Here are the survey results:
one-on-one interviews conducted with 7 participants in person and online
Our research focused on gathering qualitative insights from users. We began with introductory questions to help users feel at ease and trust us. Then, we asked about the issues we aimed to solve with the app. Our final questions were about the app's proposed solutions to gather feedback and discover any overlooked aspects that users might want in the app.
The affinity diagram helped us focus our design process on the most important areas
Interview Takeaways:
Post-interview, I synthesized user insights using an affinity diagram to deepen my understanding of the users, which informed the creation of detailed user personas. This process involved organizing user responses by their needs, wants, challenges, and pain points.
Let's get a holistic view of users by mapping out what they say, think, feel, and do
I employed an empathy map to understand the perspectives and emotions of potential users. This method enabled me to empathize with users, helping me make design decisions that cater to their needs and improve their overall experience.
“I Like”,”I Wish”, “What If” Diagram to prioritize features and functionalities
Users shared their likes, desired improvements, and creative ideas for future enhancements. We then asked them to vote on these suggestions using emojis. Suggestions with more votes helped us create a 'Feature Prioritization Matrix' with our team to focus on the features users want most.
User preferences and feedback were collected through the diagram and translated into a structured prioritization system in the matrix that helped me to effectively prioritize features according to user preferences, ultimately leading to a more user-centric and successful design.
Competitor analysis to identify our competitors, understand their strengths, and determine how we can outperform them
User Persona
We synthesized insights from survey, interviews, empathy map, and feature prioritization matrix to create a user persona and prioritize user needs. This persona informed design decisions, ensuring a user-centric approach aligned with prioritized needs.
User Journey Map
To illustrate the users experience with InspoMirror, I crafted a user journey map detailing their interaction from introduction to overcoming potential challenges until they actively engage with the app.
Conducting a competitor analysis involves examining competitors' products to identify design patterns and gather insights. This helps us stay up to date with industry trends, recognize best practices, and guide our design decisions.
We analyzed three direct competitors and two indirect competitors. Each team member explored one competitor's app and its features to find areas for improvement that we can apply to our app. Reading user reviews also provided valuable insights into competitors and user needs.
High Fidelity Design & Iteration
Mid-fidelity wireframes to prepare the product for initial usability testing
These wireframes offer a realistic preview of the app's design and functionality, laying the groundwork for initial usability testing. This approach ensures we gather valuable feedback to improve the user experience before final development.
sign ups/logins
Trending looks
homepage
Makeup application trends
Usability Test Phase 1
Here are the usability test tasks outlined for the low-fidelity wireframes:
Task1: Is the user able to sign up?
“Signing up was quick and simple.”
Task4: Is the user able to learn about makeup trends?
“Tutorial videos and trend section was really helpful”
Iteration and refining the design by addressing identified issues to improve user interactions
During usability testing, users requested features to see how different makeup techniques suit their face shape. They also wanted customized color suggestions for their skin tone, which we added in the first iteration.
The winged liner example illustrates a makeup technique tailored to different eye shapes.
Hi-Fi Wireframes
Using user feedback from usability tests, we developed high-fidelity wireframes. Check out the Figma file to see the complete design.
sign ups/logins
homepage
Usability Test Phase 2
We ran another round of usability testing with 5 users to gather feedback on our hi-fi design. We gave them four tasks to complete while we observed and took notes as they talked through their process. All tasks were completed successfully, but one user suggested adding a feature to view previous orders, similar to Amazon, for easier reordering.
Intro to AR feature
Tutorial videos
Task2: Is the user able to get skincare products that work for them?
“I’m dissatisfied with the high number of clicks required.”
Task3: Is the user able to get a makeup look that works for them?
“I enjoy using the AR feature to see how shade matching and techniques work”
Makeup tutorial & Color matching
AR feature Makeup
Shop & checkout products
Examples showcasing color matching were included to demonstrate suitable colors for various skin tones.
Favorite Products and videos
In the second usability test with the high-fidelity prototype, users expressed the need for a dedicated page for previous orders, which we promptly integrated into the design.
What I learned from this project
Incentives are a plus. Iterating and testing will forever be a thing.
While the beauty industry is a competitive market, providing users with special offers, sign up discounts, and/or monthly subscriptions with personalized makeup and skincare box will make the app more desirable and keep customers coming back.
Companies are constantly pushing out new products for its consumers. Users may be more satisfied with updated information of the latest products. The AR feature is prospected to surge in the future with advanced technology, so it’s important to keep up with user testing.
What could be next step?
Throughout our redesign process, some great ideas came to my mind for future iterations.
First, we can add more features, such as order returns, in case the users are unhappy with the products.
Second, develop the platform for a new service, such as recommending clothes styles based on the makeup suggested.
Third, design the website version in case the users prefer to use something other than mobile apps.
Thank you for reading my case study!
Interested in collaborating? Don't hesitate to reach out!