Annika Susan Mammen
UX designer

Vendor Pay

A Mobile-First Approach

Image alt tag

Goal and Challenge 

The Problem Statement

The intention of this feature is to make it easy for landlords to pay their vendors and for vendors to collect these payments using the Zibo platform.

What was the challenge?

On the landlord side, the biggest hurdle we had to overcome was to create a design that was simple enough for users to understand the difference between sending money to another account, merchant, and vendor.

On the vendor side, we realised that vendors do not want to create a new Zibo account for payment collection. To overcome this, we made a guest checkout process. The vendor would receive an invite from the landlord by text or email. The vendor would have to enter a verification code which had been sent to collect their payment.

Tools: Figma

Duration: 2-week sprint

Zibo- VendorPay

These are three key steps that enable a landlord to pay their vendors

The first screen was one of the many ideas on where this feature will live on the Zibo platform.

The second screen explores an idea where previewing an invite to the vendor and generating an invoice are merged into a single step. Later iterations allow the landlord to choose a bank account for that transaction and assign it to a property and expense category.

The third screen allows the vendor to view all pending payments and get a quick summary on each.

Why is this important?

Landlord

  • Landlords would like to track all vendor payments and organise these transactions across their properties.

  • Landlords would like all transactions in one place rather than import information from various payment methods

  • Consolidated invoices help landlords prepare their tax documents. This will help them maximize any tax deductions from their properties

Vendor

  • Vendors would like to be paid faster. Especially when they hire sub-contractors and need to pay them immediately.

  • Vendors are currently receiving payments through multiple payment apps, cash, and checks. Consolidating their payments will help them organise their transactions

  • Vendors want to organise their invoices so that they do not miss any payments.

Zibo- VendorPay
Zibo- VendorPay
Zibo- VendorPay

These are the final versions of the three key steps that enable a landlord to pay a vendor

The first screen shows that this feature lives under the 'Send Money' button. This will allow the VendorPay function to be scalable by including the option to send payments to merchants (paying bills) or transferring money from one bank account to another.

The second screen shows how this feature allows for multiple payment methods and provides an easy way for landlords to categorise and manage their transactions

The third screen is on the vendor experience side. It only shows one payment, unlike the previous version. Since the vendor is signing in as a guest, the current back end functionality only allows for one payment to be viewed at a time.

Zibo- VendorPay

Designing from feedback

Feedback 1

Landlords would like to know what the vendor experience would be like before making their vendors use it.

After sending a payment to a vendor, the landlord is presented with a success screen that clearly states the next steps for both the landlord and the vendor. Understanding the process builds more trust when using this feature.

Zibo- VendorPay

Feedback 2

Will the process of paying a vendor be more seamless, the more times it is used?

Contact information will be saved once a vendor is paid. The landlord has the ability to add more recipients if necessary. In this MVP version of VendorPay, having a contact page was out of scope.

Zibo- VendorPay

Feedback 3

Some vendors insist on landlords paying by check or cash.

In the vendor experience, the vendor will receive the option to get paid via check or by an ACH transfer.

Landlord Experience
Vendor Experience
Results
Ideation of a contact page

Ideation of a contact page

The challenge

This project was challenging since the turnover time was very quick. We had 2 weeks to design a brand new feature from start to finish. Due to the time constraint, we had to create an MVP version and sacrifice some features. We were able to show our prototype to landlords for feedback but did not have time to show it to vendors (however, we were able to speak to them during the discovery phase).

Things I would improve on

  • Contact page- Allows landlords to manage their contacts and create favourite contacts

  • Request money- Allows both landlords and vendors to send an invoice to each other

  • Improve visuals of success screens

  • Allow edits to the transactions before they are collected.

11
Iterations
32
Screens
14
cups of coffee