Empowering Creativity: The G/O Media Design System Overhaul
Discover how we streamlined processes and enhanced consistency through a comprehensive design system revamp
Reading time:
4 minutes
Design
System
Introduction
Welcome to the G/O Media Design System overhaul project. This initiative focuses on updating our design standards to industry norms, improving scalability, and ensuring ease of handoff with engineering. Let's explore how these changes have transformed our digital landscape.
My Role
As the lead product designer for this project, I collaborated internally with the VP of product, head of engineering, and the CTO throughout this project lifecycle.
“Migrating from Sketch to Figma was long overdue and allowed us to revamp our design system for the better
Goals
Streamline Processes
Streamline the design and development processes to improve efficiency and productivity. Identify bottlenecks and areas for improvement, implement solutions that optimize our workflow, and facilitate smoother collaboration between design and development teams.
Reduce Tech Debt
Update the design system to align with industry standards and leverage the capabilities of Figma, to address legacy issues and improve code quality. Aim to minimize technical debt accumulation over time, ensuring that the team operates on a solid foundation and can adapt to future challenges with ease.
Approach
Knowledge Transfers
I sought a deeper understanding of the workflow. I regularly met with the engineering teams to grasp their utilization of the design system and pinpoint potential areas for enhancement.
Migration
The team utilized Sketch, but we opted to transition to Figma, recognizing its alignment with industry standards and leadership position in the field. This move was essential for staying current and addressing tech debt within the team.
Documentation
Collaborating with engineering and leveraging robust tools such as Storybook and FigMayo, we developed a refined and scalable design system. Updating Figma design tokens to incorporate the latest features resulted in unparalleled consistency and improved efficiency.
Final Designs
Please note that I do not have access to all screenshots, but please find a preview below.
FIGMA VARIBALES
STORYBOOK
Impact
200% Faster from Ideation to Products Shipped
This project significantly accelerated the time from ideation to product shipping, achieving a 200% increase in speed.
Why this worked:
By streamlining our design system and using new industry tools available, we provided engineers with more efficient and standardized assets and components.
This not only reduced the time required for implementation but also improved collaboration between design and development teams, resulting in faster turnaround times and more agile product delivery cycles.
Scalable Design System
The revamped design system introduced in this project is inherently scalable, providing a flexible framework that can adapt and evolve with our growing needs. By updating design tokens in Figma and implementing tools like Storybook and FigMayo, we established a solid foundation for future expansion.
Takeaway
The overhaul of our design system at G/O Media has been a transformative journey marked by innovation and collaboration. By streamlining processes, reducing tech debt, and accelerating ideation-to-shipping time, we've not only optimized our workflow but also enhanced our ability to deliver impactful digital experiences to our audience.
This project taught me invaluable skills when it comes to design systems; designing with consistency and efficiency is paramount when the digital world is ever-changing and making sure to meet users' needs.