INTERFACE DESIGN

Breaker_Black_Long

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.

032

Client

365 Retail Markets

Year

2017

Role

UX Design, User Testing

Home_AirVend2

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.

Leader_Black_ExtraShort
AIrvend2

RESEARCH

DIAGNOSE THE ISSUE

Breaker_Black_Short

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.

Bar2
Original Screen

DESIGN REVIEW

ADDRESS THE ISSUE

Breaker_Black_Short

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

Breaker_Black_Short

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.

whiteboard2

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.

Leader_Black_ExtraShort
Group 2
Group 3
Group 5
Group 7
Group 10
Group 11
Group 14
Group 19
Group 12
Group 8
Group 17
Group 16

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.

Both Devices
FIller_Final42

NEXT PROJECT