Background

Authorize.net is geared towards small businesses and accounts for a significant percentage of income for Visa. Sign ups were increased during the Covid-19 pandemic; however, there was a noticeable drop off in conversion for users filling out our sign up form on mobile devices. I partnered with a user researcher from Cybersource’s core UX team to identify pain points and find a solution that will drive users to complete their application. In addition to bettering the form for mobile experiences, I created these mocks using our new 2020 rebranded AEM components.

Along with the user researcher, I also worked closely with a technical product manager, the marketing team, and the sales team.

The merchant sign up form is a single page application that allows users to buy a gateway and/or merchant account.

As of April 2021, this design is not yet live.

User Testing

Pain points

Based on feedback from a user study conducted by the internal marketing team, feedback from the sales team, and an interview conducted with an internal employee (no working relationship to Authorize.net), we identified a number of pain points:

1. The mobile application lacked adequate spacing between fields, making it harder to press with your fingers. Another side effect of the cramped fields is that the form was made to look “less trustworthy”.

2. The large number of fields in the single page application were overwhelming.

3. Users did not always have all the relevant information on hand, and the form does not allow users to save information to return to later. After coming part way through the form, the user will lose all their progress if they come across a field they cannot fill out at the moment.

4. Some asks from the form were concerning due to lack of detail on how their private information will be used (i.e. social security number).

5. There was no feedback on what to do or expect after the form was filled.

6. There’s no way to tell which plan you’re signing up for based on the title alone.

The test

The user researcher and I conducted 5 interviews with internal employees at Visa, all of whom confirmed that they do not work with any of Authorize.net products. Participants were given an Adobe XD link with hotspots turned off to the proposed design, and they were asked to go through the entirety of the form while speaking their thoughts aloud. Updates were made to the mock parallel to testing as we discovered patterns in comments and feedback.

The design

We did several things to improve the form besides visual things:

• Broke the single page application into a multi-step form.

• Added a “What you need” page

• Added a review page that can be edited before submitting (also good for accessibility!)

Recommended solutions

In addition to the design, we recommended the following solutions to the marketing and sales team:

• Provide copy explaining how social security numbers will be used and/or why we need it.

• Thank you page copy needs specific, actionable feedback.

• Remove industry jargon or add more definitions.

• Label each type of application differently so users know which plan they’re signing up for.