Select Page

Lifeline for Vets

form UI/UX design

Lifeline for Vets

Lifeline for Vets has helped more than 400,000 veterans since 1985. Here’s a quick project demonstrating some UI and UX improvements on the online donation form – a page that’s the most important in getting Veterans the help they need that is often lacking.

Form UI + UX

It’s important that preset donation amounts are easily clickable. Breadcrumbs allow user to see the simple three step process.

Helper text remains on screen while the field is selected. Similar input fields like the address are grouped together.

As the user enters their information, a green check marks indicates the information was properly inputed.

When a field is missed, it’s both highlighted in red and an error icon appears.

Payment method selection also indicates the types of cards accepted. Similar information (related to credit card) is grouped together.

Instead of having the user select their credit card type, we determine this based on the first number inputed and display an icon in the field.

In the case of an incorrect input, the helper text updates to reflect helpful information. In this case, the user has inputed a date in the past for expiration.

In the case of a card error, we suggest double checking information or using another card. The fields are emptied and the submit button is disabled.

In the case of a server error, we suggest retrying. Fields remain populated so the user can resubmit the information.

Once payment goes through, a confirmation of success is displayed, along with the amount paid. Since the user is invested, we use this opportunity to capture their e-mail address.