Design system + component library

Overview

Company: Zip (BNPL service)
Role: Senior Product Designer
Goal: Make checkout more consistent, intuitive, and easier to maintain.
Collaboration: Worked with product, engineering, and cross-functional teams to build and align the system.

Checkout Design prior to redesign

The checkout experience at Zip had been developed by different teams over time, leading to fragmentation across codebases and user flows. I recognized that as new products and use cases were developed, the lack of a unified system made it difficult to scale and created unnecessary friction for customers.

The problem

There was no single source of truth—just a handful of one-off screens, mismatched styles, and duplicate components that were solving the same problems in slightly different ways. As the checkout experience started expanding into new platforms and user types, the inconsistencies became more obvious. We were starting to see user confusion, design debt, and engineering inefficiencies pile up.

My role and approach

I took the lead on the design system side: creating a flexible but opinionated component library that could serve every variation of the checkout flow. This included designing scalable components, writing thorough documentation, and making sure every state and interaction was accounted for. I spent time mapping the full end-to-end experience, identifying the shared patterns and where things were diverging unnecessarily.

My updated design.

We also did a round of user testing early on to validate which parts of the flow were most confusing. That gave us the confidence to simplify the architecture—breaking the checkout into smaller, more digestible steps and using UI patterns like modals and collapsible containers to prevent information overload.

Collaboration

This wasn’t a solo effort. I worked closely with the PM for checkout and a few engineers to get the interaction details and animations just right. We also looped in folks from the marketing, merchant, and compliance teams to make sure all requirements were covered. Having everyone at the table early helped us avoid surprises later.

A little peek at the full breadth of the design system's component library.

The outcome

We ran a bunch of A/B tests to compare the new flows against the old ones, and we saw strong improvements in both clarity and completion rates. We also cut the number of custom components engineers had to build from scratch, which made the whole thing easier to maintain and scale.

Takeaway

Collaborating early and often with product managers across different pods was an integral part of making this project successful—it helped align priorities, surface edge cases, and keep the system flexible enough to support a variety of needs.

Even though I moved on before the full rollout was finished, the system I helped put in place set the foundation for the future. It gave the team a shared language to build on and made the checkout experience more cohesive and flexible for what was coming next.