Shopify × Melio · 2023

Paying bills, right inside the Shopify admin.

I was the design manager, leading the team of product designers who built it.

Role: Design manager
Team: Product designers, working in pairs
Partners: Shopify, Melio
Shipped: Phase 1 on the partner date. Gmail sync on Nov 14, 2023.

Bill Pay inside the Shopify admin: a list of bills with vendors, totals, due dates and statuses

In short

Shopify Bill Pay lets merchants schedule and pay business bills without leaving their Shopify admin. Melio built it, Shopify owns the platform, and it had to feel like Shopify from the first click.

How I led

I managed the design team. I set direction, coached through 1:1s and critique, approved every handoff and kept design a step ahead of engineering. My designers presented their own work to Shopify every week.

The challenge

Build our product inside someone else's house.

Their system

Shopify's Polaris has strict rules for design, content, components and patterns.

Money on the line

Verification and failed payments had to be clear, and right, every time.

2 companies, 1 date

Owners at Melio and at Shopify, and a launch date set together.

From scratch

Melio's page-by-page wizards didn't fit Shopify's one-page patterns.

How I led

A team, 2 companies and 1 date.

How I set up the team, approved the work, held the timeline, made the hard call and kept everyone working together.

01 · The team

Pairs on each phase, so no one designed alone.

I split the team into pairs, 1 pair per phase. Pairs checked each other's work every week, and I moved between them to keep the phases consistent.

Design manager
Direction, critique, approvals

Phase 1Core bill pay flows, rebuilt in PolarisWeekly peer review

Phase 2Onboarding, Gmail sync and the first-time experienceWeekly peer review

02 · Approvals

3 gates before anything reached Shopify or engineering.

Work moved forward only after it passed all 3. That kept the weekly Shopify reviews about real questions, not missed basics.

Weekly critique against our goals and Polaris
A shared Polaris checklist for components, content and patterns
My review of specs at handoff, and QA of builds before release

Weekly critiqueThe team reviews it against goals and Polaris

Passed

Polaris checklistComponents, content and patterns

Passed

Dev handoff reviewI review specs, then QA the build

Approved

Shopify weekly reviewEngineeringShip

03 · The timeline

Phases, design ahead of dev, and a status every week.

I cut the scope into phases so phase 1 could ship on the date we set with Shopify. Design ran 1 to 2 sprints ahead of engineering, so no one waited on a screen. Every week I sent leadership our status and risks.

Design

Phase 1

Phase 2

Engineering

Phase 1

Phase 2

Leadership

May 2023Kickoff

Phase 1On the partner date

Nov 14Gmail sync

Design 1 to 2 sprints ahead · a status every week

04 · The hard call

More scope, or the date? I kept the date.

Leadership wanted more in phase 1. I made the case to keep it to what a merchant needs to pay a bill, and moved the rest to phase 2. Phase 1 shipped on the partner date, and phase 2 got the room to be tested properly.

Phase 1

OnboardingAdd a billPay a billVendorsGmail importMore ways to capture bills

Phase 2

05 · Who I worked with

5 groups, each with a clear way in.

Each group knew when they'd see the work and what they owned. Shopify reviewed weekly, Melio product and engineering planned with us, compliance, risk and legal reviewed anything touching money, research and data told us what worked, and leadership got the weekly picture.

WeeklyShopify design and Polaris teamDesign reviews and Polaris guidance

Design team

Every sprintMelio PM and engineeringScope, specs, handoff and QA

Every testResearch and dataOnboarding tests and the KPIs: onboarded users, payments, bills, MAU

WeeklyLeadership and partnershipsStatus, risks and the partner date

Before money movesCompliance, risk and legalVerification, failed payments and what merchants are told

Polaris

We learned their system before drawing anything.

The team spent its first days reading and practicing Polaris, Shopify's rules for design, content, components and patterns. Then we agreed with Shopify on how we'd work.

01Redefine

Document every existing Melio feature we'd rebuild.

02Review with Shopify

Weekly design reviews with Shopify's team.

03Iterate

Several rounds with stakeholders from both companies.

The Polaris design system's layout guidelines

The work

Melio's product, in Shopify's language.

Mapping phase 1

We mapped every phase 1 flow, from install to a paid bill, and marked each change it needed to fit Shopify.

Entry point
Step
Decision
Done
Behind the scenes

Onboarding

Marketing pageApp installationBill Pay dashboard, empty state

Add a bill

Bill Pay dashboard

ManuallyAdd detailsBill added to dashboard

File scanUpload file

Synced from inbox

Synced from QuickBooks

Details missing?

Add details

Bill added to dashboard

Single bill payment

Bill Pay dashboard, All or Unpaid tabBill already in dashboard?

Add bill

Bill view

Continue to schedule payment?

