Adding Large Calculator Component
to Rocket Design System’s Pattern Library
Creating and adding the large calculator pattern consisting of several atoms, components and variants.
Rocket Design System (RDS) is the cornerstone of Rocket Mortgage's digital product ecosystem, featuring:
42
Core Components
1122
Component Variants
52
Patterns
While comprehensive, the system lacked a standardized approach for one of its most crucial conversion tools: calculators.
Our calculator ecosystem was a crucial conversion tool
It is aimed to provide a systematic approach to product development that drives efficiency, consistency, and innovation.
Despite the calculators' success, we faced some scaling challenges:
The process calls for a pattern to be added to the pattern library to reduce redundant efforts.
CONSOLIDATING THE EXISTING CALCULATOR INSTANCES
We analyzed all the current calculators on the website to understand common patterns and differences.
As a new designer on the team working on a new calculator, I struggled to determine what elements should remain consistent and what could be adjusted without affecting overall consistency. To address this, my team and I collaborated to map out the components.
BUILDING INDIVIDUAL ATOMS AND DOCUMENTING BEST PRACTICES
We developed many atomic components and their variants. A few examples are shown below:
Text Inputs
My team created a range of input field variants to support the overall website.
This component has two subtypes: one with pre-filled content and another without. The component is flexible to handle both the initial state (before calculation) and the result state (after calculation).
We consolidated various use cases for the accordion into a single component with minimal variants, adjusting its properties to accommodate different scenarios.
