Case Study

Voucher Codes + ASOS

Disciplines: UX + UI Design

 

This case study was part of pitch exploring the redesign of the merchant pages on Voucher Codes.co.uk. The aim was to improve the informational flow with the existing elements and improve customer confidence from the competition.

Our Ambition

 

To be the UK’s preferred Voucher Code retail destination.

Merchant Page Redesign

 

Redesign to improve information hierarchy

especially on first impressions and new customers.

 

Encourage the customer to start their shopping experience

on VoucherCodes than towards the end of their process.

VoucherCodes

Asos

Positioning

The ReDesign

Service Driven

 

Clean, clear navigation

 

Functional

 

Broad Target Audience

Speaks to a Target

Audience

 

Has personality and point of

view in it’s communication

 

Colourful and

strong imagery

 

Animated Promotions

Mobile

Tablet

Desktop

ReDesign Breakdown

Header

 

  1. Brand Imagery—Add authenticity to the page and opportunity for a paid model.
  2. Brand Blurb (Desktop)—for SEO and introduction to new customers.
  3. Sub Nav Introduced—Allowing you to jump to the appropriate part of the page.
  4. ‘Last updated’ move to the top to add confidence the codes are current and working.

Codes

 

  1. ‘Hand Tested brought into the H2 Header’—to add confidence.
  2. Coupon Redesigned—cleaner and responsive.
    Mobile: Larger Coupon so information is clear and easy
    to read.
    Desktop: Codes sit in-line—easily compare the best and suitable deal.
  3. Tiered Hierarchy—consistent order of information across devices.
  4. Green Colour Code for Voucher Codes—colour coding as part of site language and to aid navigation.

Content

 

  1. Seasonal/topical brand content give a POV on what to buy and encourage you to use the voucher codes. Imagery to be provided by the brand. Paid placement opportunities.

Deals and Sales

 

Colour coded differentiation between Deals and Sale. 2 column layout for mobile.

Service Content

 

  1. Service Content sit on grey background to ensure coupons stand out. Build the behaviour that boxed items are actionable towards a deal.
  2. Group related brands/categories/stores links together as a catch all of the customer does not find what they are after.

Layout

 

  • Group Content per deal type.
  • Customer does not have to search around the page.
  • Can follow any order per content needs.
  • Voucher Codes promotions recommended for modules 2 or 3.
  • Skin options so editorial and promotional content can use all modules.

Modular Personalisation

 

  • Order content per conversation/popular.
  • Order content per customer’s
    shopping habits.
  • Can follow any order per content needs.

Coupons Modular Design

Challenges & Next Steps

 

  • Possible additional lift for VoucherCodes staff.
  • This design will highlight similar or duplicate promotions.
  • If these are not vetting/cleaned up, it can look clumsy and deceiving.
  • Possible simplification of design could be required.
  • Build a self-service portal where merchants can upload their content for the brand header, copy and editorial content removing the need for VoucherCodes resources.

Summary of Customer Experience Enhancements

  • Modular Design to allow to personalisation, and ‘King of the Hill’
  • Content grouped for better clarity and finding the right deal.
  • Add headers to guide the customer.
  • Colour Coded Promotions to highlight Deal Type.
  • Allows the customer to clearly know the type of promotion, and the action required.
  • Sprinkle Merchant Elements to the page, to add authentication to content and encourage browsing behaviour on our site.
  • Opportunity for Paid Placements.

Back to Portfolio

©MMXXI Parca