Collection Page Promotion Module Redesign
Client: Dollar Shave Club
EXPERTISE
Module design
CREATION
November 2023
SOFTWARE
Figma, Zeplin
PROJECT OBJECTIVE
Background: The promotion card module gives a space to advertise products just launched or those important to the season. This module lives on the product collection landing pages and takes up 2 products worth of real estate.
Objective: I redesign the promotional module to better utilize the space and make more accessible.
CURRENT DESIGN ANALYSIS //
Current design discrepancies:
• No allowance with type versatility - no alignment variation or ability to add other type sets
• Thick color opacity over the product image
• No versatility with sizing or placement throughout the grid of the page
DESKTOP//MOBILE
DESIGN EXECUTION
WHAT I PLAN TO SOLVE //
• Experiment with module sizing for better visibility
• Improve accessibility -Delegate space for type and imagery
OPTION 1: 1X1 MODULE WITH CTA (BUTTON) //
This version was more applicable for a featured product within that collection. No headline or body text would be applied.
DESKTOP//MOBILE
DESKTOP//MOBILE
OPTION 2: 2X2 MODULE WITH CTA (BUTTON) //
This design features more of the product imagery.
DESKTOP//MOBILE
DESKTOP//MOBILE
OPTION 3: 2X2 MODULE WITH HEADLINE/COPY/CTA (BUTTON) //
DESKTOP//MOBILE
DESKTOP//MOBILE
OPTION 4: INLINE MODULE WITH HEADLINE/COPY/CTA (BUTTON) //
This is similar to the current design just has delegated space for both typography/imagery.
DESKTOP//MOBILE
DESKTOP//MOBILE
A/B TESTING DECISIONS & NEXT STEPS
The Product team enjoyed all the options above, but thought it would be best to move forward with options that had typography for both desktop and mobile. Here's the designs we decided to move forward with:
• Option 3: 2x2 Module with Headline/Copy/CTA (Button)
• Option 4: InLine Module with Headline/Copy/CTA (Button)
Success will be based on click-thru engagement, and heat map. Results TBD.
FIRST A/B TEST 1: 2X2 MODULE WITH HEADLINE/COPY/CTA (BUTTON) INCLUDING THEMES //
Benefits of design:
• Better accessibility and divide for type and images
• Image is not covered by text
OPTION 4: INLINE MODULE WITH HEADLINE/COPY/CTA (BUTTON) //
Benefits of design:
• Similar design to what currently exists
• Doesn't require much legwork for the development team
SIDE-BY-SIDE COMPARISON//
The improvements are clear - accessibility and consistency.
OLD VERSION
NEW VERSION//INLINE
OLD VERSION
NEW VERSION//2X2
THANK YOU//
All projects