Growth UX in
E-commerce

Supergoop!

Growth UX in
E-commerce

Supergoop!

Growth UX in
E-commerce

Supergoop!

Growth UX in
E-commerce

Supergoop!

Growth UX in
E-commerce

Supergoop!

Growth UX in
E-commerce

Supergoop!

Details

Role: UX/UI Designer‍
Duration: May 2024

Responsibilities

Agile Prototyping
Development & Production

Stakeholders

SVP of Direct-to-Consumer
External Development Team

SVP of Direct-to-Consumer
Senior Manager of E-Commerce
External Development Team

Overview

There were two high-impact annual sales opportunities while working at Supergoop! During the weeks leading up to the sales, my goals were to strategize with DTC and determine what new site features could impact key Ecommerce KPIs. I developed the following MVPs for new sales assets within a span of a few weeks ramping up to a yearly sale in June 2024.

I was the lead UX/UI designer at Supergoop! on a website redesign project. One of my main responsibilities was updating the site’s navigation to improve product seeking customer flows.

During this project, I identified the core problems within our existing navigation system, addressed the issues within our global site design system, and collaborated with our external partners to ship to production in a tight timeline.

Strategy

The first step of this Lean UX project required aligning on the most important KPIs with the Direct-to-Consumer (DTC) team. In cross-functional meetings, the following metrics stood out as important measures during our year-over-year analytics: IPT (items per transaction), AoV (average order value), and CVR (conversion rate).

As a brand within the beauty space that focused on SPF products, Supergoop's mission from the very beginning was to educate consumers about the importance of suncare and expand the boundaries of how people conceptualize what suncare can be.

As the Supergoop! merchandise catalogue expanded into novel products like Skincare + SPF and Makeup + SPF, we began to realize that our internal understanding of the catalogue did not always align with our users. This manifested prominently as a barrier to users within the navigation of our e-commerce website.

Goal: Improve KPIs around key sales opportunity by producing MVPs for site assets

With these metrics in mind, I began strategizing with DTC which touchpoints across site would produce the greatest impact. The final focuses were put on [Cart] and [PDP] as both two pivotal touchpoints that emerge closer to the end of a user's purchasing journey. With a limited amount of time before the start of sales, I jumped into creating mid-fi and hi-fi prototypes for three new assets.


To begin tackling the issue of Supergoop!'s website navigation, our team worked with a UX agency to source users for Think-Aloud Protocols. For these tests, we prompted a range of users to navigate through our website to find specific products.

Our goals were to 1) learn what understandings users had of our merchandising catalogue and 2) determine whether our navigation system effectively aided users in their journeys. After collecting observations from these in-person interviews, our cross-functional team came together and outlined the following key findings and issues.

Designs

SKU Upsell [Cart]

The MVP of this Upsell Module was delivered to the development team for rapid production. The goal of this component was to increase AoV while also providing users opportunities to meet sales period free shipping thresholds.


To begin tackling the issue of Supergoop!'s website navigation, our team worked with a UX agency to source users for Think-Aloud Protocols. For these tests, we prompted a range of users to navigate through our website to find specific products.

Our goals were to 1) learn what understandings users had of our merchandising catalogue and 2) determine whether our navigation system effectively aided users in their journeys. After collecting observations from these in-person interviews, our cross-functional team came together and outlined the following key findings and issues.

sale countdown [pdp]

This Sale Countdown was custom coded by me and inserted into web via DynamicYield. The goal of this component was to reduce cart abandonment rates and encourage purchasing behavior towards end of sales.


To begin tackling the issue of Supergoop!'s website navigation, our team worked with a UX agency to source users for Think-Aloud Protocols. For these tests, we prompted a range of users to navigate through our website to find specific products.

Our goals were to 1) learn what understandings users had of our merchandising catalogue and 2) determine whether our navigation system effectively aided users in their journeys. After collecting observations from these in-person interviews, our cross-functional team came together and outlined the following key findings and issues.

subscription module update [pdp + Cart]

These Subscription touchpoints were delivered to Development for production. The goal of this component was to increase user adoption of the subscription service.

Impact

During the sale, the Direct-to-Consumer team kept track of how these assets were influencing and impacting revenue. The following data points cover the first few days of the sale, and focus on key KPIs to the business.

Retrospective

It was rewarding to work on a fast-paced project that focused on important business KPIs as part of my work as a UX/UI Designer. Having the exposure to this kind of project-type taught me how UX/UI design can become adaptable towards needs outside longer-standing projects towards the website ecosystem.


Future Iterations

In future Growth UX projects, I'd like to bring MVPs from agile sprints back to the table. The goal of these projects were to produce MVPs within the smallest amount of time possible, but based on the positive performance of the assets I believe there could have been more of an opportunity to revisit and tweak aspects of the design and flows to improve performance even more.