Nuance

Nuance is a mobile iOS app that helps People of Colour virtually try on makeup products and find their perfect shade using advanced AR Technology. 

Role

Product Designer

Tools

Figma, InVision, iMovie, Keynote, Otter

Timeline

10 weeks

Find your perfect makeup shade in a snap!

AT A GLANCE

What's the problem?

Many beauty products only allowed for a limited range and skin tones, but while options for darker skin have thankfully increased in the last few years, finding the perfect shade of products still remains a challenge for People of Colour to this day.

What's the goal?

Nuance aims to assist People of Colour through the tedious task of finding the perfect shade of makeup that best matches their skin.
This solution saves time and money while reducing the amount of cosmetic products that end up in landfills. 

What's the impact?

Gone are the days of in store shopping and colour swatching countless shades of products to find the perfect one.
Nuance does the research for you and provides a fun and engaging shopping experience right at your fingertips! 

  • Curates a personalized list of product recommendations

  • Verified reviews of products from People of Colour

  • Virtual no hassle and messy free product try on

  • Offers all purchasing options for faster checkout and smoother shopping experience

MY DESIGN PROCESS

In order to organize my process, I followed the Design Thinking + Double Diamond Design Methodologies. 

These promoted convergent and divergent thinking and helped me tackle the problem at hand while exploring various ways to solve it.
I researched heavily on the issue, empathized with the users, defined and designed my solution that underwent many rounds of testing to make sure the best possible product is being put in the hands of users. 

Alright, let's get to it!

DISCOVER

Problem • Research • Key Insights
 
PROBLEM SPACE

FINDING THE RIGHT SHADE

For decades, People of Colour had limited access to makeup products that matched their skin. They still struggle to find their perfect shade of products while shopping online and have to rely on shopping in person and doing numerous colour swatches in the hopes of finding the right one. 

But why is this a problem?

Inclusivity began playing an increasingly important role slowly, but surely in the cosmetic industry after decades of selling products that only allowed for a limited range and skin tones.

In 2017, when Rihanna's Fenty Beauty launched in Sephora, it sparked what was called the "Fenty Effect", which pushed many brands to expand their foundation shade ranges to be more inclusive of people with darker skin tones.


This proved just how big of a market there is for such products and how eager and welcoming People of Colour were to embrace this revolutionary change. But while options for darker skin have thankfully increased in the last few years, People of Colour still feel under-presented, helpless and stressed in their journey of finding the perfect shade of products.

RESEARCH

WORD ON THE STREET

In order to truly understand and appreciate the problem at hand, additional research had to be conducted. I needed to get into the mindset of People of Colour and understand how they felt towards shopping for makeup products, which steps in their journey they found helpful or stressful and what opportunities for improvement lie ahead for me.
For this, I employed
3 different research methods:

Secondary Research

01

Gathering reputable articles, peer-reviewed studies and online blogs helped me find existing qualitative and quantitative information about the issue at hand.

 Primary Interviews

02

Conducting 1:1 decontextualized interviews to gain qualitative insights taught me about existing behaviours, motivations and pain points of People of Colour.

Competitor Analysis

03

Studying competitors currently in the market helped me to understand how parts of the problem were trying to be addressed and how I could provide a more enhanced solution.

01 How does the internet feel?

After hours of researching on this topic in the black hole that is the worldwide web to understand how People of Colour really feel about this problem and to make sure this really is something they care about receiving a solution for, I found that there is:

Inadequate Representation
due to limited number of shades being offered for People of Colour

Limited Accessibility
to online help compared to in-store while trying to select the right products

Lack of visuals
for available products that match their skin especially while struggling with hyperpigmentation & discoloration

What did this mean to me?

Since my secondary research made me realize how the issue lies more within the online shopping realm compared to in-store for People of Colour due to limited help, lack of visuals with colour swatches and limited representation, I decided to narrow my focus solely towards addressing this issue moving forward.

MY HYPOTHESIS

