Design System Architecture

A new development process required an optimization of design resources, to provide as detailed visual information as possible, in less time, with low maintainance cost.

#01

Problem

There was a need for faster iterations in the design process, but this required to optimize designers time considering that the company process demanded a detailed communication of the solutions in order to improve their understanding.

Hypothesis

Design a system that can provide a strong and scalable source of truth (Library) and dedicated environments for quick explorations (Playground) and an easy generation of use cases for visual communication purposes (Handoff). This should allow to optimize design time without sacrificing quality of outputs.

Results

The system has allowed designers to explore freely and fast, keeping a source of truth well organizd, but at the same time allowing a detailed communication of use cases in less time. This has helped to have a more efficient workflow, producing good outputs in less time. A solution could be wrapped up within days since its initial explorations.

design-system
  1. Components are detached to explore upgrades or new solutions in Playground faster.
  2. Solutions are improved and validated based on feedback and usability testing.
  3. Once validated, solutions work as input to update components and layouts of the Library.
  4. After components are updated, use cases are prepared for development by manipulating the different configurations of the layouts. Developers can access to the library from the Use Cases for better understanding.