Horizon Air D-Zero iPad App
Horizon Air D-Zero iPad App
Overview
Horizon Air had been struggling with its on-time departure metrics and this was causing growing issues with customer service and revenue metrics. Horizon’s partner airline, Alaska Airlines, has an iPad app in production used to monitor their on-time departure metrics. I was brought on, along with another researcher/designer, to explore what how a similar tool might be beneficial to Horizon Air.
Results
The first Horizon Air-specific iPad app, which allows users to track the progress of departure timelines for all flights departing a particular station.
Pulling real-time data, the app allows the user access critical data earlier and easier than before; saving critical minutes and seconds that are vital to maintaining on-time departures.
Role
Research, UX/UI design, User testing
The first step we took was to get out to the airport and learn as much about the current Horizon Air operations through observational research and contextual interviews. The goal was to learn about current processes and tools to determine what pain points the employees are dealing with so we can help pin point where the product team should focus its efforts moving forward
To ensure the direction of the project aligned with business goals we met with the product team who owned the Alaska Airlines version of the app to discuss if and how the Horizon Air application would coincide with the Alaska app. We also met with developers and engineers to learn about any technical restraints that applied to the project.
After all of this initial research we determined the best course of action was to build a separate app specific to Horizon’s needs while building off some of the work done and architecture of the existing Alaska app.
Using the Alaska app as a starting point, we dove into its design to determine what changes would need to be made at a base level to make the app applicable to Horizon’s work flow. We validated these assumptions by taking printouts of the existing app out to users to have them look at how the information was displayed (scan of original screenshots with feedback notes) . We then took this feedback and created initial designs with the relevant changes made, along with some simple UI updates to align the interface with updated brand guidelines.
Right away there were a few key things that stood out telling us that we’d have to dive in deeper in to more customized solutions for Horizon’s app. A couple examples of key differences are how gate numbers and podium/airplane location (spot) numbers are used/displayed by each airline and the differences in departure timelines themselves.
We also wanted to redesign the filtering functionality on the new app to be easier and more intuitive for the user to select the airplane spots to track on their app. Due to the complex nature of the how the spots are laid out, assigned and managed along with users needing the ability to select multiple spots we explored various models of how this can be accessed. After exploring drill down, accordion and even map models we landed on using a single exposed list or airplane spots with grouped categories for quicker selections, if needed.
As we progressed on the design of the rest of the app we began to simplify display of information and layout to help the user better focus on the relevant information at right time within their workflow. After testing and design reviews we replaced components such as green and red status bars indicating on-time/delay status of flights. The updated and simplified solution is to assume (and not call out) on-time flights, and to call out delayed flights specifically. This allowed the delayed flights to stand out more than before by making them more recognizable.
During this project, official Horizon Air brand guidelines were published and we took this opportunity to be the first to apply them to a mobile app. On top of the UI updates, I explored new logo ideas that could be applied to the app splash screen and icon. Knowing the app monitors departure timelines of airplanes, I wanted something to be able to convey this functionality in a simple and single icon. After exploring multiple ideas, the final design evolved into a mashup of a stopwatch and the motion of an airplane flying.
As the design became more and more refined with testing and iteration, mockups for the full experience be to be built out.
To help communicate the UI and the architecture of the apps interactions with the development team, I created a clickable prototype in InVision for the team to access. I also uploaded the designs to Zeplin (screenshots below). Zeplin is a tool the streamlines the design-to-development handoff by eliminating the need for manually created redlines and allows developers and engineers to see exact measurements, colors, spacing, etc. of every element on the screen as well as have easy access to any/all assets from the design that are needed.
Eventually the overall solution of the app solidified more and more to the point of not only surpassing the solution the Alaska app offers, but also to the point of it influencing other apps being designed by other teams. The influence and adoption of this design solution by other teams helps in creating a more consistent treatment across enterprise applications, which is key as more and more apps are being created now and into the future.