Behind the Scenes: How We Built the MyEssentials Design System

When we were asked to improve the MyEssentials platform, our mission went beyond modernizing screens—it was about creating a design foundation that could support users and business needs for years to come. In this post, we walk through the journey of building the MyEssentials design system: the challenges, decisions, lessons learned, and why it matters for organizations considering their own scalable design solutions.

This story supports our full video discussion in Building Better Software Through Design Systems, where Ashley Garrett and Jake Cooper share how design systems impact business outcomes.

The Challenge: Modernizing Without Disruption

MyEssentials is a platform that CSRs rely on daily to manage hearing aid insurance accounts, devices, billing, and customer service. Over time, the platform had grown organically, adding features as needs arose. The result: powerful functionality, but inconsistent interfaces, unclear hierarchies, and growing difficulty for users to navigate and manage their work efficiently.

Our challenge: bring structure, clarity, and scalability—without disrupting the workflows CSRs had come to depend on.

Ashley Garrett, Design Lead, reflected:

“We weren’t starting from zero. People were using this tool every day, and it was getting the job done. Our work was about making it easier, cleaner, and future-ready.”

Our Approach: Build the System Alongside the Solution

Rather than pausing to create an abstract system, we built the design system organically as we tackled real UI challenges. This kept our work grounded and ensured that every component served an immediate purpose.

Step 1: Screen Audit & Pattern Discovery

We inventoried the entire platform’s screens, mapping patterns, redundancies, and inconsistencies. This revealed opportunities to consolidate flows, reduce visual overload, and standardize UI elements.

Jake Cooper, Senior Designer / Analyst, described it:

“It’s like laying out all the pieces of a puzzle that had been added one at a time, and finally seeing how they could fit together better.”

Step 2: Token & Variable Definition

We established core tokens for typography, color palettes, spacing, corner radii, and other design primitives. This allowed us to:

• Ensure consistent look and feel

• Enable global changes (e.g., color scheme tweaks for accessibility)

• Simplify handoff to developers

  
  

Step 3: Modular Components & Patterns

As we redesigned features (like the admin action panels, tables, or notes functionality), we built modular Figma components. This included the introduction of the dynamic drawer—a solution that let users focus on editing tasks without losing context.

Jake shared:

“The drawer just emerged as the smartest way to overlay information and editing without sending people to a different screen. It’s about clarity without compromise.”

Step 4: Living Documentation

The design system became the single source of truth for the team. This living documentation enabled:

• Faster developer handoff

• Easier onboarding of new team members

• Clear guidance for future enhancements

What Made This Design System Effective?

• Built to solve real problems: We didn’t over-engineer it—we built what was needed, when it was needed.

• Flexible and future-ready: The semantic tokens and modular components made it easy to extend the system as new features or personas come online.

• Collaborative from day one: Input from developers, users, and stakeholders shaped every decision for effective Figma design system collaboration

• Empathetic to the user journey: We focused on making the experience more intuitive, not just more polished. As Jake noted:

“It’s not about making users relearn how to work—it’s about delivering what they always expected from the tool."

The Business Impact

Since implementing the design system:

• The development team has been able to build features faster and with fewer inconsistencies.

• New UI enhancements integrate smoothly, maintaining brand and usability standards.

• CSRs report that the platform feels cleaner and easier to navigate—reducing training time for new hires.

  
  

These benefits aren’t unique to MyEssentials—they’re what thoughtful, right-sized design systems can bring to any platform.

Why This Matters for Your Organization

If your platform has grown organically over the years, you may face similar challenges: inconsistent interfaces, duplicated design efforts, and difficulty scaling. A custom-fit design system can help you:

• Improve user experience and reduce errors

• Speed up design and development cycles

• Prepare your software for future growth

For a deeper look at how design systems create real business value, watch our full video in Building Better Software Through Design Systems.

We specialize in design system implementation that fits your organization’s size, needs, and vision. Looking to build or refine your own design system? Book a Design System Consultation