Lilly Design System - Migration
In the fast-paced world of digital design, we faced a pivotal moment: shedding the limitations of Sketch and InVision, and breathing new life into our design system for enhanced collaboration and accessibility by embracing Figma's innovation.
Year
2023
Service
UX Design
Category
Design System
Tool
Figma
Situation
In the fast-paced world of digital design, we faced a pivotal moment: shedding the limitations of Sketch and InVision, and breathing new life into our design system for enhanced collaboration and accessibility by embracing Figma's innovation.
Tooling Challenges: Our design team primarily used Sketch and InVision, which hindered collaboration, version control, and real-time updates.
Usability Decline: The existing design system had lost user-friendliness over time, impacting productivity.
Accessibility Gaps: Accessibility features needed improvement to align with industry standards.
Competitive Edge: To maintain a high design standard and competitive edge, migrating to Figma became essential.
In navigating these challenges, our design team stood at a crossroads, poised for a transformative journey toward a more collaborative, user-friendly, and accessible design future.
Task
As part of a collaborative initiative with a fellow designer and an accessibility expert, I embarked on a transformative journey aimed at migrating our design system from Sketch to Figma. Simultaneously, I championed usability and accessibility enhancements that would establish fresh standards.
Project Leadership: As the UX lead, I collaborated closely with a fellow designer and an accessibility expert to orchestrate the seamless migration of our design system from Sketch to Figma.
Enhancing Usability and Accessibility: Simultaneously, I helped identify key areas within the design system that required usability and accessibility enhancements to meet and exceed industry standards, ultimately improving the overall user experience.
Team Coordination: I coordinated efforts with both design and development teams, ensuring minimal disruption to ongoing projects and safeguarding design consistency across all our digital products.
Figma Onboarding: Beyond migration and accessibility, I actively participated in the Figma onboarding process. This phase immersed me in understanding Figma's file structure and allowed me to contribute to the development of a structured framework that would guide our organization in future projects.
Paramount Success: The success of this multifaceted project was crucial in maintaining our design efficiency and competitive edge within the organization and in the market.
Action
In taking decisive action, I led the charge in executing a meticulously planned migration strategy to Figma, while spearheading comprehensive usability and accessibility enhancements that would shape the way designers consume our design system.
Planning and Preparation:
The migration project began with an audit of the Sketch library and the current design system portal. Audit insights:
Granular Deconstruction: We initiated the migration project by conducting a comprehensive audit of the Sketch library and design system portal. This allowed us to deconstruct each component into its fundamental elements, paving the way for a structured transition.
Agile Story Point Estimations: The deconstruction process facilitated precise Agile Story Point estimations, ensuring a smooth migration process and accurate resource allocation.
Design System Portal Insights: By examining the design system portal, we gained valuable insights into the number of variations, limitations (e.g., height, width, item count, etc.), and accessibility requirements, setting the foundation for an inclusive and user-friendly design system.
Migration
Atomic Design to Figma: We migrated our Design System following the Atomic Design methodology, extending it to Figma through nested components.
Priority on Atom Level: We initiated the migration by prioritizing Atom level components, recognizing their role as the foundation for molecules and organisms.
Elevating Molecules with Nested Components: Molecules were the first to fully utilize nested components, streamlining organization and property integration.
Seamless Organism Handling: The same approach that proved successful for molecules was extended to organisms, accommodating their increased complexity. In many instances, organisms underwent 1 or 2 iterations, resulting in a remarkably refined product.
Onboarding
Comprehensive 3-Month Onboarding: In the initial phase of our migration project, I completed a comprehensive 3-month Figma onboarding program, which enriched my understanding of Figma and it's capabilities.
Direct Communication with Figma: The program facilitated direct communication and fruitful feedback exchanges with the Figma team. This enabled me to seek clarity on design-related inquiries.
Deepened File Structure Understanding: My onboarding experience deepened my understanding of Figma's file structure and its optimal utilization to meet the organizations requirements. This encompassed insights into Figma’s Workspace, Teams, Products, and Design Files structure.
Training Initiatives
Throughout the migration project and the integration of the Design System, I actively participated in conducting multiple training courses.
Varied Training Focus: These sessions covered diverse aspects, including:
Introduction to Figma fundamentals.
Enabling and harnessing a design system library.
Sharing valuable tips and tricks for optimizing Figma usage.
Action
The culmination of our efforts has ushered in a new era of design efficiency and user-centricity, with tangible outcomes that underscore the success of our migration project and the integration of the Design System.
Transition to Figma: The transition to Figma has yielded remarkable results. It has not only streamlined our design workflow but also fostered a more collaborative environment within the teams.
Elevated Team Enthusiasm: The introduction of the new design library has sparked enthusiasm among teams. This enhanced resource has empowered designers and promoted a unified design language across projects.
Enhanced Efficiency: Designers have experienced a significant boost in efficiency as they've become familiar with Figma and the new LDS Enterprise 1.0. This newfound proficiency has translated into quicker project turnarounds and improved design consistency.
Positive User Impact: Most importantly, these improvements have had a positive impact on the end-users, resulting in more accessible and user-friendly digital products that align with industry standards.
Bonus
Library Analytics in Figma: Figma offers valuable library analytics, offering insights into component usage and detachment frequency. These analytics provide invaluable information on design system utilization, shedding light on potential pain points and areas for improvement.
Branching and Merging: Similar to the branching and merging capabilities in Github, Figma's feature enables quicker and safer iterations and updates. This functionality eliminates the need for designers to manually download updated library files, streamlining the design process and enhancing collaboration.
