When there is a need to add a new component from scratch to the system or a new component is needed, our component design methodology follows product design processes. This way, we can address identified needs more effectively or contribute to the gradual growth of our design system.
Component process flow
Starting point
First, we need to define which user group this need comes from. It could be an internal (end-user) or external (dev or des) indirect need. To define the problem, we need to answer the following questions:
• Why do we need that component?
• What are we going to solve with that component?
Research
To determine where the need comes from, we should compile feedback from our team members or direct requests from users. If necessary, we should conduct 1:1s to understand their needs and determine whether to develop the component.
Define
We need to determine the size of the component, identify what the first iteration will cover, decide how it will work, and clearly define the jobs that the component aims to address.
Design exploration
During design exploration, we should make decisions that will lead to the final solution by exploring how the component will look and function within our system.
At this phase, we can gather feedback from the entire design team — bring the topics to workshop meetings.
Design
The design process involves creating final designs and implementing them with UI developers.
Depending on the scope of the component, it may be prototyped and tested with users. The impact size is crucial here. Also, if there is a need for writing, collaboration with a UX writer is essential.
Implementation
Code components can start to write with the design phase of the component. It is expected that designers and developers work together to create a functioning component.
Documentation
The documentation process can begin with the design phase. This way, parts of the documentation can be created without forgetting the decisions made.
The documentation should include design and implementation guidelines. When the documentation is complete, share the latest updates with the team and get feedback.
Release
The component should be distributed across all resources (Figma, Supernova, Storybook) and teams should be informed. After this phase, it should be determined whether the component meets the needs and how much it is being used.
If there is an issue, the necessity of a second iteration should be determined and iterations should be worked on.