Virtusa Mobile Checkout

September 12, 2018

Role: User Experience Designer

Challenge:
How do you better a mobile checkout form for a harried, traveling mother within 24 hours? That was the challenge laid before me by Virtusa, a design consultancy with a specific exercise that they hoped I might accomplish. 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 in which she does some impulse shopping, buying a dress at a leading fashion website for the first time, hoping to ship it directly home.

Solution:
With only 24 hours to turn around the design, I had to resort to an abbreviated period of discovery in which I mostly focused on comparative analysis of other websites that provide the kind of service and features Samantha might need from a checkout experience. I worked up a brief persona for Samantha based on my knowledge of my own wife’s likes/dislikes (she and Samantha being in the same age and situation, traveling working mothers in their early thirties), assessing outside factors that could hamper her purchase (one handed purchase while she wrangles kids and luggage; limited connectivity; time constraint) and then established a series of user stories for Samantha and the site—both sides of the transaction—and used them to draft a list of key features —i.e., stepped progression, multiple sign-up and payment options, checking out as a guest, enabling voice dictation for input fields) that would better the checkout experience for our harried mother.

From there I began a series of microframes and sketches, evolving them into customer journey and then full wireframes. Once done, I again surveyed popular fashion websites Samantha might explore (Lord & Taylor, Ann Taylor, Neiman Marcus) for patterns and style, arriving at a final, proposed visual design which was well received and praised by the stakeholders at Virtusa.

My deck containing the complete discovery, documentation and redesign can be viewed HERE.

With only 24 hours to turn this around, my time for discovery had to be considerably curtailed, and so I began by crafting a quick persona for Samantha, our identified user. The nice thing for me was that Samantha and my wife both shared many familiar traits — both in their thirties, both young mothers who travel, both who enjoy online shopping. A quick chat with my wife and two of her friends allowed me to circle in on some 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 at the same time.

The next step involved some rapid thinking about edge cases, outliers that might affect or be interfering with Samantha as she shopped— infrequency of connection, demands on her time (children, airport security, distractions)— and potential features that might solve some of these challenges. Finally, I underwent two hours' worth of comparative analysis: what were online stores along the lines of the ones Samantha might frequent doing in their mobile checkout forms to aid users?
With all my rapid research at hand, I drafted a set of potential user stories both for Samantha as well as the site itself — what does a user-centric shopping experience want for its users, what features and solutions would best help those coming to the site to progress through the checkout flow without friction or frustration?
Finally, I used all of those artifacts to draft a quick set of potential features that includes 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 flow is pretty well defined, I began to plan the journey, doing my best to break up the long, persistent scroll in the original form, dividing it into numbered and stepped progressions. First, I sketched some potential designs for how the progression might be visualized, and then I did a sketched a quick, microframed customer journey with basic documentation.
With the journey set before me, I could take my proposed feature set in hand and began fleshing out the wireframes for each step. I knew that I wanted the input fields to be large and tappable (especially for a guy like me, with thicker fingers than most!) and add an option for voice dictation where I could, especially for travelers with only one free hand. 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 vitally important as I began to draft the progress of the form,
Once the user completed the first step, i felt it important to give them an option to register at any point after, providing a persistent link at the top right (while also providing a cart on 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 wanted to give the traveler on the go multiple payment options — its established that Samantha must be mobile savvy, if she's buying something from her device, which means she might have the ability and inclination to use services such as Paypal, Wallet or Venmo to buy goods in addition to her credit card.
Finally, an assuring message that the user is nearly complete with their purchase — just add the 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 some of the more popular womens' fashion sites — sites identified by my wife and her friends during my initial discovery phase — and noted common patterns and styles that translated across several such as Ann Taylor, Lord & Taylor and Neiman Marcus. White space, clean and elegant fonts, neutral colors that allow the products to stand out, and an ever present logo leapt out at me and became crucial as tackled a pattern of my own, landing on my final design.
The design was well received by the stakeholder at Virtusa, and I was praised for not only the final checkout form but also the presentation and explanation of my process, especially having undertook it all within a 24 hour period. My deck containing the complete discovery, documentation and redesign can be viewed HERE.

ALL PHOTOS