UX case study: ‘Trade Promotion Master’

Posted on

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

Ux case study: the final ux design.


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.


  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.
Ux case study: A consistent and clear navigation is the first step.
A consistent and clear navigation is the first step.
Ux case study: Smaller screen navigation menu
Smaller screen navigation menu





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.

UX case study: The database, Configuration and Log out options.
The database, Configuration and Log out options.

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.

UX case study: Collapsable menu for space saving, responsive design.
Slide out menus, save space and remove clutter. Back buttons stop users getting lost or logging out by accident.

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

UX case study: Icon navigation replaces text for space saving, responsive design.
Icon navigation replaces text navigation for space saving, responsive design


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.

UX case study: Help menu in SAAS product design.
The drop down help menu.

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.

UX case study: user walk through hints.
User walk through hints for first time users.


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.



Stay in touch

Get more informal notes, summaries, and screenshots, on the business of making digital products and running a calm creative business by signing up to my newsletter