The Problem

At TapHomes, I work closely with 2 other designers, each managing different platform. This setup revealed a significant challenge: our individual design styles resulted in multiple version of the same components across different platform.

These inconsistencies not only wasted valuable time but also duplicated efforts within our development team. To address this, I took the initiative to create a unified design system for TapHomes. This system allows components to be used across all TapHomes platforms, streamlining our workflow and efforts.

The Goals

In this project, I created a design system to streamline our design and development processes. This system served as a single source of truth, improving consistency and efficiency.

By providing a library of reusable components, allowed me and other designer to focus on impactful activities like researching problems, crafting innovative solutions, and enhancing product quality.

This design system also reduced the engineers’ workload by enabling them to reuse pre-coded components, eliminating redundant work, and minimizing error as they no longer needed to code the same components multiple times to match our different design styles.

My Role

As a UI/UX Designer in a small design team, I took responsibility for every step of this project. This included auditing existing components, conducting research, designing design tokens, and designing the new components. Throughout the process, I collaborated closely with other designers and developers to ensure the design system met our team's needs and aligned with our goals.

Audit Components

To validate the issues we faced, I conducted a quick audit of components across all TapHomes’ platforms. Besides inconsistencies, from this audit I uncover multiple variations for each component on different platform. This confirmed that our design components lacked of consistency and unified approach. With this insight, I had a clear starting point for creating design system.

Design Tokens

After researching and studying design systems from major companies like Google, Uber, and Shopify, I discovered the powerful concept of design tokens. Design tokens store design decisions as reusable variables, such as colors, typography, spacing, and other style attributes. These tokens ensure consistency, scalability, and efficiency across all platforms, providing a centralized way to manage and update design properties, making updates faster and more manageable.

Implementing design tokens significantly improves communication between designers and developers. By using a common set of design standards, we can ensure everyone is on the same page, facilitating better collaboration and reducing misunderstandings.

This approach aligns perfectly with my overarching goal of simplifying workflows for both designers and developers. By starting with the definition of our design tokens, I laid a solid foundation for a more complex and cohesive design system.

Atomic Design

In this project, I focused on the fundamentals, creating a design system using Atomic Design principles. Although the full scope includes atoms, molecules, and organisms, but for now, I concentrated on defining atoms and molecules.

Atoms represents the basic building blocks of design system included elements like buttons, colors, and typography, while molecules combined these atoms into more complex components, such as form fields and navigation bars.

Comprehensive Design Components

Working alongside with other designers, I aimed to create a design system that could be easily reused. To achieve this, I developed a comprehensive set of design components, covering various states, types, and variations of frequently used components in our project.

All these components, including design tokens, atoms, and molecules are meticulously organized in Figma. This setup allows other designers to seamlessly access and utilize the assets I’ve created, streamlining our workflow and ensuring consistency across all platform.

What's Next?

This design system is a long-term project, and currently, we’ve only completed the atomic and molecular stage of Atomic Design. Next, we will advance to more complex stages, such as organisms, template, and pages. Additionaly, we will update components as needed and introduce the new ones.

We also plan to create guidelines for each component to ensure consistent usage and maintain organized documentation. I’m eager to gather feedback to better meet the needs of designers, developers, and users, continually refining and enhancing our design system for TapHomes.