TRAVELSMART

UI/UX | VISUAL DESIGN


INTRODUCTION

Traveling is a huge part of life – it connects us with our faraway family and friends, allows us to explore new things, and learn more about the world around us. 

Whether people travel for leisure or for business, the last thing they want is to deal with the hassle of logistics. With the advancement of technology, most reservations, confirmations, and tickets are issued electronically and sent directly via email. Often, these codes and e-tickets are quickly lost within the inbox.

The purpose of this project was to tackle one of the major pain points of traveling – looking up reservations and confirmations.  TravelSmart crawls through inboxes to quickly gather and sort confirmations, tickets, and reservations by trip, so that travelers can spend less time searching and more time enjoying their vacation.


TravelSmart allows travelers to quickly access their e-tickets and reservations.

TravelSmart allows travelers to quickly access their e-tickets and reservations.


 

RESEARCH + PERSONAS

I began this project by researching different types of travelers. I then sorted them into different buckets in order to ensure that the app I was creating would make the most sense to the user and offer all of the solutions to the travelers' needs without overcomplicating the primary purpose of the app.


 

CONTENT MAPPING + FLOW DIAGRAMS

The next step of the process was to identify the content for each screen and create flow diagrams. These diagrams examine the user's journey through the app, and helps to simplify steps in order to facilitate the most seamless experience for them, while still creating a robust user experience for the traveler.  Each symbol represents a different purpose of the screen: squares represent static screens, circles represent user interaction or input, and triangles symbolize the app's action or prompt. Assigning these symbols to each screen helped me to better identify the interactions between the user and the app itself.

 A sample flow diagram from the beginning stages of my app planning process.

 A sample flow diagram from the beginning stages of my app planning process.


 

WIREFRAMING

After creating flow diagrams and examining the user's interaction with each screen, I then went on to the wireframing process. Here, I go through each screen of the app and create a rough sketch of what each screen might look like. I assigned hierarchy to the content and established static elements that would need to belong onto each screen.

USABILITY TESTING

After creating the wireframes and finessing the functionality of each screen, I created a working prototype of the app with POP and ran usability tests with a random selection of students who were unfamiliar with my app. I monitored their interactions with each screen and used this information to refine the content, organization, and design of the app.

A sample wireframe sketch demonstrating one of many iterations I created when designing the app.

A sample wireframe sketch demonstrating one of many iterations I created when designing the app.


 

VISUAL DESIGN

The last step of the process was to create a visual language for the app. I chose to establish the look and feel of the app based on travel photography and colors chosen from the imagery, and then designed the visuals for each screen.


 

BRAGPOINT WEBSITE

In addition to designing the app, I also designed a website that allows potential users to learn more about the app, what it can do for them, and also gives them the opportunity to download it from the App Store.