Providing People of Colour with a more personalized online shopping experience for makeup products that best match their skin will make them feel more represented and encourage them to shop online more frequently without any hesitations. 

02 How do my people feel?

Did I forget to mention that I too am a Person of Colour? Well now you know!

I decided to interview 7 participants who are People of Colour, but from
various ethnic backgrounds to make sure that this issue existed regardless of the ethnicity or location. I also decided to focus on participants who fall into the Millennial age group (25-40) for this part of the process. 

 

Now, you might wonder why Millennials? Well, I felt like this specific age group was not only lucky enough to witness the new era that "Fenty Effect" started, but from my secondary research it became obvious that they contributed the most towards online sales. 
 

What are they saying?

After conducting 20-25 minute interviews with 7 Millennials, this is some of what they had to say:

They already have that (AR) with lipstick- it would give me a better representation of a foundation than trying to eyeball shades on a screen.

Nikita | 26 | Bangladeshi

I prefer speaking to POC because they understand my struggle of discolouration, hyperpigmentation that are common among us.

Anya | 25 | Pakistani

The return policy is only good for the consumer, not for the environment. You get your money back, but you've completely wasted a product.

Tiana | 25 | Chinese

If you're showing a bunch of shades, then you have to show them on people that actually use them and not on hands, I want to see them on faces.

Sara | 31 | Guyanese

It's still a Western dominated market, but South Asians & People of Colour deal with hyperpigmentation and discolouration unlike with Western skin.

Anita | 26 | Indian

I wish more people would give out samples of more expensive products because I want to spend money, but I want to know that it's worth it first before purchasing.

Risha | 28 | Sri Lankan

I'm paranoid. I might buy something online if I see someone on social media who I think looks like me try it. That'll give me more of an inclination to buy.

Bianca | 26 | Ethiopian

03 What's already out there?

To understand how my potential solution could be unique, I conducted an analysis on a few platforms which my interviewees might visit in hopes of finding help with the current issue. In the end, I found that none of them helped users try on products other than lip or eye colours. Since they don't have a feature for products such as foundations and concealers that POC need the most help with, I realized my opportunity could potentially provide this for its users.

 

App

2_edited.png

YouCam

3_edited.png

Sephora

4_edited.png

Banuba

Product Goal

Virtual Try-On of real products

Selfie Editor & AR Makeup Camera

One stop shop for cosmetic and skincare products

Filters and virtually apply makeup for better photos

Product Recommendations

Range of shades for Try-On

limited products = my opportunity ?

I am aware that I can't base my decisions on what competitors out there might have right now as they must be designing even better solutions behind the scenes. It's not about having the most features, but a concise edited set of features that address the problem well.

 

KEY INSIGHTS

These interviewee insights were highly valuable and I synthesized these findings into pain points, motivations and behaviours which helped me find my 5 most common themes within them.

Themes on themes

Diverse & Honest Visualizations

POC want to see their ethnicities represented when searching for products online and want to see better visualizations of products with unaltered lighting or editing.

Personalized & Virtual Shopping Experience

focus

POC wish for their online shopping experience to be more personalized with suggestions for similar products and try-on features that extend beyond lipsticks.

Uncertainty & Ambiguity of Online Shopping

POC struggle with having to eyeball and guess products that might match their skin and find the online shopping process to be untrustworthy.

Ethnic Representation Online & In-Store

POC tend to seek out help from staff who have similar skin since they can understand and relate to issues that pertain to colour skin.

Reducing Returns

POC want samples and trial sizes and to try on products for a trial period before committing to them as a means of eliminating returns.

Focusing on personalized shopping experience & virtual try-on, I crafted my design question:

How might we provide People of Colour with a more personalized online shopping experience in order to confidently select makeup products that best match their skin type and colour?

Pivoting Moment:

Based on my interviews, I decided to pivot my focus from "beauty and makeup products" to "makeup products" exclusively as this seemed to be what POC struggle the most shopping for. 

DEFINE

