AMVETS

Type:

Individual Project

Role:

Wireframing, Prototyping, UI/UX Design

Tools:

Figma

Duration:

2 days

When America's biggest veterans non-profit reached out to me to design their donation check out page, I felt the weight of responsibility on my shoulder like never before. AMVETS needed to redesign their donation page to make donations less of a tedius process. If someone decided to hold their donations because of my work, it would be hard to live down.

Greyscale Wireframe

My first task was to conceptualize how the donation process would work. I opted for 2 windows: the first would display the donation options, and the second would display the payment method. I chose this design to reduce scrolling that would add tedium for the user if they decided to go back and make changes to their donation.

High-Fidelity Prototpe

The high fidelity prototype built ontop of the idea of 2 screens. I was instructed to add a dedication form to the process if the user chose to dedicate their donation to a loved one. I integrated it by adding a radio button that triggered a slide animation, overlapping the checkout screen. My client liked the solution but advised against the proposed visual layout as it was too distinct from AMVETS's visual identity. I offered to tweek the design to make it fit with AMVETS's branding, but my client decided his development team would handle the rest.

Final Product

After the donation page was finished, I was delighted to see that the AMVETS team had not only changed the visuals, but improved upon my solution. They removed the tabs on the donation screen and placed additional donation rewards on the same section as the dollar donation, streamlining navigation further. They also iterated on check-out info, tallying them up neatly. Even though this was a team effort, I was given credit for providing AMVETS with the design they were looking for.