top of page

AeroNav

INDEPENDENT PROJECT

Product

End-to-end mobile app for iOS

Industry

Travel

My Role

UX/UI designer, user researcher, brand designer

Length

80 hours

Tools

Figma, FigJam, Google Suite, Notion, Optimal Workshop, Maze, ChatGPT

Navigating through airports can often feel like an intricate puzzle, with layovers, complex layouts, and a lack of real-time information transforming what should be an exciting journey into a stressful ordeal.

 

Enter AeroNav, your ultimate travel companion, designed not just to alleviate frustration but to transform your pre-flight moments into an opportunity to earn rewards while feeling confidently prepared to take off.

Problem

Modern air travel is a labyrinth of frustration, marked by endless wait times, unforeseen delays, and a lack of reliable support.

Solution

A comprehensive mobile app designed to redefine the day-of-flight experience.

Design Process
1. Discover
  • Competitive Analysis

  • Survey & Interviews

  • Affinity Diagram

2. Define
  • POVs/HMWs

  • User Persona

  • Feature Set

  • Card Sort

  • Sitemap

  • Task Flows

  • Low-fi Sketches

3. Develop
  • Mid-fi Wireframes

  • Mid-fi Usability Tests

  • Branding & Visual Design

  • Hi-fi Wireframes

4. Deliver
  • Prototype

  • Usability Tests

  • Iterations

1. Discover

Unveiling Travelers' Desires and Dilemmas

My journey kicked off with a mission: understand the issues travelers face from the point of leaving their home to reaching their flight gate.

 

The question was simple: What are the pivotal pain points within the day-of-flight travel period? This research stage was not just about identifying problems but also about uncovering the canvas on which AeroNav would etch its user-centric design.

Competitive Analysis

Navigating the competition, I studied different travel apps, focusing on those connected to airports. I found strengths and weaknesses, spotting opportunities for AeroNav.

 

One gap stood out: the lack of apps showing accurate and detailed airport maps as well as real-time security wait times. And the few that did only covered one airport, typically an enormous airport hub.

 

This realization sparked an idea . . .

. . . could AeroNav be the all-encompassing solution, providing real-time security wait times, airport maps, and comprehensive airport information for any airport, anywhere?

01-competitive-analysis.png
User Research

Diving deeper, I began my discovery research, employing ChatGPT to streamline planning. This strategic move aimed not just for efficiency but for maximizing the value of every research effort.

Research Goal

Find out the challenges travelers face on the day of their flights.

Key Research Questions
  • What are the main pain points that travelers experience during the day-of-flight travel period, from leaving their homes to reaching their gate inside the airport?

  • How do these pain points affect travelers' emotions and behaviors during the day-of-flight travel period?

  • What information do travelers need to feel informed and prepared during the day-of-flight travel period?

I started with quantitative surveys, casting a wide net for traveler insights. Thirteen responses gave me a glimpse into their world.

100%

dealt with flight delays or cancellations

92%

wanted real-time security wait times

62%

needed directions to gates and key areas

62%

sought dining and shopping information

With these statistics in mind, I conducted 1:1 moderated user interviews to learn firsthand about travelers' experiences, preferences, and pain points. Five participants shared insights, creating a clearer picture. I created an affinity diagram in FigJam to better visualize commonalities between participants.

An affinity diagram comparing different behaviors, desires, and pain points between 5 interview participants.
Most Prominent Patterns
  • Timing issues: Some arrived early to the airport, others later.

  • Security hassles: Different rules at each airport.

  • Navigating airports: Problems in large airport hubs or during layovers.

  • Convenience seekers: Desire for easy access to airport amenities.

With my discovery research in hand, it was time to set a clear direction.

2. Define

Crafting the Blueprint for AeroNav
Point-of View Statement

I wanted to explore ways to help travelers navigate airports with ease and efficiency because of the challenges travelers face in unfamiliar environments, the desire to make the most of their airport experience, and the need to stay on schedule during their travels.

How might we . . .
  • enhance the airport navigation journey for travelers?

  • create an airport navigation experience that's accessible, inclusive, and sustainable for all?

Putting a Face to Our User

I visualized my target audience through a persona that best represented them. This persona crystallized the user I was designing for, giving me a concrete image of their needs and motivations. Meet Sarah, a frequent traveler who wants to make the most of her airport experience.

A user persona for Sarah Rodriguez, a content creator who wants to make the most of her airport experience. The persona includes her bio, motivations, goals, pain points, personality traits, and commonly used websites and apps.
Mapping the App Journey

Armed with research insights and the persona, I began constructing a roadmap for app features.

Absolute must-have features included interactive airport maps, real-time security wait times, and accessibility options.

Down the road (or runway), features such as personalized shopping and dining recommendations and an AI chatbot assistant would contribute to an even more personalized and delightful user experience.

A four-quadrant diagram displaying a feature set for Aeronav, including must-have features, nice-to-have features, surprising and delightful features, and features that can come later.

Next, I conducted an unmoderated open card sort with Optimal Workshop. This offered a glimpse into users' content categorization preferences. With this knowledge, I crafted a sitemap, a blueprint for the app's structure.

A sitemap for AeroNav visually displaying the information architecture and navigation of the app.
Navigating the Task Flow

Considering my research scope and available resources, I focused on 3 vital flows: selecting an airport to view the map, finding and navigating to a destination, and enabling accessibility features such as Larger Text and Dark Mode.

Airport Selection

A task flow that shows the steps a user might take to select an airport to view the airport map.

Basic Navigation

A task flow that shows the steps a user might take to choose a destination inside the airport and start the route to the destination..

Accessibility Settings (Larger Text and Dark Mode)