Persona • Experience Map • User Stories • Task Selection
PERSONA

MY NEW IMAGINARY FRIEND

After thoroughly synthesizing my findings from user interviews and secondary research, I finally brought my persona to life. She reflects the demography, frustrations, motivations and behaviours of a typical user. This part of the process was highly crucial since personas are cognitively compelling and they help me empathize more.
So without further ado, let's meet Keisha! A Digital Content Creator who relies heavily on research and social media to find makeup products that match her, but still struggles with having to eyeball and guess her shade while shopping online. 

 
Persona1x5.png
EXPERIENCE MAP

WALK IN KEISHA'S SHOES

Keisha struggles at many points in her journey of trying to pick a shade of products that best match her while shopping online. Once she was brought to life, I then went on to create an Experience Map of this journey as it helped me illustrate her experience and visualize what she was going through in order to achieve her goal. This helped me further identify where my opportunities were available to potentially introduce a digital solution.

opportunity ?

USER STORIES

THINK LIKE KEISHA

With my Persona & Experience Map in hand, my next step was to create User stories & Epics with Keisha in mind. Writing these was another valuable step in the process as it helps to think of users as real people with real tasks to complete.

This helped me understand how users like Keisha might potentially utilize the digital solution and what their goals, expectations and needs might be. User Stories also helped me to define and design features down the road that would address these needs and validate its existence in the digital solution. 
Epics, on the other hand, which can be considered as "chapters" to User Stories, helped me to organize that tasks into features or themes.

After crafting over 30 User Stories and grouping them into 4 Epics, I chose the following Epic and User Story to focus on as it addressed one of Keisha's lowest points in her Experience Map. By addressing this problem that shows early on in her experience, I believe that her journey to achieve her goal can be more positive and efficient and rewarding. 

CORE EPIC

Trying on products online

CHOSEN USER STORY

As a Person of Colour I want to be able to virtually try on makeup products so that I can pick the right shade that matches my skin while shopping online.

TASK FLOW

GO WITH THE FLOW 

My next step was building a Task Flow for Keisha as it helped me visualize how she would attempt to complete a task at hand with each step listed out. 

The following displays the primary and secondary task flow of Keisha virtually trying on a product and purchasing it once she has completed the onboarding process and received her curated list of recommendations.

DEVELOP

Sketching • Wireframes & Prototype • User Testing
 
IDEATION

SKETCH, SKETCH AWAY!

Now that I was certain of which direction to head towards, I hunkered down and started sketching. I knew that in order for Keisha to try on a foundation from her list of recommendations, she had to complete the onboarding process. With that information in hand, I first created some exploratory sketches which then turned into solution sketches. I made sure to be really thoughtful about where I placed certain buttons, images and how the information might be laid out in the best way possible that would make sense to the users to complete the task.

01 Sign Up/ Log In
02 Onboarding - Facial Scan & Analysis
03 Personalized Recommendations
04 Virtual Try On & Purchase
WIREFRAMES

BRINGING SKETCHES TO LIFE

Now for the fun part - turning these sketches into grayscale mid-fidelity wireframes on Figma!
Using simple interactions and animations, my design slowly, but surely came to life.

01 SIGN UP

USER TESTING

TESTING 1, 2, 3...

Once I created my grayscale wireframes and turned them into a prototype, I then conducted 3 rounds of usability testing over a span of 4 days. Each round consisted of 15-20 minute testing sessions with 5-6 users via Zoom.

This was another crucial step in my process as user testing is a means of gaining valuable feedback and insights from testers that could help improve and enhance my digital solution in order to provide the most optimal user experience

Users were given 5 tasks to complete with scenario accompanying them to avoid any confusions. Even though users were able to complete most of the given tasks, the feedback provided by them were valuable to improving the functionality and design of my solution. 
Findings from my first round of user testing was synthesized and placed on a Design Prioritization Matrix before implementing the revisions and conducting the second and third round of testing. 

MAJOR CHANGES

CHANGING THINGS UP

