Today 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.
Below is a sequential outline of the steps involved in getting the project to this stage.
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).
Hour long, loosely directed interviews were held with key stakeholders to draw out business requirements.
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.
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.
We started by sketching how the page should look as a whole, sticking to a component approach.
Then I moved on to component level 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.
Then we did some co-design and assembling components into a homepage with Stakeholders:
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.
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.
We then went into design, and what came out is the beautiful page that you see today.
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!
My next post will talk about the research that we did and how we analysed and used that information.