Karma Design System
Mindbody’s marketing site had existed through multiple evolutions of the companies brand. Over time, the website had accumulated a patchwork of design styles, with each page appearing to be designed independently. This lack of visual consistency created a confusing and disjointed experience for visitors.
The migration from Drupal 7 to Drupal 8 presented an exciting opportunity. While migrating the content we could start over with a more scalable framework. This design system, inspired by Atomic Design principles, would provide the building blocks for a visually consistent and user-friendly website.
Senior Designer
Team:
Mark Edwards - Design
Sara Allen - Development
Van Doan - Development
The ChallengeThe Drupal 7 website presented two major challenges:
- Legacy Code: Generations of code additions and modifications resulted in a complex and cumbersome codebase.This made it difficult to implement changes, fix bugs, and build new features efficiently.
- Visual Inconsistency: The website lacked a cohesive design language. Each page appeared to be designed independently, leading to a confusing and disjointed user experience for visitors.
These challenges combined to create a website that was both time-consuming to maintain and ineffective in engaging users. When new pages needed to be built creative was hindered by technical limitations, and it could take weeks of development production.
Solution: An Atomic Design System
To address these challenges, we proposed the development of a comprehensive design system in Sketch. We drew inspiration from the principles of Atomic Design, a methodology that breaks down the visual components of a website into their most basic building blocks - atoms (styles, colors, fonts), molecules (buttons, forms), organisms (navigation, headers, footers), templates (page layouts), and finally, the entire website itself.
This approach offered several benefits:
- Improved Efficiency: Reusable components would streamline the development process, allowing for faster creation and updates to website pages.
- Enhanced Consistency: A centralized design system would ensure all website elements adhered to the same visual language, leading to a more cohesive user experience.
- Reduced Maintenance: Changes to the design system would automatically propagate across all pages, minimizing the need for individual page edits.
Feeling this to be an act of goodwill for any designers and developers who would inherit the site after us, we dubbed the design system “Karma.”
Process: Building the Blocks
The design system buildout involved a collaborative effort between designers and developers:
We conducted a thorough inventory of existing website elements, identifying common patterns and inconsistencies.
We categorized these elements according to the Atomic Design principles, creating a library of reusable components.
We documented the design system in a comprehensive style guide, outlining usage guidelines, code snippets, and visual examples for each component.
Developers translated the design system into reusable code components for Drupal 8.
A sample of lower level system elements:
Implementation: Putting the System to WorkWith the design system in place, we could begin the process of revamping the existing website:
- New Page Templates:
Leveraging the design system components, we developed new, modular page templates for the website. These templates provided a consistent layout and structure for building new pages.
- Content Migration:
Content from the existing website was migrated to the new page templates, ensuring a smooth transition for users.
- Ongoing Development:
The design system became the foundation for all future website development efforts, ensuring continued consistency and efficiency.
New product feature page templates built with the system
New templates for Events
New blog experience
Results: A Faster, More Unified Website
The implementation of the design system yielded significant results:
With reusable components, creating a new page took a matter of days compared to the previous 6-8 weeks.
The website achieved a unified look and feel across all pages, creating a more user-friendly and engaging experience.
Centralized design elements made website maintenance and updates significantly easier.