Case Study:

Trips to Discover

www.tripstodiscover.com

A travel inspiration platform, and hotel booking system, helping travellers turn their travel daydreams into reality.

Image related to Case Study

Project Overview

The CEO of Trips to Discover reached out to me to help them with improving the overall UI and user experience of their platform.

I worked with their marketing and development team over a six month period to review their brand and web assets, establish a design system and implement a UI refresh project with the dev team.

Conducting an initial audit.

After reviewing their codebase and discussing it with the CTO, I discovered that their system had only very basic theme elements implemented.

There were no consistent spacing rules, typography styles, or text hierarchy in place. Additionally, the limited colour swatches used were arbitrary and did not meet WCAG standards.

Image related to Case Study

The original design.

Image related to Case Study

Getting a design system started.

I set out to deliver some quick wins by addressing some foundational design principles, starting with the accessibility of colours and text. I developed and refined the design system in Figma and within the Tailwind config file in the codebase.

Setting up accessible colour swatch sets.

Previous research into colour accessibility had introduced me to the CIELAB colour model, which focuses on lightness and WCAG contrast of colours. I’ve found this model essential for maintaining WCAG standards in large systems that include multiple themes, dark modes, and considerations for colour blindness. As the codebase was already using the TailwindCSS framework I was able to seamlessly integrate the new colour swatch sets into the codebase.

Image related to Case Study

Colour Contrast: The Key to WCAG Accessible Text.

I was given access to the codebase so I could implement the new colour sets across all components in the codebase and simultaneously tested the colour contrast for every text element to ensure all text met at least AA standards.

Image related to Case Study

Starting a conversation about brand.

It quickly became apparent to me that I would need to open up discussions with the CEO and marketing team about their brand— after auditing all the fonts used on the platform, including the logo, I identified some issues with the quantity, quality and usage of the fonts.

I initiated some discussions with the CEO, but to keep the project moving, I focused on addressing the readability and typographical hierarchy of all the text.

Image related to Case Study

Defining a heirachy of information through a typescale.

I created a typescale in the design system to promote a consistent heirachy of information across the platform.

In my initial audit, I found that the development team was using arbitrary font sizes to fix layout issues. I resolved this by defining a base font size adjusted according to viewport size, and built the type scale off this.

Image related to Case Study

Getting the basics implemented.

I continued to make incremental enhancements to the codebase to implement the foundational design system elements— accessible text, colours and spacing.

I began designing a set of Figma components of all the current elements within the system— menus, cards, lists, and some key page layouts.

Image related to Case Study

Defining and refining the brand.

It became evident that, while a basic brand style guide existed, substantial work was required to define a clear brand essence and refine the brand elements comprehensively.

Continuing the discussion about type and brand.

Following some conversations around typefaces and the brand, I began discussions with the CEO and marketing manager to explore new typefaces.

I had put forward the suggestion to choose new typeface families (1-2) that could consolidate the fonts in use, and to reflect the personality of the brand.

Following some discussion and workshops with the graphic designer, it was apparent that there was several more fonts in use.

Image related to Case Study

From typefaces to brand strategy— treading carefully.

At this point, I realised that a larger discussion was needed to clarify the core brand values and better understand the platform's target audience.

This presented a significant challenge and a potential roadblock, as it affected the entire UI. Additionally, it would take time because the CEO and team was naturally emotionally invested in the existing brand, and the changes would have wide-ranging implications across all channels, including social media.

Making a plan to define and refine the brand.

To provide some scaffolding to help our discussions and direct the way we went about making decisions, I put together a rough plan.

I aimed to shift the approach to design decisions— to be guided by core brand values and attributes, rather than by personal preference or layout.

Image related to Case Study

Exploring new features and a future design.

While discussing with the CEO his vision to spotlight authors and their expertise on the platform, I took the opportunity to explore some new features and proposed typefaces in a new layout. I aimed to get the CEO and the team excited about the possibilities for a future version of the website, and help make a decision on the typefaces.

Image related to Case Study

Consolidating new ideas and a revised brand.

The CEO loved seeing the vision for a future iteration of the website, and wanted to incorporate some of the ideas into the website.

The process of defining and refining the brand made progress— a brand vision and values were defined, and this helped with making a decision on new typefaces.

Doing some target audience research would have helped with understanding their needs and what features should be built into the platform— but for now, the focus was on finishing and implementing a new layout.

Rolling out the fresh new look.

Until now, the development team and I had been making incremental changes to the codebase. We reached a point where we needed to consolidate a v1 of the new designs and implement.

A working prototype and refined components.

I finished off the design of all the Figma components and reviewed with the lead developer and built the layouts into a working prototype for review and sign-off. I also worked with the lead developer to setup a kan-ban of dev tasks and a new branch off the codebase to build the new version of the platform.

Image related to Case Study

The new homepage.

Image related to Case Study

The new article page.

Image related to Case Study

Mobile version of header, homepage and article.

Image related to Case Study

The Old Header vs. New Header.

Image related to Case Study

Sidebar elements updated with new design system.

Image related to Case Study

The end result.

The CEO and team were thrilled with the updated design, which received positive feedback from customers. Buoyed by this success, we next focused on developing an enhanced hotel bookings project to extend the experience for users of the platform.

New Hotel bookings project.

Image related to Case Study

View other work

Want to work together?

Get in touch and let's chat about your next project.