josephHERRON

MOBILE CHECKOUT REDESIGN

Mobile Checkout Redesign

Thank you for taking the time to speak with me.  I enjoyed our conversation, while learning more about Virtusa.  As  requested, I completed the design test of the mobile checkout.  Below, you can view the expedited design process I used from beginning to end.  The redesign process took roughly 5 hours to complete.  If you have any further questions, please do not hesitate to reach out to me.   Best regards, Joe Herron

Research (Expedited)

Identifying and understanding the scenario's main points.

  • First time shopper (mother) to site with no previous account creation.
  • Shopper will be away on vacation 1 week and wishes package to be delivered after she returns.
  • Prior to submitting final purchase, user is presented a screen to verify and review order.
  • Avoid designing an entire checkout process from beginning to end.



Understanding how the shopper uses the checkout process.

Candidate Interview - Gretchen Herron  (Mother of 2 boys.  Frequent and savvy shopper).

 

Question - What characteristics or features of a mobile checkout process do you find helpful or convenient during

the transaction?

 

Answers:

  • Ability to use fingerprint ID to auto-fill credit card information.  Reference Target.com.
  • Ability to apply coupons saved in store wallet.  Reference Macys.com
  • Auto scan and add to cart while shopping in store.  Reference Sams Club Application .  * Not applicable to the scenario.

Question - After showing Gretchen the sample design, I asked where in the checkout process was the particular user and what aspects of the layout did she find redundant?

Answers:

  • Based on shipping and billing forms, she assumed the shipping info page.
  • She noted the long length of the screen.  Felt there were too many fields.

 

Review of existing Virtusa checkout design

Notable points:

  • No ability to combine shipping address with billing address.  (Common pattern)
  • No up-front shipping cost functionality to support scenario.  Location + time of delivery = cost
  • No option to edit cart or return to previous screen.
  • No option to declare new or returning user.
  • No breadcrumb navigation.  What overall step is the user currently at during the checkout process?



Research of existing Mobile Checkouts and standout features

Dicks Sporting Goods

  • Large call to action buttons.  i.e. Continue, Submit
  • Up-front estimated shipping costs and times

Amazon

  • Saved account information allows user to single click through the checkout process.

Walmart

  • Instead of breadcrumbs, steps are cleared defined as vertical steps.

Entire Flow Diagram

Checkout for "new customer" flow (only)

Click the arrows to scroll through the mockup.

Final interview with Gretchen

After viewing the redesigned mockup, Gretchen was asked to identify each step of the shopping cart process.   She was able to successfully identify and label each step.  Shipping, Payment, Review and Confirmation.

 

Based on her earlier statements regarding redundancy, Gretchen was asked how the redesign addressed her issues.  She stated defaulting the billing address, the same as the shipping address, reduced the amount of information she was forced to input.

 

She felt the overall redesign addressed many usability concerns stemming from the example, but asked where she could find and apply her coupons.

Contact Me

Get in touch with me

All Content Copyright © 2018  Joseph Herron

Custom Site designed by Joseph Herron