High-quality data insights from ground-based turf inspection machines

BEAST stands for Biomechanical Elite Athlete Shoe-Turf Tester. The client’s mission is to create high-performing playing surfaces for professional sports play. The main problems troubling the software’s users were manual process flows, slowing down their daily work, and a lack of digital means to address the users’ operational needs. Our task, as a software partner, was to provide a digital solution empowering our target audience with relevant and actionable digitized data insights from the turf inspection machine. The BEAST app addresses this challenge by giving users a tool designed to provide data intelligence.

The client approached us with the input needed to kick off the work. We received the domain information, insights into what the machine looks like, sample charts, and the scope of the data being gathered. We also discussed what the process currently looks like for the Field Managers. We interviewed the users and learned about their work, the obstacles they were experiencing, and the gains they hoped to achieve with this web app. We undertook the challenge of developing an interface for visualizing the data from the machine completely from scratch, based on highly exploratory flows.

With the aim of providing the highest quality, we went for a highly specialized and diverse team of front-end developers, UX and UI designers, and testers led by our Project Manager. The Merixstudio crew of 5 people started our product work with workshops that provided us with the expectations for the product against the business context.

One of the workshops’ main topics was data visualization. We talked a lot about how to show data in a digestible, understandable, and useful way for Field Managers and Researchers. We worked directly with end users during workshops, which proved invaluable for digging into their specific needs.

Having previous successful experiences with the same client made it that much more effective and rewarding to engage ourselves in the joint work again. Guided by experience, at the very beginning of the project, we also prioritized the functionalities to identify those that would deliver the most value to end users.

The client had clear goals as far as the product vision was concerned. For the project execution, we relied on the Kanban methodology and aligned the details of new features within iterations with the client team to maximize the final effect. Such a co-creation in the spirit of maturity, constant communication, and collaboration were crucial, especially for a discovery-type project executed remotely across different time zones.

The core of our work involved front-end development and UX-UI design. We performed a detailed target audience needs’ analysis backed with user research and tests. As in the case of our previous projects with the client, highly usable data viz constituted a fundamental element of the developed interface. To that end, we used Plotly.js to generate charts with statistics used by Engineers. Thanks to our customized approach and cost optimization efforts, we imitated Material-UI, adjusting it to our needs, which resulted in unique views based on best practices.

In the spirit of smoothly aligning our work to the existing backend, we used the Apollo GraphQL client for backend adjustments and caching. Thanks to utilizing React Hook Forms, we were able to enable game reporting to the sports league, while React Contexts facilitated storing global data. We also used query parameters to reflect the current state of the application in the URL, which proved handy in storing the filter settings and sorting the beginning and end of the selected scope of dates.

As far as Quality Assurance is concerned, after a critical analysis of the current needs and risks, we followed the MMP line of thinking — with an emphasis on quick ideas validation, delivery of the necessary functional scope, and implementation of changes based on end-user feedback. We performed manual system tests which showed if the system works well against the predefined requirements. Thanks to executing unit tests in the React Testing Library, we were able to determine if the specific units of code work as intended while covering 70% of the app.

Our flexible approach during project execution allowed us to fully adjust our steps to the flow of parallel client-side processes (the BEAST machine was in the testing phase while we were designing a digital solution to accompany it).

We use [data] as a benchmark... We can talk to other Field Managers about those numbers.

Field Manager

The end product solves its users’ real problems, optimizing their daily work. Our powerful data visualizations (including bar charts, candlestick charts, heatmaps, or line charts), as well as a clear and aesthetic UI facilitate drawing informed conclusions from the data and improve daily sports field management operations.

[the best data visualization] is, I think, the heat map. (...) The heat map is valuable to show somebody (...) where the hard areas are... [We can] show coaches, trainers ‘look this area is getting hard.’

Field Manager