amir
Role
UI / UX Designer
Duration
2 months
Tools
Figma
Project Type
Design Audit
Year
2024
Orly Beauty is a professional nail care brand known for its high-quality nail polishes, nail treatments, and other nail care products.
They approached me to revamp their dated website. Seeing an opportunity to make a lasting impact, I couldn't wait to get started.
For two months, I listened, heard and researched the brand, culture and their business goals.
The result? a user-friendly site that boosted conversions and revitalized the brand’s digital branding and website.
Orly Beauty is a professional nail care brand known for its high-quality nail polishes, nail treatments, and other nail care products.
Orly approached me to revamp their dated website. Seeing an opportunity to make a lasting impact, I couldn't wait to get started.
For two months, I listened, heard and researched the brand, culture and their business goals.
The result? a user-friendly site that boosted conversions and revitalized the brand’s digital branding and website.
Context
The current site has become overly complex, with navigation and UX elements that hinder user flow.
I partnered with senior leadership to understand their goals and frustrations with the existing site to provide a fresh aesthetic to the Orly brand.
The current site has become overly complex, with navigation and UX elements that hinder user flow.
I partnered with senior leadership to understand their goals and frustrations with the existing site to provide a fresh aesthetic to the Orly brand.
Constraints
2 month contract
No access to design files
No budget for user research
No development team
2 month contract
No access to design files
No budget for user research
No development team
Our customers can’t easily shop for multiple colors once they’re on a product page. They have to go back to the product listing, which has hundreds of items, just to find another shade. We think we’re losing a big opportunity to convert because of this.
-Stacey Politi
CMO Orly
My homepage design
Refreshed Look
By correcting typography, spacing and imagery. I was able to provide a fresh aesthetic while showcasing key conversion driving elements like CTAs & descriptive text above the fold.
Navigational Taxonomy
By highlighting key shopping experiences like Shop by Color, Shop By Formula, Best Sellers, and bundles. Users are able to find the products they are looking for quicker.
Color Swatches
The implementation of color swatches drastically reduced the need for endless scrolling and navigating, allowing users to find their desired products more efficiently.
The Solution
Existing Orly Design
Orlybeauty.com was facing several challenges that impacted both user engagement and sales:
Complex Navigation
Users found it difficult to browse through the extensive product catalog efficiently.
Low Conversion Rates
The site lacked key features and a strong call-to-action strategy to drive sales.
Reliance on Third-Party Retailers
Leadership felt the site was lacking in a contemporary shopping experience, so much so, that users preferred to shop their products online elsewhere.
The Problem
Navigational Loop
Orly's existing shopflow
Currently, users must return to the Product List page to browse the catalog, where each color is listed as a separate product.
For example, searching for “Pink” requires navigating through 134 products spread across 6 pages.
What a user experiences when searching for "Pink"
Analyzing IA
Orly’s product line is extensive, over 600 products. Most are considered Cremes or breathables, GelFX is a pro-line that mirrors their main product line.
Currently each product is it's own page, without any hierarchical categorization.
I went through each product and found that formulas and finish could be a category that would allow product swatches.
I wanted users to be able to select colors right from the PDP or even a product tile carousel that would be found in a recommended items or best sellers section.
Implementing swatches would be a helpful solution but orly has over 600 products of varying formulas.
Proposed shopflow
This required me to understand the existing product organization and see if it was capable of handling a new feature.
What I Did Next
My initial hypothesis was that swatches would be a viable solution. But I needed to validate this.
So, I wireframed a mockup of the product detail page and tested.
Results of a participants card-sort
Product Hierarchy
Currently, Orly had no hierarchical product category that sorted products other then by formula, bundle or collection.
User research or testing wasn’t available to me, so I did some guerrilla testing. I utilized a card sort to have participants organize different product types within Orly’s existing filter options and assign them to labels.
Prototype V1
Modal
My first idea was to create a new screen that pops up when a user wants to view more colors.
Interaction
User clicks on "View More" beneath the static swatches
A modal window appears
The User can scroll through all the available swatches and will have a large thumbnail preview for each selection.
Add to cart functionality within the modal
Prototype V2
Carousel
Carousels are common in
e-commerce and this would allow me to keep the swatches right next to the hero image and will not have to add an animation or additional interaction.
Interaction
Click on View More, would expand the static swatch frame into a 5x6 grid allowing for 30 swatches per page and as many pages could fit as required
When a user makes a selection the hero image & product name would change according to the selection made.
Final Prototype
After presenting my research and the two prototypes above, leadership decided to move forward with Version 2 - Carousel.
They agreed that having swatches close to the hero image and other conversion driving information would be the best way to move forward.
Navigational Taxonomy
Once the product's had a clearer organization taxonomy, the drawer menu became a much simpler problem to solve
Orly's Existing Drawer Menu
Improved Version
What I Would Do Next
If I had more time and resources I would conducted more research. Through this testing I would’ve utilized:
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.
Conclusion
This was a great project that I enjoyed working on very much. I enjoyed the presentation to stakeholders of my ideas, hearing their feedback and response to my solutions and adapting them.
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.
Thanks for taking the time to read this far! Please view my other works
Existing Orly Design
The Problem
Orlybeauty.com was facing several challenges that impacted both user engagement and sales:
Complex Navigation
Users found it difficult to browse through the extensive product catalog efficiently.
Low Conversion Rates
The site lacked key features and a strong call-to-action strategy to drive sales.
Reliance on Third-Party Retailers
Leadership felt the site was lacking in a contemporary shopping experience, so much so, that users preferred to shop their products online elsewhere.
My homepage design
The Solution
Refreshed Look
By correcting typography, spacing and imagery. I was able to provide a fresh aesthetic while showcasing key conversion driving elements like CTAs & descriptive text above the fold.
Navigational Taxonomy
By highlighting key shopping experiences like Shop by Color, Shop By Formula, Best Sellers, and bundles. Users are able to find the products they are looking for quicker.
Color Swatches
The implementation of color swatches drastically reduced the need for endless scrolling and navigating, allowing users to find their desired products more efficiently.
Mapping the Pain Points
During the interviews with stakeholders and leadership, it was mentioned that navigating the site was a key area of improvement.
So, I developed a journey map to visualize the existing shopflow, providing an
end-to-end view of the user experience.
This detailed diagram highlights key friction points and uncovered opportunities for improvement.
Main Insights
Navigation Loop
Currently, users can only view one product at a time on the page. If they aren’t satisfied with the product they’re viewing, they must reload the product display page and sift through hundreds of options to find another product that interests them.
Navigational Taxonomy
Main categories in the drawer menu that drive users to merchandise should have a stronger foothold in the taxonomy.
Navigational Loop
Orly's existing shopflow
Currently, users must return to the Product List page to browse the catalog, where each color is listed as a separate product.
For example, searching for “Pink” requires navigating through 134 products spread across 6 pages.
What a user experiences when searching for "Pink"
I wanted users to be able to select colors right from the product page or even a product tile carousel.
This led me to develop "Best Seller" or "Recommended" product sections throughout the site
Implementing swatches would be a helpful solution but orly has over 600 products of varying formulas.
This required me to understand the existing product organization and see if it was capable of handling a new feature.
Proposed shopflow
Analyzing IA
Orly’s product line is extensive, over 600 products. Most are considered Cremes or breathables, GelFX is a pro-line that mirrors their main product line.
Currently each product is it's own page, without any hierarchical categorization.
I went through each product and found that formulas and finish could be a category that would allow product swatches.
Results of a participants card-sort
Product Hierarchy
Currently, Orly had no hierarchical product category that sorted products other then by formula, bundle or collection.
User research or testing wasn’t available to me, so I did some guerrilla testing. I utilized a card sort to have participants organize different product types within Orly’s existing filter options and assign them to labels.
Analyzing IA
Orly’s product line is extensive, over 600 products. Most are considered Cremes or breathables, GelFX is a pro-line that mirrors their main product line.
Currently each product is it's own page, without any hierarchical categorization.
I went through each product and found that formulas and finish could be a category that would allow product swatches.
Results of a participants card-sort
Product Hierarchy
Currently, Orly had no hierarchical product category that sorted products other then by formula, bundle or collection.
User research or testing wasn’t available to me, so I did some guerrilla testing. I utilized a card sort to have participants organize different product types within Orly’s existing filter options and assign them to labels.
What I Did Next
My initial hypothesis was that swatches would be a viable solution. But I needed to validate this.
So, I wireframed a mockup of the product detail page and tested.
Prototype V1
Modal
My first idea was to create a new screen that pops up when a user wants to view more colors.
Interaction
User clicks on "View More" beneath the static swatches
A modal window appears
The User can scroll through all the available swatches and will have a large thumbnail preview for each selection.
Add to cart functionality within the modal
Prototype V2
Carousel
Carousels are common in
e-commerce and this would allow me to keep the swatches right next to the hero image and will not have to add an animation or additional interaction.
Interaction
Clicking on View More, would expand the static swatch frame into a 5x6 grid allowing for 30 swatches per page and as many pages could fit as required
When a user makes a selection the hero image & product name would change according to the selection made.
Final Prototype
After presenting my research and the two prototypes above, leadership decided to move forward with the Version 2 - Carousel.
They agreed that having swatches close to the hero image and other conversion driving information would be the best way to move forward.
Navigational Taxonomy
Once the product's had a clearer organization taxonomy, the drawer menu became a much simpler problem to solve. By clearly defining the main shopping categories "Shop By Finish" & "Shop By Color" users are directed towards key areas for product exploration.
Orly's Existing Drawer Menu
Improved Version
Interactive Prototype
What I Would Do Next
If I had more time and resources I would conducted more research. Through this testing I would’ve utilized:
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.
Conclusion
This was a great project that I enjoyed working on very much. I enjoyed the presentation to stakeholders of my ideas, hearing their feedback and response to my solutions and adapting them.
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.
Thanks for taking the time to read this far! Please view my other works