amir

Orly Beauty

Orly Beauty

Year

2024-2025

Scope of work

Product Design

User Research

Stakeholder Alignment

Figma

Prototyping

Domain

E-Commerce

Overview

Overview

Overview

Role

Sr. Product Designer

Duration

3 months

Orly Beauty is a well-known nail care brand with high-quality polishes and treatments. They asked me to update their old website.

Seeing an opportunity to make a lasting impact, I couldn't wait to get started.

For three months, I learned about their brand, culture, and business goals. In the end, I created a user-friendly site that increased sales and gave their online brand a fresh new look.

K2 logo
K2 logo

The Challenge

The Challenge

The Challenges

The Challenges

Orly was facing several issues.

  • The site had become outdated & overly complex, with UX elements that hinder user flow.


  • Many of Orly's competitors & 3P vendors were offering a more contemporary & familiar shopping experience and Orly felt their customers were preferring to shop elsewhere.


  • The design system was not consistently followed across the entire site.

Goals

Improve shopflow

Enhance UI / UX

Improve product discovery

Difficulties

No Dev Team

No Design System

3 month contract

Opportunities

Impress high-level stakeholders

Renovate an entire brand

Put my graphic design skills to the test

Goals

Improve shopflow

Enhance UI / UX

Improve product discovery

Difficulties

No Dev Team

No Design System

3 month contract

Opportunities

Impress high-level stakeholders

Renovate an entire brand

Put my graphic design skills to the test

To start, I conducted a UI/UX audit focusing on the user journey from homepage to checkout.

The audit revealed two key areas that would have the most impact on improving user experience.

These areas became the focus of my strategy

Navigation
& Drawer Menu

Product Discovery

Navigation & Drawer Menu

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.

Clear Navigation Helps

Improve User Experience

Clear navigation reduces friction

Visual Hierarchy

Clear categories guide users.

Visual Appeal

Showcases brand aesthetic and improved product organization

Spacing

Typography

Typography

Hierarchy

Product Discovery

Users face a lot of trouble when trying to explore or search on Orly’s site.

Each shade or color is shown as its own product, which means there are over 600 products to scroll through. This makes searching slow and frustrating. Switching between products is buggy and confusing.

This is a big problem because it affects how users shop and whether they come back.

Why Discovery Matters

Encourage Search

Easy-to-use sites drive exploration.

Increase sales

Simple discovery increases purchases.

Finding the Problem

To start, I conducted a UI/UX audit focusing on the user journey from homepage to checkout.

The audit revealed two key areas that would have the most impact on improving user experience.

Drawer Menu & Navigation

Product Discovery

These areas became the focus of my strategy

Navigation & Drawer Menu

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.

Having a clear drawer menu is important for several reasons:

Improved User Experience

  • Ease of Navigation

  • Reduced friction

Enhanced Visual Appeal

  • Attractive Design

  • Clear Product Information

Hierarchy

Spacing

Typography

Product Discovery

What a user experiences when they're exploring Orly's site.

Users face a lot of trouble when trying to explore or search on Orly’s site.

  • Each shade or color is shown as its own product, which means there are over 600 products to scroll through.


  • Searching is slow and frustrating.


  • Switching between products is buggy and confusing.


This is a big problem because it affects how users shop and whether they come back. Good product discovery helps:

Increase sales When users find products easily, they are more likely to buy.

Encourage browsing Users explore more when the site is easy to use.

Improve user experience Clear categories help users understand the product range.

In short, fixing product discovery will make shopping easier, keep users happy, and boost sales.

Product Catalog

Product Catalog

Before fixing navigation or product discovery, I needed to really understand Orly’s products and how they were organized. With so many products, so it’s easy for both shoppers and staff to get confused without a clear system.

To solve this, I made a spreadsheet listing every product, this helped me:

See the full range of Products I could spot which products were similar, which were missing, and how big each category was.

Find problems I noticed where the current system was confusing or could be improved.

Plan better navigation With everything organized, I could design menus and categories that match how customers actually search—by color, finish, or type. This makes it much easier for people to find what they want.

Key Finding

This extra step proved to be worthwhile, it revealed a major shortcoming in the existing IA.

The existing system was not grouping products by Formula or Finish. This is a big discovery because Orly wanted to optimize their PDP to allow for a color selector to allow for quick cycling through different products.

Key Finding

This extra step proved to be worthwhile, it revealed a major shortcoming in the existing IA.

The existing system was not grouping products by Formula or Finish. This is a big discovery because Orly wanted to optimize their PDP to allow for a color selector to allow for quick cycling through different products.

User Testing

User Testing

To group Orly’s products better, I needed to know how real people see and sort them.

