Establishing Governance and Efficiency
My Role
Product Designer
Project Timeline
6 Months (MVP and V1.0 Launch)
Key Tools
Figma
Zeroheight,
Storybook
Notion
Outcome
Mais de 70 horas de retrabalho eliminadas em uma única sprint e aumento da consistência da marca.
Problem Statement
The established company was facing a visual and technical inconsistency crisis. Multiple software products used outdated patterns or third-party components, leading to zero cohesion across the portfolio.
The UX team was forced to spend valuable time on "visual firefighting" (rework), diverting focus from the main mission: solving user problems and enhancing final usability.
Proposed Solution: Developing a proprietary Design System (DS) to serve as the "single source of truth", ensuring standardization and highly efficient design-to-development workflows.
Challenge and Task
The Business Challenge: The primary hurdle was overcoming cultural resistance from leadership and long-time team members who did not perceive the lack of standardization as a critical problem. We needed to definitively prove the strategic ROI of the DS before construction began.
The Task:
-
Sell the Vision: Convince leadership about the financial impact and Return on Investment (ROI) of the DS.
-
Build Governance: Define the architecture (Atomic Design) and build a robust, documented component library.
-
Implement Collaboration: Establish an efficient, low-friction workflow between Design and Development teams.
Process and Actions
Step 1: Proving Value and Alignment
-
Action: I created a presentation focused on cost reduction and efficiency gains, utilizing data and market cases to justify the investment and secure management buy-in.
Step 2: Inventory, Structure, and Tools
-
Action: We conducted a comprehensive component audit, mapping about 180 existing components across all products.
-
Methodology: We adopted Atomic Design for its scalability, which was fundamental given the complexity of our legacy systems.
-
Workflow Integration:
-
Design: Figma.
-
Documentation (Rules of Use, Anatomy): Zeroheight.
-
Development: Storybook.
-
Tracking & Alignment: Notion.
-
Workflow
-
Design: Figma.
-
Documentation (Rules of Use, Anatomy): Zeroheight.
-
Development: Storybook.
-
Control: Notion.
Step 3: High-Fidelity Collaboration
-
Action: We established a rigorous and shared validation process: Design (Zeroheight) → Dev (Storybook) → Design (Review via 'Inspect') . This constant alignment was crucial to saving a lot of rework in the implementation phase.
Learnings and Next Steps
Essential Learnings
"A Design System is a living organism, not a project with an end."
The main lesson learned was recognizing the organic nature of Design and Development. It is constantly evolving and demands continuous maintenance and attention. The union and good communication between Design and Development, facilitated by tools and a clear dynamic, was the biggest factor in reducing rework and increasing productivity.
Next Steps
The future of DS is focused on expansion and adaptability.
-
Platform Expansion: Consider the application and expansion of DS to other platforms (mobile, for example) as products evolve.
-
Variations and Themes: Explore variations (such as the dark theme) and new color ranges to cater to a wider variety of products or customers.