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.

​

Shown above: Existing MVP UI for "Player Attribution"

Shown above: Existing MVP UI for " Player Efficiency"

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.

​

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.

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.

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.

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

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.

InVision Mockup - Rough working mockup

BEFORE - Original UI Framework.

AFTER - "After" Redesigned UI for "Player efficiency" shown repeated inside new redesigned UI framework.

​

​