PRODUCT DESIGN, UI/UX, ARTWORK & ILLUSTRATION

Visa+ Payment App

Visa: Visa+ Payment App

The Visa+ payment app was a project that had a very clear mission (online/mobile payment processor), but needed critical thinking and user testing to ensure we were creating the right experience for users.

Problem

When paying for things online, users are often frustrated when it comes to entering payment details and this can become a barrier to checking-out leading to less sales for merchants. Many merchants lack a recognizable brand, which can lead to customer trepidation when it comes to providing personal information.

Hypothesis

A low-impact optimized checkout flow from a recognized and trusted brand, will enable users to check-out more quickly and with more confidence leading to better relationships with lesser-know brands and improving the speed and reliability of the check-out experience for all participating merchants.

Research & User Interviews

IN 2013 PayPal and Google were leaders in this space, so we did and audit of their presence and experience to better understand the UX landscape for payment processing buttons. On large boards we had physical layouts of their screens and user flows that we used as to capture ideas and user feedback. Utilizing Visa Labs I was able to talk to a dozen users about their experience with payment processor applications and document their feelings and feedback.

Wireframes

After talking with users, I was able to put together some very comprehensive customer journey maps from which wireframes were built. It was extremely important to introduce as little friction as possible for users, but ensure there were flows to support any question, concerns, or issues they might experience during usage. Smaller flows for things like Reset Password or Edit Shipping Address were given special attention and turned into their own smaller projects.

Main flows for Visa+ payment app

Visual Design Experiments & Prototype

After presenting the work and getting approval to move forward from the UX Director, I got started turning the wireframes into a more visual experience complete with interactions. I worked closely with developers to create a working prototype to get in front of users for testing. During this phase of the project, particular attention was paid to edge cases that many users might find themselves in.

Visual design concepts/experiments

Edge case flows

Final Designs & results

After generating good feedback around both user experience and visual experience, we continued to refine the app until we had a product that met the needs of our users. We were able to launch the new app across all mobile devices and began to gather data from the real world, for the next version of the release. Since this was a new product, we did not have many metrics to compare against (sign-up numbers had projections, which were met within the first month of launch) - during the first few weeks of launch I worked closely with Product Marketing and Data to develop key metrics for the app moving forward.

Final designs for initial launch