Vouchers 4 Veggies

Providing low-income residents with access to fresh produce.

My Role

Lead Designer — Visual Design, Wireframing, Product Strategy, Interaction Design, Usability Testing, Handoff

Timeline

August ’22 - May ’23

Team

1 Designer, 5 Engineers, 1 PM

Tools

Figma

Overview

Vouchers 4 Veggies is a nonprofit that partners with community-based organizations to provide healthy food vouchers to residents. My team at Cal Blueprint built a mobile app to help streamline their current workflows.

As the lead designer, I worked closely with the nonprofit and my engineering team to design the app from zero to one, build a design system, and craft design documentation to assist in guaranteeing the long-term sustainability of the product.

INTRODUCTION

1 out of 5 low-income households report ZERO purchases of fruits and vegetables. Vouchers 4 Veggies is working to fix that.

Vouchers 4 Veggies has provided over 20,000 families in SF nutritious food choices through partnerships with 50+ San Francisco-based food stores.

Low-income residents are able to exchange vouchers funded by the nonprofit for fresh fruits and vegetables.

What is their current process workflow?

Their current process is manual and prone to errors, taking longer due to the use of physical vouchers.

Understanding our users

I spoke to four vendors to understand their pain points when dealing with vouchers. They all come from diverse backgrounds, with varying years of experience working with the nonprofit and serving as vendors.

45 y/o (he/him)

Vendor for 3 years

Partner with V4V for 1 year

38 y/o (he/him)

Vendor for 5 years

Partner with V4V for 3 years

45 y/o (he/him)

Vendor for 3 years

Partner with V4V for 1 year

45 y/o (he/him)

Vendor for 3 years

Partner with V4V for 1 year

KEY INSIGHTS

We learned that users are frustrated with how manual their current processes are.

Lengthy reimbursement process

It takes a long time for vendors to receive their reimbursement, as it involves admins physically mailing documents

Manual tracking

Admins must manually cross-reference vouchers with a messy and unorganized spreadsheet which is hard to navigate

Lots of room for human error

The manual process increases the potential for human error, such as lost vouchers, incorrect data entry, and delayed reimbursements

THE CHALLENGE

How might we streamline vendor payments to support their cash flow and small businesses, while simplifying processes for V4V admins?

How do I reduce cognitive overload?

A problem that I ran into was cognitive overload because the app was very text-heavy. I worked with my PM to understand what information was necessary.

Users only want to see the information that is most relevant to them.

After discussing with the nonprofit and my PM, I replaced the ID with the serial number and removed the date and time, since all vouchers were submitted within the same timeframe. I also added a delete option, providing users more control and flexibility. To address the text-heavy comments about the screen, I introduced color-coding, assigning each type of voucher a specific color, offering users a visual break.

A vendor’s personalized experience

Each vendor now has a personalized account in the system, reducing the risk of clerical errors. Previously, admins had to manually track each individual vendor, leading to a higher potential for mistakes and inefficiencies.

Add a voucher 3 different ways

Vendors can now add vouchers to invoices using a barcode, serial number, or range of vouchers. Previously, they had to mail physical paper vouchers to the nonprofit, leading to frequent issues like lost vouchers and long wait times due to the reliance on postal delivery.

Verify voucher submission

Vendors can now easily verify, edit, or delete vouchers directly on the reviewing invoices page, streamlining the process. Previously, they had to manually double-check each voucher before mailing it to the nonprofit, which was time-consuming and added unnecessary overhead.

Navigate through invoices

Vendors can now efficiently sort and filter invoices by various criteria and easily see which ones have been paid. Previously, they had to sift through an unorganized Google Sheet and frequently contact the admin to check the status, causing frustration and delays.

WRAPPING UP

Takeaways

Scope creep is natural

Around three-quarters of the way through the project, the nonprofit significantly shifted the project scope. I quickly adapted and iterated on my existing designs to align with the new direction. This experience taught me the importance of being flexible and prepared to pivot when necessary.

Always consult your stakeholders

I had the opportunity to conduct multiple usability tests throughout the project, gaining insights into how both users and non-users interact with the product. This was essential for obtaining an objective third-party perspective on the existing workflows within the app.