Payments

Zitti
Case Study
summary rounded corners
review and pay with paper check modal on desktop

Zitti (acquired by a Fortune 500 company) is a mobile and desktop app that streamlines back-of-house operations for restaurateurs. Operators can pay their bills, compare food costs, and place orders directly with their vendors through the app.

Team

pencil
Design
Perrin Legg
brackets
Engineering
Matt Hanlon
Emerson Pope
Greg Dasney
Kevin Turner
Product Management
Andrew Young

My role

I joined Zitti as its first hire, starting as a Senior Product Designer. Within a few months, I transitioned to Director of Product Design, leading design and shaping a user-centered product vision and strategy that scaled the platform from 0 to over 200 restaurants, 150 vendors, and 150,000 products.

Challenge

Many small, independent restaurants spend hours each week managing their bills. To pay their vendor's invoices, operators must log into each vendor’s portal (if one exists), or, manually cut, sign, and mail checks. With some independent restaurants having as many as 20 vendors with unique payment terms and multiple weekly deliveries, those processes are tedious and make account reconciliation difficult.

Recognizing these challenges, we saw an opportunity to develop a payment solution that allowed operators to pay their bills strategically to maximize their cash flow while streamlining the process and improving transparency.

Research & discovery

Competitive Analysis

We conducted a competitive analysis of payment platforms like Bill.com, Settle, Melio, and PlateIQ to understand how Zitti could uniquely serve restaurant operators. While PlateIQ was the only option tailored to the restaurant industry, it included many features our users with experience with the software found unnecessary, adding complexity rather than value. In contrast, other platforms lacked industry-specific functionality altogether.

competitive analysis notes

User Insights

During user interviews, operators shared that they were particularly  frustrated with the inefficiencies of paying their bills with checks, with one manager, Anil, noting that their intern’s least favorite task was “licking stamps.” Operators also lamented that their current processes made reconciliation time-consuming, making it difficult to create timely P&L reports.

Overall, users were enthusiastic about features that included automation, bulk payments, and clearer, consolidated visibility into their payment status.

Perrin at a whiteboard mapping out a user flow

Design & Development

Ecommerce-Inspired Payment Flow

While many of our users were not used to other back-office technology, they were all accustomed to eCommerce checkout processes, so we aimed to create a bill payment experience that felt just as intuitive and simple to use: users select one or more invoices and then choose how and when to pay. As payments and payouts progress, users view clear status updates. The vendor is automatically notified via email with details to help reconciliation on their end whenever a payment begins processing.

2 step pay wireframe
flow diagram

Smart Scheduling

We initially considered allowing users to select a specific date to schedule a payment, however, given varying vendor payment terms—ranging from net 7, 15, or 30 days—this approach would have required complex calculations from users. Ultimately, we created a "pay by due date" feature that removes the calculation burden from users by automatically scheduling payments to arrive on time, optimizing cash flow by keeping funds in the restaurant’s account as long as possible.

selected invoices on invoice landing page on mobile
review and pay screen
selecting payment schedule
pay by due date
Prototype of early designs
desktop - early design

Feedback & iterations

Positive User Feedback

After launching the payments feature, we received overwhelmingly positive feedback. One operator, Carlo, remarked, “So far it’s been a blessing. I never thought not writing checks would be so great.” Users found the process intuitive, and both restaurants and vendors appreciated the batch payments feature and clear email communication, which made reconciliation easier.

“So far it’s been a blessing. I never thought not writing checks would be so great.”
Carlo DiCicco
Owner, DiCicco's Italian Restaurant

UI Updates for Usability & Brand

As Zitti’s branding evolved and styling became more refined, we made subtle UI updates within this experience to ensure brand consistency, like adding rounded borders to the payment summary and around each invoice card.

We observed that the fixed 'Pay' button on the 'Review and Pay' screen prompted many users to complete payments before viewing the invoice summary, often below the fold on mobile. While functional, we felt it was essential for users to review the summary first. User testing confirmed that scrolling to the summary was not burdensome, so we relocated the 'Pay' button to the bottom of the page.

summary rounded corners
invoice cards with rounded borders

Easy Batch Payments

An unexpected finding was that some restaurants received multiple invoices from the same vendor on the same day—such as frequent bread deliveries—or preferred to pay multiple invoices at once, regardless of due dates, using the 'Pay Now' feature. To streamline reconciliation for both restaurant operators and vendors, we implemented batch payments and highlighted it clearly within the UI and payments emails for added clarity.

Review and pay final design screen step 2
ACH mobile email
vendor reconciliation email

Supporting All Vendors

While restaurant operators appreciated not cutting checks and valued the visibility of ACH, some small vendors, were hesitant to change their processes. To work towards ensuring restaurants could pay all vendors through our platform, we began the process of incorporating checks. After user interviews revealed a preference for physical over eChecks, we partnered with a provider to pull funds directly from users’ bank accounts. Though we had less insight into when checks were cashed, users found that the new “mailed” status offered sufficient clarity. The feature launched successfully, removing the hassle of cutting and mailing checks for users.

research for check project in Figjam
review and pay mobile with checks selected
review and pay mobile with checks summary
review and pay with paper check modal on desktop
mobile enable checks
business information
check signature
confirmation
enable checks desktop
enable checks business details page on desktop
enable checks, check signature on desktop
enable checks, confirmation page

Outcome

The new payment features significantly streamlined the payment process for restaurant operators, giving them more insights into their spending and greater control over their cash flow.

Designed in Figma, built in Webflow
© 2024