matkinsart

Airgo Travel App

The Challenge

Customer: Traveling Consumers

Role: UX and UI Designer, Illustrator

For this case study I chose to focus on the challenging and overwhelming options available for finding inexpensive flights. I began looking at airfare sites across the web looking at how flight searching is setup and how the process and design could be simplified.

researched sites researched sites

Storyboarding

This part of the process is often overlooked but this step can be valuable in showing a user in context and/or displaying a concept for a project. Below is an example of how a user would use the AIRGO app to book a flight and encounter all related actions involved with booking a trip.

amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image

Wireframes

The wireframe stage is a great opportunity to visualize the UI and a skeleton of the experience. The following sketches are used to communicate the general flow of setting up an account and booking a flight. I often ideate in sketch form to communicate quickly the concept before moving on to a more refined wireframe.

amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image

Prototype

View Axure Prototype

The prototype phase begins after working out some user flows with more concrete requirements. This phase allows stakeholders to visualize an experience in low fidelity but also generate feedback and ideas from them without being bogged down with a higher fidelity prototype where stakeholders feel less likely to make changes and get stuck on specifics like color or icons. Collaboration makes better products.

amazon placeholder image amazon placeholder image amazon placeholder image amazon placeholder image

Mockups

The beautification and icing on the cake of an experience. Once the prototype has been completed the next step is a higher fidelity prototype with mockups and detailed interactions. After the mockup is complete a spec doc is created for developers and also for the stakeholders which acts as an artifact for the stages of the project up to that point and gives context of the project in the future.

amazon placeholder image amazon placeholder image amazon placeholder image