📃 Case Study – Streamlining collaboration for designers and developers
Streamlining collaboration for designers and developers
Project Overview
We created Rahi's new design system built from the scratch. It helped us provide a new and enhanced experience for our users using the Rahi website. This is a case study of how I led the design team to achieve a brand new design system. The objective was to revamp the outdated UI and maintain our position as a frontrunner. We prioritized a modern aesthetic while addressing experience gaps. The resulting design system ensures consistency across teams and products, elevating Rahi's overall user experience.
My Role
I led product design at Rahi. Among other responsibilities, one of the major goals I set for my team was to release a design system internally. Responsible for end-to-end design of Rahi’s new design system.
Responsibilities
- Implementing a robust design system to ensure consistency across all products.
- Collaborating closely with the product team to define roadmaps and execute design plans.
- Conducting thorough research and utilizing design expertise to create innovative solutions.
- Facilitating ideation workshops and organizing design showcases to drive creativity and inspire the team.
- Managing the scope of design projects, ensuring alignment with objectives and timelines.
- Monitoring and ensuring timely delivery of design outputs, maintaining quality standards.
Project Duration
2 Months
Process We Followed
Process We Followed
Stage 01
Audit
Who is the User?
Primary Users
The designers and developers who will be designing and developing the product.
Secondary Users
The engineers and marketers who will be building and promoting the product in the marketplace.
We started the audit by analysing the existing product. We found the following issues with the existing designs.
- Use of more than three fonts across the apps
- The inaccessible font size in many instances
- lack of proper type scale
- Dull Greys
- Inconsistent spacing
- Too many components for the same purpose
- No semantic colors
- No usage guidelines & documentation
“We wanted to reduce the development effort by identifying common components. Also, changing at one place should reflect throughout the website.”
“We wanted to build widgets or marketplace products that should look like an extension of Rahi website.”
“The primary buttons in some places have an icon and in some places it doesn't.. there is no consistency.”
“Why do we have different font style and paddings for the titles of the fields?”
Stage 02
Define
As we expanded, we continuously adapted to evolving customer requirements by frequently modifying or introducing new features on our website. Over time, it became clear that we needed a more efficient approach. Instead of creating new elements from scratch for every product enhancement or new development, we recognized the value in building a comprehensive library of reusable components.
• Inconsistency: We realized that our designs across different platforms were inconsistent, resulting in a fragmented user experience. Variations in colors, typography, and button styles created confusion, weakening the overall brand experience.
• Slow design and Development Process: The process of designing and developing from scratch for each new feature was time-consuming. Without a unified system, designers and developers spent considerable time recreating components, slowing down product release cycles.
• Customer Confusion: The use of different patterns or components for identical actions across the website created confusion for our users. This inconsistency in user interaction patterns led to frustration and increased cognitive load.
• Inefficient Collaboration: A lack of a centralized component library led to difficulties in collaboration between design, development, and product teams. Misalignment and duplication of efforts became frequent as each team worked in silos.
• High Maintenance Costs: The absence of reusable components increased maintenance efforts. Every time a feature or design change was required, multiple versions had to be updated across platforms, resulting in higher maintenance costs and increased likelihood of errors.
• Brand Dilution: Without consistent branding across various platforms and pages, our visual identity became diluted. This lack of uniformity weakened the impact of our brand presence and messaging.
Stage 03
Build
Formulating the Design System
Following the UI audit, we developed a comprehensive style guide which includes design tokens, color schemes, typography guidelines, icons, spacing standards, shadows, and more. These elements helped us shape a design language and establish library.
Design Tokens
Design tokens ensure the same style values are used across design files and code.
Using design tokens instead of hardcoded values can streamline the work of building, maintaining, and scaling products with a design system.
Colors
Colour is not decorative but used with intention. Colour makes our applications easier to use by communicating meaning in a way that’s faster than words—such as signifying an error or denoting a button as the primary action.
Typography
Typography is the style given to the written word. We used size, colour, and weight styles to create a hierarchy. A strong hierarchy improves readability by leading the eye through a layout. The role of the text determines which style is used: title, subtitle, body, or label.
Spacing
Base grid takes four as the basic unit so that the component can be scaled consistently on the ground of all display sizes in the team. To adapt to more detailed component usage scenarios, we stipulate that the grid layout of digital products uses four as the basic unit.
Our virtual base grid is 4×4, which means that the size of all components is a multiple of 4. For example, 8, 12, 16, 24, 32, 48, 64, 128, etc. This makes our component system clean.
Icons
We created a new library of icons. This icon library consists of basic UI icons with various variations like filled, outlined, colored and more.
Components
We created components with the help of foundation elements (type, color, spacing) and existing low-level components from the design system.
Designs
After creating the design system, we created components and after building it we redesigned many functionality and pages to keep consistency and maintain high design standard throughout the website.
Before
After
Before
After
Stage 04
GUI Testing
We conducted GUI testing for the website we have build using this design system to ensure that the website’s user interface functions correctly, looks aesthetically pleasing, and provides a positive user experience keeping consistency in mind through out the website.
Stage 05
Measuring Success
- 🎯 We found that when participants had access to a design system they completed their tasks 2x faster than without a design system.
- 🎯 Improved consistency throughout the product.
- 🎯 We reduced design and development efforts by creating components and using it throughout the design and development process.
- 🎯 Improved company branding and company’s credibility.
- 🎯 It helped improve performance of the website by minimizing DOM elements in the development.
