From Chaos to Consistency: How We Build Syllabus as Ruangguru Design System
Role
Product Designer
Company/Institution/Clients
Scope
Timeline
April 2022 - August 2023
At a glance
Syllabus is a Ruangguru design system for products and digital experiences to build consistency across user experiences. Syllabus was created to solve the problem of inconsistent design elements, which were causing confusion for users and slowed down design also development progress.
Syllabus consists of token libraries that have foundational elements, such as colors, typography, gradients, shadows, and spacing. These elements work together to build components, starting from atoms and building up to molecules, which are then used to create the screens, designs, and flows that we see in user interfaces.
We have 3 main teams that handle three library categories per team, such Foundations, Components, and Assets & Illustrations. As a member of the team that handled Foundations, I was responsible to define the foundation's elements such as color palette, typography, layout, corner radius, shadow, spacing, and design tokens. Besides that, I have to ensure that foundations library is aligned with the other teams' libraries (components and assets library). Throughout the development process, I worked closely with the other teams to ensure consistency across team and to avoid any overlap or confusion.
Eager to discover the process? Keep scrolling!
The reason why we need to create a design system
Ruangguru is a company with a diverse range of products and all of the product has its uniqueness. However, when it came to developing the digital experience of these products across both mobile apps and websites, each craftsperson and stakeholder involved in the product had their own unique style. It happens cause we don’t have one source of truth that becomes a guideline while designing a digital product. This caused a problem of inconsistency in the development of the products, resulting in many redundant components and unnecessary variants.
Those issues above make us realize that we needed to unify our design styles and components because we began expanding our services to a new platform - a responsive website. This presented a challenge to our designers and engineers, who had previously struggled with inconsistencies in design elements. However, we saw this as an opportunity to turn a new page and establish a cleaner development process with a unified design system.
The goals we want to achieve
In order to solve those problems above, the Product design team decided to create a design system as a single source of truth for the company's design language that could be used consistently across multiple platforms.
Why design system will resolve those problems??
Design and development work can be created and duplicated efficiently at a large scale.
Reduces the workload on design resources and focuses more on complex problems
It creates a unified language within and between cross-functional teams.
It creates visual consistency across products, channels, and (potentially siloed) departments.
It can serve as an educational tool and reference for junior-level designers and content contributors.
How we achieve our goals: from zero to hero
Building Syllabus at Ruangguru was an uphill battle, but it was well worth the effort. I’ll wrap the process into six phases below, each with its own set of challenges and milestones. Despite challenges, we kept going and eventually created a design system that we are proud of.
Syllabus Design System: Our Source of Truth in Design and Development
Syllabus consist of foundations as core visual styles, reusable components and visual assets that works together build our digital product experience
Foundations
Foundation is core elements of all visual and interactive design decisions. In Syllabus, we have several foundation elements such as color, typography, spacing, layout, sizing, shadow and corner radius. These foundation’s elements are integrated with engineering through design tokens.
What are design tokens?
Design tokens are individual values that store design properties like colors, spacing, shadows, and sizes in a flexible format that can be used on any platform. So, all foundations elements will have their specific format name, so we can use and expand them on any platform
So, all of our foundations elements can be customize based on their functions in design tokens.
Colors
Color Spectrums
Color spectrum is a range of colors used to create a consistent and harmonious visual language for a brand or product. In Syllabus, we use color spectrum with a set of 12 tints and shades per color. We have tints color spectrum from 0-80 and 90-110 for shades.
Color Specific Tokens
General Tokens
We use general color tokens for multipurpose design elements such as background, icon, components state, text, and border in multi-product. These color tokens can be used in all products.
Product Themes
In Ruangguru, we have 2 types of products, K12 ( Kindergarten to 12 ) and LLL (Life-long learning). These product groups have different user archetypes so the design vibes and color tones are different. So, for every product in K12 & LLL group, we can customize color in some design elements.
Typography
Typography organizes text placement and hierarchy levels when appearing on interfaces. By utilizing typography styles according to their characteristics, we can deliver well-structured content that comforts the readers’ eyes.
Spacing
Spacing is the system of setting distances between elements. Spacing balances the objects within layouts, making them more visually structured and focused. In Syllabus, we have defined a set of spacing values that can be applied to various components and layouts, making it easier to maintain a consistent and cohesive design system.
Layout
Ruangguru have various products across multiple platforms, including mobile apps and responsive websites. We need a responsive layout grid to make sure everything looks good on every device. Responsive layout grids serve as a visual “compass” that assists us in keeping design elements within a frame aligned.
Shadow
Shadow gives an elevated effect to design elements, placing the elements in higher prominence or hierarchy.
Corner Radius
Since we have two product groups with different user archetypes, corner radius enables us to systematically apply unique shapes across a variety of components. This system helps us specify unique shapes for visual elements and gives the design a more friendly, modern touch. We use the corner radius system for most UI elements — from buttons to tabs, from snack bars to pop-ups.
Components
Implementing Brad Frost's Atomic Design, Syllabus components act like building blocks that are specifically created to build familiar and consistent patterns in user interface. Each component is designed with accessibility in mind and can accommodate a variety of UI requirements, state changes, and variants. Since we have various products, this approach allows us to create a more efficient and scalable design system, making it easier to maintain consistency across different products and platforms.
Visual Assets
Illustrations
Illustration helped amplified ideas, concept, or message; from empty states, announcements, on-boarding, to progress indicators. In Syllabus we have 2 type illustrations :
UI Illustrations
Usually use in all UI screens to explain empty states, announcements, header and support overall UI. These visuals help to communicate complex information in a more straightforward and engaging manner.
Digital Image Illustrations
Special for landing page and all marketing things, we use photo that combine with handdrawing illustrations. These combinations of visuals helps us serve content with humanized touch on it, while still incorporating engaging illustrations to capture audience's attention.
Icons
The Syllabus icon system has 200+ carefully designed icons focused on consistency visual weight and small working canvases. These icons provide visual context to help users achieve their goals. Icons are visual representations of commands, devices, directories, or common actions.
🚀 Syllabus Impact
After 1 year released and implemented into our product development workflow, Syllabus has had some significant impacts such as :
Designers and engineers are now 2 times more productive and easier to create new products and services.
Since October 2022, Syllabus has been adopted and implemented by around 75% starting with new and updated products. This will increased by the time
Stakeholders (mostly product team) become aware with the importance of a design system in reducing inconsistencies and increasing productivity. As a result, we have same mindset that using reusable components and patterns that have already been proven to work is more effective than creating something new.
👩🏼💻 What I learn while doing this projects
Implementing and initiating a design system mindset as new behavior that breaks common rules in a large team it’s hard. So as part of the design system team, we have to be patient to make our product design & engineering team make new habits in building products.
We can’t implement our design system into all products in a short time. So it’s important to make priority where to implement and align with the product roadmap. Everything needs a process!
While involve in the design system team, I learn a lot about time management and task priority because my responsibility is not only in the design system but also in products. Balancing workload in products and design system it's important
👥 Syllabus Team
I'd like to express my sincere appreciation to the entire team who worked tirelessly on this project for their invaluable contributions and commitment to its success.
Reston Feliciano as Syllabus team leader
Ajeng Prita, Afdolash, Ferdi, and Frankim as designers in components team
Mareta Ayu as my partner in foundations teams
Maulana, Bajrul, and Ega as illustrators in the visual assets team.
Bonie as my leader that give me the chance to involve in this team
Fajri and team as copywriters that write UX writing guidelines that will be part of our Syllabus
Engineering teams led by Ida Bagus and Agastya
All stakeholders, designers, and engineers have played an important role in implementing Syllabus in our products
