Case
Studies

Take a deeper look into my design process.
The
Flip Side

Good designers should have more than one medium.
Meet
The Editor

Find out more about what's shaped me as a designer.
ISSUE 03
Design Systems Enterprise

Scaffolding A Design System For A Legacy Product

How I spearheaded the build of RMXDS from 0→1 to bring structure and consistency to a mature enterprise platform

Business Challenge

What was broken, why it needed to be fixed & who benefits once we do

Overview

Rent Manager is a mature enterprise property management platform with more than 30 years of product history—and the tech debt that comes along with it. I spearheaded the creation of RMXDS, Rent Manager's first design system, establishing a shared foundation for designers and developers to bring consistency and scalability to the product.

My Role
  • Design System Tech Lead / Lead UI Designer
  • In charge of roadmapping, research, documentation and launch
  • Delegating tasks to a team of 4 UI Designers
  • Training and onboarding
The Crew
  • Corey Z.·Design System Specialist
  • Ryan C.·Developer Team Lead
  • Rick W.·Developer II
  • Izzy G.·UI Designer
  • Sydney H.·UI Designer
  • Sophia M.·UI Designer
Timeline
Nov ‘24 – Now
Tools
Figma · Microsoft Excel
Constraint 01

30+ Years Of Tech Debt

I had to bring structure to an existing product rather than start from a clean foundation

Constraint 02

400+ Raw Hex Colors

The same visual values rarely had a consistent meaning

Constraint 03

Aligning Design + Dev

We needed to lay the groundwork for future 1:1 alignment

Solution

A structured, scalable, tokenized system

RMXDS Colors foundations documentation showing the Base/Brand color ramp from Brand/100 through Brand/900, each swatch annotated with a WCAG contrast score, hex value, and RGBA value RMXDS Task Overlay component documentation page, showing the modal preview and a link to view the component in Figma RMXDS Task Overlay structure diagram, calling out the overlay's title, help and close icon buttons, description, slot, back/forward navigation, and progress indicator RMXDS Task Overlay used in the Service Tech Map feature, showing a 'View Tech Locations' overlay guiding a user through the Locate Techs tab
Impact: 57% adoption in ~1 year Shipped 1:1 coded components Ready to utilize AI

Pain Points

How we identified the biggest sources of friction across users

Diagram showing the goal of creating a unified design system: light mode, brand color, and spacing tokens flowing into a Button component, annotated with Tokens, Components, and Documentation callouts

Research

Insights that informed our design decisions

What We Did

In order to determine what needed to stay and what needed to go, we first had to audit the entire product. This was led by our newly formed UX team. Once this step was completed we moved on to determining how often a component was found in-program and how many versions there may have been. For instance:

We found 7 different date pickers throughout the program

And 12 different attachment variants, to name a few

Audit of existing date picker patterns across the product: calendar with quick helper buttons, single date calendar, calendar with dropdown helper, and calendar with date range Audit of existing attachment/upload component patterns across the product, showing 7+ visually inconsistent implementations of file upload UI

Colors Investigation spreadsheet auditing every hex value used across the codebase, with columns for area, hex, color swatch, description, variable name, and suggested base color Two long lists of raw CSS hex values with no systematic naming convention, captioned 'HEX colors with unclear context and no systematic naming' Side-by-side comparison of the legacy Rent Manager 12 interface labeled 'Then' next to the modern Rent Manager Express interface labeled 'Now'

Design

Exploring iterations and tradeoffs to reach a user centric solution

Figma variables panel showing the Brand color scale (100-900) and semantic Content/Background tokens like background-ui-primary, background-success, and background-error mapped to base colors Brand color ramp annotated with WCAG contrast ratios, including a documented exception for Brand/500 falling below AA standards, plus the _WCAG tag component built to surface accessible text options for each shade Toggle Slider component documentation showing its Figma properties (Selected, State, Show Text) alongside the equivalent --mat-slide-toggle CSS variables in code

Impact

How the business and its users benefitted after launch

My Influence

From governance to shared design foundations to training, I enabled a system for our teams to collaborate, design and build more consistently at scale

RMXDS design tokens extracted from Figma and kept as CSS variables in styles.css, shown open in the Cursor code editor
Slide reading 'I took the initiative to present and lead the charge for tooling updates', showing the migration from Adobe XD to Figma and from Confluence to Zeplin
Discovery governance flowchart: does something similar exist, can it be updated without breaking changes, is the addition generic enough to reuse, fix or add it accordingly

57% adoption in ~1 year

RMXDS saw a 14x increase in use, with a 60% drop in local component usage

Shipped 1:1 coded components

Cross-functional collaboration enabled the components to function the same in Figma & Code

Ready to utilize AI

Design tokens include AI-readable context that can support agentic design and development

Reflections

Hindsight is 20/20

What I Learned

  • Design systems are a need, not a nice to have.
    On arrival at LCS, there was no component library, files were spread across Illustrator, Photoshop and Adobe XD - with no consistency. And it showed in our product. RMXDS changed the way we built software.
  • Building design systems is hard.
    I pitched this idea to management, and set up all the foundations solo. After this was laid, the rest of my team helped tremendously to get it to where it is today. Collaboration is necessary for a DS to succeed!

What I'd Do Differently

If I had the power I would've created a dedicated design/dev team to gain more 1:1 alignment with code. This by far was my biggest hurdle to climb.

Want to hear more?

Reach out
Previous Issue