Turning a fragmented product experience into a cohesive, scalable system for design and engineering.
Timeline: Sep 2017 - April 2018
Role: Lead UI/UX Designer
Skills: Product attributes, design principles, design systems, branding workshops, user journeys, personas, design system, web components, accessibility, WCAG standards
Role: Lead UI/UX Designer
Skills: Product attributes, design principles, design systems, branding workshops, user journeys, personas, design system, web components, accessibility, WCAG standards
Creating a stronger core product
I led the creation of Roostify’s first design system, establishing a unified, accessible interface that could support different lender brands without requiring a separate product experience for each customer. The new system helped satisfy Chase’s requirements, enabling the company to move from a costly custom branch onto Roostify’s core product, while also supporting conversations with prospective customers including Guild, TD Bank, and Santander.
The work became more than a visual refresh—it created a scalable foundation for a growing mortgage SaaS platform.
The challenge
When I joined Roostify as its second product designer, the company was gaining larger lending customers, but its dated interface was becoming a competitive disadvantage. At the same time, its largest customer depended on a highly customized branch of the product that required significant ongoing maintenance.
How might we create one scalable product experience that feels trustworthy and consistent while allowing every lender to express its own brand?
(Below) The legacy borrower task manager portal, before the atomic design system was introduced.
The legacy borrower task manager portal, before the atomic design system was introduced.
The new system needed to be brand-agnostic and configurable, responsive across devices, efficient for Engineering to maintain, and accessible enough to satisfy upcoming client and regulatory requirements. Chase partnered with us as an advisory customer throughout the initiative.
Defining the Design Language
Before designing components, we needed a shared visual direction. Working with Product and another designer, I helped facilitate product-attribute and visual-style exercises around four qualities: Prepared, Trustworthy, Collaborative, and Welcoming. Mood boards and style tiles allowed us to compare how those attributes could translate into typography, color, imagery, and interface treatments.
The team selected Trustworthy as the primary direction. That gave us a clear design lens for building the system instead of making visual decisions component by component.
(Above) The "Trustworthy" style tile
Building for white-label configurability
With the direction established, I planned the system in phases and divided borrower- and lender-facing work with another designer. We established foundations including typography, color, iconography, buttons, and reusable patterns, then expanded into navigation, forms, alerts, messaging, and modals.
Because Roostify was white-labeled, consistency could not mean making every customer look identical. I defined which attributes clients could customize—including logos, background colors, links, buttons, and typography—and created guidance that preserved usability while allowing lender brands to remain recognizable.
Improving the product through the system
The system also gave us an opportunity to address interaction problems rather than simply reskin the interface. One of the first was the borrower portal’s horizontal navigation, which did not scale well and translated poorly to smaller screens.
I replaced it with a vertical navigation pattern that was easier to scan, supported additional destinations, and adapted more naturally to mobile. Similar principles guided other responsive patterns as we rebuilt the borrower experience around consistent components and expected interaction behaviors.
Accessibility and Engineering Alignment
Accessibility was a core requirement, not a final QA step. We used WCAG guidance while defining color, typography, controls, and interaction patterns, and the platform successfully passed multiple third-party accessibility audits.
I also established design principles and produced component guidance for designers and developers. The initial system was documented in Sketch with specifications and usage notes, then migrated to Figma in a later iteration to improve sharing and collaboration with Engineering.
Outcome
The Roostify Atomic Design System turned a fragmented interface into a cohesive, configurable product foundation. It strengthened brand consistency, improved responsiveness and accessibility, and reduced dependence on expensive client-specific customization.
Most significantly, the system helped make the core platform strong and flexible enough for Chase to migrate away from its separately maintained branch—demonstrating that design-system work could improve not only interface consistency, but also product scalability and business sustainability.
The final design system was migrated to Figma and established as a complete system and UI Kit by Headway.
Roostify app as configured for Chase bank's MyHome mortgage application.
Clients who use the Roostify platform:
