Ripple
Brand UI Components Design System

  • Ripple is the visionary builder in financial services that delivers large-scale, high-performance solutions to global communities so our partners excel in an improved financial system that supports a better, more inclusive world.

Project Scope

  • UI/UX Design - entire product design from research, concept, prototyping and visual design
  • Design System
  • Component Design
  • Iconography
  • Illustration
  • Tool Used: Figma

Timing

  • 3 years

Industry

  • Crypto, Fintech, B2B
Live System
How to build a UI design system for a large enterprise?
The main challenge when starting a design system for Ripple was that back then there were multiple products in the business ecosystem. But they all used different visual directions, components, and codebases. Most of the time the figma component features were not utilized at all.

I and my team had to create a consistent design system that would bring all the Ripple products under one visual direction, as well as reduce the time to create new features or launch new products.
Problem
Ripple is a large enterprise that did not have their own unified design system and figma libraries infrastructure

Because of the complexity of the Ripple products, there were a lot of screens that needed to be designed (500+). It was impossible to do design updates globally, which required manual changes for each screen iteration. 

  • Team had to waste time on repetitive tasks
  • Processes were not automated
  • It was hard to have alignment with engineering teams
Solution
Design system unified UI and UX of all 3 Ripple products and significantly increased design and development speed

To help our product design and eng teams, the design system was created from scratch. Which allowed to speed up the entire design process across the organisation.

  • 30+ figma component & style libraries designed
  • The system covers multiple use cases (onboarding, payment, user management)
  • Extensive guildelines were developed that described how to use the libraires, states and behaviours
Design System is a
core of any product
Here are the main elements of Ripple Brand Design System:
Bringing brand into product

One of my goals was to make sure that Ripple brand personality is evoked in all enterprise products. When creating UI components, there are ways to bring certain elements from branding, while still making sure that the system is accessible and easy to use.

UI Design system is build on Foundations that were developed by brand.Such elements as voronoi shapes, or blur effect were used when designing some of the components.

I worked with the brand design team to inject Ripple’s brand, visual and motion guidelines into user interfaces in a way that is elegant and delightfu.

Atomic design principles (industry standard)
All the componets are accessible and meet WCAG standard

We tested the new color system across Ripple Products and made sure that accessibility tests were successful. The contrast guidelines were tested not only over white, gray and dark backgrounds, but also all color used for the text passed when placed on top of the lightest color from each shades family.

All System icons that are used in product UI are custom made.

The library consists of 70+ icons

Visual identity systems help companies to solve problems
In order to grow a company like Ripple, it is very important to quickly grow and develop new products. This is when the custom UI components design system plays an important role. It helps to solve main business challenges:
reduces design and development costs
increases user loyalty
Enhances sustainable scalability

A few examples of UI Components I worked on:

Spot Illustrations

Example of diagram design

Illustration for Ripple Payments ODL

Design process
Our team developed unique design system processes and went through multiple revisions as well as research of other systems in order to develop such UI components as button, toast and others. We did multiple iterations to analyze and research all the needed component requirements. I developed not only the figma component library but also detailed guidelines and component patterns.
We also worked on incorporating a maintenance process for improving and updating the design system so that everyone in the team can always work with the latest version of features and visuals.
"Can’t have the system we have today without Natalia’s contribution. She have done such amazing job and constantly challenge me to make smarter decisions. Natalia really has been a joy to work with and I look forward to continuing to work with her"
She has deep knowledge of component library and brand design guidelines. She is the main component designer and library builder, bringing the product design to the next level while delivering Ripple’s brand voice to customers. She looked into the component use case and research, developing comprehensive thinking which made her design solid. She started to think about how product designers were going to use guidelines and components and brought up great suggestions for documentation.
from Bryan Shi
from Bryan ShiLead Product Designer, Ripple
Website
Documentation platform

CBDC Product using the UI components system

Liquidity Hub
Cross-Border Payments
Conclusion

The design system has been successfully adopted by multiple products and teams at Ripple and has allowed the company to scale their business. Our designers were able to execute their ideas faster and more efficient.

  • Led requirements gathering with designers and engineers for flexible and extensible frameworks, patterns, and components
  • Unified brand and product
  • Streamlined the design process
  • Ensured consistent implementation of components in code across multiple product verticals
  • Set a high quality standard for user interfaces across the board, inventorying inconsistencies and proposing the necessary improvements
  • Incorporated usability feedback to improve component behavior 
Ripple Software Stats:

Natalia Cebotari. P.IVA: 10501930969

Cookie Policy