SeatSpy is a service for your air travel reward points, showing you all destinations with reward seat availability on the dates you want to travel. We supplied various services for this project, from UX audit and design to branding and iconography.
Our first task was to carry out a usability audit, identifying problems with the design and flow of the main screens of the app. As this before and after shows, the heavy black header was very distracting, with too many calls to action. The lighter, updated, design is calmer on the eye, not fighting for your attention in many places.
The two most used screens in the app, the landing and results pages, before (left) and after (right).
A key layout change was to align the departure/arrival search fields with the calendar columns, essentially using them as headings. This avoided repetition and enabled the information to be scanned easily. The updated design was then delivered in both a Figma specification, and HTML/CSS layouts. This also enabled us to create and test a dark mode theme as well:
The dark mode version of SeatSpy uses less saturated UI colours, with the exception of the logo.
As part of the refresh we also looked at the logo and brand, looking for ways to improve and be more consistent. An ideal open source typeface was found in Mona Sans, that conveyed Airport signage, without being completely bland.
The SeatSpy Logo before (left) and after (right)
While the existing seat/tick logo couldn't change drastically, a system was devised around it. The lowercase letter Y informed not only the shape of the seat in the logo, but also became an icon element. Once flipped it became the plane departing and arriving, or the function to swap journey destination. Small subtle details that help all the elements feel harmonious.
The seat/tick is now based on the y of the Mona Sans logotype, becoming the plane + reverse direction icons once rotated.
Initial Icon set