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.ai, Polly, Canva, Mockup, Loom, Zoom, Slack, Google Suite
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
YouCam
Sephora
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.
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.
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
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 difference 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
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 available 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 Developers 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.