amir

amir

e.l.f. Cosmetics

e.l.f. Cosmetics

Role

Role

UI / UX Designer

UI / UX Designer

Duration

Duration

2 weeks

2 weeks

Tools

Tools

Figma

Figma

Project Type

Project Type

Design Audit

Design Audit

Year

Year

2024

2024

I used e.l.f. cosmetics, a leading brand in makeup, to understand navigational hierarchy and user behavior. By understanding the user need and deciphering e.l.f.'s business goals, I crafted designs that focused on user outcomes, intent and increasing conversions.

Goals of This Study

Practice working within an existing design system

  • Deep dive into a brand thats new to me and learn about it's customers

  • Discover user interaction painpoints and improve UX with the intent of increasing conversion rates

Constraints

I time boxed 2 weeks for this project

  • No access to existing design files

  • No access to internal research

  • Refrain from creating new design system patterns.

Outcome

I assessed a UX that I think could be improved, and I created a few prototypes to solve some problems I discovered.

Outcome

I assessed a UX that I think could be improved, and I created a few prototypes to solve some problems I discovered.

One of two prototypes I built improving on e.l.f.'s drawer menu

One of two prototypes I built improving on e.l.f.'s drawer menu

The Problem

My hypothesis was that e.l.f's drawer menu & navigation had confusing hierarchy, interaction, and typography. This can potentially prevent users from finding what they need, which could lead to churn and lower conversion rates.

e.l.f.'s existing drawer menu once a category is selected

e.l.f.'s existing drawer menu interaction

MY PROCESS

  • LEARN about the customers and evaluate the UI/UX through their lens

  • IDENTIFY friction points in the UI/UX

  • IDEATE and prototype possible solutions

  • TEST the prototypes and evaluate

Learn

about the customers and evaluate the UI/UX through their lens


Identify

friction points in the UI/UX


Ideate

prototype possible solutions


Test

The prototypes and evaluate

Persona - Learning About The Customer

I learned about the customer through some basic desk research. I found that the customer's demographics are


  • Millenial and Gen Z

    • Shorter attention spans (higher risk for churn with many steps in a UX)

  • Budget conscious

  • Fashion Forward

Identify - Discovering Friction Points

When a user has a product in mind that they want to buy, they will:

  1. Land on website

  2. Click on the Shop button

  3. The drawer menu opens from left

  4. They select a category

  5. They select a product line / product

  6. Then they add an item to the cart

  7. Then they go to checkout


For this study, I focused on improving step 3, the navigation drawer, as I feel like it could have the greatest impact in the flow.

I broke this down into four specific areas


  1. The tiered navigation style takes up too much space, makes the user click new targets far away, and covers up too much of the hero image below.

  2. Best Sellers and New can be unclear as to where it goes

  3. Discover, Trending, e.l.f. cares sections are not shopping categories, and can be distracting.

  4. The typography & visual hierarchy could be improved to better focus the customer

e.l.f.'s existing drawer menu once a category is selected

Ideate

I designed two different alternative menu layouts to address the navigation pain. One with a sequential menu, and one that had an accordion style. I also added changes to the menu organization and visual hierarchy/style to address the category concerns

Layout & Interaction

Sequential Menu

This prototype explores a second menu overlay, that makes it so the user doesn’t have to move their mouse far or focus elsewhere. It also includes space for top-selling products, similar to a "Best Sellers" section.

While working through this prototype, I noticed the previous navigation becomes obscured, so I included a navigation breadcrumb to help users track their location within the site hierarchy.

Image of the Sequential menu prototype

Accordion Menu

In this version the UI shows the sub-categories below the selected category in an accordion style. This reduces the amount of clicks it takes to navigate through the menu and allows the user to find products faster.

Image of the Accordion menu prototype

Updated menu organization and hierarchy

Swipe to view between my version and the existing drawer menu.

My goal in improving the menu was to better organize the categories. In my prototypes, I moved "New" & "Best Sellers" and placed them within product categories, i.e "Eyes". Also, I added in a link for their "Beauty Squad" and "Virtual Studio" feature. Since e.l.f. had a space for brand categories, these seemed pertinent in that location.


