Coofis Design System

Context

Coofis, a web-based office collaboration platform by PT ARM Solusi, was created to digitize official correspondence and streamline workflows. As the product grew, the team faced challenges with inconsistent interfaces, repeated design work, and unclear documentation. These issues slowed down development and weakened the product’s visual identity. To address this, a Design System was proposed as a unified framework of reusable components and guidelines. Its purpose was to improve design efficiency, ensure consistency, and strengthen collaboration between designers and developers while supporting Coofis’ long-term scalability.

Problem & Goals

The main challenge in developing Coofis was the lack of a consistent design approach. Interfaces often looked different across modules, forcing designers to repeat similar tasks and slowing down the process. Without proper documentation, collaboration between designers and developers became inefficient, and delivery timelines were frequently missed. The goal of this project was to establish a structured Design System that could unify visual elements and interaction patterns, improve efficiency, and reinforce Coofis’ identity. By creating a shared framework, the system also aimed to enhance teamwork across disciplines and ensure the product could scale more effectively in the future.

Pain Point

Before the Design System was introduced, the design process for Coofis was fragmented and time consuming. Designers often had to recreate the same interface elements multiple times, leading to wasted effort and inconsistent results. Each version of the product showed variations in visual style, which confused users and weakened trust in the application. Developers also struggled to implement designs efficiently because of the absence of clear guidelines, resulting in longer production cycles and higher chances of error. Together, these issues created a workflow that was both inefficient and difficult to maintain.

Research Insights

The research process combined literature studies, visual observations, interviews, and pre-design testing. From literature, references such as Atomic Design, Google’s Material Design, and IBM’s Carbon Design System provided a theoretical foundation for modular and consistent design practices. Observations of existing applications and earlier versions of Coofis highlighted inconsistencies in visual patterns and navigation flows. Interviews with designers at PT ARM Solusi revealed the need for standardized elements, better documentation, and clearer collaboration practices. Pre-design testing further showed that completing simple tasks, such as the login flow, required excessive time without a unified system. These insights made it clear that a Design System was necessary to improve efficiency, consistency, and the overall design workflow.

Solution

The proposed solution was to design and implement a comprehensive Design System for Coofis, built on the principles of Design Thinking. This system defined visual foundations such as color, typography, iconography, spacing, and illustration style, ensuring a consistent identity across the application. It also introduced a library of reusable interface components, buttons, forms, navigation bars, tables, and modals, that could be applied repeatedly without redesigning from scratch. Beyond visual assets, the Design System was documented as a shared reference for both designers and developers. This documentation provided clear usage guidelines, making collaboration smoother and reducing miscommunication. By establishing a single source of truth, the Design System not only addressed immediate issues of inconsistency and inefficiency but also laid the groundwork for scalability and sustainable product development.

UI Components (Design Systems)

Results & Impact

To evaluate the impact of the Design System, usability testing was conducted before and after its implementation. In the pre-design phase, designers were asked to complete common interface tasks such as building a login flow. The process was slow and inconsistent, with results varying between individuals. On average, completing the tasks required more than an hour, highlighting inefficiencies in the workflow. After introducing the Design System, the same tasks were repeated using standardized components and documented guidelines. The results showed a significant reduction in completion time, with efficiency improvements ranging between 20% and 39%. Designers were able to produce more consistent outputs, while developers found implementation clearer and faster. The usability study confirmed that the Design System not only improved efficiency but also created a more reliable foundation for collaboration and product growth.

Collaborator

This project was part of Hendy Oktavian’s final thesis and was completed with guidance from academic supervisors. Insights from Muhamad Faizal, a UI designer at PT ARM Solusi, provided valuable perspective on the practical needs and challenges in Coofis. In addition, the Coofis Design Team supported the development of UI elements during the project, helping ensure that the Design System could be applied effectively in practice. This combination of academic guidance and industry input shaped the project into a practical and relevant outcome.