From Chaos to Consistency:
Building a Design System That Delivers

Summary

With the team growing and apps increasing, we faced challenges like inconsistent UI, unclear design decisions, and balancing flexibility with consistency. To address this, we created a scalable design system that ensures consistency, supports reusability, and simplifies workflows for designers and developers.

Improved Consistency
Unified styling ensured cohesive designs and reduced inconsistencies.

Better Collaboration
Shared standards enhanced teamwork and streamlined handoffs.

Improved Consistency
Centralised components reduced repetitive work and sped up delivery.

Background

From project to project, we've created many ad-hoc components to address UI challenges. However, as the number of apps grew, the need for a cohesive UI guideline became essential to ensure consistency and reusability.

Requirement

The design system must provide clear styling guidelines while allowing flexibility for variations. It acts as a central resource, enabling designers and developers to collaborate efficiently and create cohesive designs.

Challenges

Concept Development & Validation

Design Goal

Create a comprehensive framework that is easy to follow and can aids designers and developers to find the right components for the projects.

User Interview with Developers👩🏻‍💻

At the start of the project, I teamed up with developers to sift through the entire UI component library, identifying and distilling universal styling and patterns that could be applied across projects. After a few iterations, we came up with a set of base components that can be adjusted as needed.

Initial draft of data table

Articulating design decisions🗣️

Clearly communicating the reason behind design decision, such as the choice of specific UI components and styles. I came up with a few ideas helping designers and developers to find suitable components for specific UI requirements:

Checklist

We came across the Checklist Design and found it very helpful. We wanted to create something similar for each component to ensure that every component applied meets all the criteria.

Checklist for Buttons

Decision Tree

I've found decision trees to be incredibly useful, especially when dealing with complex questions like whether to use a checkbox, radio button, dropdown select, or pills. Each component may be the best choice in certain situations but not ideal in others. My goal is to create a straightforward decision tree to assist designers and developers in easily finding the most suitable component for their needs.

Example of Component Finder

Balancing consistency and flexibility ⚖️

We strive to maintain brand and styling consistency across UIs, while actively promoting flexibility to accommodate diverse design requirements and variations. Each component comes with styling guidelines, offering a framework that allows room for creativity. For instance, we've crafted various dropdown select styles tailored for different UIs based on specific requirements.

Various dropdown select styles

Adapting evolving trends 📈

Previous and current data tables

Results

Future Development & Takeaways

The styling guide is currently in prototype form and not a fully functional website. It would be beneficial to incorporate the following features:

Collaboration👨🏼‍💻👨🏼‍💻

Enable every team member to create, edit, and comment. Include a link to the base components.

Search and AI 🤖

Integrate a search function and AI for component recommendations.

What I've Learned👩🏻‍🏫‍

Clear Guidance Makes All the Difference

Helping users navigate a sea of components is crucial. A playful yet practical solution, like a quiz, not only makes finding the right component faster but also adds an enjoyable element to the process.

Design for Engagement - Make Fun Experiences

Explaining the 'when and why' of component usage is straightforward, but creating engaging experiences requires creativity. By integrating interactive tools like quizzes and checklists, we turned decision-making into an intuitive, gamified journey. Users explore solutions through fun, interactive inputs, earning praise for their clarity and delight.

Redesigning Navigation
for a Better Defect Tracking Experience

View Project arrow_forward

Optimising Leave Management
for Seamless Rostering
‍