Travel Super Market
Design System & Product Transformation

My Role - Creative Direction, Design Direction, Design, UX

Brief

This was more than a redesign. It was a re-platform, brand refresh, and rethink of every core experience.

  • Develop product vision and roadmap in partnership with business and creative leads

  • Create a fully responsive site, optimised for mobile and contemporary UX standards

  • Redesign the hotels search from scratch; unify the look and feel of other channels

  • Lift and shift 6,000 pages of SEO-rich content—without breaking rankings

  • Build interactive prototypes and conduct user testing to validate every design move

  • Improve conversions across all channels

  • Improve customer loyalty

  • Improve partner experience

Overview

TravelSupermarket brings together flights, hotels, package holidays, and car hire deals from a diverse range of providers. Users can search, compare, and book directly with the provider, all in one seamless experience.


This project was a substantial overhaul: redesign, re-platform, and brand refresh. The existing site ran on outdated technology, making a comprehensive transformation essential.


Mobile optimisation was a critical focus, dramatically improving accessibility and user experience for everyone.

Post Transformation

Results

After launch, the impact was clear. The new platform delivered not just a visual refresh, but deeper engagement and stronger business performance.

  • +100% increase in unique visitors (2.4M → 4.8M/month)

  • Improved conversion rates across all channels

  • 4× increase in high-value “My Suitcase” users

  • Streamlined conversion funnel, reduced drop-offs

  • Maintained full SEO value throughout migration

Post Transformation Conversion Funnel

1 - Audit

Challenges

The scale was daunting: a legacy codebase, rapidly rising mobile usage, and business-critical SEO content made for a complex project.

  • Ageing technology platform limiting innovation and mobile performance

  • 6,000+ SEO-heavy content pages required careful migration

  • 20+ legacy page layouts made the user journey inconsistent and confusing

  • Search engine API limitations restricted backend changes

  • Needed to improve conversions and partner experience without impacting traffic

Project Drivers

Strategic priorities shaped every UX and design decision.

  • Business growth was limited by old tech and slow mobile

  • Competitors were innovating faster; TSM risked falling behind in UX and features

  • Hotels channel growth constrained by reliance on white-labelled search engine

  • Success hinged on finding harmony between commercial goals and real user needs

TSM Site & Content Audit

Before any big redesign, I always start by mapping what’s there. TSM’s original site was a jumble: 20+ unique page layouts, clunky on mobile, and hard for users to navigate. I led an audit, identifying weaknesses and opportunities.

Key Actions:

  • Aligned redesign vision to business goals

  • Audited the entire site for UX and performance issues

  • Laid the strategic groundwork for a complete platform overhaul.

Old Site Templates

Old Search

Old White Label Results

2 - Strategy

Business Model

TravelSupermarket earns 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.

  • Thousands of SEO-optimised content pages to attract visitors

  • Revenue depended on balancing commercial needs and user trust

SEO content strategy

The content strategy revolved around the substantial task of lifting and shifting 6000 pages of existing content while simultaneously generating new content for the updated website.

This extensive effort included the creation of over 6000 hero images, strategically designed to enhance the performance of each page. The challenge extended to ensuring that each image seamlessly accommodated both mobile and desktop platforms across all breakpoints, maintaining optimal visual appeal throughout the user experience.

This comprehensive content strategy aimed to not only retain the essence of the existing content but also elevate the website's overall quality and performance.

Partner Strategy

In addition to managing a vast array of images, our content strategy faced the challenge of handling hundreds of logos, which were in disarray on the previous site.

The complexity lay in maintaining brand recognisability; a straightforward monotone approach wasn't sufficient. With a mix of white and full-color logos, we strategically navigated this diversity. The goal was to harmonize the logos, ensuring each brand remained distinctive while adhering to a cohesive visual theme.

This meticulous approach not only preserved brand identity but also contributed to a more polished and professional aesthetic on the updated website.

TSM Brand Strategy

The project encompassed a re-platforming, brand refresh, and the creation of a fully responsive site with enhanced user experience and contemporary design. The scope of this massive undertaking aimed at providing a modern and user-friendly platform for travel enthusiasts.

Mapping the Customer Journey

A clear customer journey map was essential to unlock both user and business value. I led workshops to map every step, from inspiration to booking and beyond, helping the team see where users dropped off and what they needed to keep track of.

  • Journey mapping highlighted gaps in research, booking, and multi-device use

  • Framework guided product vision and roadmap

  • Sparked the “My Suitcase” bookmarking concept for better long-term engagemen

Restructure

The first step in transforming the experience was to untangle the mess of layouts and create a modular, flexible system, one that could scale easily, remain readable, and adapt to future business needs.

Key Improvements:

  • Reduced 20+ layouts into one flexible, unified content system.

  • Introduced modular components that adapt to any content type.

  • Improved readability and accessibility across mobile and desktop.

  • Created a consistent design language that scales with the platform.

3 - Ideation

My Sketch Book

The cornerstone of my idea generation process involves the humble sketchbook filled with low-level sketches, almost like scribbles or doodles.

It's the rapid extraction of ideas from my mind onto paper, allowing thoughts to materialise swiftly. In this unrefined state, ideas converge and take shape seemingly from nothing.

The amalgamation of creative and analytical thinking organically organises these raw sketches into more coherent and efficient formations, unveiling innovative possibilities born from the simplicity of pen meeting paper.

Group Sessions

During the TSM digital transformation project, high-level ideas were hashed out in group sessions.

Visualised as sketches on the wall or on note pads, we thought out loud and rapidly generated concepts.

When a design clicked with everyone, we translated it into a digital mockup, seamlessly blending our immersive design process with the broader transformation efforts at Travel Supermarket.

4 - Design

Colour

