Overview

Company:
Foxhams, a startup specialising in sport business intelligence.
Role:
As UX/UI designer, I designed and maintained the platform’s financial sport data dashboards, overseeing design implementation, creating new features, and optimising workflows.
Duration:
Ongoing

Project summary

I was tasked with creating a sport data dashboard that allows users to find finance data about a team all in one place. I worked together with data analyst and developers to ensure a smooth user experience. Throughout the project, I conducted user testing of key features, and improved our workflows by creating a wireframing system that speeds up the dashboard design process.

Background

The problem:
Sports data is scattered. Analysing a team’s financial performance can be a difficult task if the information scattered and hard to visualise when displayed as raw data. Users can get clear insights and analysis.
The solution:
A tool that gathers this data, processes it, and makes it easier to understand visually. A data dashboard that concentrates all financial data about a team in one place.
The users:
Journalists, academics, researchers, and businesses in the sport industry. Sport enthusiasts.

Approach

The aim was to have a structure and understand what metrics were more useful in each dashboard, to create a story that linked each metric in a manner that makes sense. We had a list of possible metrics and visualisations we wanted to include, and wireframes helped in having a general idea of the structure of these dashboards.

My approach to this was to take the list of metrics we had and determine the type of visualisation to use. I did research on different types of visualisations that could be useful for each metric and could accommodate to the layout better, and made suggestions accordingly. I wanted to prioritise readability, so I tried to keep the charts as simple as possible and I used cards to highlight important metrics.

dashboard Wireframes

Challenges

The navigation menus were a concern because some dashboards only had a single page of data, while others would have multiple pages. We needed a solution that would accommodate for both types of dashboards. I created a navigation menu consisting of tabs that acted as links to other pages, and tabs with dropdown, that included jumps to a specific section in a given page.

Having tested this using Userberry, I discovered that, despite my assumption that this navigation menu would be confusing, the tests demonstrated that users could navigate without issue.

prototype for Usability test

Visual design

Having an existing set of style guides, I worked on creating the UI of our dashboards. The goal was to have a professional platform that feels modern and appealing. I recommended changes that would reinforce the visual style we were looking for, and created colour palettes, assets, and a variety of mockups to finally bring our dashboards to life.

Dashboard designs

Design impact

The process of building dashboards was time-consuming. We would create wireframes, adjust them depending on the data available, and then apply the visual design so that development could build the final dashboard. All of this without counting the time it would take to prepare data and develop each chart APIs.

I saw that there was an opportunity to improve this process and be able to communicate the layouts and charts of a dashboard in a more efficient way. So, I created a wireframing system that allowed us save time, ensuring that layouts and charts, as well as their responsive counterparts would be consistent across dashboards.

The system:

12-column grid for consistent layouts
Icons representing each chart
Headings reflecting chart features
Comment section for additional information

I reduced the time it would take to create dashboards by more than half, going from dashboards being built in a month, to a process that takes between one and two weeks.

Before & after

Responsive layout

Next steps and final thoughts

With the current state of the platform, the dashboards are now being developed and implemented.

As a designer, I have been reviewing closely the correct implementation of the design and have worked together with the developer to ensure that the end product is user-friendly and follows the requirements set out in the design.

The wireframing design system has allowed us to work faster on creating dashboards, so now designing and developing dashboards for new teams and sports has become a hassle-free process.