Confirmation Page
UX, IA, Wireframes, HTML/CSS Prototype

The Overview

The Confirmation Page is the final step of the flight, car, and/or hotel booking process for CheapOair. This page confirms the users' booking details, provides confirmation numbers, seat assignments, airline information, airport and gate information, and anything else that is needed for when the users are ready to begin their journey on their booked trip. It is one of the most important pages as it has necessary information the user needs.

The Problem

The confirmation page has been through many rounds of stakeholders' requirements and implementations of features that need to be added on to the page. Over the years, it has become a cluttered, hard-to-read page full of booking numbers and vital user information spread all throughout the page without any sort of organization or information heirarchy. Users were providing negative feedback about the page and being confused on where to find certain information. It was in serious need for a redesign.



User Personas

As part of this redesign, I had responsibility over creating user personas to help with the interface design. Based upon real Qualaroo user feedback from the confirmation page, I created these user personas to better understand the users' needs in order to design for the actual needed purpose of this page. Whether it was a family traveling on vacation or a business person traveling for work, every scenario needed to be accommodated.

confirmation page user persona
confirmation page user persona
confirmation page user persona
confirmation page user persona


Information Architecture

Another part of this project that I was responsibile for was the information architecture. I conducted a heuristic evaluation of the current page to create an information architect map in order to better organize the page's content and provide some hierarchical structure.

confirmation page information architecture


The Wireframes

After having completed the user personas and the information architecture, I went on to create wireframes of the newly designed interface for the confirmation page. The wireframes include some concepts for the price details and wireframes for the entire page as a whole.

confirmation page wireframes
confirmation page wireframes
confirmation page wireframes
confirmation page wireframes
confirmation page wireframes


The Prototype

Once the UX design and UI design were finished, I was also responsible for creating a functional prototype to pass off to the developers and engineers. For this prototype, I utilized HTML and CSS with the Twitter Bootstrap framework. The page was coded, functional, and responsive down to the size of a portrait tablet.

confirmation page prototype html code
confirmation page prototype html code