Shopify POS
React Native design system powering point-of-sale for millions of merchants.
Overview
Led the design system team for Shopify's React Native Point of Sale application, building a comprehensive component library that unified the mobile experience across iOS and Android. Drove adoption across multiple product teams and established patterns for accessibility, theming, and performance.
Key Results
Unified design system adopted by X+ product teams
Reduced UI inconsistencies by X%
Improved developer velocity by X% through reusable components
Case Study
The Problem
Shopify's Point of Sale app had grown organically over several years. Multiple teams were building features independently, leading to inconsistent UI patterns, duplicated components, and accessibility gaps. Merchants were experiencing a fragmented interface that didn't feel like a cohesive product.
The Approach
I was brought on to lead the design system initiative — a cross-cutting effort to unify the POS experience. The approach was:
- Audit — cataloged every component, pattern, and interaction across the app
- Consolidate — identified the canonical version of each pattern
- Build — created a comprehensive component library with proper APIs
- Migrate — worked with product teams to adopt system components
- Govern — established processes for contributing to and evolving the system
Implementation
The technical foundation was built on:
- React Native with TypeScript for type-safe component APIs
- Storybook for interactive documentation and visual testing
- Custom theming engine supporting light/dark modes and merchant branding
- Automated accessibility testing integrated into CI
- Codemods for automated migration from legacy components
Key architectural decisions:
- Compound component patterns for complex components (Select, Menu, Form)
- Render prop APIs for maximum flexibility
- Token-based design tokens shared between code and Figma
- Automated visual regression testing using Chromatic
Results
- Unified design system adopted by X+ product teams
- Reduced UI inconsistencies by X% (measured via automated audits)
- Improved developer velocity by X% for new feature development
- Accessibility compliance improved from X% to X% (WCAG 2.1 AA)
- Reduced bundle size by X% through component deduplication
What I'd Do Next
- Invest in a design token pipeline that syncs directly from Figma
- Build a component usage analytics dashboard
- Create interactive migration guides for each legacy pattern
- Explore server-driven UI patterns for faster iteration