Designing a Responsive Admin Website & Dashboard

  • Summer & Fall 2015
  • Role : UX Researcher & UI Designer
  • The Team : UX/UI Design (me), a UI Designer, & a Ruby & Angular Developer

Overview




Venue managers in Sports & Entertainment rely on a multitude of reports to keep a pulse on the venue's revenue, performance, & profitability. We wanted to provide them with a dashboard that would give them real-time, actionable insights into the state of their business.

The Problem

As we built our admin website & radily expanded our offering to meet customer demands, we had fallen into the trap of not designing a dashboard because no customer had specifically requested a dashboard. As a result, we had a wonky dashboard that gave little insight into the state of affairs & undermined our stated committment to make our customers' business more intelligent.

The Solution

We needed a dashboard that would impress our users & prospective clients by surfacing their core metrics, providing actionable insights, & demonstrating our our committment to forward-thinking design & technology.

Research


User Interviews

I interviewed a number of concession & general managers at venues across the country to determine what metrics, insights, & actions they cared about. They wanted to know what products, categories, & stores sold well & how they could implement successful strategies elsewhere.

Heuristic Analysis

I evaluated our current dashboard & concluded that the design did not answer key user questions: how are my sales doing & what can I do to improve them? Additionally, the dashboard made it difficult to change a view (such as a timeframe) for all graphs across the dashboard, or to confirm that the graphs were comparing similar metrics.

Competitive Analysis

I evaluated a number of competitor dashboards. The most successful were able to incorporate branding & visual interest while still providing users with identifiable insights into the state of their business. A dashboard did not have to contain only flashy graphs to be userful: sometimes tables provided the clearest insights.

Hypothesis 1

Venue managers care about increasing profits & dashboards should be focused on sales-performance insights so that managers can better improve their profitability.

Hypothesis 2

Dahsboards should contain visually interesting & dynamic content that presents a clear set of insights.

Hypothesis 3

Dashboards should link relevant actions to insights.Users will be more likely to use and appreciate a dashboard that helps them make decisions & take actions to improve their performance.

Brainstorm Dashboard Ideas




After conducting research, I brainstormed possible content for the new dashboard.

Methodology

I created a spreadsheet of dashboard content metrics. For each data set, I identified its potential insights, any associated actions, how this data might be visually formatted, & worked with our CTO to determine if this metric was technically possible. I then organized the merics by whether they would helpful before, during, or after an event.

Feedback

While this exercise was helpful for thinking through & organizing all the potential metrics, the document ended up being too detailed for many people to consume easily. I need to prioritize, & visualize a condensed version of potential dashboard ideas.

Further Exploration




I next explored ways to narrow down the metrics & insights to only those that would tell the best story on the dashboard.

Wireframe Content Areas

I created multiple wireframes of realistic content areas I had to play with.

Explore Metronic Assets

I mined our existing Metronic theme for graphing assets we could utilize & I played with other graphing libraries such as HighCharts to mockup potential graphs.

Rank Options

I took a step back and grouped & ranked the graph mockups by visual interest, insight, & relative content priority.

v1 - Metronic Dashboard




Once I had narrowed down the list of dashboard content, I mocked up a Metronic-themed dashboard.

Design Decisions

I created a hi-def mockup to better illustrate graph insights, drilldown options & actionable insights to stakeholders (the sales team & a select group of managers). I attempted provide a variety of types of dashboard content (area graphs, bar graphs, pie graphs, heat maps, table, dynamic tiles) & considerable drilldown options so that users could look at their metrics from a variety of angles.

Feedback

While users considered this design a considerable improvment on the current dashboard, & quite flashy, their was general consensus that there was too much content on the dashboard which made it difficult for users to quickly glance at & know the state of their business. There were also some tech concerns that the amount of data & graphs on the dashboard would considerable slow down page load time & development schedules.

Exploring Responsive Design




I needed to reduce the visual, cognitive, & technical demands of the dashboard. At the same time, we were increasingly aware that our admin website as a whole needed to be more responsive. This seemed like the time to tackle both objectives at once.

Design Decisions

I first designed a dashboard for a small, mobile screen. This immediately forced me to limit the dashboard content to graphs & tiles that could reasonably fit on a small display. It was easy, therefore to eliminate the two large content areas that would not fit on mobile: the payment type pie charts & the sales by time interval heat map. These metrics were of far more limited value than the graphs & tiles that showed sales totals, sales over time, & sales rankings. This design was much more focused & easy to scale across different devices.

Feedback

We received highly positive internal & external feedback. Managers were excited about the ability to access the admin website from their phones while they were walking about the venue. They also thought that the dashboard was slick & easy to interpret.

Final Version




After the responsive dashboard & admin wireframes were completed & approved, business & development needs shifted & implementing the designs was placed on the backburner.

UI Styling

Since the dashboard project had grown to include a responsive design overhaul of the entire admin, this was also our chance to overhaul the admin's UI. The dashboard uses softer colors & more modern material-design influenced UI patterns.

What We Learned

Less is more. While it may be tempting to coral a lot of splashy graphs & metrics on a dashboard & throught an admin website, focusing the interface & functions to key tasks & data is much more usable, scalable, & elegant approach. While the implementation of the new responsive design admin & dashboard has been stalled, we have a solid responsive roadmap to work with going forward.