Pigeonly helps inmates stay connected with family by providing them simple ways to receive hard-copy photographs and place inexpensive long-distance phone calls.

CHALLENGE

Initially I was tasked with adding new functionality in the payment method flow that allowed users to add funds via the MoneyCard.
Once I started the project, I began to uncover interactive pain points.
I received permission to execute a site audit and also suggest design solutions to provide a frictionless checkout experience.

Original

UX & DESIGN AUDIT

Page Layout

  • Long one-page

Visual Design

  • Inconsistent button sizing and styling
  • Visual style needs contrast and refining
  • Inconsistent formatting

Forms & Data Entry

  • Lacked visual feedback
  • Inputs, select menus not touch friendly
  • Issues with adding/removing notes
  • Adding coupon codes functionality not efficient

Help, Feedback, & Error Tolerance

  • Unclear alerts, success, errors, warnings, and validations
  • Not obvious when and where an error has occurred

USER FLOW

To 'checkout', Users must have funds in their wallet. The Checkout page does not display the wallet balance, so the Users are unclear of their balance.

  • The Checkout page formerly displayed the wallet balance. The balance redirected Users to where they can replenish funds.
  • Redirect functionality was removed due to Dev issues - which resulted in rage clicks/taps from Users
  • Users are now entering checkout flow without knowledge of current wallet balance
  • Warning of 'low balance' is not strong - Users are stuck with disabled 'Checkout' button.

To prevent dropout and to get Users to checkout straight away, I came up with a user flow that prevented Users from entering the checkout flow when there aren't any funds available in their 'wallet'.

Now, Users can manage their money outside of the checkout flow and when checking out, they can focus on the task at hand.

No bandwidth for A/B testing. Continued with current user flow and added large visual indicator that notified Users of low balance.

WIREFRAME

DESIGN SAMPLES

HIGH FIDELITY PROTOTYPE

Checkout & Confirmation

Individual flow of user checking out and reaching the confirmation screen.

Add Coupon Code & Funds to Wallet

Individual flow of user adding a coupon code, adding funds to their wallet (and checking out), and reaching the confirmation screen.

Add and Remove Note

Individual flow of user adding and removing notes.