GFG Design System is build to be consistent, scalable, and user-friendly experiences across products.
Global Fashion Group (GFG) is a leading online fashion and lifestyle destination, serving 11 countries across Latin America, Southeast Asia, and Australia & New Zealand. We work with over 6,000 brand partners globally, process more than 24 million monthly orders, and serve 8 million active customers.
GFG B2B Products
Seller Center
A flagship marketplace solution, providing brands with tools to streamline operations and maximize growth.
Marketing by GFG (MbG)
A platform that accelerates brand exposure through strategic ad placements and marketing solutions.
Datajet
A recommendation engine delivering personalized product suggestions to improve conversions.
Data by GFG
A comprehensive analytics platform offering deep insights into sales, customer behavior, inventory.
Pricing Engine
A pricing strategy platform that supports teams with data-driven insights for informed pricing decisions.
About the project
Over time, GFG’s products had been designed using different solutions, leading to inconsistent styles and user experiences. To solve this, we introduced a single design system to unify over 5+ services. It created a clear structure, strengthened brand consistency, and improved the overall product experience.
My role
I led the end-to-end creation of the GFG Design System, overseeing research, component development, and collaboration with the engineering team to align design and code on GitHub, Building online documentation.
Challenges & solutions
Before:
•GFG managed over 5+ complex SaaS applications, each built separately with inconsistent UX and visual styles.
•Design and engineering teams worked in silos, using different tools and processes, slowing down product development.
•Lack of documentation and implementation guidelines for designing new features or using components effectively.
After:
•Introduced a unified design system to standardize components, ensuring a cohesive brand and user experience.
•The system streamlined workflows, reducing design time and improving usability across all platforms.
•Engineers and designers now collaborate more efficiently with shared components, clear documentation, and reusable patterns.
•Development is faster and more cost-effective, with fewer errors, improved scalability, and a more intuitive experience for users.
Objectives & key results
Ensure consistency with a unified design language and reusable components, Speed up design and development with a shared UI library, Improve collaboration through clear documentation and smooth handoffs.
90%
of GFG products are covered with components from the design system.
60%
time reduction in creating, editing and developing new designs
Design Process
Developing GFG design system involves collaboration between designers, engineers, and product managers (PMs). Each group brings valuable insights and expertise, ensuring that the design system is comprehensive, practical, and aligned with both user needs and technical capabilities.
Foundation
Typography
Nunito is a balanced sans serif font with smooth, rounded terminals, designed primarily for display but also suitable for text. Its versatility makes it ideal for use across the web on desktops, laptops, and mobile devices, ensuring a clean, modern look on all platforms.
Colors
GFG color palette is a carefully chosen set of colors that are used consistently throughout GFG products to create a unified and cohesive visual identity. (All colors support dark mode)
Breakpoints
Breakpoints are screen size markers where layout and design adapt for the best user experience. They ensure content looks and works well across different devices.
Spacing
The consistent and intentional use of a spacing system ensures a more harmonious user experience. It establishes a solid foundation for responsive design and customizable UI density, enhancing the overall quality and accessibility of our products.
Iconography
GFG design system integrates custom icons and feather icon packs, that can scale to any size needed.
Base components
Buttons
Buttons are interactive elements designed to trigger actions. GFG buttons come in 3 sizes(Medium-default), 5 variants, and support 5 different states, offering flexibility for various use cases.
Inputs
Inputs are available in 3 sizes and feature 4 status indicators to reflect user interaction, along with specific states for error and success feedback.
Notification
The Notification component is an overlay that gives users feedback after an action has taken place and has a title with an optional content and close button.
