User
Research
+
UX
Design
+
UI
Design
Project Summary
Solution
A digital app that provides users guidance at any airport that users are not familiar with. The guidance includes two major parts: exploring activities and helping in urgent situations.
Course project for a Master’s level Fundamentals of UX course
Huiling Luo (me)
Kristin Xie
Iris Liang
Cici Dong
—> Conducted 2 one-to-one User Interview
—> Conducted Usability Testing with 3 participants
—> Lead the Design Ideation
—> Lead the Final Prototype Design
Project Stage Overview
User Inteview
8 responses were collected
Solution Ideation + Lo-Fi Wireframe
Prioritized 2 major paths to solve user demands
Hi-Fi Prototype
Visually presented final solution
Usability Testing
9 responses with interactive observation were collected
User Research
Provide evidence for ideation
Empathy with Our User…
Hey!
This is David, a university student
He is…
First-time solo travel abroad from Asia to North America
2 hours 15 minutes layover for connecting flight in Japan
Unfamiliar with the transferring airport layout
Therefore he said…
But…
How can we help the travellers like David?
We encoded all the scripts into code stickers and reorganized them into themes.
Solution Ideation
+
Lo-Fi Wireframe
Built early model for usability testing
Proiritization —> Sketches
Brainstorm —> Proiritization
Wireframe
From Sketch to Wireframe, we build the happy path to test our idea.
Usability Testing
Get user feedback for iteration
Key Findings
From the most important to less important findings, we summarize them into document.
Mode selection is redundant
Since we have the bottom navigation bar, it is unnecessary to let users choose their demand on purpose.
"Bubble" mismatch with urgent situation
After user testing, the floating bubbles seem to be distracted, which may cause more frustration when emergent
Turn into Airport layout overview
Remove the bottom half part of the home screen and redesign into a clickable layout of the whole airport that allow users to get familiar with airport information and conditions beforehand
Reshape into "Rectangle"
The bubbles have been changed to rectangles to eliminate user frustration during usage and demonstrate things clearly.
Hi-fidelity Prototype
Apply visual design in final model
Our
Visual Design Goal
To make our design consistent, we settled a set of design vision words to guide our prototype design.
Our style illustrates a sense of professionalism, and engagement. By reducing the contrasting colour, our main colour -- Prussian blue is emphasized, enabling users to have a more engaging, and more relieving experience.
Hi-Fi Prototype
Home Page
Explore Destidination
Welcomes the user, Provide an overview of their upcoming trip
Flight details
(countdown to boarding time)
Search bar
Interactive airport map
Navigation bar: choose whether they want to explore or need support.
This screen presents categorized destinations within the airport
Each option includes a preview image
Options: either enter a recommended route for exploring or navigate directly to the destination.
Route Planning
When user entering the default recommended route they can play their journey by adding multiple stops along the way,
Selected route
Recommended onroute stops
Total travel time and distance
“Go” button: to confirm their route
2.5D Navigation
This screen guides users with step-by-step directions to their selected destination.
Clear visual cues: arrows, distance markers
Real-time updates:
to adjust for any changes or rerouting.
When user want to explore in waiting time…
When user met an unexpected situation…
Home Page
Support
User can quick serach by typing any related key words or any knowed destination in the search bar to quickly look up for guidence.
List of situation: a variety of urgent situations that user might encounter,
Search bar: users search their problems in the searching bar.
It will lead to the solution page after they chose their situation.
What I did?