*I am unaffiliated with Allegiant Air. This is a speculative redesign that seeks to improve Allegiant's site while recognizing that my design decisions were made without the knowledge of the original team's intentions and constraints during design and development. I claim no credit for any original work on Allegiantair.com.

Background

Disclaimer: Allegiant Air neither sponsored nor endorsed this project.

• Project type: Speculative
• My roles: End-to-end product designer
  

Problem

Allegiant Air's existing design and booking flow, particularly on mobile, is frustrating to use and hurting conversions.

Hypothesis

Shortening the length of the booking flow and clarifying Allegiant's atypical business model could increase conversions and attract new customers.

Project highlights

Daunting audits

Usability audits and competitive analysis surfaced several opportunities for improvement on both desktop and mobile versions of the site.

User testing surprises

User testing of the existing site proved that new customers in particular were unlikely to book due to the site's outdated design and frustrating booking flow.

Balancing business needs

Finding ways to reduce user frustration while maintaining business goals in the redesign proved more difficult than initially assumed.

Refreshing a brand

The airline's existing branding — which I wanted to maintain — had to be changed for accessibility and user trust.

Identifying usability problems

Desktop and mobile audits

To start, I wanted to objectively identify usability issues with the existing designs, so I conducted a series of heuristic analyses on both versions of the site.

Clarity, readibility, and organization throughout the site's main booking flow were consistent issues.

Competitive analysis

Because of my research findings, I wanted to better understand how similar low-cost airlines design their booking flows and communicate their unique value to customers. I analyzed four other low-cost airlines and compared them on four key metrics: Homepage presentation, trip search and booking flow, UI and visual design, and overall user experience.

Usability testing

Finally, to validate the issues I'd identified and to help prioritize what to focus on in the  redesign, I tested the existing desktop design's homepage and core booking flow. The biggest issues testing identified were:

• 5/5 users didn't understand why Allegiant didn't fly to their local airport
  
• 5/5 users failed to avoid an optional seat selection fee during booking
  
• 4/5 users spent more on bags than necessary during booking
  
• 4/5 users said the booking flow was long and/or exhausting
  
• 4/5 users said the site's visual design made them distrust the company
  

Though I'd started with the goal of improving usability for existing users, research revealed Allegiant had a bigger problem with new customers.

Narrowing in on new users

Plotting pain points

Using the recordings from my usability tests, I mapped a new user's journey upon landing on Allegiant's homepage for the first time. Viewing the site from that perspective revealed pain points in most of the steps in the booking process.

Ideating solutions

Due to time constraints on the project and an unexpected need to refresh the visual design, I decided to move straight into wireframing for ideation. I also decided to start designing for mobile first to make the transition to desktop design easier.

Balancing business & user needs

Users repeatedly commented on the exhaustion of the frequent upsells, add-ons, and credit card offers during booking. Originally, I wanted to remove the rental car and hotel add-on screens entirely, but I learned Allegiant makes up to one-third of its income from add-ons — so cutting them wasn't an option.  Instead, I had to find ways to make them more enticing and less of a hassle for users. I accomplished this by:

• Combining the rental car and hotel screens into one
  
• Making it clearer that the add-ons could save users money
• Minimizing credit card offers and eschewing the frequent pop-up ads used
  

Normally, I'd test at this fidelity, but I worried users wouldn't get the full context, so I decided to apply the visual design first.

Refreshing a brand

Troublesome typography

Allegiant was only using one font, Montserrat, which doesn't offer much in the way of hierarchy and can be hard to read at smaller sizes. I also suspected it was contributing to users' perception of the brand being "cheap," since Montserrat is a bit passé these days.

I experimented with a dozen font pairings and landed on a combination of Barlow for headlines and Assistant for body copy. Both give a more professional, modern feel and make it easier for users to read.

An inaccessible palette

Some of Allegiant's color combinations weren't up to WCAG standards. Additionally, their palette of blue, orange, and yellow was quite harsh on the eyes, which posed a challenge for the redesign since I wanted to stay true to the brand. Rather than create an all-new palette, I decided to keep the existing colors but update their values to be accessible — and deploy accent colors sparingly.

With the visual design in place for the entire booking flow, I created a prototype of the mobile version and began user testing.

Testing & revisions

High-fidelity testing

Testing revealed a few minor fixes that needed to be implemented, including:

• Changing the buttons on the flight selection screen from a price to a CTA
• Updating the seat selection icons to be more intuitive to users
• Redesigning the Bundle comparison table to put all three options on one screen

Revision: Flight buttons

Because several users reported confusion over the CTA being a price rather than a phrase, I updated the text to make it clearer how to proceed in the flow. I also made the flight duration details larger since a couple users said they glossed over it at first.

Revision: Seat icons

Users reported that the first set of seat selection icons I'd designed weren't intuitive, and that they had to keep checking the legend to see what they meant. To solve this, I simplified the icons by removing ambiguous symbols and condensing the "Legroom+" and "Exit row" categories into one "Premium" category.

Revision: Bundle table

The bundle comparison table I'd originally designed, while effective at communicating contents, frustrated users because they had to navigate between tabs to compare each offering. The overall amount of text in the table also overwhelmed users, so I combined everything into one table and cut out the descriptive text.

This was an ambitious project to tackle, but I'm so glad I took the risk and pushed myself.

Reflection

Next steps

Test redesigns & desktop

I need to validate whether the revisions I made solve the problems identified in testing, and I haven't yet tested the desktop versions of the designs.

Measure improvements

User testing is one thing, but to really know if my hypothesis about new users is correct, I'd need to track conversion rates to see if the redesign increases them or not.

Continue designing for desktop

Due to time constraints, I wasn't able to finish screens for the entire booking flow on desktop, but I'd like to see it through.

What I learned

Follow the research, wherever it leads

Going into the project, I assumed I'd be redesigning the site for existing users, but my research surprised me and took things in an unexpected direction that challenged me.

Business & user needs don't always match

The true test of a good product designer is identifying what's right for users and for business — and finding ways to compromise.

Less really is more

Users can interpret a lot from a minimal amount of information, and I need to learn to lean more into trusting them rather than spelling everything out.

© Ry Kron 2022 | rykrondesign@gmail.com