Over image-mbdesignsys-cover@2x.png
 
 

Launching Mindbody design system 🚀

The Problem

Designers used Sketch files that resembled a sticker sheet with documentation. Documentation was only accessible to designers which made it difficult for developers to understand the rationale. The components lacked flexibility and general accessibility considerations.

For developers, React components were kept behind a firewall. Outside teams could not access this repo which made adoption rates low.

As more companies were acquired, styles and components quickly fell out of sync. This led designers to feel like brand islands, making understanding the product brand standards challenging.

Outcome

Launched the Design System MVP in 6 months.

We delivered:

  • Interrelated Sketch Libraries of foundation, components, and patterns

  • Governance Process with identified Core Team and Leadership

  • Microsite for documentation

  • Interface Inventory

  • Product Ecosystem mapping

  • Support and communication plan

Initiative forecasted to save $15 million over the next three years.

 

My role

Led four-person design team to audit, design, and launch

Project Status: It's never done!

 
 

Approach: Audit, Understand, Build, Launch, Support

 
 

Audit

Auditing allowed us to better understand the customer perspective and align on what products and components to build for the MVP launch. Auditing took two forms: Ecosystem Mapping and Interface Inventory.

Ecosystem Mapping

We followed a person through our software, jumping from one product to the next. Internally, we work on different products, but to our customers, it's all Mindbody. From this exercise, we decided to focus on core products our customers use every day.

 
Ecosystem maps@2x.png
 

Interface Inventory

Each designer chose a group of components to document throughout each product. We audited a total of 25 components across 14 products. Some components had up to 50 different variations, which is not uncommon for 20-year-old software.

We compared the results of these audits to our current pattern library. This gave us an excellent idea of where to include additional functionality when building out new Sketch libraries and documentation.

Compnent@1x.png
 

Understand

Product and Marketing teams worked in silos, we saw an opportunity to level set teams on brand standards. During a team offsite, I led a brand persona workshop. The workshop helped to align product teams on Marketing brand standards. Both teams workshopped ideas on how we can better represent the brand throughout the experience, including UI and voice and tone. We looked at 3 customer segments. The resulting mood boards and personality sliders gave the team a better understanding of how the brand can stay harmonious when interacting with different customers.

Understnd@1x.png
 
 

Build

For the design system to be successful, we needed teams to adopt the system and want to make it better. Balancing our deadline, we prioritized 18 components, 2 patterns, new foundation files that reflected the brand refresh, and a new governance process for the MVP. Since the system is never done, this was the best way to launch and continue the build.

Sketch files we set up as interrelated libraries. I established naming conventions and designed a document template. We published all our work to a DSM (design system manager) microsite.

Build1@1x.png
 

Microsite

We decided that a microsite was needed to democratize our documentation and design standards. The site will get better with time as more contributions are made to the system. This was a great advancement from having all the documentation in Sketch.

I established the page hierarchy and worked with a copywriter to refine the documentation.

Build2@1x.png
 

Governance process

We decided a federated model would work best for our design team. In this model, everyone is a contributor but a core team reviews contributions. With everyone contributing back to the system, a clear governance process was established.

We set up a core team of designers and developers. Created workflows for updating existing components, creating new components and patterns, and documenting snowflakes. Snowflakes, a term adopted from Atomic Design, snowflake components are created for specific use cases and not quite ready to be included in the design system.

Build3@1x.png
 
 

Launch 🚀

I held a Zoom party to get everyone excited about launching. We spent the last weeks of December refining DSM, Sketch, and Sharepoint. I presented all the specifics of the project at the next team meeting.

Launch@1x.png
 
 

Support

This project is never done. I am working on supporting the team as we get our first contributions submitted. I designed and published a Get Started Guide for designers. Set up office hours, slack channels and held bi-weekly check-ins with the team to ensure we were supporting designers

Support@1x.png
 
 

Wins and challenges

The design system is a living thing, much like the brand. We are seeing lots of people in our organization getting excited about using it and making it better. With that, we are finding challenges with the federated model and I believe we would really see acceleration and transformation with a dedicated group of engineers and designers.

A strong and consistent communication plan is keeping designers engaged. The slack channel is a great way to keep the conversation going and share new UI patterns ideas. Keeping engagement high, being open to new ideas, and giving designers tools and support to contribute are major improvements.