Problem

SpotOn was expanding beyond marketing into payments, and the experience across its ecosystem had become fragmented. Product interfaces, mobile experiences, and marketing collateral were being created across multiple surfaces without a single shared system to guide them.

The challenge was not only to create consistency in the present, but to build a foundation that could support where the company was going next. The system needed to work across client-facing and merchant-facing experiences, span web and mobile, and remain flexible enough to support future growth.

Outcome

Built a 0–1 cross-platform design system that supported all client-facing and merchant-facing web products, client-facing and merchant-facing iOS and Android products, and marketing collateral.

The result was a shared visual and structural foundation that brought greater consistency across product and brand touchpoints while giving teams a scalable system to build from as SpotOn continued evolving into a payments platform.

Solution

Instead of designing only for what the product was at that moment, I focused on what it could become.

The system was built with scalability in mind, using a consistent mathematical framework based on multiples of four to define spacing, sizing, and rhythm across interfaces. That approach made it possible to model both negative space and concrete space with the same logic, creating a system that could scale cleanly across product surfaces, devices, and formats.

By grounding the library in shared units, typography, color, and layout rules, I created a design language that could stretch across web, iOS, Android, and marketing applications without losing consistency. The goal was not to create a static set of components, but a flexible foundation that could adapt as the business, platform, and product offering continued to grow.