Syllabus is a design system created by Ruangguru to maintain consistency in design elements across their digital products and experiences. It was developed to address the issue of inconsistent design elements that caused confusion for users and hindered design and development progress.
Syllabus comprises token libraries containing foundational elements like colors, fonts, gradients, shadows, and spacing. These elements work together to form building blocks called components, which range from simple atoms to more complex molecules. These components are then used to create the screens, designs, and user flows that make up user interfaces.
Ruangguru offers a wide variety of products, each with its own distinctive identity. However, when it came to designing the digital experience for these products across both mobile apps and websites, there was a lack of consistent guidelines. This resulted in a multitude of redundant components and unnecessary variants, as each designer and stakeholder involved in the product development process followed their own unique style.
Confusion
A mix of patterns for the same action can make it difficult for users to learn how to use a product or service.
Slow development & design process
Without a library of reusable design assets, designers have to recreate everything from scratch, which is inefficient and time-consuming.
The aforementioned issues highlighted the need for a unified design system as we expanded our services to a new platform - a responsive website. Our designers and engineers had previously grappled with inconsistencies in design elements, and this new challenge prompted us to rethink our approach. We seized this opportunity to streamline the development process by implementing a unified design system.
Syllabus: Your Guide to a Unified and Consistent Design Language
The name "Syllabus" resonates profoundly with Ruangguru's mission to provide a structured and well-defined learning path for students. Just as a syllabus outlines the course structure, objectives, and essential resources, the Syllabus design system lays out the fundamental elements of Ruangguru's digital design language. It serves as a single source of truth, ensuring that all products and platforms adhere to a unified design philosophy, fostering a seamless user experience across all touchpoints.
To address the design inconsistencies and inefficiencies, the Product design team decided to implement a design system that would serve as a single source of truth for the company's design language. This system would ensure consistent design implementation across multiple platforms, streamlining the design and development process.
Enhanced Efficiency and Scalability
A design system facilitates efficient design and development at scale. It provides a centralized repository of reusable components, patterns, and guidelines, enabling designers and developers to quickly create and replicate consistent designs.
A design system establishes a common design language across teams and departments, fostering a cohesive brand identity. It ensures that everyone is aligned with the company's visual style and guidelines, leading to a unified user experience across different products and channels.
A design system promotes visual consistency across products, platforms, and departments. It eliminates discrepancies and ensures that the company's brand identity is represented accurately and consistently across all touchpoints.
Ruangguru has three main teams that each manage a specific category of design libraries: Foundations, Components, and Assets & Illustrations. As a member of the Foundations team, I was tasked with defining a universal set of components by consolidating all existing components from various teams. This involved identifying common patterns and creating reusable components that could be effectively utilized by all domain teams. Additionally, I had to ensure that these components were adaptable to various devices, necessitating strong auto-layout skills.
The foundation elements of a design system form the core of all visual and interactive design decisions. In Syllabus, we have established several foundation elements, including color, typography, spacing, layout, sizing, shadow, and corner radius. These fundamental elements are seamlessly integrated with engineering through design tokens.
What is Design Tokens?
Imagine building a house. You need to decide on the style, colors, and materials for the walls, floors, and furniture. These choices are like the design tokens of a website or app. Design tokens are small pieces of code that define the visual style of a product, such as colors, fonts, and spacing. They are like building blocks that designers and developers use to create a consistent and cohesive user experience.
So, all of our foundations elements can be customize based on their functions in design tokens. Such like:
Inspired by Brad Frost's Atomic Design methodology, Syllabus components serve as fundamental building blocks for constructing familiar and consistent user interface patterns. Each component is meticulously crafted with accessibility in mind, ensuring adaptability to a wide range of UI requirements, state changes, and variants. This approach empowers us to create a highly efficient and scalable design system, enabling us to maintain consistency across our diverse product portfolio and platforms.
Illustrations in Syllabus come in two main categories: UI illustrations and digital image illustrations. UI illustrations are used for empty states, announcements, headers, and overall UI support. They help to communicate complex information in a more straightforward and engaging manner. Digital image illustrations are used for landing pages and marketing materials. They combine photos with hand-drawn illustrations to create a humanized touch while still incorporating engaging illustrations to capture the audience's attention.
The Syllabus icon system includes over 200 carefully designed icons that focus on consistency, visual weight, and small working canvases. These icons provide visual context to help users achieve their goals.
The implementation of Syllabus into our product development workflow has brought about significant positive changes over the past year. Designers and engineers have experienced a twofold increase in productivity, making it easier and faster for them to create new products and services. Since its introduction in October 2022, Syllabus has been adopted and implemented in approximately 75% of new and updated products, and this number is expected to continue rising. Stakeholders, particularly those on the product team, have gained a deeper understanding of the importance of a design system in reducing inconsistencies and boosting productivity. This shared understanding has led to a shift in mindset, with everyone recognizing that reusing proven components and patterns is more effective than reinventing the wheel.
Design System Mindset
Introducing and establishing a design system mindset as a new routine can be challenging in a large team, especially when it requires breaking established norms. As part of the design system team, we must exercise patience to help our product design and engineering teams develop new habits for building products.
Strategic Implementation
Implementing our design system across all products instantaneously is not feasible. Therefore, it is crucial to prioritize where to implement it and align it with the product roadmap. Every endeavor necessitates a well-defined process.
Responsibilities
My involvement in the design system team has taught me a great deal about time management and task prioritization. My responsibilities extend beyond the design system to encompass products as well. Striking a balance between product and design system workloads is essential for effective performance.
