Rocket Design System

The Rocket Design System (RDS) is a constantly evolving resource, offering a collection of reusable styles, design components, and code snippets. These elements not only shape our Rocket experiences but also drive the functionality of all our digital products.

Role

Platform

Year

Product Designer

Desktop

2022

Why It Matters

The Rocket Design System introduces a systematic approach to product development, fostering efficiency, consistency, and innovation. This framework not only accelerates time to market but also strengthens our client relationships by building trust.

We aim for high-quality design, focusing on building trust, improving brand strength, and unifying experiences to address challenges and foster continual improvement within our organization.

View Rocket Design System

Design Challenge

Our previous design system, while initially meeting organizational needs, fell short as our company expanded digitally and diversified its business strategy with new, more intricate products. Moreover, it lacked clear UX guidelines and resources, resulting in low adoption across teams, inconsistencies in experiences, and slow development.

Our objectives include providing comprehensive reusable libraries and resources to support various teams and products in design, engineering, and content. We aim to:

Ensure consistent visual and functional experience across all products
Enhance visual and brand identity for a refined and modern impression
Meet WCAG requirements

Process

In the initial phase, we dived into analyzing design system practices across various industries and conducted a thorough audit of our existing experiences.

Using this groundwork, we crafted a strategic roadmap, defined our design language, and identified the crucial components to incorporate into the system.

Foundational Elements

We revamped Rocket's look and structure to improve the brand tone and make product design more consistent and accessible. This involved a responsive grid and clear spatial system for smoother collaboration between designers and developers, a universal type kit for diverse product requirements, and a color system focused on accessibility.

We also provided documentation for brand elements like photography and illustrations, along with a library of icons, pictograms, and more.

Component Library

We used our foundational atoms to create a versatile library with 39 unique components and 288 variants, including both base and product-specific elements.

By assembling these atoms into reusable components, we maintain consistency across all Rocket products. This growing library acts as a complete set of design elements

Pattern Library

After the system's initial launch, we collaborated with teams across the organization to pinpoint common patterns and experiences. Utilizing our foundations and components, we created a set of flexible templates for frequently used sections and experiences. Examples of these patterns include:

Quick Links
Testimonials
Benefits
Process/How it Works

Documentation Site

We developed a detailed documentation website for Rocket team members to access essential information for optimizing the use of RDS. This resource includes clear UX guidelines and best practices for components, foundations, patterns, and code packages.

We offer visual examples that illustrate best practices, including do's and don'ts, along with accessibility resources and guidelines. The documentation also features RDS news and updates as well as resources for contribution and support.

Contribution & Support

As we managed the design system's development, we consistently collaborated with teams, offering support in implementing RDS and providing product design advice. We held regular office hours and personalized assistance sessions, addressing the needs of both designers and engineers weekly.

Endless Growth & Innovation

Keeping a design system up-to-date is an ongoing task that involves constant research, making improvements, and staying informed about industry enhancements. A recent example of RDS evolving is our use of Figma's new variable feature for colors, spacing, and responsive prototyping bringing a dynamic enhancement to its capabilities.

Currently, RDS is working on templating and creating a standardized pattern for calculators. This initiative aims to foster consistency and reinforce brand identity across all Rocket platforms. We are dedicated to continual growth and improvement every day.