Introducing GateIt

GateIt serves as a one-stop app for locating restrooms, restaurants, and retail shops in a specified airport gate/terminal and determining how long it takes to get to and from those locations.

Overview

Class: Digital Product Design (ENTR 390)
Objective: “Improve the Travel Experience”
Skills: User Research, UX/UI Design, Prototyping
Interface: iPhone Mobile App
Tools: Sketch, Invision

Problem Statement

Flight passengers want an easier way to find restaurants, restrooms, and other activities quickly in an airport because they need to navigate around an airport terminal under a time constraint.

Process

Interviews

To begin the UX research process, I needed to determine who was going to be the potential audience of the app. I conducted five rapid open-ended interviews with family and friends to better depict some of their pains when navigating an airport. Here are insightful quotes I got from the contextual inquiry exercise:

"I don't enjoy getting lost in an airport, especially when I'm taking connecting flights"

"I can never find the restroom in the terminal!"

"I don't know what to do when my flight is delayed"

"I regret not planning in advance, as my kids always want something to eat before we take-off"

"I only go to the same airports, so I usually know my way around the terminal"*

*While this quote serves as an anti-motivation, it is important to understand who is not the target audiencefor the app.

With these interviews and quotes in mind, I created an affinity map outlining considerations for my app:​​​​ ​

Affinity Map

 After I processed the information from the affinity map, I felt I was ready to create personas for GateIt. I created one primary persona and two secondary personas. For the primary persona, Sarah, I also created an empathy map to understand how she interacts with her environment and what she values when traveling. ​​​​​​​

Personas

Primary Persona and Empathy Map: Sarah

Secondary Personas: Jim and Lisa

Wireframes

I began creating my wireframes and mockups after creating my personas. Based on my UX Research, I wanted to prioritize convenience and flexibility for the user. I made sure that all the amenities can be found on the homepage. I also wanted to include the logo on every page so that users can easily go back to the home screen just by clicking on the logo.

Lo-Fi Mockups

For my lo-fi mockups, I wanted to utilize colors that connected with amenities so that users can associate icons and buttons with the brands and locations (Popeyes – Orange, Brighton – Beige, etc.). I also wanted to provide users with the flexibility to choose from many restaurants, so I incorporated a scroll screen for the amenity options (middle screen).

Hi-Fi Mockups

After the first iteration of my mockups, I realized that it was not efficient to have the logo on every screen, as the logo would take up space from other more important features. I decided to get rid of the logo on every screen and just include the logo on screens with maps. I also revamped the colors and logo, as I wanted a gradient background for a more modern visual appeal and a logo that didn’t have the I as an airplane.

Final Prototype

*Important Note: To reach the onboarding process, you will need to click the screen to animate the plane. While I incorporate the auto-animate features of Adobe XD into my Adobe XD prototypes, I did not animate my Sketch prototype and instead I created multiple screens to illustrate the loading illustration. If the embedded prototype does not show up, please click this link: https://invis.io/NSQSNKV4XQ2. 

User Feedback and Next Steps

After the completion of my first visual design and prototyping project, I received tons of positive feedback and constructive criticism that I can learn from. As my first design project, it took me a long time to get used to the functionality of Sketch and InVision, but I was determined and passionate to learn about their features and I’m glad I persisted.
 
The Good
I was told that my app looks really nice and can be insanely useful for my identified personas. My mentor liked the animation I created for the onboarding process. I was also told that it was a smart design choice to have food, restaurants, and shops as the main hub of options from the home screen.
 
The Bad
I didn’t consider how the app resets to find the user’s location. It could be every time the user opens the app, or the user might need to manually change the location. I would have probably chosen for the app to automatically sense when the user changes location, so it’ll go back to the locating animation. However, the user would have to retype the flight time and gate number every time, so it’s not the most user-friendly. 
 
The Ugly
I got many complaints about the map feature. First, the pictures of the map are outdated and not accurate. There was no zoom in feature for the map, and I did not incorporate other nearby locations when the user chooses a specific amenity. It also takes four taps for users to find the location of a restaurant, so it would have been much more intuitive to uncover the map and nearby locations as the home screen. Also, my text buttons look the same as my input/text boxes, even though they have different functions (as seen in the onboarding process).
          
Overall, I really enjoyed my first design project and it solidified my interest in UX Design and UX Research. For next steps, I would learn from my mistakes and revamp some of the features of the app. I also would consider having the user create a list of potential restaurants or shops they would be interested in finding and have them all located on the map. 
Close Menu