Case Study

As part of an ongoing evolution of the VoucherCodes you have been tasked with designing a future concept for this page. Aiming to make the homepage more tailored/ personalised to the user and encouraging non-identified users to become a member. This page is primarily used as advertising space for the top merchants that have partnerships with VoucherCodes and lists the offers that the partners have available.

  • Voucher Codes
Voucher Codes

Research

The first step I undertook was research into a range of voucher / promotional code homepages and companies. I looked at a mix of approximately 10 sites across both student-focused brands and other popular general coupon sites.

Voucher Codes
Voucher Codes
Voucher Codes
Voucher Codes

Personas

The main persona being students, and the second is online discount users using your personalisation algorithms & personas to find the best deals online.

Voucher Codes

Concepts

I started to put together some rough sketches of what the homepage might look like, thinking about things like navigation, functions, components and general overview of the page for both desktop and mobile web.

Voucher Codes
Voucher Codes
Voucher Codes
Voucher Codes

Wireframes

With concepts worked through, I started to build the wireframes starting with the navigation and adding things like a search bar, login/register button, categories, and new features such as a wishlist and notifications.

This was followed by working on core components for the homepage including the introduction of a new wishlist feature displayed in the top right hand corner of the promotion. This feature example has the aim of collecting data (cookies permitted) for the companies (that could be used for future targeting) and for users to easily be able to collect their favourite/most relevant offers in one place.

Voucher Codes
Voucher Codes
Voucher Codes
Voucher Codes

Visual Design

Once all wireframes had been created, I thought about the visual aesthetic of the website, playing around with a white and dark variant which is present on the ‘VoucherCodes’ app. Here are some visual examples of the different components used in the design process including the wishlist/saved discounts feature.

Voucher Codes
Voucher Codes
Voucher Codes
Voucher Codes