Data, data everywhere
So let’s all have a think…
SurgeMaker GPS is basically split into two halves. The first is data-gathering. This is done by coaches, in-person, when they’re on-site.
Coaches use Scrum or Agile models to track a team’s improvement over time, to see if the coaching they’re doing is having the intended effect.
The second half is visualisation. This is where the executives—generally removed from the ground-level operations of the company—can investigate the data gathered by the coaches and use it to make decisions.
The singers and the drummers are causing all the trouble. Typical.
There’s a massive amount of data: Companies contain Lines of Businesses which contain groups of Teams which contain Indexes, Improvements and Impediments which contain Disciplines, Practices, Observations, Notes and Actions. And all of this is tracked over time and compared to previous scores.
Our approach to guiding executives through this database was to start at the top-level, try and point out something interesting—“Hey, this looks kinda weird, I wonder what’s going on there”—and then guide them down a level. Rinse, repeat, until hopefully they get to the root cause of whatever weirdness they were seeing in the first place.
Essentially, every page of the app is showing the same information, aggregated and displayed in different ways. It’s a similar approach to Google Maps: you’re always seeing “the world”, but as you zoom in you’ll see continents, then countries, cities, suburbs, streets, and places.
Animation as communication
Navigating through hierarchy
The hierarchy I mentioned was both deep and wide, and it was easy to get lost and not know where you are or how you got there. Our first step was to create an information architecture that was intuitive to navigate. We removed as many layers as we could to make the hierarchy as shallow and flexible as possible.
Next, we used animations to help communicate where you were navigating—as you dived down into areas of interest, the app would animate in and out in 3D space.
Unique look-and-feel
Standing out in a boring crowd
Enterprise software is typically pretty visually depressing. We wanted SurgeMaker GPS to be a breath of fresh air. The visual design progressed from something Microsoft would be (wrongly) proud of, to using quirky typeface, bold colours, and allowing teams to select fun, custom-built avatars to express their identities.
Our design system contains custom versions of every component in Bootstrap, and then our own modules based on various combinations of those components.
Colour was very important, as it didn’t just have to make the app look pretty, but be differentiable within data visualisations. We picked a set of colours that not only came together in a stunning rainbow-gradient, but could be picked apart by people with various forms of colour-blindness.
Teams could pick from a variety of cartoony avatars to represent their team.
Iterative Design
Design, Review, Rinse, Repeat
This design looks simple and obvious! If only it was simple and obvious to create.
Such a long-term project gave us time to iterate on our ideas and produce really great interactions. I’ve written more about this in “Iterative Design in Action”.