Creating the first responsive design website for the premiere, worldwide airline.
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 Proof of Concept
Create new modular design components
Agile UX and Responsive Design
Understand Key Audiences
Who is using the site?
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.
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.
All sensitive details have been removed from these documents for public display.
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.
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.
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.
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.
- 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
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.
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.