01 See Your Recommendations

During my initial round of testing, users were confused by the large gap between 2 prompts on the screen and wasn't aware that they could tap/click to see recommendations. Due to this, I decided to add a CTA button for users to continue with Steps 2 & 3 or the option to skip to see the recommendations curated based on the facial scan. I also included 3 dots to indicate the 3 steps in the process and changed the wording to make the prompts more clear. 
Second round of testing feedback made me drop the additional text to keep the prompts concise and clean.

VERSION 1

VERSION 2

VERSION 3

02 Nav Bar & Additional features

Users expressed that they wanted to see the nav bar in the Discover Screen during my first round of testing along with an option to search. While testing this during the second round, I realized how they wanted a filter option for that screen as well. This lead to my third version which had an enhanced nav bar that had state changes for each icon.

VERSION 1

VERSION 2

VERSION 3

02 Payment Methods & Product Quantity

Users were immediately confused by the floating "1" on the screen so I changed the placement of it to be closer to the product image and labelled it to avoid the same confusion for users in the future. 

Another valuable feedback received was that they would like to change the payment method, In order to accommodate this and to provide users with more freedom, I included a secondary CTA in my revised versions.

VERSION 1

VERSION 2

VERSION 3

 

DELIVER

Brand Development • High Fidelity Prototype • Marketing
BRAND DEVELOPMENT

GIVING A PERSONALITY

After many rounds of testing, synthesizing and revising, I was ready to define the visual identity of my application and bring it to life!

I asked myself what feeling I wanted my app evoke and I came up with...

CLEAN, SIMPLE, NEUTRAL, EARTHY, WARM, WELCOMING, SOPHISTICATED & MINIMALISTIC.

MOODBOARD

IT'S A MOOD

With these adjectives in mind, I once again scrounged the good ol' web to find inspiration and curate a moodboard on InVision with imagery, iconography,  texture, typography and colour.

DESIGN SYSTEM

LET'S BE SYSTEMATIC HERE

With my moodboard helping to set the mood, I extracted my primary, secondary and accent colours from it and set off to establish a Design System for the product using the modular methodology named Atomic Design to standardize all my UI elements and create a cohesive visual language during future development.

I sought inspiration for imagery, typography and iconography that I felt best embodied the look, feel and mood the product was reaching to attain.

BRAND COLOURS

COLOUR ME IMPRESSED

Now, I'm sure you're wondering why I chose these colours for the brand. Allow me to break it down for you...

MAIN CAST

I chose this as my primary colour as it evokes a calm and neutral mood and tone while also being earthy and welcoming. And this being a lighter shade makes it easy on the eyes of users. 

This shade of beige paired really well with dark text, white background as well as the accent colour. This conveyed the same earthy and welcoming tone I was hoping to achieve for my design. And while it's not gold, the warm tone can be manipulated to give off a sense of sophistication as well, especially when paired with black and white. 

I selected this shade of forest green because it brings a sense of luxury and sophistication while still creating an earthy, warm and welcoming feeling (Does this remind you of the Land Rover brand? Because it did for me!)
And ding ding ding! I hit the jackpot.

SUPPORTING CAST

ACCESSIBILITY

WHAT ABOUT WCAG?

We all know how paramount it is to consider accessibility when designing solutions. So I made sure to do my due diligence and ensure my application achieved WCAG Compliance standards by using a Figma plugins named A11y & Stark.

Rating

AA

AAA

#FFFFFF

#121212

Rating

AA

AAA

#FFFFFF

#46491E

Rating

AA

AAA

#F5EDE2

#121212

Rating

AA

AAA

#F5EDE2

#46491E

Rating

AA

AAA

#CCA46C

#121212

Rating

AA

AAA

#CCA46C

#46491E

Rating

AA

AAA

#46491E

#FFFFFF

Rating

AA

AAA

#46491E

#F5EDE2

Rating

AA

#46491E

#5EDE2

WHAT'S NEXT?
WELL, ANOTHER FUN STEP OF COURSE!

