Nail it

Displaying nail polish
designs in AR

UX & UI design | Conceptual project

THE Problem

Nailist’s clients have difficulties deciding on the desired nail color/design during an appointment.

INEFFECTIVE
INCONVENIENT
A WASTE OF TIME

Consequences

Hesitation to choose one color that will stay on the nail for 3 weeks
The amount of options of colors/styles to choose from is confusing
There is a time limit to deliberate so the nailist sometimes has to urge the client to decide
The nailist’s stock is changing so it might not suit the client’s taste/expectation
Clients struggle to visualize how a nail polish color will looks on their skin tones & sometimes regret their choice

Market & competitive research

23

AR & AR try-onapps

4

Nail Color
visualize apps

6

Colors/clothes
match apps

5

Clothes/Nails
inspiration apps

5

Nail designs
games apps

THE Problem
Nailist’s clients have difficulties deciding on the desired nail color/design during an appointment.
INEFFECTIVE
INCONVENIENT
A WASTE OF TIME
Consequences
Hesitation to choose one color that will stay on the nail for 3 weeks
The amount of options of colors/styles to choose from is confusing
There is a time limit to deliberate so the nailist sometimes has to urge the client to decide
The nailist’s stock is changing so it might not suit the client’s taste/expectation
Clients struggle to visualize how a nail polish color will looks on their skin tones & sometimes regret their choice

Conclusions- Market & Competitive research:

Save time & effort

1
Helpful search tools
common-searches chips, auto-completion, filtering & sort options
2
Recommendations display
list of categorized horizontal carousels displaying pics (at least 120*120 px each) with 1-3 words headlines

Increase user’s perception of control

1
Color/style information
recommended number of layers, appointment length needed, additional cost, etc.
2
AR convention #1
use conventional AR icon, dim screen before entering AR mode, white texted tooltips on half-sheer background
3
AR convention #2
holding your hand in front of camera is tiring, we’ll allow the user create an AR video of her hand that can be reused
4
AR convention #3
step-by-step tutorial on how to place hands in front of camera with visual instruction & tips to help error recovery

user research

12

User interviews

4

Interviews

“I really like to try new colors so I will always ask what’s new in stock, what’s trending or what other clients asked for recently.”
“I like to search ideas on Pinterest/Instagram. 
I get upset when I have a vision but my nailst doesn’t have the colors I wanted”
“It’s hard to imagine how a color would look on my hand. Sometimes I regret my choice & stuck with a color I don’t like”
“The amount of colors & style possibilities is confusing. I wish I could get Ideas that fits my taste.”

Conclusions- User research:

Save time & effort

1
Search filters
by shade, occasion, upcoming event, or season. mood, etc.
2
Recommendations
including 3 categories: personal taste, nailist’s recommendation & current trends
3
Search by keyword/photo
to answer a certain need, like finding a style matching a specific dress or style

Save time & effort

1
Existing stock demonstration
that will be updated by the nailist itself
2
AR color/design visualisation
allowing the clients to get a preview on their own hand
3
Color/style information
recommended number of layers, appointment length needed, additional cost of style, etc.
Market & competitive research
23
4
Colors/clothes
match apps
6
5
5
Nail Color
visualize apps
AR & AR try-on
apps
Clothes/Nails
inspiration apps
Nail designs
games apps

Conclusions- Market & Competitive research:

Save time & effort
1
2
common-searches chips, auto-completion, filtering & sort options
list of categorized horizontal carousels displaying pics (at least 120*120 px each) with 1-3 words headlines
Helpful search tools
Recommendations display
Increase user’s perception of control
1
2
3
AR convention #1
AR convention #2
Color/style information
recommended number of layers, appointment length needed, additional cost, etc.
use conventional AR icon, dim screen before entering AR mode, white texted tooltips on half-sheer background
holding your hand in front of camera is tiring, we’ll allow the user create an AR video of her hand that can be reused
4
AR convention #3
step-by-step tutorial on how to place hands in front of camera with visual instruction & tips to help error recovery
user research
12
4
Interviews
User interviews
“I really like to try new colors so I will always ask what’s new in stock, what’s trending or what other clients asked for recently.”
“I like to search ideas on Pinterest/Instagram. 
I get upset when I have a vision but my nailst doesn’t have the colors I wanted”
“It’s hard to imagine how a color would look on my hand. Sometimes I regret my choice & stuck with a color I don’t like”
“The amount of colors & style possibilities is confusing. I wish I could get Ideas that fits my taste.”

