UI Kit Migration for efficient Design Ops
Design Lead
UI Kit Migration
Design Ops
2024
After creating the dark mode UI kit variants, we ran into hurdles of changing color styles and designing for both light and dark mode so the ideal solution was to migrate our dark mode component library to the main design system figma file. This case study explores how I lead the initiative of optimizing our design system and making our hand off process more efficient post dark mode implementation.
Introduction
After successfully deploying a dark mode feature with a foundational style guide and user journey modifications, our team faced operational challenges during design handoffs. The separation of light and dark mode components into different files increased the complexity and time required for creating new screens. This case study explores how we addressed these challenges by integrating design components and utilizing Figma's boolean properties, highlighting the processes and stakeholder management strategies employed.
Challenge Identification
Potential decrease in user engagement, expectation and satisfaction, impacting Kijiji's market competitiveness.
Design Handoff Delays
The separation of UI components for light and dark modes into distinct files led to inefficiencies in the design handoff process.
Component Discrepancies
The existence of separate components for each theme caused confusion and inconsistencies across design iterations.
Operational Overhead
Managing two sets of components for each mode increased the time and effort required for design updates and maintenance.
Strategic Approach
Problem Diagnosis
Through team discussions and feedback sessions, we pinpointed the root causes of the handoff delays and identified potential solutions.
Solution Ideation
We decided to leverage Figma’s capability for creating boolean components, allowing designers to seamlessly switch between light and dark themes within the same component set.
Implementation Steps
Kickoff Action Plan
Developed a comprehensive plan outlining the project’s scope, goals, and key milestones, shared with all stakeholders to set expectations and timelines.
Bi-Weekly Meeting Cadence
Established a regular schedule for project updates, brainstorming, and troubleshooting, ensuring all team members remained aligned and informed.
Component Integration in Figma
Utilized Figma’s boolean properties to merge light and dark mode components, creating a unified, flexible design system that could easily adapt to theme changes.
Documentation and Tracking
Excel Sheet Creation: For detailed tracking of the project’s progress, including the status of component updates and integration efforts.
Confluence Page
To provide a central repository for project documentation, guidelines, and updates, accessible to all team members and stakeholders.
Sprint Planning and Task Assignment
Carefully planned sprints and assigned tasks, ensuring efficient workload distribution and timely completion of project milestones.
Outcomes & Benefits
Efficiency Improvement
Significantly reduced the time required for creating and updating design screens, enhancing productivity and accelerating the design hand-off process.
Consistency Across Themes
Achieved a higher level of design consistency and coherence between light and dark modes, improving the overall user experience.
Streamlined Design Operations
Simplified the maintenance and update process for UI components, reducing operational overhead and enabling more focus on design innovation and user experience enhancement.
Before – Two different master components
After – Boolean variants in a centralized master component
Stakeholder Manangement
Design Handoff
Ensured stakeholders were regularly updated on progress, incorporating their feedback to refine and adjust the project approach as needed.
Collaborative Decision-Making
Engaged key stakeholders in the decision-making process, fostering a sense of ownership and alignment with the project’s objectives.
Transparent Communication
Maintained open lines of communication throughout the project, addressing concerns and answering questions promptly to mitigate any potential issues.
Conclusion
The transition to a centralized component library in Figma, empowered by boolean properties, was a strategic initiative to optimize design operations. This initiative not only streamlined the design handoff process but also enhanced the hygiene and consistency of our figma files, demonstrating the importance of adaptability and collaboration in overcoming operational challenges. Through careful planning, regular communication, and a focus on innovative solutions, we were able to significantly improve our design operations, setting a strong foundation for future enhancements and features.