JOHAN Sports and CGI Apply User-Centered Design to Advance Field Sports

Every four years, upwards of a billion sports fans tune in to cheer on their favorite teams competing in the world’s largest international football tournament. But even the most passionate fans rarely see the years of dedication and training that go into each game.

JOHAN Sports aims to help field sports teams at all levels reach peak performance with accessible performance analytics driven by cutting-edge technology, sports science, and smart design. The JOHAN Sports system is both simple and elegant. Players wear vests with fine-tuned sensors that capture critical details about heart rates, field motion, speed, and acceleration, which is used to continually enhance individual and team performance — and to prevent injury.

“Teams using our product are deeply committed to the success of each athlete and their clubs,” says Robin van Kappel, who co-founded JOHAN Sports with Jelle Reichert in 2014 to combine their expertise in aerospace engineering with their love for sports and new technologies.

“Our devices not only have to address the technical demands but also the experience of every person using them,” he says. “Even if our underlying technology is complex, we need to ensure user experiences are always clean and simple.”

With that in mind, JOHAN Sports devices are supported by an intuitive online service and a mobile app, both designed using Adobe XD, that give coaches, managers, and trainers a clear and accurate view of an athlete’s performance and overall team progress.

Replacing complexity with ease

While some teams already work with large technical teams of analysts, JOHAN Sports solution stands out by making advanced analytics accessible to everyone. Integral to achieving this is the company’s commitment to outstanding user experience design. JOHAN Sports partnered with CGI, a global IT and business consulting services firm, to help design the online service and mobile app.

Trainers and analysts use the service to access all data and receive insights through automated analytics modules based on the latest sports science research. “We want our customers to have immediate access to data wherever they are so they can evaluate player performance and adjust training goals,” says Jelle.

Every team has different needs. Some teams are looking for reliable data to analyze strategies during matches or training. Others want data that will help monitor and advance player development. Together with CGI, which owns the design part, JOHAN Sports creates several modules for its online portal and mobile app, and tests those modules thoroughly with users.

“No one understands the insights our customers need better than our customers,” says Jelle. “We have an intensive, iterative design process where we work closely with customers to test apps and prototype data analysis modules. Our focus is on understanding how we can improve the JOHAN Sports system to better work for them.”

Using prototypes to gather user feedback

Daniëlle Kloots, a UX designer and front-end developer for CGI, uses Adobe XD to design working prototypes of new modules that consider the needs of different users. JOHAN Sports shares prototypes with customers to gain feedback before moving on to development. User feedback allows JOHAN Sports to save on development costs by only focusing resources on designs and features that benefit customers the most.

“Adobe XD is so easy and intuitive that I can spend more time thinking about design from a user perspective, and experimenting with different design options,” says Daniëlle.

User-centered design as best practice

Just like JOHAN Sports relies on user feedback to improve its product, Adobe regularly introduces updates to Adobe XD based on user feedback and feature requests. One recently added Adobe XD feature that Daniëlle particularly enjoyed was the Overlay feature. With overlays, she could stack content on a single artboard to show how drop-down menus and contextual information would look on a page without needing to duplicate efforts and create separate artboards for each option.

“While I love working with overlays, what I really appreciate is how it’s an example of Adobe listening to its customers,” says Daniëlle. “Another user requested the overlay feature on the Adobe XD Uservoice site, and I voted for it. I was excited when I saw that it was added to the product in a recent monthly update. Much like how JOHAN Sports listens closely to its customers about how to improve its product, Adobe XD actively involves its users in the development process. In both cases, the result is the same: user-centered design that helps customers work smarter.”

In a sport where the stakes are unbelievably high — and the world is watching — JOHAN Sports offers customers powerful technology and intelligent design that changes the game for everyone.

JOHAN Sports and CGI use Adobe XD to apply user-centered design to further field sports.