Parca
Parca

Casy Study

ASOS + Voucher Codes

Disciplines: UX + UI Design


This case study was part of a pitch exploring the redesign of the merchant pages on VoucherCodes.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.

VoucherCode

Service Driven


Clean, clear navigation


Functional


Broad Target Audience

ASOS

Speaks to a Target

Audience


Has personality and point of

view in it’s communication


Colourful and

strong imagery


Animated Promotions

Positioning

The Vision

With a unified, consistent, clear and modern layout we will present VoucherCodes as an exciting and relevant retail brand positioned at the intersection of being practical, and the start of the customer’s online shopping journey.

The ReDesign

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—This allows 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 most suitable deals.
  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 gives a POV on what to buy and encourages 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 Sales.

2-column layout for mobile.

Service Content


  1. Service Content sits on a 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 if the customer does not find what they are after.

Modular Design

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.

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 for 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 UX Portfolio

© MMXXIV PARCA