Morgan

Email me

Back

Teaching large companies to move as nimbly as startups

Teaching large companies to move as nimbly as startups

Tracking the results of agile coaching

MFMVP: Massively-Featured Minimum Viable Product

Hired to improve UX of SAAS web app, I began with an expert review, user interviews and heuristic evaluation, and ended two years later with an overhaul of information architecture, a rebrand, and the implementation of a custom design system in Backbone.

  • Launched into beta with enterprise clients such as Comcast and JP Morgan

SurgeMaker GPS is the first in a suite of apps by agile coaching company GearStream. They approached me to help redesign their web app that visualised the improvements made by teams under coaching and informed executives' decisions by drawing insights from data.

We started with a revision of the app’s basic functionality, and we worked so well together we continued for the next 2 years, designing a wealth of new features. Designing an enterprise application is very different to designing a B2C app—the feature set expected from an MVP is basically “everything”. This is why so many massive companies are still using software from 10 years ago, because they’ve got “everything”.

So it took us over 2 years to launch an MVP, and it’s the most extensive product I’ve ever worked on.

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 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.

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.

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

Iterative design

Design. Review. Rinse. Repeat.

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”.

This design looks simple and obvious! If only it was simple and obvious to create.

Legacy links

Home

Case studies

Writing

Legacy links

Home

Work

Writing