blue gradient

Design Log: Zip Experiments and Wins

9 min read

Posted 3 months ago

Last tended to 2 months ago

I've worked full-time at Zip since November, 2021. During that time I've lead design for all "shopping" experiences within the Zip ecosystem.

This translates to my being responsible for all flows a user may interact with on their journey to complete a purchase. This includes onboarding, browsing, paying, then paying again. As far as touchpoints, I spend the vast majority of my time in the mobile iOS app but my work touches our website, browser extension, and checkout integration as well.

This page stands a running and often updated log of the many tests, experiments, and net-new features I've shipped during my time at Zip. All design work on this page is lead, designed and delivered by myself unless otherwise stated. I'll go into some further context for those interested but feel free to skip ahead to the work.

What is Zip?

Zip is a leading international buy-now, pay-later (BNPL) based out of Australia. Following the 2020 aquisition of Quadpay, Zip embarked on it's US journey. Zip's US product helps users split any purchase into 4 and now 8 installments.

Design at Zip

Zip's design team is small and scrappy. The 5 of us cover our entire US product ecosystem.

In practice we aim to be embedded on different agile squads that work on various parts of our product ecosystem. However, given the size of our team we often jump in and out of other squads in order to deliver work.

We also crit twice a week. Every project is at least slightly impacted by every person on this team.

Zip team structure
Our otherwise flat design team is lead by our director, Clay.

Understanding the Zip user

At Zip, we have several tools to help us understand our users. We often leverage UserTesting.com to regularly run both moderated and un-moderated remote users tests, we use Fullstory to view active user sessions, and we use Amplitude to run A/B tests. Additionally, we have a general research team that runs in-person deep-dives.

The effects of these tools are greater than anticipated. Not only do they help us form a clear picture of our user, these tools help validate our team's design decisions internally.

Zip users are purchase-aware shoppers. They're are often female, age 22-45, and live in a metropolitan area. They're using Zip for large planned purchased and frequent online shopping, this includes everything from groceries to the monthly household item restock. Zip users have goals. They want to ugpgrade their home appliances, and plan family vacations.

"

I am currently expecting my first baby in 8 weeks and I was really stressing over how I was going to buy everything I needed...

This has been a lifesaver for me and now I have everything I need for this little bundle of joy! I'm so happy with this app, plus I like how I can pay ahead of time if I wanted to.

- Real Zip User
"

Zip has helped me purchase food at a grocery store with a low payment plan. I’m so happy.

You helped me feed my family. Thank you, Zip! - Real Zip User

Zip is a valuable tool for our users. As an organization, we take this seriously. All of the work below keeps these users in mind throughout the entirety of the design process.

New User Checklist

Role

Product Design Lead

Status

Live - 100% of users

Timeline

6 wks, design-production

impact

+10% in-store new-user activation

Developed a new, widely adopted onboarding pattern

New user checklist was a successful onboarding experiment focused on teaching users about the Zip app through a series of progressive onboarding tasks. It was ran against our previous static onboarding experience.

The fundamental assumption I made was that new-users would be more valuable to Zip if they knew how to better use the app. Moreover, that the best approach to user education is to let users learn through doing.

New User Checklist Prototype - for demonstration only

Pay in 8

Role

Product Design Lead - represented design in x-functional meetings, wrote and ran user tests, presented designs and earned stakeholder buy-in, ideated and defined product vision, refined and delivered designs through Engineering and QA.

Status

Rollout ~1500 users

Timeline

24 wks, design-production

impact

$

Enabled a new spending vertical

Developed several new, widely adopted payment patterns

Represented design on a high visibility, high impact project

Essentially, Pay in 8 was/is the first extension of on our core product at Zip. Prior to this launch, Zip only allowed users to split purchases into 4 installments over 6 weeks. With the launch of Pay in 8, users are now able to split purchase in 4 or 8 installments that can be paid back over up to 16 weeks.

Pay in 8 was one of the largest and most ambitious single pieces of work Zip as an organization has set out to complete. This intiative touched every part of our organization cross-functionally and I had the honor/pleasure of leading the design work. I was supported by Clay and Jerry and their work on Pay in 8's effects on Spending Power in the app. My design contributions were focused leading design meetings, sharing out work, and designing the purchasing experience.

We had an essential question to answer: "How will users be able to purchase with Pay in 8?" And it was my job to answer.

Pay in 8 Shopping Flow Prototype - indicative of production

Categories

Role

Product Designer

Status

Live - 100% of users

Timeline

6 wks, design-production

impact

+8% new-user activation

The categories UI experiment was a design emergent initiative that we were able to slate into our team roadmap because of some extra eng capacity. The design team came together to generate ideas around what might be easy wins in case we had the opportunity to put some engineering capacity towards design led intiatives. One of the initiatives we brainstormed was showing some love to our categories experience.

Categories module before vs after

At Zip, one of our largest user challenges is communicating our "pay anywhere" value prop. Zip's main product is a one-time virtual card that can be used anywhere that excepts Visa. But due to legal and compliance restrictions we can't actually use the term anywhere.

Naturally, we have a hard time communicating this aspect to users.

This is further muddied by the fact that our homepage is more or less a list of merchants. Affiliate revenue from the merchants in our app drive a lot of our bottom line. But, simply by listing where one can shop, a user might already perceive a fixed number of places to shop, which negatively impacts the user mental-model of anywhere.

One weapon in our arsenel to help communicate the concept of paying anywhere implicitlly is categories.

However, because of constant competition for homepage real-estate - affiliate placement, user communications, and new features - over time the categories component has become buried further and further down the page.

Thus, I hypothesized that by surfacing categories higher on the home page, we could boost conversion rates through the implicit communication of our value prop - paying anywhere. We assumed this would be particuliarly effective for new users.

Process

My arrival at this pattern is not heroic. This was the first design I put forward and it just worked. It's a fairly safe pattern becasue of it's ubiquity.

During the design process I was able to pull forward many different instaces of apps using simmilar patterns for search. Categorical filters and/or search are even a key part of this site's homepage.

I knew I wanted categories to be near our search input but they needed to take a different shape. One consideration to keep in mind while designing was how these category components might impact affiliate revenue by pushing merchants down the page. Thus it was important for each category component to be as streamlined as possible to the point that they still maintained clear accessbility.

After, working through the touch point itself I needed to determine the actual content. Many people had input. The final result was a collaboration between myself, my PM, my design director, the affiliate lead, and product marketing.

I balanced a proper order with making sure the categories overflowed the container to communicate horizontal scrolling to the user.

More coming soon

I'll be finishing this soon. Feel free to shoot me message if you'd like me to finish sooner.