Overview
Problem
Although our former design system once fulfilled certain organizational requirements, it eventually proved inadequate as our company expanded digitally and diversified its business approach with new and more complex products. Additionally, it lacked clear ux guidelines and resources, resulting in low adoption across teams, inconsistencies across experiences and slow development.
Goals
- Provide comprehensive reusable libraries and resources to support our various teams and products across design, engineering, and content.
- Elevate our visual/brand identity to achieve a more refined and modern impression.
- Create a consistent visual and functional experience across products.
- Increase speed to market and time of development.
- Ensure WCAG requirements are met and our team members understand accessibility standards for content and product design.
1
Research, Define and Prioritize
The first stage encompassed analyzing prominent design system practices across industries and conducting a comprehensive audit of our current experiences. Building upon this foundation, we formulated a strategic roadmap, established our design language, and determined the essential components to integrate into the system.
2
Foundational Visual Elements
We recreated Rocket's visual and structural elements to mature the overall brand tone and create more consistent and accessible product design through the following elements:
- Responsive grid and clearly-defined spatial system that supports designer to developer hand off
- Universal type kit for varying product needs
- Color system grounded in accessibility
- Guidelines and libraries for brand elements such as photography, illustrations and logos
- Expansive library of icons and custom symbols
- and more!
3
Component Library
Using our foundational atoms, we created a robust and flexible library of base components as well as product specific components.
39
unique
components
288
component
variants
1 A few examples of components from the library along with a snapshot of variant customization from the card component.
2. Responsive data graph component
4
Pattern Library
Shortly after the system's initial launch, we engaged in collaboration with teams across the organization to identify shared patterns and experiences. Using our foundations and components, we established a collection of adaptable templates for commonly used sections and experiences. Some examples of these patterns include:
- Testimonial Section
- Quick Links
- Landing Page Hero
- User Dashboard
- Calculator Experience
- and more!
Example of a responsive calculator pattern.
Example of a customized dashboard pattern.
5
Documentation Site
We created a comprehensive documentation website for Rocket team members to get all the details they need in order to best utilize RDS.
- Clear UX guidelines and best practices for components, foundations, patterns and code packages
- Visual examples including do’s and don’ts
- Accessibility resources and guidelines
- Transparent change log and RDS roadmap
- Contribution, training and onboarding resources
6
Governance & Support
While managing the design system's development and upkeep, we were constantly collaborating and supporting teams with the implementation of RDS as well as overall product design consultation. We conducted regular office hours, along with personalized one-on-one and team assistance sessions, catering to the needs of both designers and engineers on a weekly basis.
7
Continuing Evolution
Sustaining a design system is a perpetually evolving endeavor, involving continuous research, iterative enhancements, and staying informed about industry advancements to ensure the system remains at its optimal best.
A new and exciting example of the continuing evolution of RDS is our implementation of Figma’s new variable feature for colors, spacing and responsive prototyping.
