Restructuring a design system around data-heavy screens
Senior Product Designer managing a team of 2 across multiple projects. I made IMG's design system modular and led a major redesign of the streaming and fixtures tool.
- Design systems
- Sports data
- B2B
- Role
- Senior Product Designer
- Period
- May 2021 – Sep 2022
- Team
- Sole designer on OPS UI, with engineering, scoring and streaming teams
- Read
- 3 min
OPS UI was IMG Arena's in-house monitoring and operations software. It was the one place incoming data from venues and streams could be watched together.
The design system it had to be built on wasn't made for screens this dense, so restructuring that is where most of my time went. Every component was placed onto an 8px grid, the library was reorganised into atoms, molecules and organisms, and I brought engineering into the design system discussions instead of sending them the outcome afterwards.
ContextLink to this section: Context
IMG Arena's business is sports data, that is sold on to bookmakers. OPS UI is an internal software, and sits in the middle of the ecosystem rather than out at the edge of it.
Data reached it from two directions. The scoring app collected it on site at the venue, and streaming services supplied the rest. OPS UI is the interface where both arrived, as fixtures and match data, in front of the people whose job it is to watch them.
I was Senior Product Designer on OPS UI. The design system work ran alongside it and was shared with engineering.
The problemLink to this section: The problem
IMG already had a base design system. But it hadn't been built for what OPS UI needed.
An operations screen has to carry far more than a settings form does. There is a potential for a lot of matches to be on screen at the same time, each of them carrying live data. The existing library didn't hold up at that size or density.
I had to start by finding out what data existed and where it could surface, and that answer came from the scoring app and streaming teams.
What I changed in the design systemLink to this section: What I changed in the design system
- 01
Placed every component on an 8px grid
Spacing that's slightly off goes unnoticed on a sparse page and becomes obvious on a dense one. Once every component shared a single spacing unit, a screen at that density could be assembled instead of nudged into place.
- 02
Reorganised the library into atoms, molecules and organisms
The library needed to be lighter and more modular than the one it replaced. It also needed to be something a new hire or an engineer could pick up quickly.
- 03
Brought engineering into the design system
Engineering only had a small part in the meetings where design system decisions were made. I gave them a bigger one, and that meant fewer questions and less rework at later stages.
What I shippedLink to this section: What I shipped
OPS UI shipped at pilot stage, with the monitoring app folded into it.
The data question had to be answered before anything could be designed. I worked with the scoring app and streaming teams to establish which incoming data was actually available and where it could surface on the front end. That set the shape of everything after it.
The monitoring app had been separate before this. Integrating it changed two things. The user could put up to eight matches on screen at once, and browsing was reorganised by sport, then league, then match, so finding a particular fixture no longer meant scrolling a long list.
What happenedLink to this section: What happened
OPS UI went out as a pilot on football, and only a few leagues within it. It didn't reach general availability while I was at IMG Arena.
Keeping it to one sport was deliberate. Running the pilot on football and a handful of leagues left room to learn from it before widening it out.
The design system work meant that scaling to more leagues and sports much faster. With every component on one grid and the library organised atomically, adding a sport would have needed templates for that sport and the way it displays its data, not a new library. That was the reason for doing the system work early.
Every component in the library went through it — nothing was left on the old spacing.