Additionally, I added the ability for users to login or create account in the drawer menu.

Typography Changes

The main categories and sub-categories use the same font and font size, specifically Futura 16px. By employing different font weights to establish a more natural feeling hierarchy. I believe this approach is more effective, as it helps readers easily understand how the menu options are organized.

The main categories and sub-categories use the same font and font size, specifically Futura 16px. By employing different font weights, I can establish a natural hierarchy. I believe this approach is more effective, as it helps readers easily understand how the menu options are organized.

Try it for yourself!

Sequential Prototype


Accordion Prototype

Conclusion

I believe these two prototypes both perform better than the existing, without increasing complexity or introducing major new design system patterns. I learned about constraints that e.l.f. has in their visual design language, and I have improvements that I suggest to them. I enjoyed practicing making prototypes that I can test against each other, and an existing solution to determine which one might be most effective.


I also enjoyed the opportunity to focus on typography to make the navigation easier to use and read. I found there was a lot of nuance in text can be weighted, spaced, indented, etc., in how it can help the customer in their ability to navigate the website.

If I Had More Time

I would love to conduct a usability research session testing the two solutions against the existing one. Ideally 5-6 participants in a 20-30 min qualitative research study, so that I can better understand why certain changes may/may not help the user in their goals. This would also give an opportunity for me to ask follow up questions to learn more about their behaviors and expectations around some of these UX patterns.


Also I have a hypothesis that embedding New/Best Sellers style into sub categories instead of the existing top level “New” and “Best Sellers” would perform better in converting customers. I didn’t want to increase the scope of this study for this specifically, but I would be interested to learn more about this as it could potentially increase conversion rates.

Prototype to follow!

Update menu organization and hierarchy

Swipe to view between my version and the existing drawer menu.

My goal in improving the menu was to better organize the categories. In my prototypes, I moved "New" & "Best Sellers" and placed them within product categories, i.e "Eyes". Also, I added in a link for their "Beauty Squad" and "Virtual Studio" feature. Since e.l.f. had a space for brand categories, these seemed pertinent in that location.


Additionally, I added the ability for users to login or create account in the drawer menu.

Home

Projects

About

Resume

Contact

Home

Projects

About

Resume

Contact

Persona - Learning About The Customer

I learned about the customer through some basic desk research. I found that the customer's demographics are


  • Millenial and Gen Z

    • Shorter attention spans (higher risk for churn with many steps in a UX)

  • Budget conscious

  • Fashion Forward

Identify - Discovering Friction Points

When a user has a product in mind that they want to buy, they will:

  1. Land on website

  2. Click on the Shop button

  3. The drawer menu opens from left

  4. They select a category

  5. They select a product line / product

  6. Then they add an item to the cart

  7. Then they go to checkout


For this study, I focused on improving step 3, the navigation drawer, as I feel like it could have the greatest impact in the flow.

e.l.f.'s existing drawer menu interaction

I broke this down into four specific areas

The tiered navigation style takes up too much space, makes the user click new targets far away, and covers up too much of the hero image below.

  1. Best Sellers and New can be unclear as to where it goes

  2. Discover, Trending, e.l.f. cares sections are not shopping categories, and can be distracting.

  3. The typography & visual hierarchy could be improved to better focus the customer

Ideate

I designed two different alternative menu layouts to address the navigation pain.


One with a sequential menu, and one that had an accordion style.


I also added changes to the menu organization and visual hierarchy/style to address the category concerns

Layout & Interaction

Sequential Menu

This version explores a second menu overlay, that makes it so the user doesn’t have to move their mouse far or focus elsewhere. It also includes space for top-selling products, similar to a "Best Sellers" section.

While working through this prototype, I noticed the previous navigation becomes obscured, so I included a navigation breadcrumb to help users track their location within the site hierarchy.

Accordion Menu

In this version the UI shows the sub-categories below the selected category in an accordion style. This reduces the amount of clicks it takes to navigate through the menu and allows the user to find products faster.