Course project case study

Course project case study

Course project case study

Navigate
the Airport with Ease

Navigate
the Airport with Ease

User

Research

+

UX

Design

+

UI

Design

Project Summary

Problem

Help travellers figure out what they need to do next and where they need to go when they are in an unfamiliar airport before boarding, during transferring, and after landing so that they can feel more secure and well-prepared for their journey.

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.

Context

Context

Context

Course project for a Master’s level Fundamentals of UX course

Team

Team

Team

Huiling Luo (me)

Kristin Xie

Iris Liang

Cici Dong

My Role

My Role

My Role

—> 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?

What I did?

I conducted 2 user interviews and transferred the scripts into code sheet for further analysis.

What I did?

I conducted 2 user interviews and transferred the scripts into code sheet for further analysis.

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

Beased on user research results, we prioritized 2 major functionalities.

Beased on user research results, we prioritized 2 major functionalities.

  1. Need of Exploration support

  1. Need of Exploration support

  1. Need of support when met

unexpected situation

  1. Need of support when met

unexpected situation

We created an evaluation matrix to ensure the practicability of our solution in reaching the user's goal while also minimizing the effort we put into it.

We created an evaluation matrix to ensure the practicability of our solution in reaching the user's goal while also minimizing the effort we put into it.

Brainstorm —> Proiritization

Wireframe

From Sketch to Wireframe, we build the happy path to test our idea.

Usability Testing

Get user feedback for iteration

Testing Process

Testing Process

Testing Process

For maintaining the integrity of every user analysis, we formulated three distinct procedures for gathering user responses.

For maintaining the integrity of every user analysis, we formulated three distinct procedures for gathering user responses.

What I did?

  1. I design the usability testing, including:

    Designed a customized tasks prompt

    Drafted 5 follow-up questions

  1. I design the usability testing, including:

    Designed a customized tasks prompt

    Drafted 5 follow-up questions

  1. Conducted usability testing with 3 partipants, collected user feedback

  1. Conducted usability testing with 3 partipants, collected user feedback

What I did?

  1. I design the usability testing, including:

    Designed a customized tasks prompt

    Drafted 5 follow-up questions

  1. Conducted usability testing with 3 partipants, collected user feedback

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.

Design Style Tile

Design Style Tile

Design Style Tile

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


  1. Flight details

    (countdown to boarding time)

  2. Search bar

  3. Interactive airport map

  4. Navigation bar: choose whether they want to explore or need support.

This screen presents categorized destinations within the airport


  1. Each option includes a preview image

  2. 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,


  1. Selected route

  2. Recommended onroute stops

  3. Total travel time and distance

  4. “Go” button: to confirm their route

2.5D Navigation

This screen guides users with step-by-step directions to their selected destination.


  1. Clear visual cues: arrows, distance markers

  2. 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.

  1. List of situation: a variety of urgent situations that user might encounter,

  2. 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?

  1. I lead the final visual design sprint. Organized the design tasks in each page.

  1. I lead the final visual design sprint. Organized the design tasks in each page.

  1. Design and build the UI component library for further iteration.

  1. Design and build the UI component library for further iteration.

Try it on!

Conclusion & Reflection

This is my first end-to-end UX design project under professional guidance. During this 3 months design sprint, I worked with 3 other team members. we went through the entire process of user research, brainstorming ideas, creating wireframes for usability testing, and finally designing and building the core prototype using design tools. Through this experience, I not only gained professional skills, such as how to effectively communicate with users and use tools like Figma, but I also learned the importance of teamwork and collaboration with other designers.


Looking ahead in my design career, I realize the need to deepen my expertise in user research. Understanding how to accurately uncover users’ pain points, guide them to express their thoughts, and distill actionable insights from seemingly chaotic scripts are all foundational to creating a great product. Without a solid research-backed argument, it is impossible to achieve effective design.

© Huiling Luo 2024

Let's keep in touch.

© Huiling Luo 2024

Let's keep in touch.

© Huiling Luo 2024

Let's keep in touch.