Project: Individual Project (Udacity Nanodegree Certificate)
Timeline: 2 months
Role: UI Design, User Testing, User Research, Prototyping
Tools: Figma, Miro
SFO airport app concept design
The problem
1.) The SFO airport has an app called “SFO copilot” currently available only for the SFO staff.
2.) Every airport has its own specific and unique system difficult to locate spots and look for display boards for flight status, and finding dining and shopping services is time-consuming.
Goals
The goal is to design an app for the SFO airport for public users :
1. ) Design a simple, intuitive and functional mobile app.
2. ) Users need more readily available information to help them prep and navigate the airport. This led to the creation of new features that deliver timely information to our travelers; so they can move confidently and efficiently throughout the airport.
Design Process
Research & Analysis
The design process started with user interviews. I Interviewed 5 travelers on their needs, pain points, and how they use digital products of airports. I used qualitative and quantitative methods to collect data from our learners and analyzed the data points to gain key insights from them. Through an online survey and interviews, I looked into the needs to better understand what is important to them in a platform and why, I came up with each key insight listed below.
SURVEY [QUANTITATIVE RESEARCH]
In the user interview study, I learned about users' needs, pain points, recommendations, etc., but more data is needed to better understand the needs and whether they generalize to the larger population of airport users.
A total of 27 participants attempted the survey of which 21 were determined to be eligible by selecting an acceptable answer from the prerequisite questions and continued to complete the study in full.
The scope of my sample was limited to adults over 18.
The survey was limited to only allow participants who have traveled by air and visited an airport.
USER INTERVIEWS [QUALITATIVE RESEARCH]
5 participants
30 minutes of online interviews.
Questions:
How often do you travel on flights / to the airport?
Follow up:
a. Are you aware of all the terminals while boarding ( if a frequent traveler)
How early do you arrive at the airport?
How do you feel waiting in long queues at the TSA?
What do you do in your spare time at the airports?
Are you able to navigate effortlessly through the airport?
Did you encounter any difficulties from checking in to moving to your boarding gates?
Key Takeaways
Users experience a lot of anxiety at the airport and find it a negative experience.
“ I am always a person who gets lost. With lots of hustle, it's difficult finding my security gates”
- Participant 1
“ I am always in a hurry to catch a flight, so looking on the boards for security gates and gate number is time-consuming”
- Participant 3
User's pain point is waiting at the security for long time.
“ I spend 25 minutes in the security lines”
- Participant 5
“Waiting in long lines is tiring”
- Participant 4
Users prioritize access to relevant flight information, so they can utilize their time more efficiently.
“ I don’t see the updated flight’s information in real-time”
- Participant 2
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.
“ I eat at the airport if I have spare time”
- Participant 5
How might we improve the experience for the users to gain easier and faster access at the airports?
After analyzing the interview notes, survey results, and insights drawn from the research
the primary challenge faced was answering this question!
Mapping out the user
Based on the information gathered from research, I set out to synthesize our results and create an average user for the reference in my design process.
Synthesize my findings
The topics that emerged during the interview are categorized as interview notes, themes and opportunities, ideation and feature prioritization. After inspecting the insights, I needed to prioritize my ideas when approaching the issue. I created a prioritization matrix with the following parameters: Value and Complexity. Due to time constraints, I decided to design only specific features.
What are my proposed solutions?
Get real-time information on departing/arriving flights.
Find the respective flight details and navigate by providing an onboarding experience.
Get directions to a particular shop/restaurant.
Check the TSA wait times.
Thinking about my primary question, led me to the path — Augmented Reality. This will assist the user in starting a virtual navigation process to his departure gate.
I started sketching out solutions on paper using the crazy 8 technique to give a flow of thought and brainstorm ideas.
Low fidelity wireframe
After determining what content to put on each section, I designed the wireframe to plan the layout of each page for the main key features.
Fonts & colors
DESIGN SYSTEM ETHOS
Using color to define button functionality.
Typographic hierarchy and contrast make important information stand out.
A minimalist design to ease users and not further overload them while they are at the airport.
For typography, I wanted to use a workhorse font that we could use throughout the whole app due to its professional-looking nature and versatility. When choosing the app's colors, I prefer the green color as it states calmness, acceptance and will be calm to the user’s eyes.
High fidelity wireframes
Homepage, flight details and map
The homepage includes a QR code to physically scan the ticket and look into other airport services. The flight details are provided in the flights screen. I have also included a map in the app.
Dining Services
Provides information on all dining services available at the airport; when you click Get Directions, the app enters AR mode and you may follow the directions.
TSA wait times
View and report wait times at various terminals.
Navigation & onboarding
Enter the flight number to track the status of your flight. When you click on start directions, the AR helps you navigate every step of your way and the app also provides access to the user's boarding pass.
Usability Testing
Conducted a usability test via Zoom. Recruited 5 users to navigate through the high-fidelity app, asked them to perform 3 tasks, and asked participants to think aloud as they used the app.
Things to improve:
Feedback → While using AR navigation in dining services, users had to go back to see where they were heading.
Feedback → Knowing the close time at the gate would be beneficial.
Feedback → In the TSA wait times observed that the wait times looked like buttons as the users tried to click on them.
Things well done:
Feedback → Color combination.
Feedback → Icons are really understanding.
Feedback → Implementation of AR for navigation.
Feedback → The flow was smooth, easy to follow.
Iterations and solutions
AR Navigation in dining
The wireframe was improved by including the user's destination.
TSA wait times
Wireframe was enhanced by providing status rather than looking like buttons.
Navigation to departure gate
What I learnt
The idea needs more market research.
Provided an opportunity for me to learn the value of user research techniques like surveys and interviews to know about users' needs and preferences.
Next steps
Conduct user research to determine more areas of need.
I designed only specific functions in the app, but the airport app is not limited.
Few thoughts:
1. Implementing AR navigation for baggage pickup after landing
2. Considering accessibility issues.
See other projects:
ABB Thesis
SaaS product
WHCC website