Redesign of a Performance Based Online and Mobile Marketing Platform

Category: Dashboard Design

Date: Winter 2017/2018

ABOUT THE CLIENT

An online marketing platform which combines performance advertising and programmatic advertising, with reach in more than 200 countries. It is used by company employees, who are managing advertisers, partners, and their web and mobile campaigns.

To keep it short, it is a data-heavy interface with a lot of numbers, tables and graphs which should play well with each other and provide value to users 🙂

PROBLEM, REQUIREMENTS, AND GOALS

The platform was developed by different developer teams which over the years resulted in the inconsistent interface with great UX shortcomings. The features were added on with little or no thought as to their placement and the whole platform was painful to use (and it wasn’t particularly good looking either). Hence, the product needed a complete UX redesign, together with a UI refreshment.

The platform’s frontend is based on Bootstrap 3, and it had to stay that way. The content however had to be completely reorganized. We set up to critically analyze every piece of content, information, and functionality available. After that we conducted interviews, analyzed user sessions through FullStory and used all the gathered information to completely redesign the platform, first and foremost from the UX standpoint, making it easier and more straightforward to use; then from the UI standpoint, unifying visual elements into a consistent, recognizable and coherent interface.

DESIGN PROCESS AND SOLUTION

After composing user questionnaires, analyzing FullStory user sessions and the platform itself, we were able to pinpoint major “pain areas” and identify main difficulties users were having with the platform. Here are some of them, together with our solutions:

Sidebar

One of the main shortcomings and the least used element was the left slide-out sidebar which offered great functionalities but to no purpose. Users simply didn’t know it was there – unless they accidentally triggered it by hovering over it, they had no idea it existed.

So we decided to remove the sidebar altogether, reorganized it’s content into thematically compatible groups and introduced it through an always-visible horizontal navbar.

Forms

A lot of data on the platform is editable, however, the old edit forms were a UX nightmare: long, inconsistent, tiring and trying to be an all-in-one solution.

We reorganized the data into “thematically connected” panels, making it easier and faster to scan and find the needed info. Each panel got it’s own editing mode through a modal window, allowing the users to edit one thing at a time, based on their flow and session goals.

Tables

Showing huge amounts of available data, tables were becoming unreadable and visually heavy.

In this case, we started with the looks, trying to make everything more “breathable” and easier to scan. Reading experience was improved by increasing the padding, adding zebra stripes and improving the font readability.

We also introduced the column width resize functionality, which, combined with the column picker made it a lot easier to choose and compare the data user needs.

Main Info & Actions

The old Campaign overview screen was filled with poorly organized data and no visual hierarchy whatsoever.

We completely reorganized data panels (being mindful of data usage and purpose), while the most important data was moved to the header area, making it easily accessible. Using the same logic, main action fields were grouped together in the upper right corner, creating an actionable area and reducing the need to scroll and search for separate actions.

Content Reorganization

A lot of thought was given to reorganizing the content itself – the platform sitemap was completely reorganized with special attention given to nomenclature – different functionalities were appearing under same names, which was not only confusing, but it made finding desired features nearly impossible. Thus, the names of some features were changed so that every action is clearly discernible from the other, and easy to find/access.