A design system built to flex ๐Ÿ’ช

As an online payment method, most users interact with Catch via merchant sites. However, our default Catch-branded UI components weren't meeting the needs of larger merchants. Partnering with Everlane's design team, we explored the impact of a more co-branded experience on their site. The outcome was a flexible design language that helped us launch with Everlane, unify our shopping experience and set us up for success with future partners.

My role

User research, prototyping, brand, UI design, design systems

Team

Product Design Lead (me), Product Designer, PM

Timeline

2 months

Background

70% of users discover Catch while shopping on merchant sites.

Upfunnel messaging ๐Ÿ›๏ธ

Dynamic messaging on the product detail page (PDP), cart and merchant checkout highlight the benefits of paying with Catch.

Checkout experience ๐Ÿ’ธ

The checkout experience is Catch's core product, letting users connect a payment method and earn rewards on every purchase.

Catch offered one look on every merchant site. ย ๐Ÿ‘€

...but our default components didn't suit every brand. This led to custom requests, DIY hacks, broken interactions and a patchy user experience.

Problem

We needed a more configurable UI to keep it consistent at scale.

Users

โ€œ

โ€œI want Catch to be easy to find and use wherever I'm shopping.โ€

Leaving implementation up to merchants could lead to a very different experience on any given site, causing confusion and missed opportunities.

Merchants

โ€œ

โ€œI want Catch to be cohesive with my brand and easy to maintain.โ€

In particular, larger merchants had expressed interest in a more "white label" version of Catch that they believed would increase loyalty and brand equity.

Catch

โ€œ

โ€œWe have to meet the needs of larger merchants in order to grow.โ€

A one-size fits all approach had worked for selling to small and medium d2c brands, but larger ones had more custom requirements to integrate.

Discovery

We worked closely with one merchant, Everlane, to explore the impact of co-branding.

Everlane's leadership was excited to integrate with Catch, and curious about creating an Everlane-branded payment method. Their fantastic design team was open to working with us on a solution.

We tested two different experiences with Everlane customers.

Two rounds of three user interviews helped us understand how different upfunnel and checkout treatments affected user perceptions and interest.

Round 1

Everlane branded

We hypothesized that replacing Catch branding with "Everpay" would draw increased interest and trust from Everlane shoppers. One challenge was how to bridge an Everlane-branded payment method with the normal Catch ecosystem without confusing users.

Round 2

Co-branded

We hypothesized that implementing the normal Catch experience, but swapping in native styles from Everlane's site (typeface, colors, etc) would offer similar benefits to a white label solution with lower risk of confusion.

After each round, we shared our findings with the Everlane team.

Clearer boundaries led to less confusion.

Removing Everpay branding let to fewer questions about who was doing what. Participants quickly understood that Catch was a payment method offered by Everlane. Nobody thought it was a credit card, which was the case with Everpay.

The co-branded experience felt just as seamless.

Despite removing Everpay branding, participants still felt that the checkout process was cohesive with the rest of their Everlane shopping experience.

Solution

Based on our research, we decided to move forward with the co-branded experience.

By making Catch touchpoints feel visually cohesive with the merchant brand, we were able to get the benefits of co-branding without the complexity of a white-labeled experience that still relied on the Catch ecosystem.

We created a design system for โ€œthemableโ€ upfunnel components.

To enable Everlane's and future integrations, Iย worked with our engineers to convert static upfunnel components into a system of dynamic widgets all made up of the same themable atoms.
Each widget had default configurations for merchants who wanted to change the theme without any code.
Realizing that some merchants wanted to change things like font size or typeface, we also built logic for each atom to automatically respond to additional customization.ย 

We also broke down our checkout experience into color tokens, which could map to any brand's palette.

By letting merchants apply their colors, typeface and other styles, we could offer them a co-branded experience without having to maintain any variations of our product architecture or flow.

Default Catch theme

Everlane theme

Outcomes

Our work helped set us up for success as we set out to integrate with new merchants.

Users

A more consistent experience โœ…

Although the Catch experience won't look exactly the same on every site, it will be constructed with the same building blocks โ€“ and it's more likely it will be there at all.

Merchants

Components that meet brand needs โœ…

Merchants that want Catch component to look more at home on their site now have basic theming tools, as well as the ability to customize further without breaking things or building their own components.

Catch

Tools to increase visbility and sell to larger brands โœ…

Upfunnel messaging is an important acquisition channel for Catch. Without configurability, we risked merchants removing it from their sites or not working with Catch at all.

It also enabled a successful launch with Everlane, quickly making them one of our most popular brands.

โ€œ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat commodo sapien. Dolutpat commodo sapien.โ€

Andrea Cevenini

Director, Product Design, Everlane

Next up:

Case study

CatchPass

Equitable rewards anywhere