GoNow is a departure control system primarily used to check-in and board passengers on flights. Over time the product has evolved adding new features and functions to handle a variety of tasks. For example: re-booking passengers from cancelled or delayed flights, moving passengers to different flights due to preference or other reasons.
Figure 1: The existing menu was not scalable. Everything had become a ‘Tool.’
The addition of the new features and functions overloaded the existing menu structure making it difficult to navigate either via mouse click or keyboard input. The limited top-level space resulted in the ambiguous categorization of the functions. This resulted in increased time to process passengers when it became necessary to access these functions. The problem was most acute with less experienced agents who are not familiar with keyboard short cuts for the functions.
My role in this project was to assist with the creation of the top-level menu items and to organize the features and functions within these categories. I was also tasked with the user interaction and the visual design of the menus.
During the design phase for the menus I worked closely and collaboratively with product management and engineering at each step.
Work with product management, engineering and customers to create new top level categories. Organize new and existing features and functions into to the top level categories.
Use card sorting to help organize the menus and conduct user testing on the designs.
Users and Audience
GoNow users are typically either check-in counter or gate agents. They can have a vast range of experience in the airline industry ranging from many years to no experience at all. Many of the more experienced agents are uncomfortable with change preferring instead to use the old terminal-based applications that they have been using for years.
Figure 2: GoNow personas.
Scope and Constraints
There were several design constraints that had be taken into consideration for the menu. The first is that GoNow is limited to a maximum screen resolution of 800 x 600. Second, primary consideration was given to keyboard navigation. Since many airport systems do not have mice and more experienced agents prefer to use the keyboard.
Along with product management, the first step we took was to define to broad categories into which the features and functions would be placed. We started out by making our best guess by placing all the menu items into groups. We did this via the tried and true method of using Post-It notes on a wall. Once consensus had been reached on the groups, each group was given a name agreed upon by the team members.
Figure 3: Stock image of a person putting sticky notes on wall. We did the same thing!
At this point we had the menu items roughly grouped into categories and needed to test our assumptions with end users. To do this, I put together a card sort using the tool Proven by Users. We used a hybrid closed card sort that allowed the end users to either assign to our defined categories or create their own.
Many of the items grouped together well using the predefined categories. Some items were all over the place (e.g. Skyport, Exit, Log Out). We decided that these items would exist at the top level along with the other categories.
Figure 4: Examples of online card sorting via ProvenByUsers. Much better than using index cards.
Going Low (Fidelity)
The next step was to create some lo-fidelity wire-frames to explore different design alternatives. The first alternative was to use standard Windows type menus, the second was to use expandable menus. Quick wire-frames were made for each of these solutions and user feedback was gathered on each one. Users had a clear preference for the expandable menus as it allowed viewing multiple open categories at the same time.
During this phase, the concept of ‘Quick Command’ was discovered. Several users said that they would like some way to just type the name of the function in order to access it. A quick command box was added to the design so that people could open the menu and just type what they wanted. The menu items were filtered showing only those that match what was typed.
Figure 5: Examples of lo-fi wireframes used to facillitate spirited debate between product management, engineering and UX.
Going High (Fidelity)
After several iterations of lo-fidelity wire-frames it was time move on to the hi-fidelity designs. Colors and fonts for the new menus were drawn from the existing palate and font sets. To increase readability a larger font size was employed.
Contrasting colors for the menu background and menu text were also selected to increase readability. GoNow is often used in environments with harsh lighting and this contrast is needed so that the agents can more easily read text.
Figure 6: The final designs for the new menus.
Challenging Assumptions Part II
After the completion of the hi-fidelity designs a prototype was built with InVision for the purpose of user testing and customer review.
Due to the tight time frame for this project, the user testing was conducted with in-house folks who have a background working at check-in counters and boarding gates. The user testing focused on the find-ability of menu items. Based on the results of the user testing a couple of the menu items were put into different categories. The designs were also shared with several customers and discussed via conference call.
Figure 7: Screen shot of the InVision Prototype for the purpose of user testing.
How It All Worked and What We Learned
- New menus shipped with the GoNow version 4.0
- Redesigned menus where a salient marketing feature
- Very positive feedback from customers
- Some items are not where the agents expect to find them
- Quick command is popular with users
- Menu design is scalable and will easily be able to accommodate new features
Figure 8: The new menus as implemented in GoNow.