Modernizing MindBeacon's Design System and Core Experience
MindBeacon is a digital mental health platform delivering therapist-supported and self-guided care programs to individuals through employers and healthcare partners. It was acquired by CloudMD to strengthen its digital mental health offering and play a key role in delivering scalable, evidence-based care across the broader platform.
To support this next phase of growth, I led an evolution of the design system and a refresh of the core product UI. The work focused on four priorities: modernizing the brand expression, increasing customer engagement, improving usability through targeted refinements, and creating a more efficient design-to-engineering handoff.
Company
MindBeacon (Acquired by CloudMD)
Position
Senior Product Designer
Years
2021 – 2022
My role
Having contributed to multiple design systems in the past, I was asked to lead the design system redesign and platform refresh for MindBeacon. Partnering closely with the Product Manager and Platform Engineering Lead, we defined an approach that would deliver meaningful impact while respecting tight timelines and limited engineering capacity.
I also collaborated with the Director of UX Research to ensure the new system components could support onboarding improvements being developed in parallel. This meant creating flexible, reusable components and documenting clear guidelines and principles that could scale across the platform.
The problem
The existing platform UI felt dated and inconsistent, leading to a fragmented experience for clients. By establishing a modern, streamlined design language, we aimed to create a cohesive and engaging experience that would increase user interest in the product.
We also addressed challenges in the design-to-development handoff. The previous design system was monolithic, unintuitive, and inflexible, making it time-consuming to deliver experiences across web and mobile. Additionally, principles, guidelines, and component specifications were scattered across multiple tools, including Figma, Zeroheight, and Storybook, which created friction for both design and engineering teams.
UX outcomes
To guide our work and define what success would look like, we identified a set of UX outcomes.
By refreshing the platform experience and redesigning the design system, we aimed to create measurable impact across the product ecosystem:
- Designers could work with confidence, building cohesive experiences across the platform.
- Developers would have a clear reference for implementing consistent, usable interactions.
- Clients would better understand the product, trust that it meets their needs, and share positive experiences.
The approach focused on delivering a unified experience with improved usability and accessibility, ensuring the system scales as the platform grows.
Success metrics
We defined several high-level success metrics to measure the impact of the redesign:
- SUS (System Usability Scale)
- CSAT (Customer Satisfaction)
- NPS (Net Promoter Score)
- Reduction in UX-related support tickets
We also wanted to track internal efficiency metrics, including time to delivery and the number of post-development changes, to understand whether the redesigned system was helping teams work more effectively.
Discovery
From the start, we knew we didn't have the time or resources for a full redesign of the client experience. We also needed to stay agile to stay aligned with ongoing onboarding work. We chose to focus on just enough research to guide phase 1, establishing a foundation to build on in future iterations.
Brand alignment
I began by aligning the foundational design elements with the MindBeacon brand improvements being led by the marketing and content team. This involved updating core elements such as color, typography, and depth, establishing consistent layout guidelines, and assembling a library of illustrations. For efficiency and consistency, we chose to leverage an open-source illustration library.
Platform audit
I conducted a full audit of the platform to better understand the most commonly used components, patterns, and page templates. As I went, I took screenshots and began grouping pages into common layouts. We noticed that some of the most frequent layouts included product pages, intro pages, and content pages such as articles.
Figma audit
Having flexible components and templates is useful, but without an organized system, their effectiveness is limited. From my first day at MindBeacon, I struggled to navigate the Figma file structure and often wasn't sure which files were up-to-date or in progress.
Unlike Marie Kondo, I don't like mess. I used this as an opportunity to bring order to the system, proposing a file structure that made it easier to locate current designs, provided clearer guidance, and created a more intuitive foundation for managing design assets across the platform.
Accessibility and typography audit
As a mental health platform serving a broad range of users, it was important to meet the service level agreements (SLAs) outlined in our contracts, which required AA accessibility compliance. I ensured that the foundational design system elements met AA standards, refreshed my knowledge of WCAG accessibility guidelines, and conducted preliminary research into semantic heading structures. I also wanted to understand how usable the platform was for users relying on screen readers.
Improving collaboration through Storybook
Working closely with the Product Manager and Platform Engineering Lead, I proposed a structure to improve collaboration between design and engineering, using Storybook as the central source of truth.
Outcomes
Template layouts
I developed template layouts for all core pages to accelerate delivery and establish a consistent, cohesive foundation across the platform.
Principles and guidelines
I reorganized our monolithic component library into separate pages and centralized design principles, component guidelines, redlining, and interaction notes in Figma. The documentation was intentionally lightweight, supporting the broader goal of transitioning more assets into Storybook as a single source of truth for the design system.
Component redesign
I redesigned our core components from the ground up to be more flexible and scalable. I removed unnecessary spacers and hidden layers — instead I relied on Figma variants and auto layout.
Refreshed screens
Using our templates as a foundation, we refreshed key platform screens, enabling a faster, more consistent reskin that aligned with the updated brand and supported the enhanced onboarding experience.
Making a negative a positive
Shortly after finalizing and prioritizing this work, MindBeacon was acquired by the Vancouver-based Medtech company CloudMD. CloudMD has been working with the agency Friends and Enemies on a new platform UI and experience designed to unify its 14 acquired companies under a single brand.
While this shift meant we had to deprioritize some of our planned work, a positive outcome is that the brand refresh we completed positions us to quickly align with the new CloudMD brand.
