amir

ORLY BEAUTY

Role

UI / UX Designer

Duration

2 weeks

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.

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

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.

Navigation Loop - The Problem

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 led to the next step...

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 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

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:


Dated Look

Many of the modules and components are dated and are not meeting Orly's existing marketing or brand language.


Complex Navigation

Orly understands that their customers are driven by color. However, the current workflow makes it extremely difficult to do so.


Poor Product Hierarchy

Each product is it's own page. Users are forced to sort through multiple pages of product to explore different colors.

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.

Navigation Loop - The Problem

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 led to the next step...

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.

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

Click to view 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

Home

Projects

About

Resume

Contact

Home

Projects

About

Resume

Contact