Web Payment Form

Personal project on checkout payment form design


Harvest is a prototype network that connects farmers to consumers, including restaurants, wholesalers, and individual consumers on a website platform

Goal: Increase user conversion during the checkout process

Biggest Hurdles

The number one reason for checkout abandonment is unexpected costs (shipping, taxes, fees) and the top 5 includes things like complicated checkout and trust issues.

Identifying main problems in "Harvest"

Because of the nature of the Harvest business, users sign up when they want to browse the details of the farm, eliminating the sign up wall in checkout. The main issues I will tackle with my design are: extra/hidden costs, complicated checkout process, and trust.

Rapid Prototyping for Testing

I rapidly prototyped 2 versions of a payment checkout page. They differ on the direction of workflow (horizontal vs vertical).

(A) vertical flow, boxed inputs | (B) horizontal flow, lined inputs

Both were intended to cut down on the page by page design to tackle the problem of complicated checkout process. These designs allow for easier back and forth navigation (to check costs/previously entered info). In terms of security and trust, I played with how the input fields look and react.

User Research Methods

I conducted a 2 question google survey aimed at discovering how effective the designs are in the previously identified issues (hidden cost, ease of use, and secure and trustworthy) without explicitly stating them.

I find this question format allows for more active feedback and is more effective at discovering the reasoning behind why certain respondents picked one design over another. Although a number scale of effectiveness for each identified issue would produce very succinct quantitative feedback, it doesn't tell me the "why" very much.

Survey Questions:

  1. (hidden costs and ease of use) You're checking out and you want to go back to look at shipping or other previously entered information. Which design is easier to navigate and toggle in?

  2. (secure and trustworthy) Assuming both designs have a "https" in the url browser bar, which design is more secure/which one do you trust with your payment information more?

I randomly varied the order of questions and order of designs while collecting user information such as age group and gender groups to test for biases and dependence.

Characteristics to consider:

  • Diverse age groups

  • Balanced gender ratio

  • Order of the presentation of designs

  • Order of questions

In a larger sample, I would consider performing a statistical significance test (such as chi-squared or t-test) to test for dependence. If there is dependence between design and age group, then I would explore that further. On the other hand, if there is dependence between design and order of presentation, then the survey method needs to be revised.

Research Results

Sample of collected user feedback

In the overall analysis, more than 81% of respondents found Design B easier to navigate, especially toggling between different stages of the checkout process, while over 63% of respondents found Design A to be more secure and trustworthy.

A (left) | B (right)

Based on just quantitative data, it is hard to tell what specifically makes each design more usable and secure. Although the majority of respondents thought Design A was more secure, there is still a sizable, 36.4%, amount of respondents who believe Design B is secure. Let's take a deep dive into the comments.

When asked about usability, most respondents brought up left and right arrows.

  • "the left and right buttons makes it seem like I can go back and forth easily" - picked B"more intuitive to go back and change shipping info with B"

  • "most websites I know have the progress bar on top, I think I'm more used to it being on the left feels odd to me" - picked B

In the same usability questions, some respondents' comments on A:

  • "left navigation pane helps me figure out where to go" - picked A

  • "A doesn't look like you can go back to edit anything" - picked B

Next design iteration to explore

I had controlled the 2 variations by only using page-by-page checkout. I'd explore whether a one page checkout would compoundly impact the small design variations I'm trying to test for.

(to be continued)