INTERFACE DESIGN
AIRVEND
AirVend is a touchscreen credit card reader for vending machines. The payment confirmation page was cluttered and confusing. In this project, I redesigned the payment confirmation page to simplify the interface and make instructions clear.
Client
365 Retail Markets
Year
2017
Role
UX Design, User Testing
PROBLEM
GET YOUR SNACKS NOW
A new client informed us that his customers were having a difficult time understanding how to use our product. According to him, the payment confirmation page was a particularly difficult page for his customers to navigate.
RESEARCH
DIAGNOSE THE ISSUE
I called and spoke with the client about the issues his customers were facing. Turns out most of his vending machines were placed in a bar. We already knew the interface was slightly difficult to use, but it was particularly hard for tipsy people to figure out.
According to our client, the main complaint he heard from his customers was that the instructions were covered up. We realized that a simpler design could help these and other customers more easily complete the checkout process.
DESIGN REVIEW
ADDRESS THE ISSUE
To improve the design of the payment confirmation page, I took some time to critique the original design. There were a few major issues I found:
1. Two "Finished" buttons is redundant
2. Card approval message is unnecessary
3. Pop up window covers instructions
4. Timer is small and unnoticeable
IDEATE
BRAINSTORM A SOLUTION
Once I had identified a few problem areas on the original payment screen, I presented my findings to the lead developer. We then took a half hour to brainstorm some solutions to the issues. We spent the majority of our time at a whiteboard sketching and recording ideas.
ITERATE
TRIAL, ERROR,
TRIAL, SUCCESS?
After talking with my team, I continued to explore ideas in Sketch. I personally would have liked to further explore a design with a bar timer (shown in the second screen below). However, the mobile app version of this software already featured a round timer. In order to maintain a consistent design across platforms, the design with the round timer was chosen.
The last few iterations show a button feature. Several types of vending machines have simple button selections instead of a keypad. This design has now been built into a feature that allows the machine owner to decide what type of selection page to display.
IMPLEMENT
IMPROVEMENT DOESN'T
MEAN PERFECTION
Because it was a simplification of the current design, and incorporated several of the same elements from other AirVend interfaces, the developers were able to quickly and easily implement the new design.
After testing this new layout, we do have improved checkout times. But, I believe there's still more we can do to optimize this screen and improve the checkout process.
