Summary
The component design process aims at providing guidance for UX designers involved in the creation or modification of system components. In the current draft, these are the steps involved in said design process are:
- RESEARCH & PREPARE (aka DISCOVERY): The goal is to identify and collect information on the building blocks, behavior and intent of the needed component.
- DESIGN (I. INTERACTION, II. VISUAL STYLE): The component’s interactive and visual features are defined following the principles documented in the Design Style Guide, and the learnings extracted during the discovery phase.
- EVALUATE & ITERATE: Collect feedback from designers, engineers and (ideally) users and apply the needed adjustments
- HANDOVER : Document design decisions thoroughly and make them fully accessible for developers
- VALIDATE: Test the implemented component in order to make sure it follows the interaction, visual, responsive and accessibility specifications.
- DOCUMENT: The visual and interactive features of the component, as well as usage recommendations, are captured in a structured way and made available for consultation.
Note: The design process documented in this ticket and to be reviewed during the workshop sessions is a consolidation of two sources:
Original documentation
- The information gathered in the ticket Example process on creating and adding a new component to Design Style Guide
- The Designing Components section of WiKit's design system documentation
Relevant links
Objective
Gather feedback on each one of the steps and activities involved in the component design process
- Is the order of the steps logical?
- No objections raised at designer workshop, agreed on as is
- Are there any steps missing or extra?
- No objections raised at designer workshop, agreed on as is
- Are any “instructions” unclear or too vague?
See designer workshop Google doc, the feedback will be addressed in component addition guidelines and supporting Figma file.
- Where are extra documentation or resources needed?
Same as above.
Outcomes
Process has received valuable feedback, collected in Google doc above. We'll iterate on the design process based on feedback, and share new version. Location will continue to be Figma, but we're aiming at linking to the visually supported process from DSG (CONTRIBUTING.md & main pages).