SmartHub - How To use Navigation, Search and Alerts to Create Great User Experience

As a result of this commitment, we regularly revisit some of the core building blocks of our platform, such as typography, navigation, and search. We spend hours trying to understand how employees interact with them and what their challenges are that we can help resolve by improving the platform.

As a result, we observed the following user behavior:

Armed with this knowledge, we've built our navigation to make engaging with the platform easy for our clients' employees. This includes:

• New informative and personalized alerts

Plus, enhanced feature improvements on: 

• The top navigation menu bar
• The main search box
• The platform typography

Informative and Personalized Alerts

For best user experience, a website should always keep users informed by providing appropriate feedback. Alongside the visual indicators and validation messages, we also keep our visitors up to date with changes on the platform and the state of an event through Alerts.

Alerts are an extremely valuable comms channel because they save employees the time needed to personally find out what's new on their platform and what's of interest to them. We deliver on-site, email and browser alerts so that visitors never miss out on important updates. Of course, employees can choose what alerts they would like to receive and what channels to receive from.

One such helpful alert is to notify the employee when their Cashback has been approved and ready to be used. Another one is when someone has commented on an article written by them. With new alerts going live on a regular basis, we really believe they will become a go-to section of the site for all employees.

Top Navigation Menu Bar

Our goal is to ensure users browse the platform with ease. We achieve this by focusing on:

Minimal Browsing Effort 

Visitors should be able to access an element of interest in the top navigation menu bar with as little effort as possible. This means fewer clicks to reach the right content. To achieve this goal, our platform allows a mega menu on top of a simple dropdown style.

• Mega menus are large, rectangular menus that group navigation options, it eliminates scrolling and uses typography, icons, and tooltips to order the content in an easily digestible way.
• Mega menus show everything at a glance, so users can see rather than try to remember.
• Mega menus let you visually emphasize relationships among items. This again helps users understand their choices. 

Good Color Contrast

We know that low-contrast text Is bad for usability. That’s why we made sure that we always have a dark text on white background on the menu so that people with low vision can use and enjoy the platform as much as their fully sighted colleagues.

Highest Quality Brand Logos

There’s a very small number of providers that care about their clients’ branding as much as we do. Since we have superstar designers creating amazing platform logos for our clients it’s only fair that we use the latest technology to display it in the crispest possible way.

We convert all brand logos from low-resolution PNGs to the highest resolution SVGs.

• SVGs remain high quality regardless of the resolution of the screen they are displayed on, no matter the screen they will always display perfectly, especially on retina displays.
• SVGs speed up site load times - they are tiny in size in comparison to PNGs.
• SVGs can be animated and styled with CSS - this opens a whole world of creativity when it comes to the web, so keeps your eyes peeled for some cool animations in future.  

Helpful Menu Descriptions

We know from our A/B split testing that brand new visitors can struggle to understand where some menu items go from reading the menu names only. As a result, the users are more hesitant to click on these. To solve this confusion, we've allowed a menu description to be visible on the menu, giving the user helpful context about the essence of the content or product behind the link.

Building Credibility

To show brand new visitors that they can trust the platform, we have a Trending with colleagues section within the Discounts mega menu and the main search. Knowing what their co-workers already trust and how they use the platform is a great way to build credibility from the very beginning.

This feature also highlights the most popular content through the power of Third-Party Endorsements. We, as humans, are typically more inclined to believe what a friend or colleague has found attractive or interesting. The dynamic nature of 'Trending with colleagues' makes the content relevant and timely.

Main Search

As with everything else, we expect our search to work as hard for the user's benefit as any other part of our platform. Therefore, it not only displays search results in a clear and visual way, but it also gives quick access to the latest content created on the platform.

Below is an example of what the user will see before they start typing their search term:

Once they've searched:

Platform Typography

To improve the overall readability and performance of our platform, we’ve decided to move away from the standard web-safe font Arial. We’re now using the System UI fonts instead. This means that we no longer have one font, but rather a different font display depending on the user’s operating system.

For example, if an employee is visiting the platform on Chrome, then they’ll see the content in Google’s Roboto font. Alternatively, if they’re using Safari on a Mac, then they’ll see San Francisco font.

Illustration source: Cătălin Bridinel

Having a dynamic font that adjusts depending on a device and browser creates a better user experience. Here’s why:

• Due to their native behavior, these fonts are highly readable and accessible.
• They are considered the best in web typography.
• They are fresh and modern.
• Familiar to the user from daily interactions with them on browsers and devices.
• These fonts are ever evolving in a similar way that products improve based on research and feedback. Thanks to this, they are always up to date with the latest technological advancements.