Freelance UX DesignerElisabeth Mayr



Impala Website Rebrand

Impala Website Rebrand

About Impala

The travel industry hasn't had the same disruption as banking and other industries did. Impala is here to change this and make it easier for room sellers and hotels to connect and offer great stays for their customers.

About the project

Impala recently went through a rebrand and wanted to improve not just the UI but also the UX of their website.

I was the sole UX and UI Designer on this project and collaborated with a Content Strategist. We were guided by a Brand and Content Director and a Design Lead.

The project went across three months. You can find Impalas current website on impala.travel.

The Goal

The task was to update the website with the new branding as well as improve lead generation.

The Target Audience

Impala has two main audiences: People who provide accommodation, which could be anything from a Coliving or Airbnb to Hotels. The other main audience are room sellers which include travel agents or other types of OTAs (Online Travel Agents). Secondary audiences are potential employees and investors.

Before

Below you'll see what the website looked like before February 2022.

Impala Website Old Design Careers Page

Previous Careers Page

Impala Website Old Design Homepage

Previous Homepage

Impala Website Old Design Product Page

Previous Product Page

Impala Website Old Design Hotels

Previous Hotels Page

Impala Sitemap

Initial sitemap

When I joined the project, a rough sitemap has already been created.


The initial Impala Sitemap

The initial sitemap


Final sitemap

Together with the team we developed the sitemap below. We wanted to make it clear that Impala isn't a bed bank but instead offers software solutions for the travel industry, so we decided to keep the 'Developer' page in the main navigation.


The final Impala Sitemap

The final sitemap

Wireframes

The content strategist has worked on the content for the individual pages. I turned her documentation into wireframes. Together we fleshed them out.


Wireframes

Wireframes in Figma

Wireframe development

While the page content evolved, I cleaned up the fonts and spacing of the wireframes to see if the copy provided by the Content Strategist fits well for both desktop and mobile devices.


Cleaned up wireframes

Cleaned up desktop wireframes

UI Design

Pentagram, the agency behind the rebrand of Impala, has provided brand guidelines. I created an atomic design library in Figma based on their documentation. Main components like buttons and tags were already provided from the guidelines.

Font styles

Pentagram also provided a bespoke font for Impala. There was a good documentation for print, however, there were no exact guidelines for digital use. Based on the cleaned up wireframes, I worked on guidelines using the new font styles to be used across the website. To ensure consistency across all of Impala's digital products, I discussed the font styles with the design team at Impala, who was also working on making the fonts work for their ditigtal products. The fonts below made it to the final design library for the website.


Impala's websites fonts created in Figma based on Pentagram's Brand Guidelines

Impala's websites fonts created in Figma based on Pentagram's brand guidelines



MVP Soft-launch

Impala had a tight deadline for their brand release. Due to the time needed for development, we decided to have an MVP website with the most important modules and information.

After the MVP launch, I continued testing the new modules before they were released at a later stage. The remaining modules included additional heroes, more explainer modules as well as a new blog page design.


MVP User Interface Design

MVP User Interface Design for desktop and mobile


User Research

After the initial UI design was done, I conducted some qualitative user research. Usually, I prefer testing at wireframe stage. Since it was difficult to source users, as it's a B2B project, and the branding was playing an important part, I decided to test in the UI stage rather than the wireframe stage.

During the user testing sessions it became clear that some modules were more relevant than others. Users were more interested in which hotels or room sellers they could access as well as how Impala compared to other solutions, so the relevant modules were moved further up the page.

User testing sessions were done remotely, following a script I prepared. I recorded the sessions and took notes in notion.



User Research notes in notion

User Research notes in notion


Blog Design

The blog had to be migrated from the previous to the new CMS. To make this as quick and easy as possible, a basic blog design had to be developed, due to the restrictions of the migration. The developers provided a version with modules that they needed redesigned. Below you can find the modules requested by the developers and the designs provided.

Impalas previous blog elements

Previous blog page design

MVP Blog designs

MVP blog page design

Post MVP Blog Design

A few weeks after the brand launch, the new blog post designs could be released. The new blog allowed for more flexibility with our modules.

Desktop blog prototype

Mobile blog page design

Animation

The MVP site didn't have much animation. To showcase that Impala is a tech company, we wanted to add animation that is playful but not too distractive.

Below you can find some animations I've created in Adobe After Effects and exported as .json files for the developers to implement on the website.


Current Status

The new Impala website has launched in February 2022. You can find the live website at impala.travel.

Lisi took an incredibly challenging brief and in just a few short weeks, turned it into a fully-fledged design that drove a major increase in dwell time and drop in bounce rate.

- Steve Williams, Art Director at Impala

From initial brief to published site, we have Lisi to thank for the impact of our new web presence. All while bringing a joyful spirit and good cheer to the project.

- Abigail Turner, Senior Marketing Manager at Impala

Don't be misled: Lisi isn't just a designer. She seamlessly became part of our team, took charge of managing our developers, and ensured that the technical execution and content quality on our final site was first rate.

- Daniel Etheridge, Brand and Content Director