Go Back to my Work

Virtusa | Mobile Checkout Redesign

Virtusa, a consultancy which provides end-to-end digital transformation and information technology outsourcing services to Global 2000 companies, wanted to gauge whether or not I'd be the right person to redesign an eCommerce experience for one of their digital clients. The catch? They had an accelerated timeline in which to decide, and provided only 24 hours for me to complete their exercise.

My Role: Research and Analysis, UX, UI

WHAT ARE WE BUILDING AND WHAT NEED DOES IT SOLVE?

How do you better a mobile checkout flow for a harried, traveling mother seeking a moment's peace and a fast purchase? That was the challenge Virstusa laid before me, and with only 24 hours to turn around the design, I had to abbreviate with usual design process. Virtusa provided a specific scenario and a previously designed checkout form, asking me to improve the experience for Samantha, a 34 year-old mother, waiting to board a flight for week’s vacation in Colorado. With time to kill, Samantha does some impulse shopping, buying a dress at a leading fashion website for the first time, hoping to ship the item directly to her house.

DISCOVERY: THIS ALL SOUNDS INCREDIBLY FAMILIAR.

Without a lot of time for discovery, I began by crafting a quick persona for Samantha...which was easier than I'd hoped, as Samantha shared many familiar traits with my wife — both in their thirties, young mothers who travel and enjoy online shopping. A quick chat with my wife and two of her friends allowed me to circle in on basic wants and needs, shops they frequent, likes and dislikes to use as I started to think what the perfect experience might be for them —and Samantha— as they shopped and traveled.

After that, the next step involved rapid thinking about edge cases, outliers that might affect Samantha as she shopped— infrequency of connection, demands on her time (children, airport security, distractions)— and potential features that could solve these challenges.

• For instance, Samantha is on the go, with at least one child, and may only have a single hand with which to check out as she handles baggage, said child, carry ons or a cup of coffee (waiting at the airport is thirsty work!). She may also be lugging coats, as it’s cold in Colorado.

• Samantha is under a time constraint; could be distracted by her kids or changing flight information; she may not have time to check out all at once and may have to complete the checkout between other activities.

• Traveling and airport check-in can also be stressful enough; giving her one more stressful flow won’t do her any favors—she wants an easy, satisfying process to improve her mood (which shopping is all about, right?). Microinteractions, delightful moments, and welcoming copy can help brighten her day. Samantha also wants her item waiting when she gets back, so reassuring messages and confirmations will help remove the additional stress of the unknown while she’s on vacation

• Because of her current location and  the juggling she might be doing, any time saving options would be welcome; for instance, using her device's location feature to pre-fill an address?• For the payment info, multiple options could be presented—she could use a card, PayPal, Venmo or another mobile service.

• Finally, I underwent two hours' worth of comparative analysis—how do various eCommerce experiences like the one Samantha might be browsing optimize their mobile checkout forms to aid users?

DEFINITION: TAKING IT ONE STEP AT A TIME.

Once I completed discovery, I used my data to drafted stories both for Samantha as well as the site itself—what does a user want from a better mobile checkout, and on the flip side, what features and solutions does a user-centric shopping experience want to provide its users to best help them progress through the checkout flow without friction or frustration?.

Once the stories were complete, I used all my artifacts to draft a set of potential features which included step-by-step progression, voice dictation, multiple payment options, checkout as guest / sign in after purchase as well as persistent log in should the user to choose to register mid-process. Understanding it would be best to harness the power of an existing eCommerce platform (Magento, Demandware, etc) in which the checkout is well defined, I began to sketch the customer journey, breaking up the long, persistent scroll in Virtusa's original form, dividing it into numbered and stepped progressions in order to give the user an estimate of how long the process would take.

First, I sketched potential designs for how the progression might be visualized, and then I designed a quick customer journey with basic documentation.

IDEATION: BREAKING DOWN OUR CHECKOUT FORM—LITERALLY.

With the journey established, I could take my proposed feature set in hand and began wireframes each screen in the flow, breaking down Virtusa's long, interminable scroll into three quick steps: Entering name or logging in, shipping information and then billing information.

I wanted the CTAs and input fields to be large and tappable (especially for users like me, with thicker fingers than most!) and add an option for voice dictation where we could (never for information a user would never say out loud, like credit card numbers or passwords), which might be helpful for travelers with only one free hand to fill out the form. Extra log in options, single input fields for name and addresses including welcoming messaging to ensure the user knows this will be a painless, quick process were allvitally important as I began to formalize the structure of the new form.

After the user completed her first step, i felt it important to provide an option to register at any point from then on, adding a persistent link to the top right (and a cart top left should they choose to add items mid-purchase). Employing geolocation and autosuggestion reduced the need for excessive typing, as well. The original form had few purchasing options, so I gave Samantha multiple payment options—she must be mobile savvy, if she's buying  from her device, so she might have the inclination to use Paypal, Wallet or Venmo. Finally, an assuring message is surfaced to Samantha that she's nearly complete with her purchase — just add billing information, review and finish.

Once the wireframes were complete, I had a little planned time for visual discovery set aside in which I toured popular womens' fashion sites — sites identified by my wife and her friends during initial discovery. I noted common patterns and styles translated across several such as Ann Taylor, Lord & Taylor and Neiman Marcus. White space, clean and elegant fonts, neutral colors that let the product imagery stand out, and an ever present logo at the top. In addition, I moved some elements out on the first screen in the flow, putting the "Next" CTA between the name fields and the log-in area. This would clarify to Samantha that she can log-in if she has the time, but it isn't necessary to proceed.

A MORE USER-CENTRIC CHECKOUT IS A PROGRESSIVE STEP IN THE RIGHT DIRECTION.

The final checkout design was well received by Virtusa, and I was praised for not only the final form but also my presentation and explanation of the process, especially having accomplished it within a 24 hour period.

JAFRA

B2B CONSULTANT APP

NORDIC NATURALS

MOBILE RESPONSIVE WEBSITE

THE TOPPS COMPANY

MOBILE COLLECTING APPS

MATH DONE WRITE

EDUCATIONAL APP

VIRTUSA

MOBILE CHECKOUT REDESIGN