How I helped MPS Data design, build and ship their data Analytic products
UX Research
Strategy
Prototyping
User Testing
Branding
UX/UI
Design System
Creative Direction
Leadership
Before we get to the story, who are MPS Data exactly?
As with every company that starts solving annoying problems for people. With rapid growth, interest & early product validation MPS ran into a few issues of their own.
Buggy platforms
No design system
10 products with no structure
Design team - different levels
A lot of work to do quickly
Limited runway
No clear brand
No user feedback loops
Growing Customer base
Bugs - frustrating UX
Don't like current platform design
Goals
One thing I admired about the CEO, was his ambition, he wasn't scared to go after it, the goal was clear:
Collaborating closely with the CEO and head of product I lead the design in the following areas:
We worked hard as a team to deliver on tight deadlines and as a result we enjoyed quite a number of successes:
Successes
During my time at MPS we managed to launch an impressive product suite
How I did it
I Introduced quarterly UX Reviews of current products
I divided this up among the team for a collaborated effort
This gave us a good general oversight on the current condition of each products
It uncovered problem areas in design and build quality
It uncovered pain points for customers and for the business
Using a priority matrix
High priority / low effort
This is key for establishing critical next steps
It acts as a north star to align the team
This keeps the feedback loop tight and maintains good communication with customers
It reinforces the teams efforts toward our goals
It highlights bugs/problem areas and what is working from every product release
It removes any assumptions we have, we get fresh outside perspective on releases
Working with the sales team and carried out customer interviews to establish user research, competitive analysis and a range of research for each product, their needs and pain points.
It needed to service 10 products
It needed to serve components to a dev team of 50+
It needed to be able to version control
It had to sync together to allow quick prototyping new screens
It needed to be simple enough for onbaording new members of the team
After 12 months of trial and error, the most efficient version of the design system had five levels:
🎨 50+
Styles
🧩 60+
General
Components
⚽️ 40+
Product specific
components
👨👩👧👦 60+
Team users
✅ 300%
Increase in
efficiency
After a lot of trial and error, test scenarios, time tests, and team wide sessions where we assessed efficiency we honed the design system into the cleanest structure.
Colours - assigning primary & secondary colours
Typography - H tags, paragraphs, forms & button font weights and sizes
Grid - Implementing a grid system that informed everything
*Adding colour, type and grid styles for each products sped up dev time considerably
Icons, buttons, inputs, drop downs, tables, pagination, tabs, avatars & much more
Each component had a base level, which could be easily adapted and changed
Powered by our built in colour, typography styles & grid setup
All built with auto layout
Navigation, pitches, popups, cards, sections, avatars, tables & much more
3 main products each had their own specific library
Each component synced with their respective general component
This approach gave us the flexibility to give each product a unique style whilst being governed by the same general components
🔴 WIP
This grants the designers and product leads complete flexibility to work at files without anyone else seeing them.
Including WIP files across the product suite was an important iterative step.
Due to the fast pace of delivering design designers and developers were working on the same page which led to confusion as to which part was signed off.
✅ ‘Signed Off’
This was the final version version shared with everyone on the team.
This worked great as it reduced any confusion from before, the devs and other product managers knew exactly what they were looking at.
How it worked
When all the screens were finalised on the WIP, we made them Figma components and pushed them to the ‘signed off’ files. This kept the shipped design clean.
It also made it incredibly easy to whip up new versions and variations.
Throughout my time as head of design we took on various mini projects, this documents one of them.
Incognito, the professional football solution is extremely data heavy, and feedback from users wasn’t good. They said the data was amazing, however, it incredibly hard to digest and follow the trends.
Pages and pages of data on games and players hard to follow
1000’s of game results hard to digest
10,000+ players anaylsed on over 100 metrics - DATA heavy
We couldn’t use club badges or player pictures (prohibited image rights)
Create shirts for all the professional football teams in 30+ leagues to break up the data and make the data trends easier to follow.
Built into the design system
Easily created and edited with templates
They need to be easy to push to designs & tables
I researched every club in our data set and split them among the team, we got screenshots of club crests, colours and shirt designs. We researched over 600 professional teams
Over 40+ templates created from research
Over 600 shirts created
They were completely scalable
We made them figma components
The templates made it really easy to create the team shirts, the process was:
Look at the club shirt
Find the closest template & use club colours
Create front of shirt, back of shirt and counter version
Repeat for all leagues
We divide the shirts into teams, then leagues and finally arranged them by countries
The final result made generating screens, demos, mock ups for selling a breeze.
The customers usability increased x10, it was much easier to digest large data pages
The shirts were adopted and reused in many other use cases throughout the products
The shirts didn't infringe on any image rights or players or clubs
Whilst simple design the teams and players remained identifiable
The investors loved the shirts
Gigpig: Book gigs get gigs
Fast tracking growth at the UK’s fastest growing music marketplace
© 2024 ANDREW MCCRACKEN.