Flash Pack

UI/UX SITE REDESIGN

client & task

Year

2019-2020

Location

London & remote

Flash Pack is a travel start-up that offers adventures for like-minded solo travellers in their 30s and 40s that really get under the skin of a place via local and unique experiences. Think the thrill of backpacking, elevated by boutique hotels and seamless itineraries.

  1. To apply the company's new rebrand to digital 

  2. Create an accessible colour palette, typography styles, iconography, and accessible imagery 

  3. To improve the customer's purchase journey through seamless interactions and user journeys 

Shape 1.png

Responsible for creating the UI design for the company's new rebrand. Working with basic wireframes, I thought about the customer's journey and touchpoints when designing each of the modules. I worked closely with the marketing and product team to ensure that I really understood the customers and how to best communicate the companies USP through the experience. Together with the developers, we worked with an agile methodology to quickly test and implement new designs using a digital component library. I defined the site's typographic styles, which colours were used from the new rebrand, and gave art direction to the images. The design was modular which meant the components were designed flexibly for the in-house team to manage and content upload. Within a few days of the new rebrand, the company made almost 10x their usual monthly profit.

The solution

The process

Step 1 - USer Testing

Working with simple UX wireframes and the company's target audience research I started on modular UI designs for the company's new website rebrand. To validate design decisions, we ran a user testing workshop with the target audience inhouse. We asked the users 3 questions to validate the similar trips arrow carousel interaction, how easy it is to find useful info, and the booking date picker. 

Step 2 - modular design

Once the user testing validated the designs, we moved onto defining typography styles, colours, buttons, icons, navigation, and footer. We then created modules so that the developers could quickly update the company's new digital storybook of live code and deploy it to the staging site when ready. These were developed into a full detailed digital style guide. 

Flash%20Pack%20user%20testing%402x_edite

Step 3 - Page designs

A full suite of UI page designs was delivered for the website. Everything from the homepage, product page, country pages, legacy pages, and mega nav redesign.

Invison: https://invis.io/WNT5OKZ8XUG#/407340817_Desktop_Homepage_V2

Flash Pack mobile homepage@2x.png

Mini projects

Flash Pack mobile nav.png

Mega nav & footer redesign

With SEO and UX in mind, we redesigned the mega nav for mobile, tablet, and desktop. It was important to make all the pages easily accessible to the user as the pain points for the current mega nav was that this is confusing. 

 

For SEO we needed to keep the countries in the nav, but more structure and sense were required in the nav layout. The footer currently repeats a lot of information so we refined this to key requirements from SEO and product team. We also wanted to make the nav more visually enticing with the addition of images, trips, and articles to upsell. This project was completed in 2 weeks.

Trip booking page

The booking page had the most iterations in my 9 months working for Flash Pack. Because of their close relationship with customers and A/B testing we were able to update real feedback within weeks in the team.

 

The main goal of this page was to reduce the number of booking steps and to make the information easily digestible. The blue information bar will remain sticky so that the user has information about what column is at all times.

 

The urgency messaging was added in from the marketing team and increased the sales hugely. We used a traffic light system with brand colours for the messaging. We aimed to make the early bird and sales understood by the customer. This was done by colour coded messaging and having pop-up info appear on hover, telling the user more about the promo. 

Macbook air mockup homepage Copy@2x.png
Flash Pack desktop country page@2x.png

Country landing page

With the customer in mind we designed a solution that gave useful and interesting information about the country, to create excitement to book.

 

Icons with the time of sunrise and sunset and temperature were added in to create real-time useful information and designed to make customers want to revisit the site.