Building the redBus Design System(Rubicon) for Cross-Platforms (Android & iOS)
--
At redBus, I had the privilege of contributing to something transformative — a design system we named Rubicon, built to unify our Android and iOS platforms. This case study takes you through the process of identifying challenges, establishing a foundation, and delivering a scalable, reusable system that solved real usability and development bottlenecks.
Background
When we began, there were no dedicated resources for this project. But through collaborative planning, we assembled a team of passionate contributors who made consistent progress despite shifting priorities and workloads.
We formed a specialized Rubicon Team, assigning leads for design, Android, and iOS. With strong leadership support from our Mobile Team Director, Design Team VP, and Design Team Director, we allocated 20 resources: 15 developers and 5 designers. I was part of the inception design team tasked with building the fundamental blocks that would power this system.
Why Did redBus Need a Design System?
Addressing Inconsistencies
- The Android and iOS versions of the app had inconsistent designs, causing confusion and reducing the overall user experience.
- Each platform required separate designs, doubling the design team’s workload and limiting efficiency.
Usability Challenges
- The app suffered from usability issues, with inconsistent font sizes, weights, and colors, making it difficult for users to navigate.
- The lack of adherence to Android and iOS system guidelines led to a non-intuitive interface.
Development Bottlenecks
- Multiple implementations for the same component increased code redundancy, leading to larger file sizes and performance issues.
- Reusability was nearly impossible, resulting in wasted resources and effort.
Scalability and Maintenance
- Without a design system, scaling the app and ensuring consistency across updates became challenging.
- Components were not standardized, making maintenance cumbersome and prone to errors.
Core Philosophy
The core idea behind Rubicon was to blend Material Design and HIG (Human Interface Guidelines). By utilizing native components from both ecosystems, we ensured:
- Improved performance through optimized rendering.
- Reduced app size by leveraging platform-native assets.
- Seamless integration and adherence to system-level standards.
This approach not only created a unified design but also significantly streamlined development and maintenance efforts.
Design Approach
We adopted an atomic design structure to build scalable and reusable components:
- Foundational Blocks (iONs): Included text, color, typography, icons, spacing, logos, and shapes.
- Molecules (Crystals): Consisted of components like buttons, text fields, headers, bottom navigation, search components, controls, lists, and snackbars.
- Organisms (Gems): Combined molecules into larger UI structures and focused on revamping entire pages, ensuring a cohesive design system.
These elements were based on Google’s Material Design, Apple’s Interface Guidelines, and W3C Web Accessibility Guidelines.
My Role
As a designer on the inception team, I helped lay the groundwork for the Rubicon Design System. My focus was on:
- Defining foundational elements (iONs) like text, typography, colors, and icons, aligned with Material Design 3 and Apple HIG.
- Creating reusable components (Crystals) such as buttons, headers, and search fields.
- Revamping pages flow-by-flow, starting with the homepage, and integrating components into cohesive designs.
I collaborated with Android and iOS developers to ensure seamless implementation, promoting consistency and scalability across platforms.
Building the fundamental blocks IONs (atoms)
Colors: A Canvas of Possibilities
Every pixel matters. We started by refining our 2018 palette with tools like the Material Theme Builder and contrast checkers. The goal was to create a system that wasn’t just beautiful but also accessible. The result? A versatile palette supporting light and dark modes, specialized for error states, interactive elements, and even iOS’s glassy aesthetics. By creating design tokens in Figma, we ensured that every team — design or development — spoke the same visual language.
Typography: The Silent Communicator
Typography isn’t just text; it’s the voice of our app. We transitioned from Montserrat to San Francisco (iOS) and Inter (Android), optimizing for readability, localization, and native compatibility.
Each size and weight was carefully calibrated: 16px body text for Android, 17px for iOS, ensuring optical harmony across devices.
Icons and Logos: Bridging Art and Utility
Icons are more than symbols — they’re the shorthand of your design language. We standardized icons using a 40x40px grid, ensuring they looked sharp in every mode. Where possible, we leveraged system icons, reserving custom creations for unique needs.
Spacing and Elevation: Invisible Guides
Spacing might be invisible to users, but it’s the glue that holds a design together. We defined every margin and padding in multiples of 8px, creating uniformity across layouts. Elevation levels were meticulously crafted, emphasizing interaction hierarchy without overwhelming the user.
By focusing on these foundational elements, we didn’t just build iONs; we created the DNA of Rubicon. Each decision, from color contrasts to icon sizes, was a deliberate step toward crafting a seamless, user-centric experience.
Building Crystals & Gems(Molecules & Organisms) — The Pillars of the Design System
After laying the foundation with iONs, we began creating Crystals & Molecules of our design system. These components served as the building blocks for larger designs, providing structure and functionality.
Step 1: Identifying Components
We started by meticulously analyzing every user flow, pages in the redBus android & iOS app. Each component — buttons, text fields, headers etc— was noted in a shared Excel sheet. This comprehensive audit allowed us to consolidate and identify the core components we needed to build, ensuring nothing was overlooked.
Step 2: Tracking and Assigning Work
To streamline the process, we created an Excel tracker for all components. This tracker detailed the design status, development progress, and any blockers. Work was divided among team members, with a dedicated project manager assigned to ensure deadlines were met and progress was monitored.
Step 3: Designing Components
With the list of components finalized, we moved to the design phase. Here’s how we approached it:
- Research: Analyzing existing designs and comparing them against Material Design and HIG guidelines.
- Creation: Designing each component in Figma using variables with multiple variations ensuring they adhered to platform-specific standards. We prioritized reusing native components wherever possible, resorting to custom components only when platform differences were too significant.
- Review: Conducting two phases of review — first with the design team and then with the development team. The design team focused on usability and alignment with guidelines, while the development team ensured technical feasibility and performance optimization.
Step 4: Development and Internal Testing
Once components were approved, they were handed off to the development team. To test these multi variant components, we built an internal components app, allowing us to experience interactions in a real-world scenario. This step was crucial for identifying and resolving any inconsistencies.
Step 5: Final Review and Sign-Off
Before deploying components to the Rubicon library, the design team conducted a final review. We verified:
- Spacing and alignment
- Color accuracy in both light and dark modes
- Interaction feedback and performance
Step 6: Deployment
Once signed off, multivariant components were added to the Rubicon dev library, making them accessible for all developers. This ensured consistency across the app and simplified future updates.
Step 7: Clear Documentation
Once the components were deployed, we documented every detail to ensure clarity for the entire design team. This included guidelines on when and where to use each component, along with examples of best practices. The documentation served as a single source of truth, enabling seamless onboarding and consistent application across projects.
Advantages of Rubicon Design System
- Effortless Expansion: Rubicon allowed us to seamlessly scale across new geographies and verticals, ensuring a consistent user experience everywhere.
- Streamlined Development: Developers saved time and effort with reusable, optimized components, eliminating redundant work.
- Accessibility at the Core: By adhering to web accessibility guidelines, Rubicon made the app inclusive and user-friendly for everyone.
- Delightful User Experiences: Micro-animations added subtle, joyful interactions, enhancing overall engagement.
- Lean and Fast: The app’s codebase was drastically reduced, improving performance and keeping it lightweight.
Key Learnings
Building the Rubicon Design System taught us the power of collaboration, starting with strong foundations like colors and typography to ensure consistency and scalability. Prioritizing accessibility and reusability saved time and resources while leveraging native components improved performance. Regular testing, clear documentation, and adaptability to future needs ensured a seamless experience for both users and developers.
Thanks for reading! If you enjoyed the article, give it a clap or share your thoughts in the comments. I’d love to hear your feedback!
Feel free to connect with me:
🌐 Website: rahulram.in
🔗 LinkedIn: linkedin.com/in/rahul-ram20
