UX: E-Commerce Checkout Wires

Objective

To create a smooth checkout process for the e-commerce re-design of a $6 billion retailer

Challenge

When I came into the project there were already some wireframes and visuals designed by an outside agency, but due to the company’s very small UX team, they had been largely untouched and in quite a messy state. My job was to clean up the wireframes, update them to match the core business requirements, and to create new ones as needed.

Process

Step 1. Learning JIRA

JIRA is the project management tool I used to stay on track with my tasks and to collaborate with my coworkers and our remote dev teams. With JIRA, I was able to create and be assigned tickets, comment, receive comments, and see a weekly Agile scrum board with the progress of each task. This really helped our team cut down on emails and stay in the loop with each other.
feattour_new_hero_614x378-jira-pt-hero

Step 2. Becoming an Axure master

Axure RP (Rapid Prototyping) was a new tool for me, so as soon as I was assigned my first UX tasks, I jumped right in and learned it.  I began creating and editing wireframes, adding visual elements, interactions, and notes.

Example Scenario: Customer wants to add receipts to their online account so they can earn more rewards. I created this wireframe to solve that problem

BLURREDScreen Shot 2015-06-08 at 12.00.18 PM

Example Scenario: A stage of the checkout process where the user selects their shipping & billing preferences. This wireframe was untangled from a previously jumbled state, and adjusted for proper viewing on multiple viewports.
BLURREDScreen Shot 2015-05-18 at 10.25.26 AM

Example Scenario: An FAQ page designed to enable customers to quickly self service their questions before contacting customer support. I built this wireframe to reduce dependency on customer support.

BLURRED8.1FAQWire

Team

The internal UX team held meetings once a week to discuss changes, JIRA tasks, and solutions. The team consisted of a Lead UX Designer, Product Manager, eCommerce Product Analyst, and myself.

Step 3. Publishing on Sharepoint for Developers

After assets were approved at team meetings (Axure wireframes and Photoshop visual mockups), I uploaded them using Microsoft SharePoint for our local and remote development teams to reference.

Step 4. UserTesting with UserZoom

In order to refine our navigation menus, we created a user study with UserZoom to have consumers demo our competitor’s sites, and then provide us with video and audio feedback of their thoughts.

Step 5. UAT Testing with ALM

After all the checkout wireframes were published to AxShare and implemented by the developers, I led the phase 1 beta testing for the UX team using HP’s Application Lifecycle Management (ALM) Software. This involved combing through 131 test scripts to check for visual design flaws in the QA (Quality Assurance) site

One Response to “UX: E-Commerce Checkout Wires

Leave a Reply

Your email address will not be published. Required fields are marked *