I didn’t have a lot of time or resources for deep research. So, I made a simple card sort activity using Miro on my iPad. I talked to people in stores and malls who matched Orly’s main shoppers:

  • Women 30-55+

  • Care about healthy, cruelty-free

  • value affordable products.

I asked each person to put different product types into set categories. Each interview took 7-10 minutes, and I gave each person a $25 gift card as a thank you.

After talking to 10 people, I had enough feedback to help organize Orly’s products in a way that made sense to shoppers.

Results of a participants card sort

Results of a participants card sort

Stakeholder Sync

Stakeholder Sync

I found problems with how Orly’s products were organized, I set up a meeting with the company’s leaders to talk about fixing it.

At first, there was a lot of pushback. Leadership didn’t want me to spend time on product organization while I was also working on the website redesign. They didn’t see why this was important and wanted me to focus only on the new website look.

I tried to explain why fixing product organization was key for a successful redesign, but they still weren’t convinced.

So, I made two simple wireframes and asked them one question:

“How would we decide which colors show up in the swatches?”

Without a category like ‘Toppers,’ how would we pick which colors show up in the swatches? And how would we keep this organized as we add new products?”

This example made it clear to leadership why fixing the way products are organized is important. It helped them see that we needed to focus on the whole product catalog, not just the website’s look.

After this, they understood why my role needed to include improving the product organization.

Wireframes

Wireframes

Once leadership agreed and the back-end issues were fixed, I started working on ideas for color swatches—how they would look, feel, and work.

But first, I needed to understand what matters most to Orly’s customers when they shop. I found that shoppers care about three main things:

• Color

• Finish

• Formula

To help users choose with confidence, I made sure all images and previews were big and clear. After testing different options, I found that using a modal or a carousel worked best. This way, customers could easily see all the details they needed before buying.

Wireframes of the Product Display Page (PDP) with variations of how color swatches could look and function

Prototypes

Prototypes

V1- Modal

My first idea was to create a new screen that pops up or modal when a user wants to view more colors.


  • 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

V1- Modal

My first idea was to create a new screen that pops up or modal when a user wants to view more colors.


  • 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

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.

  • 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 needed.

  • When a user makes a selection the hero image & product name would change according to the selection made.

Leadership decided on moving forward with V2- Modal.

They felt having other key conversion driving elements; How to Use, Ingredients & Reviews visible in the same screen would help users satisfy all of their considerations easier.


Below is an interactive prototype featuring:

Home Page

  • Interactive Modules

  • Product Carousels w/ Interactive Swatches

Drawer Menu

  • Grouped redundant categories

  • Added two main conversion driving categories - Shop by Color & Shop by Finish

  • Updated Look

Search Bar

  • Includes space for product recommendations, ad space or recent searches

Product List Page

  • Refined product organization

  • Reduced results in search due to enhance product grouping

  • Interactive color swatches allows users to cycle through all the colors within a product category

Product Display Page

  • Updated Look & Feel throughout the page

  • Paginated color swatches which allows users to see all the colors available in the specific product group

  • Improved typography & spacing which ensures key conversion driving elements are above the fold

Filter Panel

  • Removed redundant filters

  • Added accordion style menu navigation

  • Added breadcrumbs for users to easily edit their selections

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.

  • 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 needed.

  • When a user makes a selection the hero image & product name would change according to the selection made.

Final Protoype

Delivery

Leadership decided on moving forward with V2- Modal.

They felt having other key conversion driving elements visible in the same screen would help users satisfy all of their considerations easier.

Below is an interactive prototype featuring


Home Page

  • Interactive Modules

  • Product Carousels w/ Interactive Swatches

Drawer Menu

  • Grouped redundant categories

  • Added two main conversion driving categories - Shop by Color & Shop by Finish

  • Updated Look

Search Bar

  • Includes space for product recommendations, ad space or recent searches

Product List Page

  • Refined product organization

  • Reduced results in search due to enhance product grouping

  • Interactive color swatches allows users to cycle through all the colors within a product category

Product Display Page

  • Updated Look & Feel throughout the page

  • Paginated color swatches which allows users to see all the colors available in the specific product group

  • Improved typography & spacing which ensures key conversion driving elements are above the fold

Filter Panel

  • Removed redundant filters

  • Added accordion style menu navigation

  • Added breadcrumbs for users to easily edit their selections

Follow up user testing between the existing site and the new designs saw an overall increase in CSAT. Users were pleased with the new layout, ease of discovering new products and felt the site had a fresh new look.

Other key metrics also saw significant improvements:

+47%

CSAT Score

+18%

Average Order Value

-88%

Reduction in search results

+26%

Conversion Rate

Let's work together!

© 2025 - All Rights Reserved. Amir Hussain

  • LET'S GET IN TOUCH

Let's work together!

© 2025 - All Rights Reserved. Amir Hussain

  • LET'S GET IN TOUCH