Match Me
Improving the online makeup shopping experience
How can makeup wearers shop for a new foundation from home and still receive their correct shade?
Role: UX Researcher, Product Strategist, UI Designer, Visual Designer
Methods: user research, user testing, wireframing, prototyping
Time: 10 weeks
Design Challenge
I had ten weeks to identify, plan, research and design a digital intervention that will help solve a human-centred problem of my choosing. I then had to create rough sketches and transform those into a grayscale wireframe and then an interactive prototype. Once I got the functionality and flow of the prototype just right, I then had to assess the usability of the design through user testing. Finally, I had to develop a visual identity for my digital solution.
I chose to focus on the beauty industry as it is not only a field I’m passionate about. It’s also an industry that has pulled in $532 billion dollars globally as of 2019. For such a lucrative field, I feel like the beauty industry gets overlooked and thought of as ‘frivolous’.
Problem Space
Now that the pandemic has resulted in makeup retailers not allowing customers to try on testers, makeup wearers now have to find a way to get their correct colour match when looking to purchase a new foundation. Through user research, I was able to pinpoint what exactly was frustrating about the current experience and come up with a solution.
Constraints
-Budget
-Accessibility
-Is the technology for this available?
British Design Council’s Design Double Diamond
After identifying a problem space within the beauty industry, I hypothesized how I could come up with a solution, how it would help my target users and how I could measure the success of the solution:
How can we fix this?
“I believe that designing a foundation colour matching app for millennial women will help them find their perfect colour match. I will know I’m right when more than 50% of users are accurately getting colour matched and purchasing the correct foundation for their desired skin tone.”
In order to do that, it begs the question:
How might we improve the colour matching experience for makeup wearers using mobile technology, in order to help people select the right product that matches their desired skin tone?
User Research and Key Insights
To better understand the pain points users were experiencing when shopping online for foundation, I did secondary and market research and conducted 5 user interviews. Once the information was gathered, I then synthesized a few root problems and came up with a few solutions through empathy mapping and current experience mapping.
My user research showed that users’ pain points when shopping for foundation online during the pandemic was:
-not being able to accurately find their correct shade using the current methods (quizzes, pictures of models that have been airbrushed)
-having to go to various sites to read reviews and see the product they’re interested in on other people
-not having some sort of guidance like they would if they were in store and could get help from a sales representative.
Secondary Research
Secondary research showed that even though most people have been staying home during the pandemic, makeup sales haven’t faltered. In fact, as of December 2020, beauty retailer Ulta Beauty saw a 65% sales increase.
Market Research
There are a few apps that aim to help users find their foundation like YouCam. YouCam isn’t specifically for makeup, it’s like a social media app that allows user to add filters to their photos and they just happen to have a ‘foundation filter’. I tried it out and it wasn’t helpful at all, which I believe most makeup wearers don’t use the app. Also, YouCam seems to be geared towards a younger demographic, and that is not my target demographic.
Persona
To communicate the information I gathered during research, I created a persona. The persona was created to reflect my ideal target user: a professional, millennial woman, between the ages of 25-40. Although I want my app to be welcoming, I chose to focus on this demographic as this is the main demographic that purchases and wears makeup.
.png)
Opportunity for Intervention
The user journey below shows what Taylor currently goes through when she shops for a new foundation. I created this experience map to showcase her emotions, actions and thoughts during her journey and to emphasize with her. This was also a way for me to identify any areas of opportunity and how I can intervene and create a solution.
Ideate
User Stories
I brainstormed possible scenarios my user would need from a solution and grouped them into epics. The epics that emerged were:
-Shopping Experience
-Safety
-Emotion
Below are a few examples of some user stories I came up with.
Task Flow
I created a task flow for users that want to find their correct foundation shade based on the Shopping Experience epic which was “As a makeup wearer, I want to get colour matched online, so that I can purchase a foundation without leaving home:
Lo-fi Sketches
Based on the pain points that were established, I sketched out a few ideas to test and see how I can relieve users’ pain points. Designing a mobile app was the best choice as my target demographic mostly uses their phone, especially for taking and storing photos and this would be the most effective way to help them find their correct foundation shade.
Prototype
After sketching out my ideas, I turned my Lofi sketches into a lofi prototype based on the chosen task flow. The lofi prototype was essentially my way of getting the right user flow and establishing how users would eventually use the end product.
Home Screen
Search Page
Search Results
Start Color Match
Modal Screen
Loading Screen
Match Success
Saved Match
After 2 rounds of user testing, with 5 users for each round, I got the flow that users responded well to. Users preferred to get colour matched and then read reviews on the product they wanted to get matched for after was a big take away for me from my user testings. I personally read reviews first before buying a makeup product, so it was very interesting for me to find that people preferred to read reviews after.
Home Screen
Select Product
Start Colour Match
Select Colour on Face
Match Results
Match Results
Visual Identity
Once I got the functionality and flow together, I worked on the visual identity to bring the right feel to the app. I wanted the feel and mood of the app to be a breath of fresh air compared to the websites and apps makeup wearers are used to. I went with pastels for the brand colours and chose Helvetica typography because that’s what most beauty sites use and I still want some familiarity there for users.
Moodboard
The moodboard was heavily inspired by the ‘soft girl’ aesthetic. I went for images that were dreamy, pretty, and girly. I wanted to evoke the feeling of getting up on a Sunday morning without a care in the world and using the day to focus on self care. I feel like I was effective in finding images and colours that represent that mood and feeling.
Colour Palette
The reason I chose to go with pastels for my brand and accent colours was because I wanted to differentiate myself from other beauty websites and apps out there that use a lot of dark colours. I kept thinking back to the beauty brand Glossier, which uses pastels in their packaging. Glossier
became a huge success because they set themselves apart by having pastel packaging and using unique models for their campaigns. They were very different from the other brands that had dark, fierce imagery and packaging. They were a big inspiration when thinking about my colours.
Typography
Helvetica was a natural choice to go with when it came to typography because although I wanted to differentiate my app, I still needed to use elements that users were familiar with. Majority of beauty brands and websites use Helvetica in some way, so I decided to go with that.
Wordmark Ideas
Wordmark
The wordmark and app icon were a bit of a challenge for me as it was my first time designing either. I wanted the wordmark to be sophisticated and have the brand colours in there. I plan on working on
the wordmark further as I feel it could be greatly improved. I am happy with the app icon that I came up with and am considering using that as the wordmark too.
.png)
Final Wordmark
App Icon
.png)
.png)
High Fidelity Wireframes
With my visual identity established, I then started turning my lofi wireframes into high fidelity and I’m truly proud of the result.
Multi-Platform Adaption
In addition to designing a mobile app, I challenged myself to come up with an alternative platform for my persona, as millennials typically own various devices. I decided to design a screen showing how it would look on a tablet.
Marketing Website
In order to market the app, I created a responsive marketing website for both desktop and mobile devices.
Design Impact & Future Thinking
The Tarot Cards of Tech
There would definitely be a decline in the need for sales representatives when shopping for makeup, however, the pandemic has already affected the jobs of those who work at beauty stores like Sephora or Ulta. Also, in my user interviews, my interviewees expressed wanting someone to help them when they were shopping online for makeup, if the need for help arose. I’d say there would still be a need for sales representatives in the beauty industry, they would have to pivot which lane they’re in.
If 100 million people used my product, it would be a game changer in the beauty community. This product would be the go-to that users would consult with first before they made a decision on what beauty product to purchase. Now that we have a ‘new normal’, who knows when we’ll ever be able to try testers on or bring home samples again, so this product would replace not being able to do that anymore.
Future Development
Due to time constraints, I was only able to come up with one task flow, however, I feel like there is so much more I can do with the app. It would be cool to incorporate more beauty products, as I feel like it’s going to be a while before customers can start trying on testers and getting samples once again. This is also an app that I feel would still be around in the long run because there are many people that don’t like going in store due to either being intimidated by the whole makeup shopping process, social anxiety or they are neurodivergent.
Key Learnings
These past 10 weeks were a new experience for me, as I learned how to identify a problem, find a solution, and design a digital product from beginning to end. As I explored how the pandemic has changed the beauty world, I learned that more beauty companies are taking an interest in combining the beauty world with technology, in hopes of easing the frustration online makeup shoppers have when looking to purchase new items, thus generating more revenue.
This case study was very daunting for me at the beginning as I was doubtful that I would be able to pull this project off. Although synthesizing the research was a bit of a challenge for me, all in all, this was a great experience and I learned a lot about understanding and empathizing with users and finding out their pain points.
A few key things I learned:
Be open to change
While testing my first lofi prototype, I was a bit afraid of changing the flow and functionality as I thought I had to strictly stick with it, however, once I embraced change based on my user test results, it really elevated my task flow to what it has become now.
Design should have a purpose
Every aspect of the design should have a purpose and I learned quickly that I should only add to the design if it serves a purpose.
It’s okay to ask for help
Although I was able to gather plenty of research, synthesizing it was a challenge for me and I do wish I had reached out to a few peers to get help or advice. Collaboration is a very important part of design and I have to remember that I’m not in this alone.