SmartSuite Menu Redesign
Project Date: Spring/Summer 2020
SmartSuite is Brock Solutions’ software product for airline and airport customers looking to track and manage flights, bags, and equipment. Originally conceived as a set of repeatable solutions, SmartSuite has undergone a transition to a full-fledged SaaS product. As the lead UX designer for the Web Frameworks Team at Brock, I was tasked with improving core elements of the Web Client in order to create a more easy-to-use and seamless user experience. One of the most important elements was the site menu.
The Problem
SmartSuite’s menu can be quite large, depending on the type of user and which features they have access to. The core product has dozens of unique pages ranging from reports to dashboards to settings and configuration screens. Furthermore, stakeholder requirements have dictated that certain elements have to be visible on-screen at all times: the product logo, the name of the airport or airline system, and Brock’s company logo.
Previously, the menu had been relegated to a hamburger menu to accommodate these other elements at even the largest break-point, at the expense of ease-of-use. The overall goal of this project was to improve user's ability to easily navigate the web client.
Requirements
After product owners gathered feedback from customers, I was given the following requirements:
The Process
Menu Configuration
I began by exploring the possible configurations of the menu items and search function, constantly reviewing with stakeholders. Some initial designs were attempts to maximize the current space, but the consensus was that these were too cluttered and did not afford for a good search experience.
I also had to pay attention to how the menu items would function when opened, particularly: how many items could be placed in a column before a new column begins? What is the maximum number of sections available per column? I tested various options with stakeholders to see which ones were found to be more readable and easy-to-process.
Responsiveness was also an important consideration, and I had to determine where elements would fit or collapse across 4 break points (web, vertical and horizontal tablet, and mobile).
Search Functionality
I also paid special attention to the search functionality. SmartSuite’s “Global Search” is a widely-used function that allows users to search for flights, bags, and other associated items. However, it occurred to me that new users would see a feature called “Global Search” and assume that it would allow them to search for other contents of the site. This prompted the inclusion of not only the Global Search functionality, but also the ability to find specific pages with a simple search, thereby including all of the affordances that a user could reasonably expect.
The visual design of the search functionality underwent a few iterations from concept to completion.
Favourites
Another logical addition to this redesign process was the addition of page favourites. Users now have the ability to mark a page as favourited. Favourited pages appear by clicking on the user name, and they are also prioritized in the search function.
Conclusion
Together, all of these features add significant value to SmartSuite as we strive to build a product that is both feature-rich and accessible. Users’ most-used functions are now easier than ever to access.
This project was a rewarding one, because I was able to unpack the initial ask, to make the menu more accessible, and unearth the core problem: users have a difficult time getting to their favourite pages. Working from that basis, I was able to add even more value than the initial scope required.
These features were highlights of a major SmartSuite release that was delivered to high-profile customers including airports JFK and DFW, as well as Southwest Airlines.
Moving forward, I will continue to monitor the usage statistics of the menu, search, and favouriting features to identify other possible improvements.