Project Overview
Creating a new airport experience.
DFW Airport wanted my team and me to build upon their current app. The airport believes that if we can provide a tool that helps users navigate the airport more efficiently, travelers will have more time to enjoy the shopping and amenities DFW Airport provides.
My Role/Responsibilities
UI Designer
UX Designer
Challenge
The evolving policies and procedures around airplane travel can leave travelers uncertain about what to expect at the airport. Furthermore, with unclear signage, unhelpful support staff, and apathetic TSA agents, many users find themselves just making it in time for their flight's boarding call despite leaving for the airport two hours prior.
Solution
Users need more readily available information to help them prep and navigate the airport. Which led us to create new features that deliver timely information to our travelers; so they can move confidently and efficiently throughout DFW Airport.
View Final Solution
Research & Planning
Pinpointing what improvements need to be made.
As we started the discovery phase my team decided the best place to start would be to get better acquainted with the current DFW airport app. We conducted a heuristic evaluation, as well as a C&C analysis to see how the current app stacked up to the competition.
Heuristic Evaluation
The first step my team took was to diagnosis the current challenges with the current app's functionality and assess where improvements need to be made. You can find our most notable findings below.
Survey
We recruited 58 participants who had traveled within the last two months to participate in a survey, so we could better understand their priorities and pain points. The quantitative data this survey produced matched our users' sentiments during interviews. In addition, the consistency in our research painted a clear picture of our user's main pain points.
Key Takeaways
- User's biggest pain point is going through security and understanding the appropriate procedure.
- Users dislike how TSA communicates protocol, inhibiting them from asking for help.
- Users want to know what type of CDC health guidelines and security requirements airports expect before they arrive at the airport.
- Users prioritize access to relevant flight information, so they can utilize their time more efficiently
- Users experience a lot of anxiety at the airport and find it a negative experience.
- Users choose to shop & dine based on the options they see on their way to their gate and only if they have enough spare time.
%20(1920%20%C3%97%201080%20px)%20(1).png)
Define
Mapping out our user.
Based on the information gathered from research, my team set out to synthesize our results and create an average user for us to reference in our design process
Persona
The first step in defining our user was to create a persona. This snapshot of our user will be the foundation of the design process, ensuring our app is user-centric.
User Journey
Next, we focused on our user's journey when departing for a trip. We believe by exploring our user's flow when they are leaving for a trip, we could pinpoint opportunities to correct pain points or even enhance their experience.
Ideate
Empowering users through their airport journey.
After synthesizing our research, one thing that became evident was that our users need more readily available information to help them prep and navigate the airport. Which led us to ponder how might we deliver timely information to our travelers that empowers them; so they can confidently and efficiently move through DFW airport with enough time to enjoy the airport's amenities before they depart.
Sketches
After several rounds of sketching, we arrived at a concept called "My Journey," an interface that would act as our traveler's virtual companion. The My Journey feature delivers timely information and resources to users during each step of their journey through DFW Airport (i.e., airport prep, check-in, security).
.png)
Wireframes
We tested several iterations to determine the best way to have users move through the different steps of 'My Journey.' Furthermore, we faced challenges in deciding the best way to display information and features to our users.
Service Blueprint
For different features in our new app to work, DFW Airport would need to build infrastructure throughout the airport to support our tech. In addition, we required DFW's marketing department to form partnerships with airline carriers and airport vendors. Which led us to create a service blueprint to communicate with stakeholder's the cross-functional support our app will need.
.png)
Test
Is our app ready for take-off?
Before we moved on to creating a hi-fi prototype of our app, we wanted to test how intuitive users found our app, especially since not everyone on our team was not confident in the current interface for our 'My Journey' page.
.webp)
Key Takeaways
New Ideas
- Users found the current layout overwhelming.
- Users did not know which buttons under each journey were informational content versus functional features.
- Users did not understand the 'My Journey" navigation and did not know there were other 'phases' due to the horizontal layout of the bar, which limited visibility.
- Add onboarding screens to introduce users to 'My Journey' and AR Navigation.
- Prioritize information on each 'My Journey' phase to make sure busy travelers are seeing the most important information first
- Redesign the layout of the 'My Journey' navigation bar to a vertical orientation displaying all five steps of the journey on one screen.
Design
Landing on the perfect design.
After taking into consideration the feedback, we received from our usability test. So, we returned to the drawing board and redesigned the 'My Journey' interface. Afterward, we felt confident with moving forward in developing a UI design system.
Design System Ethos
01
Using color to define buttons functionality.
02
Typographic hierarchy and contrast make important information stand out
03
A minimalist design to ease users and not further overload them while they are at the airport.
Typography
For typography we wanted to use a workhorse font that we could use throughout the whole app due to its professional looking nature and versatility.
%20(1).png)
Color Palette
When choosing the colors for our app, we drew inspiration from DFW’s brand values and paired complimentary colors to the DFW orange to each brand value. In addition, it was vital for us to integrate muted tones within the branding. Finally, since the previous app featured high-energy colors, we believed it would not be helpful to our users who are already dealing with stress and anxiety.
%20(1)%20copy.jpg)
Media
Regarding our visual choices, we decided to rely on illustrations instead of images. We believed illustrations would be a cleaner design choice since our screen space was limited, and we wanted to utilize as much white space as possible. Another essential consideration was incorporating the brand colors in our graphics to create a consistent color experience that will reinforce the app's integrity.
Final Dashboards
Creating a memborable airport experience.
The final design aims to reduce confusion and empower users by delivering timely information directly on their app and location-triggered notifications.
Onboarding
Based on our usability testing, we included an onboarding screen to introduce users to the app's two main features. In addition, the last page for onboarding features a CTA button for the 'My Journey' page to encourage that task flow to our users.
.png)
My Journey
The landing page features different hubs for each "step" of the user's airport journey. We placed destination and time-sensitive information for each step on the right. The 'My Journey' page also features a Shop & Dine hub to help encourage users to utilize the amenities at the airport. Once a user clicks on a hub, they can find services and resources to help empower them through each step.
.png)
AR Navigation
One major problem with the previous app was the in-app navigation did not meet real-world expectations. Due to this, we wanted to ensure users have a navigation system they can rely on that will prevent them from getting lost. Furthermore, by allowing users to see what amenities are close but out of their vision, users can find what they are looking for more easily.
Location Triggered Notifcations
To make sure our users are not only getting the correct information but the right information at the right time, we included geo-location triggered notifications initiated by data beacons throughout the airport. These notifications provide users with important information relevant to their journey and encourage them to explore airport attractions.
%20(2000%20%C3%97%201700%20px)%20(2200%20%C3%97%201700%20px).png)
Shop & Dine
To encourage users to shop and dine at the airport. We built out some new features on the current 'Shop and Dine' page where users can find different amenities with pre-defined filters such as 'Near Me' or by Category. From there, users can get directions to their place of choice, place an order for pick up, or even get their order delivered straight to their gate. These features will help users be aware of the wide variety of amenities the airport offers and provide convenience for our travelers who are short on time.
What's Next
Testing 1,2....
