Case Study: Building Artfinder’s Design System

Role: Senior Product Designer – Design Systems
Timeline: 8 weeks
Goal: Rebuild Artfinder’s design system to improve scalability, consistency, and accessibility.

Approach:

  • Audited existing design practices and identified accessibility failures

  • Shifted from a legacy 5px grid to a scalable 4px grid

  • Built a robust token-driven architecture for typography, colors, and spacing

  • Created a unified Figma component library with variants and constraints

  • Embedded accessibility principles from the start

Outcomes:

WCAG AA compliance for all primary CTAs
100% of core components rebuilt with tokens and accessibility baked in
4px grid adoption across every core screen
Faster developer handoff through structured tokens

Context

Sage, a leading provider of accounting software, observed that its mobile product detail pages (PDPs) were underperforming compared to desktop versions. With mobile traffic constituting over 60% of total visits, the company aimed to optimize the mobile PDP to improve user engagement and conversion rates.


Challenge

Artfinder’s design ecosystem had grown fragmented and inefficient:

  • A legacy 5px grid created inconsistency and spacing issues

  • Ad hoc tokens led to mismatched colors, typography, and sizing

  • Accessibility failures made critical CTAs hard to use for some audiences

  • Component libraries lacked structure, slowing design and dev workflows

These issues created design debt, slowed delivery, and risked compliance failures.


Research & Discovery

To define the right foundation, I:

  • Conducted a full audit of Artfinder’s Figma libraries and production UI

  • Ran accessibility checks across buttons, color contrast, and interactive states

  • Interviewed designers and engineers to identify friction in daily handoffs

  • Benchmarked against industry-standard systems (Material, Polaris, Atlassian)

Design Process

Audit & Diagnosis

  • Identified systemic spacing, color, and type inconsistencies

  • Logged accessibility failures for CTAs and text contrast

Foundation Rebuild

  • Introduced a 4px grid for cross-platform consistency

  • Defined design tokens for colors, typography, and spacing

Accessibility Integration

  • Redesigned buttons and CTAs to meet WCAG AA

  • Established guidelines for contrast, states, and touch targets

Component Library Construction

  • Rebuilt all core components with variants, constraints, and tokens

  • Documented patterns for consistent reuse

Roll-Out & Adoption

  • Delivered a unified Figma library to designers

  • Partnered with developers to embed tokens into codebase


Key UX Problems & Solutions

Problem: Inconsistent grid (5px legacy system)

  • Solution: Shifted to a scalable 4px grid.

  • Impact: Consistent spacing & alignment across all screens

Problem: Ad hoc tokens & styles

  • Solution: Introduced structured token architecture

  • Impact: Faster, more consistent handoffs

Problem: Accessibility failures on CTAs

  • Solution: Redesigned buttons with WCAG AA compliance

  • Impact: Inclusive design, reduced compliance risk

Problem: Fragmented component library

  • Solution: Rebuilt 100% of core components with constraints & variants

  • Impact: Scalable, unified design system

Conclusion

This project was about more than refreshing UI—it was about creating a foundation for scalable, accessible product growth. By shifting to a token-first mindset and embedding accessibility upfront, we ensured that Artfinder’s design system is future-proof and efficient for both designers and developers.

What I Learned:

  • A grid change seems small but unlocks huge system-wide consistency

  • Tokens are the bridge between design and engineering in scaling systems

  • Accessibility isn’t an afterthought—it must be designed into the foundation