Spartan Dashboard

overview

The Spartan Dashboard project was an internal company initiative with the aim to standardize the way in which key metrics were distributed within the organization.

client Spartan Race
category race organization
services research, design, development

process

  1. discovery
  2. research
  3. research exercises
  4. research analysis
  5. prototyping & user testing

01

discovery

The goals were outlined by the leadership team based on what they saw as the biggest challenges. It gave an initial understanding of the current state of the data as well as identified third-party platforms for integration.

This provided a starting point for initial user hypotheses and outlined areas that needed more information.

02

research

Given the fundamental challenges of designing a dashboard, it was important to gain a clear understanding of the end user’s goals. In order to do this, we had to start by understanding the existing knowledge of the key metrics within the organization.

Project hypotheses - The four main areas that formed the basis of our hypotheses were:

  • Categorization of Key Point Indicators (KPIs)
    • Not all of the KPIs were going to fit on one page or screen, so our assumption was that they would be split up in some form either on a slider or across multiple screens. As a result, we needed to understand what groupings made the most sense to the end user.
  • Prioritization
    • We developed a technique to help us understand how users determined the importance of each KPI, which consisted of asking users to place numbered sticks against each KPI in order of importance.
  • UI Library
    • In order to test our initial UI assumptions we created and tested a series of paper prototypes with end users to get some initial feedback.
  • Accessibility
    • We built three different sized styrofoam prototypes which we held above our heads, simulating the TVs, and tested the readability with users standing at the typical distance they would be when interacting with the real screens.

03

research analysis

Armed with the results from the research exercises we went through multiple rounds of analysis, identifying trends and patterns, which ultimately led to another round of paper prototypes and further user testing to validate findings.

Ultimately, through the research, we successfully managed to validate our initial hypotheses to a point where we felt confident moving onto the prototyping phase. Furthermore, we established the project KPIs, which were used to measure the overall success of the project, and agreed upon with the client.

04

prototyping & user testing

Given how far we managed to get through our initial research we hoped to achieve a strong indication on the direction of the design with a low-fidelity prototype and then focus on branding and adding small animations for a ‘surprising and delightful’ high-fidelity prototype.

low fidelity

We produced the low-fidelity prototype using Keynote and assets created in Photoshop. Keynote was our prime choice for the prototype because of its speed and efficiency.

user testing I

User testing 1 consisted of the projection of the low-fidelity prototype against a wall and users being asked a series of core questions that were constructed from the research insights.

high fidelity

Fortunately, the feedback from the first round of user testing was mostly positive which allowed us to spend more time developing the high-fidelity prototype with branding and animations.

user testing II

The second round of user testing was performed on TV screens to simulate a LIVE environment.

Our goal at the end of any prototyping and user testing phase is for all stakeholders to feel confident with the usability and design of the product before starting the build phase. Even though the product development is never finished, as we always look to make improvements, our goal is to go into the build phase with a tested prototype based on validated assumptions that come from real end users.

development & QA

We built the Spartan Analytics Dashboards using React atop a Node.js, Express, and MongoDB backend. We've found that this collection of technology significantly shortens our iteration time when prototyping and developing features. While this stack isn't appropriate for everything, it is very effective in achieving fast turnarounds.