Travel Supermarket's Revamped Palette: Accessible Elegance

In our exploration of travel brands, we noted a trend favouring sky and nature-inspired colours. For Travel Supermarket's revamp, we chose a distinctive orange and purple pairing. Inspired by sunsets and the sun's radiance, these aspirational shades aim to enhance the brand's allure in every interaction.

Strategic Harmony: The orange and purple hues, chosen for both aesthetics and complementary color theory, offer a visually pleasing and cohesive experience. This intentional pairing ensures a unique, memorable brand identity without compromising accessibility.

Inclusive Design: Prioritising accessibility, the palette was carefully crafted with the website as the starting point. Beyond visual appeal, it guarantees a user-friendly experience that resonates with a diverse audience.

Home

A Clean Home

The key distinction between the old and new site lies in its decluttered essence.

The new design represents a departure from ads, eliminating distractions and enhancing user focus.

The primary goal was to integrate seamlessly into search results, aligning with a novel business model centred around deriving revenue from results, not advertising.

This strategic shift underscores a commitment to user-centricity approach.

Search

UI Design Approach

The Travel Supermarket (TSM) user interface is grounded in a modular framework featuring a cohesive set of components and uniform design patterns.

A particular focus was placed on search results, which are meticulously represented as luggage bands. Extensive effort was dedicated to the design of these search result cards, aiming for a seamless and consistent visual language across all search channels.

The result is a UI that not only embraces modularity for efficiency but also prioritizes a unified and visually pleasing experience, ensuring coherence and user familiarity across various interactions on the platform.

Animated Testing

Search 1 vs Search 2

The initial designs, while visually appealing, didn't perform as effectively in testing compared to the more traditional UI. Users were able to navigate the UI, but not as swiftly, leading to the perception that the visual enhancements didn't outweigh the importance of meeting user needs efficiently.

Search Result Cards

UI Design Approach

The Travel Supermarket (TSM) user interface is grounded in a modular framework featuring a cohesive set of components and uniform design patterns. A particular focus was placed on search results, which are meticulously represented as cards.

Extensive effort was dedicated to the design of these search result cards, aiming for a seamless and consistent visual language across all search channels.

The result is a UI that not only embraces modularity for efficiency but also prioritizes a unified and visually pleasing experience, ensuring coherence and user familiarity across various interactions on the platform.

SEO Content

Two Layout System

1. A single main column equally sub-divided where necessary. This allows content to span the width of the page.

2. An asymmetric two column layout. The comprises a wide primary content column to the left, and a narrow sidebar to the right for secondary, related or supporting content.

Both systems can co-exist on the same page.

Consistency was a top priority. Every element, especially our card-based search results, was designed for clarity and ease of use, ensuring a seamless experience across all channels—whether users are browsing flights, hotels, or car hire. This cohesive design language not only streamlines development and future updates, but also makes the entire site more intuitive and familiar for every visitor.

UX Wireframes

UI Designs

6000+ Hero Images

The previous site’s content relied on low-resolution images, often chosen without any thought for composition or how they would sit alongside the page content. To address this, I assembled a dedicated team focused solely on sourcing better hero images for every page across the site.

Each image had to fit seamlessly within the new template system I designed, ensuring a consistent and high-quality visual standard throughout. I developed a scoring and sign-off system to maintain this quality.

We worked closely with stock photography, aiming to source the very best visuals possible without shooting new content or exceeding budget. The result was a vast improvement in both visual impact and overall brand cohesion, with over 6,000 hero images now supporting a more modern, engaging user experience.

Full Page Fallback Grads

For pages that feature full background images, I introduced sky-inspired CSS gradients as a fallback. These gradients ensure that every page remains visually appealing, even if a large hero image is still loading or unavailable.

The gradients use a three-layer system: a solid colour base, overlaid with two transparent gradients flowing in from the top corners. This approach maintains a polished look and seamless brand experience across the site, no matter the loading scenario or device.

Blog

Our travel blog was created as a key part of our SEO strategy, designed to attract, engage, and inform visitors at every stage of their journey. By publishing relevant, high-quality articles on destinations, travel tips, and industry insights, we built a rich library of content that brought in organic search traffic and kept users exploring the site.

Emails

5 - Advertising

Ads

Advertising on the site generated substantial revenue. While it can be annoying, it's the reason we could offer better rates. The design challenge was to minimise this annoyance and disrupt the user journey as little as possible.

PPC Pages

The design keeps the experience clear and trustworthy, balancing essential information with minimal interruption. By stripping away unnecessary clutter and surfacing strong value propositions, like price guarantees and wide provider coverage, we help users find what they need, without overwhelm.

This covered all channels including car hire, holidays, hotels, flights and insurance.

Home Takeover

By creating a full-page home takeover, we provided our brands with a unique advertising opportunity. My designs aimed to integrate the takeover seamlessly into the homepage layout. The content was meticulously crafted to avoid disrupting the overall design.

6 - My Suitcase

My Suitcase

My Suitcase was a bookmarking tool that allowed users to package their own holidays together and share them with friends.

User Journey Wireframes

UI Designs

My Suitcase Explainer Video

In house we created an explainer video to walk site visitors through how the My Suitcase tool worked.

7 - User Testing

User Testing

User testing wasn’t an afterthought—it was woven into every sprint. We built HTML prototypes to test designs early, combining guerrilla tactics with lab-based research to get unfiltered feedback before handover.

  • 12 one-to-one, hour-long lab sessions

  • Counterbalanced task order (half on new site, half on old)

  • Sessions included interviews, core tasks, and follow-ups

  • Users voiced thoughts aloud while searching, filtering, and saving holidays

  • Direct user insight informed every key decision

Previous
Previous

Alexander Forbes

Next
Next

Travel Super Market /// Brand Transformation