Bill in dashboard, Unpaid tab

Edit or confirm payment amount

ThenAdd payment methodAdd vendor receiving methodSet payment delivery timePayment in dashboard, Scheduled tab

Behind the scenesPayment scheduledPayment processedPayment processed successfully?

Payment in dashboard, Paid tab

Payment recovery

Add payment method

Opened from a single bill payment

CardAdd credit or debit card detailsAdd card holder detailsCard added

Bank account

Connect instantly (Plaid)Plaid connection flowBank connected

Verify with micro depositsAdd bank account and routing numberBank account setPending approval, confirm in 2 days

Add vendor receiving method

Opened from a single bill payment

Bank ACHAdd bank account and routing numberBank details set

Paper checkAdd delivery address detailsDelivery address added

Ask vendor for details (unilateral flow)Add vendor detailsEmail asking for details is sent to vendor

International wireInternational wire flow, below

Vendor side (unilateral)

When the vendor is asked for details

Email notification

Add bank account and routing numberBank details set

Add check delivery addressDelivery address added

International wire

Chosen as the vendor's receiving method

International wire as receiving methodVendor bank locationVendor international payment detailsVendor business details

ThenMerchant business detailsPurpose of paymentDelivery detailsPayment in dashboard

Payment recovery

When processing fails

Payment processing failedWhat failed?

Failed to collect

Failed to deliver

From Melio's wizard to Shopify's page

Melio paid a bill in a full-screen wizard: 1 step per screen, then the next. We kept the steps and the logic, and rebuilt the shell. In Shopify the same steps are cards on 1 page, inside the admin, so a merchant always sees what's done and what's next.

MelioA full-screen wizard, 1 step per screen

Shopify1 page in the admin, each step a card

A full-screen modalA page inside the admin, with Shopify's nav still there
1 step per screenEvery step on 1 page, as stacked cards
Back, back, back to fix a stepEdit on any finished card
Melio's own componentsPolaris cards, fields, banners and buttons

The shipped flow

In Polaris, with real data: the same steps, on 1 page, like the rest of the admin. Merchants already know how it works.

Making a payment on a single page in the Shopify admin — Making a payment, on 1 page

A payment's full details in a side view — A payment's full details

When money is on the line

Every bill has a state a merchant can trust. We designed verification and failed payments with compliance, risk and legal, so merchants always know what happened and what to do next.

Verification pendingWe're confirming the business before any money moves.

Payment failedWhat went wrong, and how to try again.

Pending vendorWaiting on the vendor's payment details.

ScheduledLeaves on the date the merchant set.

PaidDone, with the record kept.

Onboarding

Testing the first screen merchants see.

Over several months we tested the empty state. Gmail sync connects a merchant's inbox, imports bill attachments and keeps fetching new ones within seconds.

Nov 14, 2023 launchOnboarding screen · 50% of new usersDashboard banner · 10% of existing users

The Bill Pay empty state with an import banner — The dashboard banner

First steps with Bill Pay: import bills from Gmail or connect QuickBooks — The onboarding screen

Results

Merchants connected their inboxes.

15%more first-time merchants converted within 6 months, through onboarding work

23%connected Gmail from the onboarding entry point

12%connected Gmail across all entry points

27%of connected merchants had bills fetched

Gmail sync funnel

The first 3 steps of the funnel. Share of merchants who saw the entry point.

We called 10+ merchants with nothing fetched to check we hadn't missed anything. They had no open bills yet. Bills come in over time, so new bills arriving in the inbox should be a stronger hook than the first import.

We tracked onboarded users, completed payments, bills created and monthly active users from launch.

Phase 2

A first-time experience that sells automation.

Phase 2 introduces new merchants to every way Bill Pay captures bills on its own.

Pay business bills your way: choose how to get started

The import bills dialog with Gmail, QuickBooks and a forwarding address

The phase 2 bill list with imported bills

As a manager

What success looked like.

Phase 1 shipped on the partner date

Phases, design ahead of dev and weekly status kept the date we set with Shopify.

Shopify approved it with no rework

The 3 gates caught problems before Shopify's reviews did.

Designers grew, and got promoted

Owning a phase in a pair, with a growth plan behind it, gave designers real scope. Promotions followed.

Designers owned the room

They presented their own work to Shopify every week, and the partner trusted them to.

Looking back

What I'd do differently.

Compliance in the first flow map

Compliance, risk and legal reviewed everything that touched money. I'd bring them into the first flow map, not only the reviews before launch.

Measure the whole funnel from day 1

We judged Gmail sync by its first import, but the real hook is new bills over time. I'd set the long-term metrics before launch.

Rotate the pairs once

Each pair went deep on its phase. Rotating them once would have spread that knowledge, and the growth, across the whole team.