THE NAME GAME

So how did I come up with the brand name Nuance? Let me tell you folks, it was quite a journey! But the TLDR version is that after pondering over several various names I finally conducted a poll to pick my winner with the help of users and an app named Polly.

TOP 5 CONTENDERS

BeUtifind

play on "Beauty" + "Be You" + finding beauty products

Iro

"Colour" in Japanese

Melatint

"Melanin" + "Tint"

Nuance

subtle difference in shade

winner

Visage

"face" in French

HONORABLE MENTIONS

Melatone

Melanin

Tones & Hues

Tints

Complexion

WHY NUANCE?

Nuance means subtle difference in shade or meaning, expression or sound. In this case, it means the subtle different in shades of colour. And since this app is for People of Colour to help them select the right shade of products from a pool of shades, this name seemed quite fitting. 

Nuance sounds perfect for the mood, tone, vibe and copy I was trying to achieve with the brand!

So what's this wordmark everyone keeps talking about? Well, it's how the brand name is displayed.

This meant I had to go back to my pen and paper. I did many exploratory sketches, both on paper and on Figma before finally landing on the current Nuance wordmark.

FIGMA

PEN & PAPER

Once again,  I learned just how valuable the exploration process is. The ideas explored here came from experimenting and mistakes. 

BLACK & WHITE

COLOUR

winner

After playing with many font families and typefaces, in the end, I decided to go with Playfair Family, Extra Bold for the wordmark because it gave off a sense of modern yet sophisticated palette as a serif family. I knew I wanted to with with serif over sans-serif since most of the inspiration I gathered prior to experimenting made use of serif font families for their brands (think Vogue, Gucci & Zara).

ICON DESIGN

SOMETHING ICONIC

WHAT'S NEXT?
WELL, ANOTHER FUN STEP OF COURSE!

THE NAME GAME

So how did I come up with the brand name Nuance? Let me tell you folks, it was quite a journey! But the TLDR version is that after pondering over several various names I finally conducted a poll to pick my winner with the help of users and an app named Polly.

TOP 5 CONTENDERS

BeUtifind

play on "Beauty" + "Be You" + finding beauty products

Iro

"Colour" in Japanese

Melatint

"Melanin" + "Tint"

Nuance

subtle difference in shade

winner

Visage

"face" in French

HONORABLE MENTIONS

Melatone

Melanin

Tones & Hues

Tints

Complexion

BRAND NAME

WHY NUANCE?

Nuance means subtle difference in shade or meaning, expression or sound. In this case, it means the subtle different in shades of colour. And since this app is for People of Colour to help them select the right shade of products from a pool of shades, this name seemed quite fitting. 

Nuance sounds perfect for the mood, tone, vibe and copy I was trying to achieve with the brand!

WORDMARK

LEAVING A MARK FOR THE BRAND

Yet again, I was inspired by simple brand icons and I stuck to the same concept for Nuance as well since it speaks to the brand tone and mood. Keep it simple yet classy is what my app would say if it could!

winner

DRUMROLL PLEASE!
I'M SO HAPPY TO FINALLY INTRODUCE TO YOU...

NUANCE

 
HIGH-FIDELITY PROTOTYPE

NUANCE IN COLOUR

01 SIGN UP

MARKETING WEBSITE

THERE'S A PRODUCT TO MARKET

With Nuance looking all hi-fi, I went on to design a responsive marketing page for desktop and mobile viewports in order to promote the product. For this step, storytelling, visual design and copywriting came in handy as I still wanted to stick with the brand's look and feel.


This was a nice, wholesome task as it taught me how just finalizing the prototype isn't the end of the road. But that the experience I provide for the users before they even download the product still matters and is just as important

ADDITIONAL ALTERNATIVES

LOOKING INTO THE FUTURE

With my persona, Keisha, in mind, I started looking into what other devices Nuance could be used on in the future. After some research and experiments, I landed on designing for iPad and Apple Watch. 

