Design Systems by Heady - MWH Mobile App & Website

Work >
MWH >
MWH Case Study

DEPARTMENTS

Design, Development

PLATFORMS

Mobile, Web

DURATION

2 months

Heady and Melissa Wood Health (MWH) joined forces in 2021 as the digital wellness brand set its sights on the next phase of its digital evolution.

Our concentration on long-term partnerships focused on sustainable growth made us the perfect match for building MWH’s next chapter. Following an accelerated build, MWH’s new owned platform rolled out in November 2022, complete with an expanded website and native mobile apps for Android and iPhone.

Partner

With more than 1,100 stores mostly located in small to mid-sized markets, the Birmingham, Alabama-based brand does a brisk business catering to small town sneakerheads with an insatiable thirst for the newest releases and hottest colorways.

Founded in 1945, Hibbett is one of the oldest names in sporting goods and has evolved from a family-owned brick-and-mortar retailer to a publicly traded company with more than $1 billion in annual revenue.

We built a custom mobile and web platform for MWH See Case Study

With the platform launched and in a mature state, our focus turned to scaling — and that’s where the Design System came in.

What Is a Design System?

A Design System is a dynamic framework that serves as the backbone for design and development of a digital product. It creates a unified language and visual coherence within a product or across multiple products, making it faster and easier to scale and evolve a digital ecosystem that looks and feels consistent and harmonious.

A Design System has two main parts

Component Library

Think of it as a catalog of pre-designed elements — buttons, headlines, dialog boxes, headers, footers, patterns, and more — that can be reused across various screens and platforms.

Documentation

Accompanying the components is a set of guidelines detailing how and when to use each element, ensuring consistency across teams and reducing design debt.

A Design System provides a sturdy base on which to build, like pouring a concrete foundation before constructing a house. By implementing a Design System, you set the stage for efficient and consistent updates across every touchpoint.

Problem Statement

As MWH scaled its offerings and expanded its user base, it was not only crucial that the brand provide a cohesive user experience; to properly set the stage for scaling, we also needed to streamline workflows and facilitate collaboration between teams. With both MWH’s internal team and the Heady team regularly doing design work on MWH’s products, we needed a common design language to unite around — one that would facilitate rapid iteration and meeting tight deadlines.

Challenges

Unify Multiple Products

The first key issue was ensuring unification across both MWH products. MWH subscribers can access its content through both the brand’s website and its native mobile app. Creating a seamless experience across these platforms required a single, unified design approach. This is where a Design System came into play: It became the bridge that connects mobile and web, allowing users to seamlessly switch back and forth between both platforms while ensuring familiarity and ease of use.

Create a Single Source of Truth

The second challenge that a Design System would solve was to tackle the clutter created by numerous disparate design files that had accumulated over time. Every design file created outside a centralized system risks introducing inconsistencies and slowing down the development process. By implementing a Design System we created a "single source of truth," helping to declutter the design landscape. This unified resource allowed new designers to get up to speed quickly and ensured everyone on the team was aligned — not just designers, but also product managers and developers..

Animation_01

Optimize Processes & Workflow

Lastly, we needed to optimize processes and workflows. Without a Design System, any design change could be a time- and labor-intensive process requiring manual adjustments across multiple elements. With the Design System in place, we could make global design changes almost instantaneously, freeing designers to focus on higher-level tasks and empowering developers to implement functional elements more efficiently.

By addressing all of these needs, creating a Design System for MWH would lay a solid foundation for scalability and efficiency, something that was critical for the brand's ongoing growth.

Statement Image

Design Principles

When it comes to designing digital products, consistency is key. That doesn’t mean every screen should be identical, but there should be enough consistency in look, feel, and functionality throughout the product that users feel comfortable and are able to navigate easily.

Systems Thinking

