responsive page and navigation design (2014)
In this project I oversaw an effort to make content pages on alaskaair.com responsive for mobile/tablet users. Beyond that goal, this project improved information discovery, improved site navigation, and modernized the customer experience.
My role was to oversee the overall project and the primary UX designers who researched and designed the solutions.
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:
Content page and responsive navigation before (desktop and mobile)
The prior design was dated, had poor visual hierarchy, did not represent the brand well, and was not usable on mobile and was not accessible.
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:
Content page wireframe concepts
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 various concepts--screen captures from test sessions:
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.
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.
Content page and responsive navigation after (desktop and mobile)