Art direction & design
V.me.png

Visa online payments

_ Identity
_ Website
_ Payment flows
_ Mobile and desktop applications

Art Director
& Product Designer

Contract
Lab Zero, San Francisco
2011


Photoshop
Adobe CSS
Indesign

Visa online payments.

Visa users were beginning to expect more unified and integrated payment experiences on more devices. They hired us to extend their brand to all aspects of their customers’ lives.

What people can do with V.me:
• Give money socially to support friends and family
• Buy online anywhere with one-click convenience
• Donate to favorite causes
• Pay with convenience and without interruption
• Use rewards points to pay for anything

What V.me does:
• Makes paying and getting paid a natural gesture
• Provides convenience and peace of mind to spend money casually
• Lowers the risk and cost of paying and getting paid.

Brand: Visa came to Lab Zero with a name and an idea for a product for making online payments. We needed to develop the overall Look, Tone & Feel for the product web site, mobile applications, integrated check-out & social media experiences. We wanted the product name, logo, and brand voice in place to drive the interface design experience, resulting in a cohesively branded effort.

 
We designed the logo, marketing website, developer tools and visual assets for V.me

We designed the logo, marketing website, developer tools and visual assets for V.me

 

Building payment models

As designers, we worked closely with financial industry experts and our in-house developers to map out solutions that would work for payment flows. Once we had something that made sense logically and technically, we would illustrate the use cases and present them to Visa.

Add Checkout with V.me by Visa buttons to your website using simple & easy JavaScript tags.
: JavaScript Tags • Root Tag (v-root) • Init Tag (v:init) • Buy Button Tag (v:buy) • Callback Function/Notifications

Manage Payments forPhysical & Digital Goods Using Transaction APIs.
: Authorize API • Purchase Confirmation API • Capture API • Void API • Refund API

Inquire About and Track Transactions.
: Get Checkout Details API • Get Transactional Details API • Notifications

 
Vme_diagramsArtboard%2B1%25402x.jpg
 
Vme_diagramsArtboard+1+copy%402x.jpg

More context, please

We start with functional requirements and then draft wires and flows. Once we have a general map of how the product will work, we like to show it in context. In the examples below, we think through the details of a mobile in-purchase sign up flow and keep screen size in mind, careful not to overload the user with too much information.

 
 
Front end modal view with details mapped to back end logic.

Front end modal view with details mapped to back end logic.

 

Introducing V.me

Visa started working with their financial institution clients and merchants on their participation in V.me and launched an invitation-only beta of V.me capabilities in the US and Canada. They introduced consumer enrollment and payments in early 2012. V.me would be a secure way for consumers to pay online as well as in person with a PC, tablet, or mobile device using Visa and non-Visa accounts. In 2014, Visa replaced the V.me brand of US and Canada with their European counterpart Visa Checkout. Much of the V.me vision is still a thriving consumer model.

vme_lightbox_web-modal.jpg