Creating the first responsive design website for the premiere, worldwide airline.

AmericanAirlines_DeviceMockup_v1-mp.png
 

Challenge

American’s main challenge was how to transition to a new brand identity in the digital space and implement better mobile solutions. I took on the challenge of proving responsive design to bring American Airlines to the front of web technology while translating the new brand identity to our consumer facing websites.


Establish Vision and Project Goals

responsive-design-icon.png

Responsive Design Proof of Concept

modular-components-icon.png

Create new modular design components

agile-development-icon.png

Agile UX and Responsive Design


Understand Key Audiences

Who is using the site?

Primary Audience

Primary users were tech savvy, frequent travelers between the ages of 34-45 that would book a car rental as part of a business travel package with American Airlines.

Secondary Audience

Our secondary users were consumer level customers that could redeem points for a car rental on aa.com or were taking advantage of a cross-sell promotion.

How are users accessing the site?


Create Page Flows and User Stories

Designing the ideal user flow helps me understand how I can optimize tasks, and also how technology will support the user during their journey. User stories define features using language that puts the user at the center of all activities. My Agile team and I collaborated to define the user stories we would be designing for our product.

car-planner-detailedflow-v3-01.png
AA_CarPlanner_Feature-List_v1-mp.png
CAM00249.jpg
CAM00250.jpg
CAM00251.jpg

All sensitive details have been removed from these documents for public display.


Ideate

Sketches and wireframes are an important tool for getting creative ideas down and not being limited by a design tool’s capabilities. For this project, I worked closely with my product owners to translate their vision and requirements into visual concepts and ideas to validate requirements and product usability.

IMG_5896.png
IMG_5892.png
AA_Wireframes.png

Create

Working closely with my front-end developer, we came up with final designs for the entire purchase path over the course of a several 2-week Agile sprints. The designs became the bedrock for the new standard of digital e-commerce and responsive design patterns for the new American Airlines digital brand.

AA_Design_Cover.png
AA_iPhone_Homepage_v1.png
AA_iPhone_SearchResults-1_v1.png
AA_iPhone_SearchResults-2_v1.png

User Testing and Design Validation

We partnered with a local user testing facility to source users and schedule 8 participants to come test early prototypes of our new responsive car rental planner.

Methodology

We hired a facilitator to conduct the studies while our business and design teams sat behind a mirrored glass window to observe. Users were asked to accomplish certain tasks during each session.

Feedback Summary

  • Users generally found the new experience intuitive on all devices
  • The car pricing matrix was most valuable for price comparison
  • Affordances for filtering could be more clear
Slide01.jpg

Iterate and Launch

We took a couple more sprints to implement our user’s feedback to make small, impactful improvements before our launch. Getting feedback from real users removes personal opinions and biases of the project team while ensuring real users are a part of the design process.

AA_Launch_Mobile.png

Outcomes

The project proved to be a successful proof-of-concept for designing and building a responsive design in our Agile environment, setting new brand standards for our dot-com interfaces, and setting new UX patterns for other teams to use for their responsive solutions.

checkmark.png

Proved process and feasibility of responsive design as a strategy

checkmark.png

Created new modular design components to be used across apps

checkmark.png

Delivered responsive design solutions within an Agile environment


More Case Studies

Explosm_Comic_Mockup.png

Explosm

A Website Overhaul to Build a Community

CosmoProf_CustomerJourney_Cover_V1.png

CosmoProf

Crafting a Research-Based Customer Journey