Construction and documentation of a modular, scalable component system with semantic tokens in Figma and code to optimize the workflow between design and development.
Introduce here the general context of the project. What was the main problem facing the product or business before your intervention? What type of users did it affect, and what was the goal of the redesign or research?
- Goal 1: Create a centralized library in Figma using Auto-layout 4.0.
- Goal 2: Align design tokens (colors, spacings, fonts) with native CSS variables.
- Goal 3: Reduce design times for new layouts and streamline developer handoff.
Describe what your specific role was (e.g., UX Research, UI Design, Audit, Facilitation) and which teams you collaborated with (developers, product owners, stakeholders). Detail the key steps of the design process you executed (Double Diamond Methodology, Design Thinking, etc.).
Explain the UX Research techniques used: user interviews, existing usability tests, heatmaps, surveys, or competitive analysis. Highlight the main insights and pain points discovered.
What did you discover that the team did not know previously? How did this research influence the design decisions made later?
Detail the proposed design solution. Explain the information architecture, wireframes, or main interactive flows. Justify your user interface (UI) design decisions, colors, typography, and accessibility.
Present the qualitative and quantitative metrics achieved with the project. How did your improvements impact the business and user satisfaction?
End with a brief personal or technical lesson learned from this project.