Nuance being able for Tablet/iPad would give users like Keisha an opportunity to virtually try on products and see them on a much bigger screen. And by providing her with an option to control the AR feature from an Apple Watch/smart watch and swipe through different products to try on while the mobile device is not in her hands could give her more freedom.

COMING SOON...

 

WRAPPING UP

Past • Present • Future
DESIGN IMPACT

BACK TO THE FUTURE FT. TAROT CARDS OF TECH

If the environment was your client, how would your product change?

Nuance helps to cut down on shopping returns users would have to go through with its use of AR Technology. This in turns reduces the amount of wasted products that end up in landfills as  currently, this number is eerily high within cosmetic industry. I will continue to find more ways to reduce waste which will help protect the environment at a time when it's needed the most.

How would a community of your most passionate users behave?

Nuance will flourish within the POC community without a doubt. But tapping into these smaller communities would make the product shine more as the word will travel around from super fans. This will bring in more users and help Nuance succeed more effectively.

If two friends use your product, how could it enhance or detract from their relationship?

If 2 BFFs use Nuance, they would be able to share images of each other trying on products to show which products worked or didn't work for them and to get a second opinion if needed. They will also be able to share recommended products between each other before settling for a product.

NEXT STEPS

WHAT'S NEXT FOR NUANCE

Nuance has big plans for its future!

TEAMWORK MAKES THE DREAM WORK

I'd love to look for any opportunities where I might be able to collaborate with fellow designers and cross-collaborate with Software Engineers in the hopes of bringing Nuance to the market.

NFTs, ANYONE?

With the rise of NFTs, there's a lot of talk about how they will play a major role in the Beauty Industry. In fact, brands like Clinique & NARS have already hopped in on the trend! So allowing users to try on NFTs just like any other product on Nuance would take the user experience to a whole new level!

TEST ME MAYBE ONE MORE TIME

...says my hi-fi prototype! I will continue to test, test away and make any necessary updates based on feedback. And I'll let you in on a little secret...I love user testing!  

PARTNER IN BUSINESS

Reaching out in the hopes of partnering up with Sephora would take Nuance to the next level. Does it sound intimidating? Absolutely! 

Will that stop me? Nope!

KEY LEARNINGS

BLAST FROM THE PAST

Throughout this long, yet wonderful journey, I have grown just as much as Nuance has and have learned many valuable lessons which I know will help me flourish more as a designer.

NO "I WANT IT THAT WAY"

It's about designing for the user, not myself. So early on in the process, it became clear to me that I had to put away any needs, wants or suggestions I might have for the solution because this wasn't about me. It's always about the users. Being fully understanding of this made me more open to feedback, suggestions and research that gathered throughout the process.

ARMS WIDE OPEN

They're criticizing the product, not you. I interacted with many other designers during these months, and some had a really hard time not taking the feedback received on their products to heart. I knew how much user testing and feedback means when it comes to creating an optimal user-centered product, so by constantly reminding myself that they're only criticizing the product, I found comfort knowing that this will only lead to a product that users will truly love and welcomed it with open arms. 

CHANGE COULD DO YOU GOOD 

While using the Double Diamond Process, I had many opportunities to seek feedback, revisit designs, reiterate and continue on. The UX Design process is never linear. It's agile and multiple rounds of testing and revising to fine tune the product is key. And referring to WCAG guidelines to make sure your product is accessible early on will help prevent some changes that may come along the way. 

DON'T GO CHASING PERFECTION

As a self-proclaimed "perfectionist", I had to learn the hard way that designs can never be perfect. Designing a human solution means it will never be perfect in everyones' eyes. And assuming your product is perfect will only close any potential opportunities for further improvement along the way. I learned when to take a step back from the design and wrap up the project without chasing after it having to be perfect. 

IF YOU'RE READING THIS...

THANK YOU FOR MAKING IT THIS FAR!

PLEASE FEEL FREE TO REACH OUT IF YOU'D LIKE TO HEAR MORE :)