UX Dashboard design

CASE STUDY - Abakus

abakus.me

San Francisco, CA USA

Campaign Interaction Occurances Reporting

Big data & analytics dashboard design

The Solution

 

The single column solution to the right displays using JS and AngularJS. Substantial space was saved allowing the user to stay focused in one area of the screen visually. The entire lower grid area was eliminated and bundled into a more visually pleasing experience. Shown is the the Final UI for approval.

Campaign Interaction Occurances Reporting

Shown above: Single row Redesigned UI for "Player Attribution"

Data Redistribution

 

The right the redistribution of result-driven analytics have been taken from multiple places across the MVP UI and  consolidated into an easy to read user experience.  Additionally, repetitive information has been eliminated next to the graph bars as a further attempt to simplify the UX.

Campaign Interaction Occurances Reporting

Shown above: Redesigned UI breakdown

New UI Repeated in use

 

Shown to the right is the the new UX and UI in use in a test environment where the repeatability of the design can be judged as successful or not with Initial formative usability tests.

Campaign Interaction Occurances Reporting

Redlines - Shown Below
 

Standard special redlining was produced for every aspect of the new user interface design. Communications between UX or usability design and development teams via redlining, in a clear and concise manner, help guarantee of Pixel Perfect result.

Dashboard 1. - Player Attribution

The Problem

 

As an SAAS software platform with existing business and customers in place utilizing sophisticated analytics to understand advertising campaign result data on a live basis, the importance of convening visually complicated measurable results is critically important to business.  Abacus.me, a leading advertising analytics data CRM platform in San Francisco, set out to redesign and reimagine how customers relate to the user interface for critical business decision making on media purchases across vast scopes of media on a live basis.

 

The example to the right is a screen capture from one dashboard that required users to assimilate information from multiple parts of the dashboard to understand sophisticated results from their campaign data. The problem was that customers had to visually assimilate data in seven (7) different locations across the screen and compile these elements conceptually to understand a single dimension of a much larger picture.

 

The goal was to consolidate this information visually in a manner that ultimately would shorten the page dramatically as well as assimilate large amounts of information in a dynamic manner. This redesign would assist the customer visually to understand complicated results on campaigns and ultimately help make business decisions faster.

Campaign Interaction Occurances Reporting

Shown above: Existing MVP UI for "Player Attribution"

Campaign Interaction Occurances Reporting

Shown above: Existing MVP UI for " Player Efficiency"

Shown above: Redesigned UI for "Player Attribution" shown repeated.

Campaign Interaction Occurances Reporting

Shown above: New Feature; Filter drawer UI and Redlines for "Player Attribution" filtration and customization..

Dashboard 2. - Player Efficiency

The Problem

 

To the right, is the original UI for the player efficiency dashboard. Again similar to the above case study, two dashboards are required to communicate all of the data to the user. Consolidation was the goal. Consolidation of the upper graph based dashboard and the lower grid dashboard in a manner that also represented the brand (Abacaus.me) was the desired outcome to shoot for.

Campaign Interaction Occurances Reporting

Shown above: Original UI for " Player Efficiency"

The Solution

 

The single column solution to the right displays using JS and AngularJS. Substantial space was saved allowing the user to stay focused in one area of the screen visually. The entire lower grid area was eliminated and bundled into a more visually pleasing experience. Shown is the the Final UI for approval. Because the branding for Acacus.me has 5 dots, larger circles were used as a visual signifier for representation of the CPA (0-100) measurement.

Campaign Interaction Occurances Reporting

Shown above: Redesigned single row UI for " Player Efficiency"

Data Redistribution

 

The right the redistribution of result-driven analytics have been taken from multiple places across the MVP UI and  consolidated into an easy to read user experience.  Additionally, repetitive information has been eliminated next to the graph bars as a further attempt to simplify the UX.

 

Because the branding for Acacus.me has 5 dots, larger circles were used as a visual signifier for representation of the CPA (0-100) measurement.

Campaign Interaction Occurances Reporting

Shown above: Original UI for " Player Efficiency"

Dashboard Redlines - Shown Below
 

Standard special redlining was produced for every aspect of the new user interface design. Communications between UX or usability design and development teams via redlining, in a clear and concise manner, help guarantee of Pixel Perfect result.

Campaign Interaction Occurances Reporting

Shown above: Redlines for "Player Attribution" filtration and customization.

Campaign Interaction Occurances Reporting

Shown above: New Feature; final UI and for "Player Attribution" filtration and customization.

New UI Repeated in use

 

Shown to the right is the the new UX and UI in use in a test environment where the repeatability of the design can be judged as successful or not with Initial formative usability tests.

Campaign Interaction Occurances Reporting

Shown above: "Before" Original UI Framework.

Campaign Interaction Occurances Reporting

Shown above: "After" Redesigned UI for "Player efficiency" shown repeated in side new redesigned UI framework.

Design in Use

MCDT is a Design and UX Consultancy
 

© 2012-2016 

MCDT Consulting