In this UX case study, we will look at the design process and considerations in constructing the user interface of a powerful SAAS product.

About

Visualfabriq’s Trade Promotion Master is a powerful Saas application developed by Bi4 Group that allows companies to monitor their promotions within different brands, filtered by a number of factors. It allows the creation of advanced reports of these promotions, and the configuration of the application by a superuser to set preferences, add and remove users, and invite guest users. The main functionalities of the app are divided between “plan & track” (itself split between “view” mode and the much more complex “edit” mode), “report & analytics” and “configure”. In this project, my client was Bi4 Group.

The Problem

While the app delivered insight, beautiful visualisations and marketing potential like no other, it felt overwhelming to use, with too many form fields, options and buttons. It was very easy to get lost within: there was no breadcrumb navigation or back buttons within subsections of the app, so each time the logo was clicked to get out of a section the user would be presented with the three main options at the start of the app and have to drill through the steps to get back to where they wanted to be again. It was also easy to accidentally log out while trying to get back to the home page. While there were many advanced functions, it needed easy access to help and tutorials. The many buttons presented inside some of the screens made for a cluttered and distracting experience.

Solution

1. the first thing was to establish a consistent navigation bar with a highlight so people could see which section and subsection they were in at all points.  The navigation shrinks gracefully on smaller screens.

 

 

 

 

2. A cog icon drop down menu was placed at the far top right of the screen with “configuration” (an option very few users would see), “user preferences” and “logout” options tucked away, preventing accidental logouts while saving space and reducing cognitive load. A help button was to the left of that.

3. back buttons were implemented in subsections to return the user to the section home.

4. Subtle slide out menus were implemented to reveal options while maximising screen space and removing clutter when done with those options.

5. Many text buttons were replaced with simple icons for functions like “save”, “download”, “delete”, etc. Saving space and not distracting from the core functions within the app

.

6. Mouseover tooltips were placed over the icons and form fields, to give as much help to the user as possible.

7. Search boxes were added to help users search for previously saved reports.

8. A feature to favourite reports was added and the ability to display last viewed reports, favourite reports.

9. A comprehensive help section could be accessed when “help” was clicked.

10. Upon initial login, a feature “tour” would occur to familiarise the user with where the main functions were.

Process

Normally, I register for as many similar apps as possible as part of my qualitative research process before sketching and wireframing, but since this was an industry-specific application, this wasn’t possible in this instance. Instead, I took comprehensive notes of what I got confused about when using their app and discussed these with the client and got their own customer feedback. I then registered for a series of “complex” apps to get better ideas of how they used menus and navigations to show and hide just the right amount of features to a user.

I also looked at editing applications like word online, Evernote, and Google drive for how to keep an interface as uncluttered as possible while allowing someone to focus on their task at hand. Constant feedback at every stage with the client were essential to delivering a product everyone was happy with.

For this project, I was only asked to hand over the psd files, elements and style guide. The beautiful, slick graph animations you see below are all the work to my client, bi4 group.

Result