The Goal
Create an analytics platform that would allow customers to view the data from promotions they created in the app. Then they could use that data to create informed decisions on their website and future promotions. The challenge was how to present the data to a customer base that was unfamiliar with the KPI’s associated with the app so that they could understand their data and be able to harness it and make improvements moving forward.
The Background
The core of the app is a promotion design canvas that is robust in its features but behind the times in its architecture and style. One of the main goals was to slightly update the design canvas and then use those colors, features, etc to tie in the design of the new analytics tool. The challenge was to make a brand new product but try to make it flow with an older, outdated product and also make it work with a newly redesigned homepage.
The Design
The recently updated homepage had a new color scheme, large images and big text blocks to help draw attention to key aspects of the page. I wanted to pull all of that into the new analytics tool. I would use those same key elements to help draw attention to important data and also help to break up some of the charts and tables. I also used those new colors in the design canvas to help draw attention to key buttons and info. Another goal of mine was to incorporate some aspects of the design canvas into the homepage and dashboard to help make the entire project more cohesive.
Color Scheme
The main branding color is a fairly bold green and there was no flexibility on changing that at the time. I started out working with different shades of green with neutral colors to break things up and it was coming up short. From there I decided to branch out and come up with some complimentary colors for the green. I presented management with a few different options and they chose the one they liked. When working with data points that had more than the set colors I opted to reuse the colors but add in an opacity to each.
Calls to Action
The first change I made on the design canvas was to change the calls to action. All of the buttons blended in and I thought that would be a good way to freshen it up, tie it in more but also not have to mess with the infrastructure too much. I then used the same colors for the new homepage and for the calls to action on the new dashboard as well.
Large Data Points
The homepage redesign featured 4 large boxes with important data points to help sell potential clients so I carried the same large data point design into the analytics dashboard. The first box on the homepage is a dark background with a short sentence as opposed to just a number like the other 3 boxes. I took that influence into each page of the analytics by placing a large bar at the top of each page with a sentence that was an overview of the data below it. The boxed design was also reinforced by placing all the charts, graphs, tables and other miscellaneous analytic and account info into boxes. It also allowed me to flow all of the containers evenly when a user changed their browser window size or accessed the data from a tablet or phone.
The Arrow Bar
A somewhat small and unassuming yet very important feature of the original design canvas was the “arrow bar”. Placed at the bottom of the screen, it allowed the user to navigate through the different steps of creating a promotion. I wanted to pay homage to it by adding an arrow bar of sorts to the analytics pages. When I got to the Performance Dashboard I knew I found the perfect spot for it. The arrow bar this time would be used to compare a users collected data against the average amount across our entire platform for each data point.
AB Tests
A great feature that was added right after the dashboard was completed was the AB Testing. It was written to allow up to 5 promotions and a control so the challenge became how to differentiate the data if that many were chosen. I decided to pull in the same color setup I used in the charts and graphs that had a lot of data points to help further continuity between all aspects of the project.
Performance Pages
Another great feature of the analytics dashboard is the Website Performance section. It gives customers the opportunity to compare their website stats to an aggregated average from every other site on our platform. They can see how their email collection compares