responsive webpage design.

2014 | Alaska Airlines

 

context

In 2015 I was responsible for redesigning Alaska Airlines' website to a responsive design to allow mobile users to consume web content.

goals

  1. create a way for mobile consumers to view Alaska Airlines' web content

  2. create a great experience for mobile and tablet

  3. improve information discovery

  4. improve site navigation

  5. modernized the customer experience.

  6. My goals for the team: build web team's ability to design for mobile

 
 

my role

I was responsible for the design of AlaskaAir.com and I oversaw the design and research team. My role on this project was to oversee the overall project and the primary UX designers who researched and designed the solutions and produced the images below.

prior designs

For context, the existing page design featured a heavy amount of text and a left navigation. The existing layout was not responsive, and as is shown below, was nearly impossible to navigate on mobile phones.

 

prior web experience

The prior web experience was dated, had poor visual hierarchy, had a limited navigation system and did not represent the brand well.

 

prior mobile experience

The website was essentially unusable on mobile.

HomeImage_mobile.jpg
 
 

process

The first step in the process was to survey existing content templates, review the business needs for content pages , review usage metrics, and most importantly review customer behavior and expectations around content pages. From there we began to review other companies' approaches to content page design, ideating with front end developers and content producers on possible solutions. The design work started with whiteboard sketches and led to low- and medium-fidelity concepts.  Here are some of the concepts explored.

 
 

lo fidelity concepts

My team produced several concepts of the desktop and mobile versions at various breakpoints for user research and stakeholder input. Here are some examples of their wireframes.

 
 

These concepts led to a series of customer usability studies, both online via unmoderated testing tools as well as in person at the airport.  This research helped us determine which concepts provided the most usable navigation as well as which concepts customers preferred.

 
 

user testing

One of the dozens of user tests we conducted on the experiences.

baggage_video4.png
 
 

We ultimately conducted dozens of usability sessions with customers both in-person and remotely. The concepts moved from medium fidelity prototypes to high fidelity prototypes during the testing and iterations. We also conducted several design reviews/critiques to mature the concepts.

 
 
 

redesigned experiences

The final designs were rolled out in early 2015 with a selection of high trafficked sections of the site. As those proved effective the rest of the site is being migrated to the new standard. 

 
 

Redesigned Web experience

 

After_baggage.png
 
 

redesigned mobile/responsive experience

And here's how the responsive content renders on a phone.

New responsive Alaska Air May.gif
 
 

outcome

Check out a few pages yourself on the live site: