Travel App Deisgn
Team: Product Manager (1), Mobile Developer Team (5), UX Designer (2)
Phase 1: August 2017 to March 2018
Phase 2: March 2018 till paused in April
Back to 2017, Point Inside was selling indoor store maps to big-box retailers and maintaining one consumer-facing map application called Phoenix App, which provides both mall maps and airport maps. As the company lost two large customers, airports remained to be the only venue type that was producing revenue and getting maintenance. Therefore Point Inside would like to build a new app tailored to travelers and thus leverage the existing data and assets to attract more users to the platform.
Travel App Feature Graphics for Sales and Marketing
Screenshots: Airport Maps and Home Screen
Project Overview
Project Goals (Phase 1)
-
The app would feature Point Inside's airport maps and help traveler's Day of Travel more frictionless.
-
The app would attract more users than Phoenix and maintain a 4+ star rating.
-
Users would have an easy way to report map errors.
-
Collect advertising signals using PointInside's AdTech APIs.
Outcome: A Bad-Ending Story
It was a pity that the company changed its business focus again after the Travel App Beta launch. The app ended up as a demo tool to showcase Point Inside's mobile native maps, even though we've got real users, real feedback, and tons of ideas to make it a better tool.
Sigh...
Outline
Research
User Research
We coordinated six user interviews with the frequent flyers within the company to better understand their travel experience and pain points. These interview participants were determined by using a screener survey.
Industry Practice
We studied quite a few apps that were which were widely used at different phases of the user journey. My immediate thought after this study was that our app should not be perceived as another "travel app."
We studied quite a few apps that are relevant to traveling and airport maps.
Other Resources
We also studied quite a few 3rd-party research and articles to gain more insights. For example, one chart (see below) from McKinsey&Company inspired a lot of new ideas.
Airport Customer-Satisfaction Score
Source: McKinsey&Company
Users and User Journey Maps
Personas
When I joined the company, my user experience manager has developed most of the personas for Point Inside's primary products. These included the primary persona we had focused on phase 1 was Frequent Flyers, who primarily used our app to easily navigate through the airport.
User Scenarios
My manager also wrote all the user scenarios that started from trip planning, to leaving the airport.
Journey Maps
I created the following user journey map by visualizing the user scenarios that my manager had drafted.
User Journey Map: Personal Traveler on Domestic Flight
Part of User Journey Map for Personal Traveler on Domestic Flight
At the Departure Airport → On the Plane → At the Connecting Airport
Team Brainstorming
As the team shared the same knowledge about the user and the user journey, we had a brainstorming session to come up with questions and ideas. Meanwhile, phase one feature sets were also discussed and decided - they were marked with a red dot at the right corner of the card (see picture below).
Grouped and Prioritized Ideas from the Brainstorming Session
Information Architecture
After the team brainstorming session, I started to sort through all the ideas and features into an organized structure that made sense to users. At this phase, I was asked by the product manager to design for the "blue sky" regardless of the technical constraints or phase 1 goals.
Information Architecture and Simplified User Flow (bottom left)
Ideation and Wireframes
Following the information architecture, I started to draw low-fidelity wireframes on paper. During this process, it involved a lot of conversations with the product manager to discuss ideas, ask questions, and re-scope requirements. A design review meeting was held to get early feedbacks when the product manager and I were happy with the wireframes.
Low-fidelity Wireframes + User Flow
Low-fidelity Wireframe for Home Screen
Mockups and Iterations
As we agreed upon the overall user flow and the layout for primary pages (i.e., Home, Map, Search, and Route), I started to work on the mockup details and handed over deliverables to mobile engineers. There were quite a few iterations to the designs based on the feedback from the product manager, mobile engineers, and other stakeholders.
High-fidelity Mockups and User Flow
Iterations: Airport Card and Flight Card
Side Project: Indoor Maps Redesign
Along with the app design, I was also working on redesigning the indoor maps so that maps by themselves could deliver a better experience to help users explore, locate, and navigate to their destinations. I would walk through this process with more details as an independent project.
Airport Maps: Before and After
Airport Maps Style Guide
Related: Mockups for Airline Partner
A few months after the travel app project had paused, I was asked to finish the designs for map view with the itinerary. However, the mockups were not used for the next release of the travel app but for sales support instead.
Itinerary Concept Designed for Airline Partners