Samantha Mason Wilder
title-personalisation@1000px.png

Personalisation

Personalisation

Design Direction, UI Design, User Experience, User flows, Branding, Style Guides, Design System

With the Cheapflights mission to be the customers helping hand in travel search, the company needed to engage and personalise the user experience across web and app. The product team were tasked to deliver a seamless and tailored product offering that would help the user save time and book flights faster. My role as the lead product designer for web services was to work closely with UX and app to deliver a unified design solution that strengthened brand experience.

Illustrations taken from the app userflow

Illustrations taken from the app userflow

Research & Strategy

PRoblem and GOal

Users could not pick up where they left off, meaning they would have to repeat steps from their last visit. They needed an experience to remove extra work, save time and find flights faster using any device on web or app at anytime. Cheapflights needed a way to record user preferences and use that to help them along the flight booking path as part of a retention strategy to increase repeat visits and revenue per user.

goals title tile.png

User-flows

Competitor analysis and market research aided in the creation of top-line user-flows which the agile team discussed and contributed to. Each discipline from UX, product management, design and development were brought together to input on impacts, flag up considerations and sign off collobaratively. It became apparent when the flows became more complex that the user interface was going to require a vast set of components that would need to be interwoven throughout the entire meta product. The flows were broken down into 3 core areas:

  • Sign up & Log in
  • User account and preferences
  • Saved, recent and applying preferences to searches
personalisation-persp-userflows-postcards@0,5x.png

Brain storming sessions were conducted to see where we could look at optimising. Looking at states, forms, copy, illustration and modular design offerings. We managed to scope out a design roadmap to deliver a UI library that would work across web and app.

brainstorming.png

Design Application

Forms

The absolute core to personalisation was the form. On almost every user-flow the user would have to interact with a form, so as the lead product designer I worked in close collaboration with the lead app designer to just focus on form styling. We investigated interactivity options, label behaviours, colour treatments, button design and error message styling. Keeping stylings as similar as possible across web and app whilst adhering to device guidelines and considering browser rendering differences, the redesigned form created the first seamless design experience for Cheapflights products. 

Form guidelines for development (pre rebrand and including UI design)

Form guidelines for development (pre rebrand and including UI design)

Rebranded app and web form guidelines (including UI design and app walkthrough)

Rebranded app and web form guidelines (including UI design and app walkthrough)

Visual Design

Once the style guides and components had been created it was then the time to go back to the user flows and bring them together for the visual design.

Sample personalisation user journey (not all parts shown) - Log in / Select airline preferences / Apply airline preferences on search

Sample personalisation user journey (not all parts shown) - Log in / Select airline preferences / Apply airline preferences on search

Responsive design for personalisation

Responsive design for personalisation

Evolution

As personalisation was delivered over various sprints it meant that the project was in full swing when the company was going through a complete rebrand. This meant colours, typography, illustration and tone of voice all had to be updated for launch. Below are examples to showcase the process and application of these changes. By this time I was responsible for the delivery of branded assets and managed a small team including an in-house graphic designer to work on bringing elements of the rebrand illustration to the personalisation project.

Illustration

Application of new illustrations for personsalisation on the app

Application of new illustrations for personsalisation on the app

TONE OF VOICE

Every screen completed as part of the user flows for personalisation was recorded and the copy sent to the content team to review the language and copy. Context for each part of the user-flows needed to be given so that the content team could really bring the Cheapflights Tone of Voice to the product. This was the first product feature that had an extensive review of its copy which meant comms, marketing and product all spoke in once voice as one brand. Working closely with the product owner we reviewed every screen and prepared documentation for the copy changes. The review process can be seen below.

postcard_tone-of-voice_mockup_persp@0,5x.png

VISUAL Design System

As part of the continued development of the Cheapflights rebrand, a small team was created to develop the UI pattern libraries and the process of their delivery. A full audit of the site was done and options investigated to improve and innovate the UI design. The components were re-evaluated and simplified whilst working closely with the development team for final sign off. The core foundations of typography, colour and forms elements were redesigned and added to the library. They were applied to campaigns (e.g. the Cheapflights Awards) and testing environments to see how they performed. Below is an example to show the development of UI design on personalisation.

Personalisation sign up form styling (at launch) - States:  Default / Focus / Error

Personalisation sign up form styling (at launch) - States:  Default / Focus / Error

Personalisation sign up form styling using new components from the Visual Design System - States:  Default / Focus / Error - Form is less cluttered and optimised for faster sign up

Personalisation sign up form styling using new components from the Visual Design System - States:  Default / Focus / Error - Form is less cluttered and optimised for faster sign up

Design learnings

A project this complex required a great product manager to lead and manage throughout all stages. It ran over 6 months and was the single most collaborative project worked on to date and completely transformed the approach to UI design for Cheapflights. Both process and software were changed as a result to continue the development in creating a structured set of design standards which would save time and strengthen brand consistency across web and app.