About Revv’s ripple design system

We were building an auto management system for auto shops, developing solutions to the challenges autoshop owners experienced; enterprise solutions. We recognized the complexity of this endeavor. Keeping up with the pace of deliverables and the industry. We set out to reshape the way we work, unlocking the boundless potential of their ideas and enhancing cohesive and consistent output.

Approach to Ripple

I took a structured approach to developing this design system adopting an Atomic Design methodology by Brad Frost.
Starting out with the foundations(Atoms): I defined the color palette, typography, borders and shadows, which were partly informed by the brand identity

Image of Ripple design system atomic approach

Image of Ripple typography and color foundation

Some core principles we kept in mind during this process

‍User Centricity - We want to ensure that every interaction our users have with our product is a positive one and solves for something, thereby building a strong connection with our brand or product across platforms

‍Simplicity - We deliver delight and satisfaction through a clean and focused experience every time. By relying on existing, common design patterns that are intuitive in form, function and flow, we ensure a more user friendly interface for all

‍Pragmatic approach - Pragmatic creativity, inspired by IBM's design system, nicely complements our approach to designing complex digital products. When working on more intricate screens, I sometimes step away from the usual guidelines to explore new ideas or reconsider existing patterns. It's important to thoughtfully decide when to be flexible and add a fresh touch to the system.

‍Consistency - We create familiarity and strengthen intuition by applying the same solution to problems across our platforms.

Components

We designed and developed a range of components for a distinctive UI with different variants that allows repetitive use, normally actionable or sometimes just to convey meanings. for example, dropdown, modals for tasks and alerts, buttons to initiate, complete, deny actions.

Image of Buttons and Text input shared components for Ripple

Image of Header sections, Icons and Toggles components for Ripple

Documentation

We have created documentation that explains each component, its variants, and usage guidelines, providing clear instructions and best practices for consistent implementation across projects.

Images of shared components and their documentations

Tokenization

Tokens replace raw values like hex codes or pixel sizes with standardized references, ensuring consistency and easy updates across a project. This simplifies collaboration, supports theming, and maintains a cohesive visual style.

This image shows how color values are mapped to design tokens and alias tokens in Ripple.

Reflections

Recognizing the challenges faced by designers and developers in implementing design updates underscored the need for empathy in our approach. This understanding led to the creation of Ripple—a design system that has not only improved team efficiency but also fostered greater creativity. For smaller teams, working with a design system like Ripple is crucial to avoid inconsistencies in designs and reduce the risk of negative experiences. Ripple’s development was a result of extensive collaboration among designers and stakeholders, ensuring its effective and thoughtful use across projects.