Clover Network Inc., - Sprout Design System

Overview

The Sprout Design System empowers Clover’s teams to create consistent, scalable, and accessible experiences across mobile and desktop. I led the development and iteration of the system, supporting tools for point-of-sale, reporting, and business management. The system ensures seamless integration across Clover’s product suite, from Clover Go to web dashboards.

 

Process

I collaborated with product managers, engineers, and designers to create a source of truth for design, focusing on flexibility and scalability. We established clear design standards and used a component brief template to ensure team consistency and alignment. The process is iterative, with a focus on accessibility. We prioritize components based on requests from multiple teams, tracking progress through Jira. Regular design reviews ensure continuous feedback and improvement.

Development and Storybook Execution

We use Code Connect to synchronize Storybook components with Figma, ensuring alignment between design and development. Greenhouse was created to allow teams to view components in the context of the Clover dashboard, providing a more accurate picture of their functionality.

Impact

The Sprout Design System has significantly improved Clover’s products by:

  • Ensuring Consistency across Clover Go and the web dashboard, delivering a unified user experience.

  • Accelerating Development with reusable components and clear guidelines, reducing time-to-market for new features.

  • Enhancing Accessibility by meeting WCAG 2.1 standards, making products more inclusive.

  • Improving Usability for merchants, resulting in a smoother, more efficient experience across devices.