B2C system
RentJoy
RentJoy is a B2C design system built to create warm, intuitive rental experiences. With cool, calming colors, playful illustrations, and bold graphics, it brings personality and clarity to every interaction. Its reusable components and responsive patterns help teams build friendly, trustworthy interfaces — from search to signed lease.
Impact
Creating a design system specifically for a product streamlines design and development, improves consistency, and accelerates time to market. By aligning components and patterns directly with the product’s goals and user needs, teams can reduce design debt, collaborate more efficiently, and scale confidently—resulting in a faster, more cohesive, and cost-effective product experience.
What are the perks?
Designed for
Desktop and Mobile
Iris has been developed in Vue and Flutter to allow the capabilities across desktop and mobile applications. This helps keeps consistency across two different code systems and allows for scalability.
Tailored for Specific Audience
By aligning components and patterns directly with the product’s goals and user needs —resulting in a faster, more cohesive, and cost-effective product experience.
Scalable for Future B2C Products
A product-specific design system can scale by modularizing core components and tokenizing styles, making it easy to extend across other products.
Thoroughly Documented
Each component has been documented for designers and developers to understand the structure of each component. Design patterns, do's and don'ts and behavior use cases are described for each component.
The Creation
The RentJoy design system was created from scratch within the Innovation team. It was created to be scalable for business to consumer products - with one product in mind to use it from the start, RentJoy.
Building a design system from the ground up sets the foundation for consistent, scalable, and efficient product design. The goal is to create a shared language between design and development that improves collaboration and accelerates delivery.
1. Define Purpose and Scope
Before building anything, we had to clearly define why the design system is being created, who it’s for (designers, developers, multiple product teams, etc.), and what it will support (one product or many). This helped set expectations, prioritize efforts, and ensure the system aligns with real business and user needs.
2. Build the Foundation
Define the core tokens (color, typography, spacing, radius) and set up a basic component library (e.g., buttons, inputs, modals) with accessibility in mind.
3. Document and Deliver
We had to create clear usage guidelines and documentation to ensure consistent adoption. Set up workflows for contribution, maintenance, and scaling over time.
The Foundation
A well-structured design system ensures consistency, scalability, and efficiency by establishing strong foundations, reusable components, and clear documentation. Adoption and governance drive its success, while continuous iteration keeps it adaptable to evolving needs. By prioritizing accessibility and maintainability, a design system enhances user experience and streamlines development for long-term growth.
Design for your Audience
A B2C design system should reflect the needs, behaviors, and emotions of the people it’s built for. Designing for your audience means prioritizing clarity, friendliness, and accessibility at every touchpoint. From approachable language to mobile-first layouts and expressive visuals, every element is crafted to build trust, reduce friction, and make the experience feel personal.
When the system is grounded in real user needs, it not only looks good — it performs better, connects faster, and drives lasting engagement.
Reuseable Patterns
Reusable patterns are common interaction and layout solutions that can be applied consistently across products to solve recurring design problems. Unlike single components, patterns group multiple elements to form higher-level experiences—such as form layouts, card groups, navigation flows, or error handling.
These patterns are designed to be flexible, accessible, and aligned with brand and UX standards. By reusing them, teams can move faster, reduce inconsistency, and maintain a unified user experience.
Well-documented reusable patterns also promote best practices, reduce decision fatigue, and make it easier for cross-functional teams to collaborate and build at scale.
Playful Illustrations
Playful illustrations bring warmth, personality, and approachability to B2C digital experiences. Within the design system, they serve as a visual language that helps humanize complex tasks, guide users with ease, and build emotional connection.
When used thoughtfully, illustrations enhance storytelling, reinforce brand identity, and make everyday interactions feel more delightful—especially in moments like onboarding, empty states, or confirmations. Integrated into the system, they ensure consistency across products while keeping the tone friendly, engaging, and consumer-focused.
The Outcome & Business Goal
Redesigning the design system with modern security practices and elevated design standards delivers both technical and strategic benefits. The goal is to create a future-proof foundation that supports business growth, enhances user trust, and drives operational efficiency.
Updated code aligns with modern security practices, reducing vulnerabilities and supporting regulatory compliance. Enhanced documentation, reusable patterns, and accessible components reduce design and development time. Refined design standards promote a cohesive and intuitive UI across products, increasing customer satisfaction. WCAG-compliant components improve usability and reduce legal and reputational risk.
