Overview

This project is a design challenge to redesign an existing mobile checkout form for a new user at an e-commerce site to make it more usable and enjoyable, and to reduce the likelihood of errors.

The goal of the exercise is to think about the problem from a user’s point of view and determine how to improve the design through effective information architecture and interaction design.

• Role: Researcher, UX Designer

• Tool: Sketch, InVision, Paper & Pen

• Duration: 2 Days

The Challenge - Scenario

Zoey, a 32 year-old mother, is in an airport waiting to board a flight to Miami for vacation. She has some time to kill before her flight, so she does some impulse shopping online and buys a dress at a leading fashion website. This is her first time purchasing anything on the site. Since she’s going on vacation for a week, she wants the product to be delivered after she arrives back home.

Zoey has initiated the checkout process after viewing the dress in her cart. She needs to fill out the checkout form, which contains billing/shipping and payment info. Once she provides that information, the site will enable her to review the information before submitting the transaction.

Design Plan

I analyzed the challenge and came up with the process to tackle the problem.

User Goals to Design Goals

I set the redesign goals by analyzing user behaviors, needs and goals.

Define Problems

I analyzed the current design by using Usability Heuristics Analysis methods.

Minimum Viable Product

Below key features and changes needed in redesign were decided based on previous Research.

1. Break up checkout into multiple pages or sections

2. Add indicator of steps

3. Add delivery date shipping option

4. Correct existing errors

5. Auto-detect / auto-fill support

6. Reduce input fields

7. Trigger numeric keyboards for phone number and credit card entries

There could be two scenarios: Zoey checks out as a guest user or as a newly registered first time user. Therefore the solutions will be designed in the context of these two scenarios.   

Criteria of Success

In order to be able to measure the design I set criteria of success based on both User’s and Business’ Needs:

1. If it is easy for Zoey to complete the task.

2. If it prevents errors or allows fixing errors quickly.

3. If it allows Zoey to pick a desired delivery time.

4. If the flow is smooth and enjoyable.

5. If it encourages and allows Zoey to connect with the site if she did not sign up.

6. If it is going to make Zoey’s next shopping experience easier as a come back user.

Solution I - Process Indicator

Zoey checks out as a guest user

Solution II - Cards Concept

Zoey checks out as a newly registered first time user

Prototype

Click below Prototype to interact, please refresh your browser if it is not working 

 Next Step

User testing needs to be conducted on the prototype as the next step to find out below questions:

1. If user can complete task easily and quickly.

2. If user can correct mistakes easily and quickly.

3. If user can pick ideal delivery date.

4. If user can edit information or exit if she wants to.

5. If the design is consistent.

6. If user can join member emailing list.

and then ITERATE..

Check out my other UX design works, or back to the beginning of the project.