UX Design Process for eCommerce Checkout
Design an online store to present new and existing products in a consistent way and a checkout to consolidate the different existing, and separate, checkout paths. The project began with creating a flow diagram to understand the intricacies of the current products, then on to a prototype of the payment process, leveraging the research and feedback we already had from customers. The initial work was intentionally done in black-and-white in order to convey that the ideas were malleable and to avoid mistaken conclusions that the highly interactive prototype represented a finished product.
Starting Point
The flow was different for each of the existing products and purchases had to be made separately. The solution presents all products in a consistent way and provides a checkout flow that works for both current and future products.
Persona
Janet is a specialty Real Estate agent and she's doubly busy with the bank and home buyers. She's been confused and frustrated about how certification and coverage options work, so our goal was to simplify things. Janet wants to be able to 'figure it out' on her own, without having to call someone for help, and feel confident she made the best choice, so we designed with an emphasis on making the experience self-explanatory.
Payment Page
The Payment page featured accordion style (expandable/collapsible) sections, with the Payment Information section being collapsed (but showing key information), by default, when a credit card is already on file. I designed logic for handling the coupon code to help discourage errors where a coupon code was entered, but not applied, resulting in calls to Customer Service that cost the company far more than the discount.
Confirmation Page
The confirmation page provides positive feedback that the transaction has successfully completed and also provides a link to next steps to make it easy for agents to navigate to the logical next step to make use of the products they purchased.
Product Page
The product page features a mix of subscription and one-time purchase products. Subscription products were designed to support both an annual and a monthly subscription option. The design also supports a unique product with multiple instances (multiple ZIP codes in a Lead Area). In addition, I designed in feedback if a product is already in the cart. The product layout is designed to be responsive to different screen sizes.
As work progressed from the initial concept toward final functionality, we moved to full-color in the prototype, implementing the components based on the Style Guide.
Cart
Enhancing the prototype, I created a high-fidelity interactive prototype that supports several use case scenarios, including multiple products and different states of the cart, while applying the style guide to the components in the final design.
The solution included subscription management (all the states of a subscription, including cancellation and the capability to undo the cancel). I also integrated the state of training course products (initial, in-process and completed), especially when those products are included with higher-level products.
Transaction Activity
After completing the design of the purchase path, I updated the design of the transaction history, providing different views of the transactions and retaining access to statements (which agents were accustomed to). The approach focused on ensuring the amount would match what would appear on a agent's credit card statement, while providing the detail (and help info) to explain the charges.
Dashboard
The updated dashboard featured new indicators and color coding to indicate various states of product subscription. Plus, for consistency, it incorporated the same coding for products that was already being used for account status.
Usability Studies
I devised the study plan, recruited Real Estate Agents, created the script, moderated the sessions, did the analysis and then presented the findings to executives. Recommendations regarding search, messaging and navigation were addressed before the launch of the online store and showed improvement in a following remote usability study using the production site with 10 participants.