Designing the new First Choice homepage

www.firstchoice.co.uk_WHOLEToday sees the start of a really exciting period for me and the team. We have been working on the redesign (and replatform) of two of the biggest holiday websites in the UK. The fruits of our hard work, research, concepts, design, prototyping, testing and iterating are beginning to go live! This is the time when we get the numbers to prove the output of all our work!

Today sees the new Homepage go live on the First Choice site (www.firstchoice.co.uk). This the the MVP (Minimal Viable Product), comprising 11 of a total of 30 designed components (the rest will be released incrementally in the coming weeks and months). Also live is the whole new Destination section – pages about all the places that we offer holidays.  But these is only the first of a number of really exciting releases.

As things go live, I can start to talk about them and give some context and background to how they came to be, starting with homepage today! Over the next number of posts I hope to give you a complete insight into how I ran the process of such a huge redesign project from a UX & Design point of view, and the outputs.

So, the new Homepage… My vision was simple: Our Homepage should evoke emotion and provide inspiration. It should make people want to go on holiday with us.

Process

Below is a sequential outline of the steps involved in getting the project to this stage.

Whiteboard SketchingResearch
Primarily desk based, analysing competitor, industry and best-of-breed online homepages. Homepage specific analysis of our wealth qualitative research and quantitative analytics data (I’ll talk about out research in another post).

Stakeholder interviews
Hour long, loosely directed interviews were held with key stakeholders to draw out business requirements.

Design Jam
A brainstorming session, involving the UX & Design team, to draw out ideas and concepts for the Homepage. The level of creativity was heavily influenced by budgetary constraints.

Analysis & Concept sketching
Analysis of all inputs, resulting in a definition of vision, solution approach and constraints. Sketching of component level concepts and rough page level outlines.

Review with stakeholder  group
A review was held in late December 2012 to share the Homepage vision, requirements, solution, constraints and component sketches.

High Level Estimates
The component sketches were then given to IT to provide high level estimates and costs. As the cost to implement came back higher than the allocated to this project, I then conducted a detailed review, rationalisation and reduction in the components, in order to reduce scope and cost.

design_jamtiffPage zone identification
Further analysis and work was done to identify key page zones. 3 key zones were identified and documented, including components that can be placed in each zone.

Wireframing
Component wireframes were created and annotated for each component.

Co-Design session with Stakeholder
A co-design session took place with the Consulted group to take them through the new, rationalised component list and to co-create a composite Homepage (from the components). This elicited a MoSCoW for components, and further components were removed to reduce scope and cost.

Create Signoff Pack
A document was created giving a detailed overview of the Homepage delivery, context, analytics data and approach. This was used for communication and sign off.

Concept Sketches

We started by sketching how the page should look as a whole, sticking to a component approach.

 

Homeapage Desktop Sketch

Mobile Homepage Sketch

Then I moved on to component level sketches:

Hero Component Sketch

 

Component Sketches

I’ve spoken about how important and valuable sketching is before (read my post on sketching here) – quick, low fidelity and the ability to share concepts quickly.

Co-Design Sessions

Then we did some co-design and assembling components into a homepage with Stakeholders:

Co-Design Session

The co-design sessions were important to get us to a Homepage and getting everyone engaged with the process, but were primarily to make sure that everyone was in agreement with our approach and there would be no last minute objections or hurdles!

Zoning & Wireframes

The next step was to create a zoning document. This showed the various zones on the page and their purpose, and a more detailed version showing with components could/should appear in what zone.

High Level Zoning Overview

Detailed Zoning Document

From here, wireframes were created for all components, annotated, and also assembled into wireframe composites. While this may seem like overkill on documentation, it was necessary for development and testing which can happen in geographically diverse locations.

Annotated Component Wireframe

 

Page Composite Wireframe

 

The Result

We then went into design, and what came out is the beautiful page that you see today.

First Choice Homepage Visual Design homepage_v06_content homepage_v06_merchspiration homepage_v06_sale_now_on_02

It’s too early to try and put numbers behind the page’s impact, and indeed, we should wait until the rest of the site goes live to truly quantify success metrics (conversion, satisfaction etc.) – but I’m sure you’ll agree that it looks fantastic!

I need to name check Andy Birchwood (http://betulapendula.com/  -  @betulapendula), who was Design Manager though the concept and design stages of the Homepage project and really helped to drive and shape where we went. Thanks Andy!

Next Time

My next post will talk about the research that we did and how we analysed and used that information.

 

About the Author

An experienced, commercial and creative user experience professional with a proven record in UX leadership, strategy, people management, branding and innovation. Responsible for the design and delivery of several high profile, big brand web sites and enterprise software applications. All opinions here are my own.

One Response

  1. Bernie Dec 18, 2013 -

    Fantastic outline and design process Alex. It’s impressive and rewarding to have all this information available online to share with aspiring design fledglings.

Leave a Reply