Intelligent Play - UX + UI | Strafe Creative

Intelligent Play – UX + UI - UX Design for a SaaS Product

A beautiful user experience for the world’s first smart sports field management system

Scroll Down
Various reports and data sets that intelligent play offer clients
  • UX Research
  • UX Design
  • User Onboarding
  • Client Portal
  • Admin Portal
  • UX Research
  • UX Design
  • SaaS Design
  • SaaS Development

The Story

Intelligent Play offers a smart system to help ground staff and managers maintain their pitches to the highest standards. Sensors on the pitch track hundreds of data points which can then be used to optimise fields for player safety, pitch longevity and maximum performance.

We worked closely with the team to redesign the user dashboard to be more aesthetically pleasing. The goal was to ensure that all the data was useful and easily understood by anyone logging in.

Multiple Users

Clients of Intelligent Play include legendary football clubs, small sports centres and nationwide sports facilities. Each location has a varying number of pitches and a range of different users who require reports and data points.

We needed to design an intuitive user experience so managers or ground staff can find what they were looking for straight away.

A live view of yellow dots moving around a pitch - each representing a player
A view of the tool, with players being tracked during a match
The back end of the Intelligent Play platform, showing stats, data, heatmaps of the pitches and information about each pitch

“The excellent team at Strafe have worked with Intelligent Play to deliver two really important projects. From carrying out a UX audit to clearly understanding and making recommendations. The service and level of work has been of the highest calibre at every stage”

Amii Attard

Amii Attard

Global Marketing Director at Intelligent Play

The Data Dashboard

The comprehensive dashboard offers hundreds of data points, visuals and live views to help users make informed decisions and plans. Each data point it pulled in from the onsite pitch sensors and it was our job to make it visually appealing and easy to understand. 

First look at the stats: After logging in, users are shown the overview dashboard which shows the key stats from across their grounds and pitches, a list/map of all the locations, plus a handy to-do list of tasks assigned to that particular user. Easily access notifications and your profile from the nav bar. 

On the left-hand side, users can navigate between facilities to review specific information about each. The overview offers similar data to the homepage, plus a colour-coded guide to the status of each field – you can see at a glance which pitch needs attention!

A detailed look at the data point from one pitch
Screenshot shows the various tutorials users can access in the platform
Gif demonstrates different views a user can access via the backend

Digging deeper into the data: by clicking into each field either by the status button or via the navigation bar users can really dig into the data. Review live visuals or heatmaps of the pitch, giving you a detailed insight into the state of the turf. The maintenance tab offers a slider heatmap, so you can review improvements across the pitch following maintenance. A small calendar shows scheduled and overdue maintenance for that specific pitch. 

Some like it hot: a great addition to the user experience was the inclusion of weather data in each location, featured across the calendar widgets and on the usage charts. This is useful for planning maintenance work and reviewing how the weather affects the state of the pitch after use.    

Additional Bespoke Features

Stats at a glance
Custom Reports

With so much information available within the system, we had t make it easy for users to find the data they need. We designed a simple click-and-pick page to easily create reports. Users can choose which pitch or site and any information they need to automatically produce a tailored report that is ready for use.

The mobile version of the platform
Data on the go

We designed the mobile and desktop versions of the platform slightly differently depending on the main target users. The tablet version was tailored towards the ground staff updating the maintenance information on the go. In contrast, the desktop version was typically used by managers looking at the reports, so we ensured that the desktop version was more suited to report building.

A calendar view shows all up coming events and activities
Calendar View

A large calendar view was included to help the team map out all the upcoming events and activities and therefore ensure maintenance work could be completed on time. Filters allow the user to add or remove specific locations or pitches for a more tailored view.

The Design Handover 

For this particular client, we only worked on the designs and not the development as the team had these skills in-house. When working on a design-only project we have to plan and consider the handover to the client-side developers very early on. We never send files over and leave the client team to just get on with it

To ensure a smooth transition between our design team and the in-house developers, we bring them into the project early on. This means we can work together on which design grid to use, check in on their capabilities and take that into consideration within the designs. For example, there’s no point in us wasting time designing a section the team don’t have the API for. 

One example of this was the addition of weather data across the platform. In an ideal world, the weather API would pull in the data across all sorts of modules within the dashboard. However, with many people using the tech simultaneously, constantly refreshing and storing the data we concluded that it would likely slow the whole platform down. With this in mind, we included the weather in just one module. 

When designing in Figma we make the most of its ‘components’ feature, which allows a developer to reuse the same component again and again, e.g. a CTA button. This, together with a small DSM (design system manual) helps the developers bring the new design work to life consistently. 

Once the designs are finalised we hand over the project on a series of calls. After that, we offer design contingency time just in case elements need to be tweaked once the build starts. With these considerations in mind, the handover process is usually straightforward, and our clients have had great results from working in this way. 

This was an exciting opportunity to develop full user flows, wireframes, prototypes and designs for this highly detailed and interactive SaaS product, now with an improved user experience.