Redesigning a fragmented checkbox design system component in a startup

Abstract: A Design System is a single source of truth for an organisation’s products helping designers and developers realise an idea in an efficient workflow. Sometimes, a Design System can become inefficient, leading to problems like increasing design inconsistencies, delayed design workflow, unclear design guidelines, and increasing use of UI elements outside the Design System. A similar set of problems were identified in a rapidly growing electronics software startup, and out of all the Design System components, a checkbox is picked to showcase the redesign process. This led to the research question, “What are the key design challenges faced while redesigning a fragmented checkbox component in a startup?”. To tackle such problems, some methods like: Design System audit, stakeholder interviews, dot voting, secondary research, ideation, survey, and diary studies were used to gather insights. Five to ten internal stakeholders took part in most of the research activities. Four prominent challenges were discovered during the entire incremental redesign process. First is the difficulty in locating multiple instances of a UI component from various design files. Second is the difficulty in manually replacing the old with new UI components to visualise them in the context of many UI components and screens. The third is the difficulty in evaluating the redesigned UI components. Last is the challenge of transitioning the current UI screens with new UI components in bulk. It is challenging from the state of discovery until the test and transition. Consistent documentation and bulk action Figma plugins such as Similayer can be useful for a smooth transition.