Copilot’s Deal Performance Analytics Tool

Copilot Deal Performance Dashboard - Final Design

Copilot is a service that provides restaurants with instant reports on the performance of their past deal campaigns. Earlier this year, I had the opportunity to work with them in designing their first ever online analytics tool. The deal performance tool allows restaurant owners to navigate and compare multiple deal campaigns, which help to better inform them on the effectiveness of each deal leading to smarter decisions in the future.

Sketches
In the preliminary sketches below, I experimented with an overall view of all deals accompanied by small multiples. The purpose here was to provide users with a quick glance of the deal campaign landscape via the main view while the small multiples would give more insight into each campaign.

Copilot Sketch 1.1

Copilot Sketch 1.2

After some helpful feedback from the client, I simplified the dashboard by reducing the amount of data being displayed. In the initial sketches, showing small multiples across all deals for each category didn’t provide much value since they were pretty much the same. The real value here was comparing the deals within each category. To resolve this, the small multiples for each category were pushed into a drop down that would pop up on hover (item 1 in the sketch below).

In the main view, the line graphs were overlaid by bubbles (item 2), which represented the magnitude of each point. This allowed for quick comparisons among a set of deals for a specific day. There were also small multiples below the main view, which compared multiple deals by the week (item 3).

Copilot Sketch 2.1

In the next sketch, there was the idea of locking the filtering menus since the report was originally going to be a long scrolling page. Users would be able to quickly hide/display certain campaigns by unchecking/checking them within the locked menus. We decided to nix the long scrolling page later on for the sake of simplicity, which meant no more fixed menus.

Copilot Sketch 2.2

Wireframes
After getting the okay on the second set of sketches, I had a general idea as to how this experience was going to be. To be honest, I felt a bit unsettled because of all the moving parts, which was why I quickly moved into clickable wireframes. As a side note, depending on the project, I sometimes pepper my wireframes with clickable hotspots in parallel with the wireframing process itself.

The following prototype was my first approach on wireframing the dashboard. You’ll notice that the navigation repeats itself halfway down the page. This was a rough replication of what the scrolling experience would be like.

Tip: If you’re creating clickable prototypes, it’s a good idea to highlight the areas that are clickable, in this case, with yellow circles.

Copilot Prototype Version 1

After testing the initial prototype with some users, some things were a bit unclear, e.g. the hover states of the three items under “General Stats”. There was also the concern of the overwhelming amount of data that was presented to the user as they scrolled down the page. With these and other additional problems in mind, the wireframes were updated to the following.

Copilot Prototype Version 2

Final Designs
Once wireframes and flows were approved, I threw on my designer cap. At the time, several months of straight wireframing at my full-time gig had caused some visual design atrophy, but fortunately, I was able to regain my design vision. You’ll sort of notice this as the designs progress in the mockups below.

The following was the first design pass at the main page. This was a direct translation from the wireframes and I was more or less disappointed with how it looked. The variety of navigation at the top was just too confusing.

Copilot Design Version 1

This was a slightly better, but the top navigation was still a bit ambiguous. The navigation didn’t really look like it contained buttons and although the hierarchy was correct, it wasn’t apparent.

Copilot Design Version 2

The design below addressed a lot of the issues from version 2, e.g. navigation buttons looking like links rather than buttons. Another issue that came up was that the checkboxes in the legend didn’t really look like checkboxes. I was probably trying to be a bit too clever here.

Copilot Design Version 3

Alas, final designs!

In the following mockups, you’ll notice that the big number section moved up above the navigation. This decision was made because the client wanted to provide users with a way to quickly get an overview of the general stats across all pages, e.g. redemption, gross revenue, and covers. In doing so, users would be able to view the rest of the data in context with these general stats.