PROCESS

• AUDIT AND ANALISIS:

  • Conducted a full audit of the existing design library to identify inefficiencies. The analysis revealed hundreds of duplicated components created for different themes, contributing to design bloat and difficulty in maintenance.

• FIGMA VARIABLE IMPLEMENTATION:

  • Centralized all components into one master set.

  • Assigned properties like colors, spacing, sizing, and typography to Figma Variables, ensuring a consistent and scalable approach across all themes.

​

• CREATION OF ATOM VARIABLES:

  • Designed atom variables as the foundational building blocks of the theming system. These variables represented core design values such as:

  • Base Colors: The raw hex values used across different themes.

  • Base Spacing and Sizing Units: Standardized dimensions that could be reused consistently.

  • Typography Attributes: Default font families, sizes, and weights.

These atom variables served as universal constants, providing a robust framework for consistency across all themes.

​

• TOKEN CREATION USING ATOM VARIABLES:

  • Built a layered token system by assigning atom variables as values for design tokens:

    • Colors: Tokens like Primary Button Color and Background Color inherited values from base color atom variables.

    • Spacing and Sizing: Tokens such as Card Padding and Button Height were linked to base spacing and sizing atom variables.

    • Typography: Tokens like Heading Font and Body Text Size derived their values from typography atom variables.

This structure allowed tokens to dynamically update when atom variables changed, ensuring consistency across themes.

​

• TESTING AND VALIDATION:

  • Tested the system with multiple retailer themes to ensure smooth transitions between modes.

  • Conducted internal workshops to train designers on using the new system effectively.

OUTCOMES

• Massive Reduction in Asset Complexity:

  • The number of component variants decreased by 80%, consolidating multiple redundant assets into a single, versatile component system powered by variables and tokens.

• Streamlined Workflow:

  • Time spent creating and maintaining themes for new grocery retailers dropped by 70%, allowing designers to focus on higher-value tasks rather than repetitive work.

• Scalable Theming Framework:

  • The system now supports an unlimited number of retailer themes by simply updating token values without requiring additional components or duplication.

  • Retailers can now easily customize their apps to their branding, ensuring consistent alignment with their identities across all touchpoints.

• Improved Accuracy and Consistency:

  • By automating the application of design properties through atom variables and tokens, errors and inconsistencies across themes were reduced by 90%.

• Designer Empowerment and Satisfaction:

  • Internal surveys showed a 30% increase in designer satisfaction, as the new system provided a more efficient, flexible, and intuitive workflow.

  • Designers appreciated the real-time preview feature in Figma, which allowed them to test and validate themes dynamically.

• Cross-Team Alignment:

  • Developers benefitted from a clear, tokenized system that could be easily exported into development workflows, reducing the back-and-forth during implementation.

REFLECTION

​

WHAT WORKED WELL:

• Implementation of Figma Variables and Atom Variables: Centralizing design properties allowed for unparalleled flexibility and scalability. This foundation not only streamlined theming but also future-proofed the design system.

• Collaborative Process: Working closely with designers, developers, and product stakeholders ensured the new system aligned with both design and technical needs.

• Dynamic Preview: The ability to toggle between themes in real time was a game-changer for both efficiency and quality control.

​

CHALLENGES FACED:

• Legacy Component Migration: Transitioning hundreds of components into a variable-driven system required meticulous planning and a significant time investment.

• Learning Curve: The team initially faced a steep learning curve in adopting the new system, but internal training and documentation helped smooth the transition.

​

FUTURE OPORTUNITIES:

• Dynamic Typography Tokens: Expanding the system to allow for finer control of font properties such as kerning and line-height across themes.

• Developer Integration: Building an automated pipeline to export design tokens directly into code (e.g., JSON, CSS) to further streamline the handoff process.

• Performance Testing: Ensuring that theming updates are optimized for performance across all platforms, particularly mobile devices.

​

KEY TAKEAWAY

​

This project demonstrated the power of a modular and tokenized design system, not just for enhancing scalability but also for empowering teams and improving the end-user experience. It highlighted the importance of aligning design innovations with business needs while ensuring consistency and efficiency at every step.