Conclusions- User research:

Save time & effort
1
2
3
Recommendations
Search by keyword/photo
Search filters
by shade, occasion, upcoming event, or season. mood, etc.
including 3 categories: personal taste, nailist’s recommendation & current trends
to answer a certain need, like finding a style matching a specific dress or style
Increase user’s perception of control
1
2
3
AR color/design visualisation
Color/style information
Existing stock demonstration
that will be updated by the nailist itself
allowing the clients to get a preview on their own hand
recommended number of layers, appointment length needed, additional cost of style, etc.

SOLUTION

Native app  displaying your nailist’s stock in AR
The value
Saving time on the appointments
Ease the client’s decision making process
SOLUTION
Native app  displaying your nailist’s stock in AR
The value
Saving time on the appointments
Ease the client’s decision making process

UI style GuiDe

creating feminine, young, simple & fun vibes
The goal
Create a clean environment to explore and costume nail designs
Ease the use of AR mode and functions
Provide a fun, and feminine atmosphere that attracts the user  
How solved?
Using black, gray, and white backgrounds and components in AR screens
Minimalist yet friendly icon design and typography
Lively color palette, and soft flowy shapes in the background and logo 
One dominant solid and monochromatic background color on each screen
color palette
#819BF6
#97C6A2
#EA5147
#FDB4ED
#071210
#FEFEFE
typography
logo
icon
Photo credit: @stavish_nails Instagram account
@rakefet_sustiel_nails Instagram account
UI style GuiDe
creating feminine, young, simple & fun vibes
color palette
typography
#819BF6
#97C6A2
#EA5147
#FDB4ED
#071210
#FEFEFE
logo
icon
Photo credit: @stavish_nails Instagram account
@rakefet_sustiel_nails Instagram account
The goal
Create a clean environment to explore and costume nail designs
Ease the use of AR mode and functions
Provide a fun, and feminine atmosphere that attracts the user  
How solved?
Using black, gray, and white backgrounds and components in AR screens
Minimalist yet friendly icon design and typography
Lively color palette, and soft flowy shapes in the background and logo  
One dominant solid and monochromatic background color on each screen

wireframes

wireframes

FINAL RESULT

Main screen
The clients can view recommended options from his nailst’s stock. To help find wanted designs, the recommendations are categorized by designs matching personal taste,  trends & nailist’s recommendations.
Search
Results has tags help users find trends & new options fast.
Users can also search by keywords or get help to find a design/style matching their vision/specific need by uploading a picture.
Style display
Users needs to be informed but don’t want to read a lot.I highlighted 4 points they care about (used icons to help identify the goal) including affect on appointment’s length, additional cost etc.
AR screens
Some users are not familiar with AR interfaces.
To ease learning curve, I designed a screen notifying when this mode is activated.I also provided focused guidelines & used conventions such as floating instructions & black-and-white UI components to pop above the camera background.
Imaging & design screen
To help the user control the imaging & design screen, I used a familiar method from design app of a layered menu.
I also used conventional icons.
Dark mode
Splash screen
FINAL RESULT
Main screen
The clients can view recommended options from his nailst’s stock. To help find wanted designs, the recommendations are categorized by designs matching personal taste,  trends & nailist’s recommendations.
Search
Results has tags help users find trends & new options fast.

Users can also search by keywords or get help to find a design/style matching their vision/specific need by uploading a picture.
Style display
Users needs to be informed but don’t want to read a lot.
I highlighted 4 points they care about (used icons to help identify the goal) including affect on appointment’s length, additional cost etc.
AR screens
Some users are not familiar with AR interfaces.
To ease learning curve, I designed a screen notifying when this mode is activated.
I also provided focused guidelines & used conventions such as floating instructions & black-and-white UI components to pop above the camera background.
Imaging & design screen
To help the user control the imaging & design screen, I used a familiar method from design app of a layered menu.

I also used conventional icons.
Dark mode
Splash screen
Check out more projects
VIEW Project
VIEW Project
Check out more projects
VIEW Project
VIEW Project
© 2022-2024 - All rights reserved to Noga Sadan | The projects were made for study purposes.