amir
amir
ORLY BEAUTY
ORLY BEAUTY
Role
UI / UX Designer
Duration
2 months
Tools
Figma
Project Type
Design Audit
Year
2024
Overview
Orly Beauty is a nail care brand known for its cruelty-free, organic, and high-quality products, including polishes and treatments.
The Problem
Poor Navigation Complex navigation and difficult to discover new products
Dated Look Orly's site lacks a modern aesthetic and functionality
3P Reliance Users are going elsewhere to shop for Orly
Overview
Orly Beauty is a nail care brand known for its cruelty-free, organic, and high-quality products, including polishes and treatments.
Problem
Poor Navigation Complex navigation and difficult to discover new products
Dated Look Orly's site lacks a modern aesthetic and functionality
3P Reliance Users are going elsewhere to shop for Orly
My Task
Conduct a UI / UX audit that identifies areas to improve user flow through the sales funnel.
Identify areas to improve product discovery and improve the "shop-by-color" shopping experience
Provide Orly a modern aesthetic that meets modern e-commerce shopping aesthetics and functionality
Task
Conduct a UI / UX audit that identifies areas to improve user flow through the sales funnel.
Identify areas to improve product discovery and improve the "shop-by-color" shopping experience
Provide Orly a modern aesthetic that meets modern e-commerce shopping aesthetics and functionality
Challenges
No development team or engineers to help understand technical constraints or limitations
Lack of consistent design system
No metrics or data to help identify where users were falling off or frustrated
Challenges
No development team or engineers to help understand technical constraints
Lack of consistent design system
No metrics or data to help identify where users were falling off or frustrated
PROCESS
UI/UX Audit
Understanding I.A
Discovery
Negotations
Ideation
Prototypes
Key Takeaways
Navigation & Drawer Menu
Discovery Loop
Interactive Journey Map
Problem
The current drawer menu lacks a clear visual hierarchy to distinguish main categories from subcategories, increasing cognitive load for users as they navigate and explore the product catalog.
Solution
Improve Spacing
Implementing spacing between elements will allow users to naturally comprehend which categories are main categories vs sub categories
Typography
Utilizing typography and type weight we can further enhance a user's assumption and quick comprehension to determine main vs sub categories.
Consolidating Categories
Many of these categories can be grouped together to remove excess of categories in the L1 Panel.
PROCESS
UI/UX Audit
Understanding I.A
Discovery
Negotations
Ideation
Prototypes
Key Takeaways
Navigation & Drawer Menu
Discovery Loop
Interactive Journey Map
Problem
The current drawer menu lacks a clear visual hierarchy to distinguish main categories from subcategories, increasing cognitive load for users as they navigate and explore the product catalog.
Solution
Improve Spacing
Implementing spacing between elements will allow users to naturally comprehend which categories are main categories vs sub categories
Typography
Utilizing typography and type weight we can further enhance a user's assumption and quick comprehension to determine main vs sub categories.
Consolidating Categories
Many of these categories can be grouped together to remove excess of categories in the L1 Panel.
Results
Results
Before
After
Before
After
Before
After
Before
After
Drawer Menu
Improved visual Hierarchy
Enhanced readability
Added key conversion driving categories
Product List Page
Product Display Page
Search Results
Before
After
Before
After
Before
After
Before
After
Drawer Menu
Improved visual Hierarchy
Enhanced readability
Added key conversion driving categories
Product List Page
Product Display Page
Search Results
Drawer Menu
Improved visual Hierarchy
Enhanced readability
Added key conversion driving categories
Product List Page
Product Display Page
Search Results
Before
After
Before
After
Before
After
Before
After
CONCLUSION
Card Sort - To understand how users interpret Orly’s product catalog
Usability Testing - Observe how users interacted with the existing design
Quantitative Research - See which items Orly users were purchasing and adapting my designs accordingly
I’d also like to have seen this design to completion, at the time of writing, Orly did not have a development team on hand to begin implementation. I prefer to work on a cross-functional team with engineers but I did not get that opportunity here.
It was also a great challenge working with so many components, assets and prototypes. I really became an expert in nested components, file organization and delivering highly functional / hi-fidelity prototypes.
CONCLUSION
Card Sort - To understand how users interpret Orly’s product catalog
Usability Testing - Observe how users interacted with the existing design
Quantitative Research - See which items Orly users were purchasing and adapting my designs accordingly
I’d also like to have seen this design to completion, at the time of writing, Orly did not have a development team on hand to begin implementation. I prefer to work on a cross-functional team with engineers but I did not get that opportunity here.
It was also a great challenge working with so many components, assets and prototypes. I really became an expert in nested components, file organization and delivering highly functional / hi-fidelity prototypes.