UX Dashboard design
CASE STUDY - Abakus
abakus.me
San Francisco, CA USA
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.
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.
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.
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.
Shown above: Existing MVP UI for "Player Attribution"
Shown above: Existing MVP UI for " Player Efficiency"
Shown above: Redesigned UI for "Player Attribution" shown repeated.
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.
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.
Shown above: "Before" Original UI Framework.
Shown above: "After" Redesigned UI for "Player efficiency" shown repeated in side new redesigned UI framework.
Design in Use