Match Me

Hero Image.png

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?

Double Diamond.png

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.

YouCam.jpg

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.

Persona (2).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.

Experience Map.png

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.

user stories.png

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:

Task Flow.png

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.

IMG_7656.jpg

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
First home page.png
First Search Page.png
Revised search results.png
First photo select.png
Modal Screen
Loading Screen
Match Success
Saved Match
First pop up.png
First Loading Page.png
First match results.png
First Saved Matches.png

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
Revised Home Page.png
Brand Selection.png
Revised photo selection.png
Select Colour on Face
Match Results
Match Results
Revised colour select.png
Revised match results.png
Revised add match.png

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.

actual moodboard.png

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.

Colour Palette.png

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.

Typography.png

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.

Wordmark Ideas (1).png

Final Wordmark

App Icon

Wordmark colour (1).png
match me app icon (1).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.

Launch Screen mockup.png

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.

iPad Pro Mockup.png

Marketing Website

desktop mockup.png
mobile mockup.png

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.

the radio star.png
the smash hit.png

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.