Brief: In 2017 I was approached by a developer I knew at Ace Parking, Julian Bryant, to develop an app for internal use. The app would allow to allow ACE’s parking attendants at airport lots across the united states to quickly scan digital and physical tickets in an effective manner.
What were the most key aspects of the app to our attendants? After several meetings with a lot manager at ACE headquarters, we determined the app needed to have 3 things: speed, simplicity, and clarity.
Speed: Airports frequently have rush hours during the day where many cars will queue up to check in, and because they are trying to catch flights, time is of the essence. We set out to design an app that would seek to speed up the attendants’ workflow by anticipating the information they’d need ahead of a customer checking in, which would ensure that ACE wasn’t a holdup while their customers were trying to make it to their flight. We created a screen what would show attendants who to expect for the rest of their shift, their order details, and their check-in/out times.
Simplicity: We also separated the entire app into 2 main tabs, which would allow the attendant to quickly switch between the 2 main tasks, scanning tickets and viewing a list of reservations.
At the top of lists, we created a header tab that would present attendants with useful information.
Clarity: One of the biggest concerns we heard from attendants is that they were frequently in direct sunlight, and often this caused the screens they read from to appear low-contrast and illegible. To solve this problem, we geared the colors of the app not only around Ace’s brand, blue and a dark gray, but also to provide intense contrast for users in high-light scenarios. Type on light backgrounds was kept thick and very dark, and type on dark backgrounds was kept thick and light. This allowed our users to see better during the day.
Google’s Material Design allowed us to create a compelling Android app with clear typography and high color-contrast to allow attendants to find information at a glance, even in outdoor scenarios in high-light environments.
One unexpected challenge I ran into was the lack of a "Scan Barcode" icon in the style of material design. I like to use default system icons wherever possible on account of their familiarity to the user. It is important to present the user with visuals and iconography rooted in overarching usage patterns across the entire system.
I designed the camera-scan icon on Material design's system icons grid , which allows for flexibility while providing a framework to visually unify the icon with the existing icon in the Material Icons Library. The bounds of the icon conform to the radii and bounds of the widest horizontal guide box.
To provide further unity, the line weights of the icon align to a 4dp grid, with varying widths for the barcode bars. The weights of the barcode vary between 2 and 4 grid squares wide, with 1dp spacing in between.
The icon was designed with bi-lateral symmetry in mind; it can be reflected along the X and Y axis. I considered that randomizing the lines of the barcode too much would make the icon look sloppy and lop-sided, so I had to find a way to illustrate variance without evoking randomness. My solution was to space out half the barcode within the grid system first, then reflect it along the X axis to balance it.
Usage environment was a prime consideration when deciding the color scheme of our interface. I frequently loaded mockups onto my phone and took them into direct sunlight to simulate the attendant's viewing environment and experience. Because usability and speed were key to providing a smooth experience to ACE's lot managers and customers, I knew that attendants would want a tool that could be easily read in all lighting conditions. Some lot managers work the night shift and some work the day shift, so providing an interface that could adapt based on lighting conditions was a must.
Airport Parking Connection offers a feature in the settings screen that enables dynamic contrast adjustment for better legibility and viewing based on the lighting environment. When the user is in direct sunlight, the app darkens the menu bar and tab bar, and uses a thicker font weight of all text to make it more prominent. Additionally, the background behind reservation cards darkens just slightly to accentuate their borders and help the attendant distinguish between individual customers.