Project Drake: Modularity on the Category Page

Project Drake: An adaptive category page that guides shoppers through their purchase journey

Rebuilding the category page in Vue with a modular/component based approach to enable other key functions to deploy efforts that can be measured. Currently, improvements to the category page is hindered by an outdated framework that prevents additional features, experimentation or a/b testing.

Company: Brosa

Role: Product Designer

Work: User Research, Visual/User Interface and System Design

Team: Cross-functional Stakeholders, Product Manager, Engineering, QA Analyst

Impact

In 3 weeks we reached 90% confidence in statistical significance! (#winning)

PDP Views +4.6%
Cart Page Views +5.3%
Paid Conversion +8.6%
Improved Annual Run Rate = $1.3m

Process Overview

Objective

Improve the experience and interface.
Ensure new brand guidelines are followed and continue development of the design system.
Rebuild in Vue following the guiding principle - “frameworks, not features”

Anatomy of our Category Page

To understand how we can improve the category page, we started by evaluating the exisiting systems:

Introduction - Provides context, but lacks love from visual design.
Refinements - Great to narrow down categories, but they’re small and also lack visual love.
Filters - Helpful to narrow down results, but they’re all exposed and has low usage.
Display - Images on product cards are nice and big, but the font size is small. Also, the red badges can be overwhelming since majority of our products are constantly on sale.
Product Card on hover - There is awkward overlap on the hover state of our product cards.

Hypothesis

Crafting an adaptive and inspiring category page which guides shoppers through their purchase journey, will create a more pleasant experience - increasing conversion and customer satisfaction.

Inspirational vs Functional Solutions

We began by exploring inspirational and functional directions. Using these two bookends, we started identifying pros and cons from both directions, but also considered the various ways our components can be repurposed and modified. I.e Having a hero banner presents us with real estate to experiment with future features - as oppose to having a fixed curated life style image.

Scalable Component based Modular Systems

As we started bringing the UX and UI to fruition, it became clearer how to reuse our components to test future efforts and drive innovation. For example, now that the page has been migrated to Vue, we are able to experiment - one opportunity is “How might we elevate meaningful attributes while on the category page?”.

Introduction

Through research, we know there are attributes shoppers eventually seek - one of those attributes is material and finishing. We decided to trial a beautifully cropped image to emphasise the quality, material and fabric for the best selling product of each category.

Refinements

Previously, our refinements were small and uninspiring. Lifestyle images have been said to be more captivating, provides more context and ignites curiosity. We made them bigger and perceptively more “tappable”.

Filters & Display

According to our data, filter usage is generally low. This insight gave us signal to confidently redesign the layout of the filters into a slide-in modal. The horizontal filter bar also allows us to pin it to the top for easy access and leaves us with room to have a total of 4 products per row.

Product Cards

Asides from the visual treatment, the product cards were just cleaned up. However, the badging logic and treatment have been redesigned to emphasise meaningful messages.

For example - previously, 20% off to 40% off discount badges shared the same visual treatment. When shoppers scan the category page, there was not enough distinction to easily identify products with greater offers. We created 3 variations of badges that differ for easier recognition.

Mobile Responsiveness

Reducing the cognitive load and increasing the accessibility was an important aspect of this project. The previous experience had issues with font size, contrast and consistency - all playing a part in cognitive overload. By slightly increasing the font size and maintaining a visual rhythm makes our mobile experience more pleasurable to scroll through.