My Role
Principal user experience designer delivering research, UX strategy and wireframes. I was responsible for recruiting and leading the UX team.
Brief
- Develop product vision and roadmap in partnership with Product and Creative Directors.
- Design fully responsive site with improved UX and contemporary design.
- Redesign hotels search from scratch and re-skin other channels.
- Lift and shift 6000 pages of existing content.
- Create interactive prototypes and conduct user testing.
This was a massive redesign, re-platforming and brand refresh project. The existing site was built on an ageing technology platform, and was not optimised for mobile devices.
Challenges
- Comparison sites allow users to access thousands of search results with ease. But the volume of results makes identifying the best choice much harder. Research showed the priorities of individual users varied widely. The challenge was to present sufficient information with each result without overloading the user.
- The site contains a vast amount of heavily search optimised content. While it served it’s job of driving traffic, research indicated that users found the content hard to digest and disconnected from the site’s primary function to provide travel search results. Importance of SEO performance to business model meant the content could not be changed. Great care would be needed to deliver improvements without impacting SEO.
- Some usability problems were baked in because the project scope did not allow functional changes to the search engine API.
Project Drivers
“Helping a business grow is about identifying the strategic priorities driving a project, and finding harmony between the business’ goals and their customers’ needs.”
- Ageing technology platform limiting growth of business
- Sharp increase in mobile traffic but site not optimised for mobile devices
- Realisation that TSM was falling behind in a highly competitive sector, in both its UX and feature set.
- Growth in hotels channel limited by reliance on white-labelled search engine.
Business Model
“Understanding the business model is key to ensuring the UX delivers on business objectives.”
Diagram of revenue model – created as workshop stimulus
TravelSupermarket earn a commission on each click, or when the customer makes a booking. Revenue is dependent on high traffic volumes, and the business model relies heavily on attracting visitors through organic search. TravelSupermarket.com comprises literally thousands of pages of SEO holiday-related content.
Website Audit
The existing site was an unruly mess, with over 20 different content layouts all of which were poorly structured and difficult to read. I was able to rationalise this into a single responsive layout with a set of modular components catering for various content types.
Mapping the Customer Journey
“Understanding how the experience you are designing fits in the wider user journey is key”
The customer journey map is a key tool for identifying customer pain points and business growth opportunities.
TSM only serves a narrow slice of the holiday maker’s customer journey. I led the product team through a series of journey mapping workshops. The outputs were used as a framework for developing our product vision and roadmap.
The exercise highlighted issues users face keeping track of interesting search results, typically over an extended period and on more than one device. At the same time, there were no opportunities in the existing journey for the business to collect customer data. This insight helped make the case for TSM to develop bookmarking functionality.
Design Exploration
Pen and paper allow me to explore ideas quickly and get feedback from team members early in the process. I’m also a fan of Markdown for outlining the content structure, and capturing experience principles.
Modular Design
“Modularity speeds up the design process, because you are building from a solid base. Usability is improved, because consistency helps users recognise how new elements should work.”
The TSM UI is based on a modular set of components with consistent design patterns and styling. Search results are represented as cards. A lot of time was spent designing the search results cards, ensuring a consistent visual language across each of the search channels.
Responsive design
A great deal of care went into ensuring the design looked great and worked well on all devices from mobile phone up to 27 inch desktop display.
Red-lined wireframes to discover breakpoints and hand over design to dev team
User Testing
“I believe in testing designs with users early and often”
TSM was a waterfall project, so I built HTML prototypes to guerrilla test the design before handing over to the dev team. I developed an approach that allowed me to create a testable prototype very quickly while still delivering a high level of fidelity. The visual design file was separated into components. Components were exported as separate PNG images and the UI assembled using a simple HTML framework. Transitions between states were prototyped with a few lines of JavaScript.
Check out the 'Holidays' prototype
Team
Wil Lynch – Product Director
Paul Robinson – Creative Director
Giles Perry – Principal UX Designer
Diego Márquez – UI Designer
Ben Ellis – UX Designer, web
Lynsay Pert – UX Designer, mobile app
Alberto Moro – UX Designer, mobile app
Results
- 13% increase in unique visitors
- Improved conversion across all channels.
“I delivered a fully responsive user journey, with major improvements to feature set, usability and readability of SEO content.”