5 Design Systems later - lessons learnt.
​
Download MSN Design & Development Kit (PDF)
​
​
Over the past 12yrs, I've inherited 2, built 3, and learned something different from all of them and approached them all in different ways
Lesson 1: Know how much to invest
My first introductions to design systems was around 2011 for Microsoft's MSN new portal. I'd already been there a couple of years, working on MSN (not the messenger client, the news portal) It was big back in the day :) - 43 markets, 12 languages, 20,000 unique pages and more than 20 million visitors per month!
​
We had a team of about 40ish UX Designers (labelled differently back then) , and a growing challenge in front of us... How to we scale the design of MSN pages, templates and content experiences to meet the needs of all these countries driving new editorial content daily? And the next biggest challenge - if they mostly curate content and design locally, how can we begin to standardise, and improve this globally?
​
A design system was needed, given the number of editorial teams we needed to support. We also wanted the ability for other Product and Development teams to deliver experiences faster, more consistently and at scale.
​
(below highlights a couple of sections of the HIG and how it integrated into MSN's wider brand offering.)
Over the next 12 months, myself and a the extended UX team across different domains, worked together to create the HIG (Human Interface guidelines). A comprehensive 120ish page guide for development teams when creating content for MSN.
By the end of it we were exhausted. We'd covered every scenario and potential pitfall, made an incredibly comprehensive online design guide, in a custom sharepoint space so what could go wrong?
Well the first challenge didn't become apparent until we started chasing feedback. What we discovered is that most had opened, but and just didn't care that deeply and didn't have the time to read though 100's of pages of documentation and guidance. We built a beautiful HIG site on complex share-point with navigation and endless amounts of guidance, but it was too detailed, and usage was considerably lower than expected.
So, armed with feedback from the market, this led to the creation of a smaller, more digestible version, called the DDK (Design and Development Kit - (30 pages) - which was well received by the internal target audiences of content producers, designers, developers. Having a single page to provide an overview on typography was all most of them wanted.
The response was fantastic. Markets fed back to us, clearly understanding the direction and value in keeping our consistency and began sending this information to their outsourcing teams during development. Within months, we starting watching content experiences improve globally across MSN markets.
(below screenshots of the MSN DDK)
Download a copy here
.jpg)
So, I learnt my first big lesson,
" Understand the appetite / know the audience.
It's really easy to get over invested and excited in something like a design system. It really comes down to understanding the need, the business appetite and the size required. You could spend years continually developing a design system, or a few weeks getting one off the ground and evolving over time.
Much later I also learnt the other half of that lesson :) Ensuring there's enough buy-in around a business for the time and investment needed to roll one out. Now this of course differs, depending on the size of your product and it's age. "Re-Factoring" is a scary word that doesn't sound valuable, but still costs money. It's always worth spending the time in discovery to understand how you will 'rollout' a design system based on the company size and culture. The last thing you or the business wants, is a lot of time spent on something that doesn't get constantly used or provide a better experience.