Every Heady design project is approached through the lens of systems thinking. This holistic view ensures that all components are designed to function as part of a greater whole. Systems thinking allows us to focus on the end-to-end user experience, not just isolated design elements, ensuring that all the small components (like buttons and colors) work well together to create a unified experience. For the user, this means easier navigation, consistent visuals, and a more intuitive interaction with the product.

SYSTEM BREAKDOWN

Atomic Design

Creating consistency is one of the biggest values of implementing a Design System — but how, exactly? It all comes down to reusable components. At Heady, we approach Design Systems through the lens of Atomic Design principles.

This metaphoric methodology breaks down the process of building a Design System into five distinct levels, from simplest — atoms, which are the building blocks of all matter — to most complex.

Atoms

The smallest components including branding, colors, typography

Molecules

Atoms come together to form buttons, toggles, check boxes, notifications

Organisms

Multiple molecules create headers, footers, sections

Templates

Multiple organisms on a page come together to create a template

Pages

After injecting the content into the template, you have pages

Using Atomic Design principles means breaking a product’s visual design down into its smallest parts, standardizing them, and then building them back up into increasingly larger, reusable components. Through this process we bridge the gap between designers and developers and ensure functionality and usability is consistent, providing a better user experience.

Design Process

Design System projects are often embarked on as foundational pre-work before any design work begins, but they can also be implemented after digital products are already built as a crucial organizational tool. This was the case with MWH. Given the already mature state of MWH's digital products, our approach was to “reverse-engineer” a Design System by auditing, organizing, and scaling what was already in place.

Before diving into the Design System, we revisited the branding guidelines we had initially created as a precursor to building MWH’s platform. Ensuring that these guidelines seamlessly integrated into the Design System was an essential step for brand consistency.

step 1

Inventory and Audit

We began by auditing existing design elements across MWH’s platforms. From buttons to color schemes, each element was scrutinized and documented. The purpose was twofold: to assess the current state of design components and to identify opportunities for improvement and standardization.

step 2

Categorization via Atomic Design

After documenting the existing design elements, we categorized them into atoms, molecules, and organisms, following the principles of Atomic Design. This allowed us to:

+ Define foundational elements (“atoms” like typography & colors)
+ Develop complex components (“molecules” like buttons)

+ Organize comprehensive sections (“organisms” like headers)

step 3

Organizing the Documentation

In Figma, we organized the Design System documentation into an easily navigable library, detailing usage guidelines for each component. This setup enabled efficient collaboration and consistency across design and development teams, ensuring a unified approach to product evolution.

step 4

Feedback & Iteration

Incorporating input from stakeholders, we iteratively refined the system. By bringing developers and product managers into the process and seeking feedback, we ensured the Design System was practical, adaptable, and geared toward the team’s long-term needs.

step 5

Maintaining the Design System

A Design System isn’t static: It’s a living entity that must be maintained and adapted as the product grows and changes. As MWH continues to evolve, so will the system, shifting to accommodate new user needs, design trends, and technological developments.

By meticulously going through these steps, we created a robust Design System that not only solved MWH's immediate challenges but also laid a sustainable foundation for future growth and scalability.

Results

For MWH, we created two distinct but harmonious Design Systems: one for the web and one for mobile. Both systems are designed to be similar but uniquely tailored to their respective platforms, making management across these platforms efficient while providing a consistent and familiar user experience.

A Design System is not a one-time project but a living, evolving entity. As MWH grows, the Design System will adapt, ensuring that it continues to meet the brand’s needs for scalability and consistency.

MWH now has a robust and sturdy foundation for scalable growth, with a Design System that’s poised to evolve alongside the brand as they work to make more mindful living accessible and attainable for all.

Design System Benefits

Unifying Communication & Collaboration

Accelerating Progress & Decision-Making

Enhancing Visual Consistency & Accessibility

“The Design System gives us the foundation to enact change in exactly the way we want it to happen while having transparency across all teams.”

-James Maher, Head of Product
MWH

Ready for an expert tech partner to accelerate your growth?

Let’s Chat

Melissa Wood Health