Building the Foundation: Crafting a Seamless Design System and Comprehensive Library

When I stepped into RiConnect in July 2024, it felt like walking into an art gallery with missing frames.

The platform, active since 2018, had evolved organically but lacked a unifying design system. Its interfaces were riddled with inconsistencies—buttons of varying sizes, misaligned text, and fragmented components. RiConnect had previously leaned on outsourcing for design work, which left behind a patchwork of styles. As their first and only in-house designer, I faced a daunting yet exhilarating challenge: bring order to the chaos.

Project Overview

My goal was to create a consistent design language and scalable design system for RiConnect, including key UI components, color schemes, typography, and responsive layouts. I also built a centralized design library as a shared resource for designers and developers.

Working closely with front-end engineers, I integrated the system into a live, evolving platform without disrupting ongoing tasks like API reconnections, new feature development, or platform optimization. It was a balance between building something new and enhancing the existing UX.

Problems

When I took stock of the situation, the gaps became painfully clear:

• Inconsistent UI Elements: Buttons, padding, and typography varied wildly across pages.

• Lack of Design Guidelines: There was no unified color palette or typography standard, leading to visual chaos.

• Responsive Design Issues: Many components didn’t scale well on smaller screens, frustrating mobile users.

• Fragmented Components: The same feature was styled differently in different modules, breaking user trust.

• Unorganized Components: Core elements like pop-ups, tables, and input fields had inconsistent padding, margins, and behaviors.

Goals

To address these challenges, I defined four clear goals:

1. Establish a Consistent Design System: Unified guidelines for typography, color, spacing, and components.

2. Streamline the Design Process: A centralized component library to maintain consistency across teams.

3. Optimize the User Experience: A cleaner, more intuitive, and responsive interface.

4. Integrate Efficiently: A seamless system that supported ongoing development tasks.

The Journey: Design in Action

Unearthing the Foundation and Crafting the Design System from Scratch

When I joined RiConnect, there was no design system, no component library, and not even editable Figma files. The platform was a patchwork of designs that lacked cohesion. Starting from scratch, I conducted a comprehensive UI audit, documenting every component directly from the live platform. This revealed a clear need for a unified system.

Using these insights, I established the foundation for RiConnect’s first-ever design system:

• Colors: A cohesive palette with accessible contrasts for actions, backgrounds, and text.

• Typography: A scalable hierarchy for headings, body text, and labels.

• Spacing and Shadows: Standardized rules for margins, padding, and depth to create visual harmony.

• Base Icons: Redesigned icons to ensure clarity and consistency, tailored for each module’s functionality.

With the foundation in place, I built key shared components such as buttons, badges, tags, input fields, and dropdowns. Each was designed to be modular, responsive, and accessible, ensuring they could be reused across the platform with minimal adjustments.

Once the core components were ready, I moved on to application-specific elements like header navigation, page headers, popups, and tabs. These components weren’t just about visual design—they included detailed notes to guide usage and implementation, as well as clearly defined breakpoints to ensure responsiveness across devices.

Each element was tailored to the platform’s unique needs, balancing functionality and adaptability, while making it easier for engineers to develop consistent and scalable features. This attention to detail ensured that the components not only looked polished but also performed seamlessly in real-world scenarios.

Turning Gears into Harmony: The Legacy of a Unified Design System

Building RiConnect’s first design system and component library was a massive undertaking. Everything—colors, typography, buttons, dropdowns—had to be created from scratch. Each detail was carefully thought out to ensure everything worked together seamlessly. The centralized library became a guidebook for the team, making it easier for designers and developers to stay on the same page.

Results & Impact

This design system overhaul brought significant improvements to RiConnect:

• Enhanced UI Consistency: Standardized color, typography, and spacing guidelines improved readability and user experience.

• Reduced Communication Overhead: The creation of 50+ reusable components streamlined the design and development process.

• Increased Development Efficiency: Standardized UI components minimized design adjustments and rework time for developers.

• Optimized Cross-Team Collaboration: Clear design guidelines and delivery documentation enabled smoother collaboration between development and product teams.

This wasn’t just about making things look better; it was about creating a solid framework that could grow with the platform. Every piece had to fit perfectly, like parts of a machine, so the platform could run smoothly and consistently. By working closely with engineers, we made sure the new system fit right into the existing platform without any disruptions.

The foundation of a design system is like the mechanism of a handmade watch—delicate yet powerful. Only when all the gears turn in sync can the platform deliver a fluid and delightful user experience.