Myserve Design System
Summary
As the sole product designer, I led the creation of a lightweight and effective design system used in redesigning MyServe, an enterprise-level telecom expense management system.
Responsibilities
Product Design Strategy
UI/UX Design
Front-End Engineering
Project Management
Consultation & Advocacy
Design Validation
A little Background
In 2023, DMI acquired Simplex Mobility and with it a platform geared towards enterprise asset and telecom service management. Combining DMI’s track record of top-tier customer support and market innovation, along with Simplex’s robust platform, the acquisition aimed to disrupt the market and give enterprise customers an all-in-one solution to their telecom and mobility needs.
As the sole product designer at DMI, I was tasked with redesigning the MyServe platform with the goal of creating a more visually appealing application that matched the energy and corporate branding of DMI, while supporting the overall user experience. This was the perfect opportunity to put forth a design system foundation that was sorely needed within the platform.
“Let’s deliver something that not only elevates the user experience, but also reflects the forward-thinking direction of our platform.”
All-in-one solution.
All-in-one solution.
How do you eat a whole pie…
one piece at a time.
MyServe is an incredibly large and complex monolithic application that houses functionality for several different persona types. There was no design documentation, no Figma files, and no story book of known components. This whole effort was going to have to be built from the ground up. Get your forks ready.
Instead of jumping straight into Figma, I wanted to be sure to plan out a systematic approach with the creation of MyServe’s very first design system. I knew that if I planned carefully, I would have a better chance of scaling this up and iterating on it later.
Auditing the entire platform was key to understanding the needs of the design system. Once I had a lay of the land, I could really start taking bites out of MyServe.
-
Going through the enterprise platform in its entirety…some 100 plus pages, I painstaking took account for the various components used within the platform boiling them down into a core list.
-
To save time and stay consistent, I created global variables within Figma. This allowed me to tokenize a lot of the designs. It was also extremely helpful later on when onboarding other engineers and deciphering CSS values from the design.
-
The first components created were my from my core list; buttons, form fields and table elements. 90% of the platform was comprised of the these three elements. Nailing them down was extremely valuable. That said, it was also the most painstaking especially when the project took a turn to only CSS work.
-
Throughout the entire process, no matter which team it was I was working with, I was in the drivers seat. I attended many of the scrum ceremonies, and had plenty of parking lots with the engineers. Without their work, the designs truly would not have taken shape.
Surprises around every corner
The audit had uncovered a lot of unique opportunities and challenges, some more painful than others. As each presented itself, I made sure to partner with my engineering team to validate my findings and to talk shop around front-end solutions.
The first major hurdle was that many of the components used in the platform lacked consistency. There were handfuls of buttons, and various form fields scattered across the platform that all functioned the same but looked different. The new design system is built on a foundation of design tokens. This along with some minimal documentation gives a more familiar experience to decision making.
The second, and most difficult, was that the front-end was a comprised of several different UI frameworks, and technologies. This was most noticeable around the tables within the application. Each table had its own unique version of filtering, sorting and searching. The new design system offers a unified table architecture with consistent tooling and data representation.
One small step for design,
one giant leap for the Myserve experience
Not everything makes it to launch. With shifting deadlines and some scoping changes, the implementation of a wholistic design system, marrying Figma designs with an engineering story book of usable components, would have to move in longer phases. The priority being the redesign of the visuals within the platform as they sit.
On March 22nd, 2025 DMI launched the redesign of MyServe using the foundations of the design system I had built. Although my work and advocacy for a greater design solution is far from over, I truly believe that this initial phase has created a positive impact on the platform for all users, internally and externally.