Introduction
Artfinder, a global marketplace connecting artists with art lovers, faced challenges with its existing design system. Migrating from Invision to Figma presented an opportunity to not only modernize the platform but also address critical issues in scalability, accessibility, and consistency. As the lead designer tasked with rebuilding the design system, I spearheaded a comprehensive overhaul, focusing on foundational principles and user-centered design. This case study details the process of transforming Artfinder's design language, highlighting the challenges, solutions, and the significant impact of a robust design system.
Challenges:
Upon joining Artfinder, I quickly identified several key areas requiring immediate attention:
Outdated Grid System: The existing 5px grid system hindered the creation of intuitive and scalable interfaces.
Faulty Responsive Grid Columns: Inconsistent responsive behavior across different screen sizes.
Accessibility Concerns: The primary color palette and specific component designs failed to meet web accessibility standards, particularly the primary CTA.
Lack of Structured Tokens: Color and typography tokens lacked a clear hierarchy and organization, leading to inconsistencies.
Platform Migration: Transitioning from Invision to Figma required a complete rebuild of the component library.
Overview
Faced with a flawed legacy design system, I leveraged deep technical expertise in grid systems, tokenization, and accessibility to architect a robust, scalable solution in Figma, effectively addressing critical usability and development challenges.
Outcomes
Improved Accessibility
Enhanced Scalability and Consistency with 4px grid system
Future Proofing
Streamlined Workflow
Process & Solutions
1 - Establishing a Foundational Grid
I advocated for and successfully implemented a 4px grid system, aligning with industry best practices and enabling more precise and scalable design.
This change provided a more intuitive spacing system, leading to more responsive and consistent components.
2 - Developing a Robust Token System
I restructured the color palette, creating a clear hierarchy of primitive and semantic color tokens. This addressed accessibility issues and ensured consistent color usage across the platform. Specifically, I adjusted the primary color to pass accessibility standards.
Similar principles were applied to typography, establishing primitive and style tokens for consistent text rendering
Created size primitive tokens to be used by spacing, border radius and elevation.
2 - Addressing Accessibility
The primary CTA was redesigned to meet accessibility standards by introducing a semantic typography token with a bold font weight on the button, ensuring sufficient contrast.
Error messages and other components were reviewed and updated to comply with WCAG guidelines.
3 - Building the Component Library in Figma
Following the atomic design principle, I meticulously built the component library in Figma, ensuring each component was scalable, reusable, and accessible.
4 - Collaboration and Communication
I facilitated regular meetings with the development team to ensure alignment on design decisions and technical feasibility. This collaborative approach was crucial for a smooth transition.
Conclusion
Rebuilding Artfinder's design system was a challenging but rewarding experience. By focusing on foundational principles, accessibility, and collaboration, I successfully modernized the platform and created a robust design system that will serve Artfinder for years to come. This project demonstrates the power of a well-structured design system in creating a consistent, accessible, and scalable user experience.