A task flow that shows the steps a user might take to turn on acessibility settings such as Larger Text and Dark Mode.
Sketching Possibilities: Low-fidelity Designs

The design canvas called, and I responded with low-fidelity sketches, outlining the app's potential appearance. These sketches followed familiar design patterns, boosting usability. I drew inspiration from various navigation apps to shape the layout.

Low-fidelity sketches of the key screens for AeroNav.

The Define stage laid the groundwork for AeroNav's transformation from concept to reality. With a crystal-clear focus and a roadmap in place, the journey to crafting a seamless and rewarding airport navigation experience was set in motion.

3. Develop

From Blueprint to Reality
Mid-fidelity Wireframes

Transitioning from paper to pixels, I translated my sketches into mid-fidelity wireframes. The aim was clarity; keeping things simple to avoid premature complexity.

09-mid-fidelity-wireframes-v2.png

At this point, I wanted to ensure the app's navigation aligned with users' expectations, so I conducted a quick, unmoderated mid-fi usability test survey. It was a brief but essential step to gauge users' intuition about finding key information.

100%

of responses expected the same information to be found in the same places

The next horizon was visual design.

Visual Identity: Logo and Branding

Reflecting the app's essence as a navigation tool, I crafted a bold and dynamic logo, evoking the journey from start to destination.

A notebook page filled with sketches of AeroNav logo ideas.
Final logo design for Aeronav.

Steering clear of the mundane, I opted for a distinct palette. White as the background, with accents of aqua blue, magenta pink, and bright yellow. This mix cultivated a vibrant, modern experience, while ensuring readability and contrast. I strategically employed these hues to breathe life into the airport navigation interface. Aiming for clarity, I chose a simple, readable font.

A branding style tile with AeroNav's logo, typography, color palette, and brand keywords.
High-fidelity Wireframes

Guided by mentor feedback, I recognized the app needed a spark. Why would users choose AeroNav over other options? This question steered me towards the concept of differentiation and user engagement. The solution: integrate a reward system and subtle gamification, moving these features from "Nice to Have" to "Must Haves." Users could now earn rewards for using the app, spurring more interaction. Avatars replaced standard icons, adding personality and connection.

high-fidelity-wireframes-v2.png

This Develop stage was about turning plans into pixels. From wireframes to visual design, each step was a bridge bringing AeroNav closer to being more than just an app – a companion that rewards, guides, and uplifts the traveler's journey.

4. Deliver

Bridging Blueprint to Interaction
Protoype and Test

Time to connect the dots! I used Figma to create interactions between screens for the 3 key flows: airport selection, basic navigation, and accessibility settings.

Airport Selection

A GIF showing the user flow for selecting an airport to view its map.

Basic Navigation

A GIF showing the user flow for choosing a destination, starting a route, and reaching a destination.

Larger Text & Dark Mode

A GIF showing the user flow for turning on larger text and dark mode accessibility settings.

With the core elements connected, I ventured into testing the prototype's waters. The trials took place through unmoderated tests on Maze. Up to this point, I only had experience with moderated testing, so I wanted to learn the ins and outs of Maze and try unmoderated testing.

Once I launched the usability test, I received 12 total responses.

What Went Well
  • 100% success rate on 2 tasks: airport selection and accessibility settings

  • 1 participant expressed the desire to use the "Current Location" button as an entry point, suggesting a potential usability enhancement.

  • 2 users, however, mistakenly attempted to click the Larger Text slider before enabling the setting, leading to some confusion.

  • Positive feedback on colors and branding

What Didn't Go Well
  • ​Only 50% of participants completed the basic navigation task, with a mere third succeeding.

  • Several individuals veered off-course, using the Restaurants filter as an entry point.

  • My oversight: I failed to build out the flow with Restaurants as an entry point, leading to unexpected behavior. However, those who followed the expected path faced no issues.

What I Learned

This experience highlighted the importance of accounting for all potential entry points and building them into the prototype. User behavior might not always align with the anticipated path.

What I Changed Next: Iterations
  • Designed and prototyped an alternative flow for Task 2, incorporating the "Restaurants" filter as an entry point.

  • Adjusted the Larger Text slider behavior, removing it when the setting is off and displaying it for adjustment when the setting is on.

  • Created an additional flow for Task 1 using "Current Location" as an entry point.

  • Made the "Account" tab clickable directly from the airport map.

With these refinements, the updated prototype emerged, breathing life into AeroNav's features and functions.
Screenshot 2023-10-11 134115.png

Wrap-Up

Lessons Learned

In the course of this project, I gained many valuable insights:

  • The perils of assumption – understanding user problems without preconceived notions.

  • A newfound passion for branding that ignited my creative fire.

  • The realization that a user interface's power isn't solely in its straightforwardness; innovation can elevate user experience.

  • The importance of considering all potential entry points when crafting prototypes, ensuring that the design caters to various user behaviors.

Impact

In a live app scenario, success would be quantified by:

  • The number of app downloads, a testament to its value in travelers' lives.

  • The efficiency of finding and selecting destinations, translating into user satisfaction.

  • The rewards redeemed, reflecting engagement and loyalty.

  • The adoption of accessibility settings, a sign of inclusive design.

  • The echo of user feedback, shaping the evolution of the app.

Next Steps
  • Embark on further usability tests to refine the app's usability and address any remaining hitches.

  • Expand the horizon by designing and integrating additional features, ensuring the app remains a dynamic companion for all travelers.

  • Hand off the design to the developers, the moment when ideas materialize into functional reality.

This project's end is just the beginning. With lessons learned, a potential for real impact, and plans for the future, AeroNav has the potential to transform how travelers navigate airports, making their journeys smoother and more enjoyable.

Thanks for reading!

Want to reach out?
bottom of page