
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