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. 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 handoff 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 Management
- 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.