Intelligent Play – UX + UI - UX Design for a SaaS Product
A beautiful user experience for the world’s first smart sports field management system
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.
“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
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!
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
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.
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.
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.
OPM - Conversion focused website -
Bespoke Development
Levelling up a website experience to help job seekers find their next role in gaming
Our next case study