Woosh Beauty

Improved e-commerce navigation & collections page

ROLE

UX Designer & Strategy Consultant

Skills

UX Design, UX Research, Data Analytics

Team

CMO, Creative Director, 2 Developers

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

What is Woosh Beauty?

Woosh Beauty makes makeup effortless and inclusive with all-in-one kits for every skin tone.

View Website

Site Audit Takeaways

Site Audit Takeaways

Using Microsoft Clarity Heatmaps, Google Analytics Data, and Shopify Data, I was able to uncover the biggest issues users face in the process of purchasing a product.

Users are not interacting with product pages

Average 90% drop-off rate from Collections Pages (pages with groups of products) to Product Description Pages. 

Each additional step prior to add to cart causes 50% drop off

With a 50% drop-off rate at each step from the collections page to the 'Add to Cart' button, our goal is to streamline the process. 

Next Step

Redesign the collections page and navigation to maximize the number of users completing purchases.

View Site Audit

Problem Statement

How can we redesign the collections page and optimize navigation to minimize drop-off rates while boosting conversion rates?

Aligning the Design & Development Teams

Aligning the Design & Development Teams

Throughout the website, a lack of standardized buttons, fonts, colors, and other design elements led to an inconsistent user experience due to the absence of a global CSS style guide. 

Comprehensive Style Guide

Implemented a comprehensive style guide to govern the Global CSS for the Shopify 2.0 Upgrade, effectively addressing this issue and enhancing the site's overall visual consistency. 

Accessibility of the Website

To better cater to Woosh Beauty's target demographic, primarily composed of women aged 40 and above, we made intentional adjustments. We increased font sizes and button dimensions, resulting in a more user-friendly interface that encouraged greater interactivity and improved readability. 

Aligning on a Brand Message

Aligning on a Brand Message

Woosh Beauty initially struggled with brand differentiation and a broad target market. By analyzing our website data, email campaign data and Focus Group data, we identified three key user interests. We then focused on these themes throughout the year and plan to integrate this new brand message into our collections pages.

Focus Group Data

Helped run focus group sessions with 12 participants to explore what Woosh Beauty customers value in their makeup products and brand.

View Focus Group Data

Branding

In Woosh Beauty's Shopify account, I helped design and develop landing pages utilizing HTML/CSS targeting these brand topics and developing content strategy to center these three topics.

Travel Makeup

'Travel Makeup' is the keyword most associated with Woosh Beauty and is our top performing campaign. Highlighting our

Mature Skin

Highlighting benefits for mature skin will help us connect with our 40+ audience.

Clean Beauty

Connect your site to the most popular apps out there.

Final Delivery

UX Improvements

Woosh Beauty initially struggled with brand differentiation and a broad target market. By analyzing our website and email campaigns, we identified three key user interests. We then focused on these themes throughout the year and plan to integrate this new brand message into our collections pages.

  • Connecting blogs & resources

    Blogs have high conversion rates, therefore, putting it in collections will boost SEO & conversions.

    Weather app image
  • SEarch engine optimization

    To boost SEO, we added out-links with keywords at the bottom of collections pages, hidden as a helpful tool to guide users.

    Weather app image
  • Add to cart

    Shade choices were available on collections pages, but without an 'Add to Cart' option. Adding it could boost conversion rates since users often browsed by shade.

    Weather app image
  • Streamlined Navigation

    Each click causes a 50% drop-off. Sub-navigation lets users view collections without the menu. We also added "sort by product type" for easier searches.

    Weather app image
  • Concise hamburger menu

    Analysis showed users only selected 13 of 30 menu categories, so we removed the two-click barrier to collections pages and unused category options.

    Weather app image
  • Connecting blogs & resources

    Blogs have high conversion rates, therefore, putting it in collections will boost SEO & conversions.

    Weather app image
  • SEarch engine optimization

    To boost SEO, we added out-links with keywords at the bottom of collections pages, hidden as a helpful tool to guide users.

    Weather app image
  • Add to cart

    Shade choices were available on collections pages, but without an 'Add to Cart' option. Adding it could boost conversion rates since users often browsed by shade.

    Weather app image
  • Streamlined Navigation

    Each click causes a 50% drop-off. Sub-navigation lets users view collections without the menu. We also added "sort by product type" for easier searches.

    Weather app image
  • Concise hamburger menu

    Analysis showed users only selected 13 of 30 menu categories, so we removed the two-click barrier to collections pages and unused category options.

    Weather app image

The Data-Driven Decision

I leveraged Microsoft Clarity Heatmaps in conjunction with Google Analytics Behavior Flows to meticulously analyze user interactions to guide design decisions.

Each extra click causes a 50% drop-off. How can we improve navigation to reduce clicks?

A streamlined navigation bar is crucial to decrease number of clicks.

Users can now sort collections pages by product type.

76% of users view product shades on the collections page, highlighting the need for direct shade selection and add-to-cart options.


68% of users click on "sort by" but quickly exit the dropdown, indicating a need for more filtering options.

Reviews boosts conversion rates by 32%. Therefore, we should include them on collections pages.

It currently takes two clicks to reach a collections page with 30 categories, but users select only 13.

Reduced categories from 30 to 13 and increased text size for better accessibility for our 40+ audience.


Each extra click causes a 50% drop in engagement, with an average of 2 clicks to reach a collections page. Reducing clicks by 1 will shorten the time to the collections page.

Final Delivery

A new collections page with streamlined navigation and filtering, direct purchase options, and enhanced SEO.

The Final Delivery

A new collections page with streamlined navigation and filtering, direct purchase options, and enhanced SEO.

Key Takeaways & Next Steps

The design addresses key findings from user testing and data analysis by:

Collaboration with the Creative & Development Team

Due to ongoing mistranslations between the Creative and Development teams, designs weren't being seamlessly implemented on the site. By creating a style guide and establishing a Global CSS guide, we ensured consistent design implementation across the site.

Utilization of Data Analytics to Inform Design

Leveraging heatmaps from Microsoft Clarity and Google Analytics behavior flows, we strategically prioritized projects that promised the highest ROI with minimal effort.

Further Tests Needed

Through this redesign, we expect a reduced drop-off rate from the collections page, higher click rates on product pages, and increased traffic to the blog and resources sections. However, additional testing is required to validate the redesign’s impact and identify further optimization opportunities.