Redesigning E-commerce Checkout

During this project engagement, I worked as UX Lead tasked with investigating, documenting and evangelizing new interface design and experience updates to Dooney’s checkout flow; a single page checkout (no Review page prior to final submit) and was the only checkout flow sampled that offered a single page checkout experience.

Discovery

Appreciating Competitor Feature/Functions Supporting common Checkout Flows

I conducted a quick competitive analysis not to copy cat what other retailers were doing but to identify gaps, opportunities and patterns that were common in the retail check out space.

This investigation led to discussions around future-state feature/functions like the introduction of a Wish List and Email Your Cart capabilities. These items were considered important to the business and were added to the product roadmap and sprint backlog.

Buy Flow Analysis: Sampling competitor buy flows and UI/IxD patterns

Dooney’s existing checkout flow was considered a single page checkout (no Review page prior to final submit) and was the only checkout flow sampled that offered a single page checkout experience.

There was some debate and considerations made to the “comfort” a Review page offers some users. Moreover, the presence of a Review page can aid in lowering product returns and customer service phone calls. Conducting an A/B Test with and without a Review page could be a healthy exercise.

We also used these workshops to discuss the pros and cons of other various interface patterns supporting popular checkout flows. The result often inspired ideas around which patterns would make the Dooney checkout experience unique. In the end, we focused on those options that we felt would promote the user’s forward momentum towards successfully completing a purchase.

Red Route Analysis: Checking in on Feature/Functionality Popularity

A checkout flow is often comprised of many other feature/functions. For example, users can engage with DooneyPay (a no-interest, installment payment option), apply multiple gift cards to a purchase and more.

We used two years of purchase trend data and analytics to evaluate which feature/functions of the checkout flow were most popular to Dooney users. We then used this information to make hard choices about future-state design tweaks. For example, we realized it was very rare that users touched the quantity drop down during checkout so we decided to chop the quantity control ability from the checkout flow interface. 

Additionally, we also discovered that users were likely using the Shopping Bag as a mechanism for comparing products. The future state solution will tout the ability to add items to a Wish List where product comparisons could be accommodated as a sub feature.

 

Deciding which third-party UX/UI recommendations and research-backed design principles to implement

Prior to my involvement, Dooney had solicited UX/UI recommendations from a Salesforce Accelerator group. When I was asked to participate, I poured over the recommendations and then collated those observations with other best practice principles inspired by industry research and conducted by respected sources.

Before spending hours on future state design mock-ups, I wanted to ensure the Dooney team was on-board with the various design edits I was planning to incorporate. I conducted a few quick workshops with the team to review all the options on the table aimed at soliciting buy-in.

Define and Design

Identifying Key Conditions and Scenarios

During the alignment workshops described above, It became clear that the user experience was to pivot around two key checkout conditions. These conditions would drive the experience and the interface that was surfaced during checkout. The key conditions we identified were:

  1. Is the user logged in?
  2. Does the user have DooneyPay eligible items in their cart? Note: To take advantage of DooneyPay (a no interest installment plan), the user had to be logged in and attempting to purchase at least one item over $100.

Page Level UI: Bringing it All Together

It was important to keep the momentum and conversation going with the Dooney team as we were all very anxious to see how the discovery work we had invested in would translate to future state design solutions. So I began applying page level UI changes I knew the entire team was confident about implementing right away.

Some of the page level UI adjustments are evident just by glancing at the before and after screen shots (see below). For example, there are fewer primary call to action buttons cluttering the Shopping Bag page, an almost 50% reduction in form fields found on the Checkout page and a less crowded Confirmation page that emphasized next step actions.

Shopping Bag
Before (left) After (right)

Guest Checkout
Before (left) After (right)

Order Confirmation
Before (left) After (right)

Flow Level UX: Modifications Supporting Key Scenarios and Business Objectives

One of the key business goals was to increase the number of new user accounts. The Guest Checkout flow we were overhauling provided a content block on the Confirmation Page for the Guest (anonymous) user to create a password (the only step remaining to create the account). However, this content block was not promoted very well and users often overlooked the opportunity.

It was proposed and agreed that introducing some intentional friction to encourage (nudge) new account creation (password setup) in between the Guest Checkout and Order Confirmation pages would be an appropriate compromise of business goals and user needs. Additionally, it was also determined that this intentional friction point could be configurable (turned on/off as needed) as well as serve other key business goals (e.g. promoting a Rewards program).

Introducing Intentional Friction
Modifying the Guest Checkout flow to better encourage new customer acquisition

Expressing Interactive Sequences and Promoting Unconventional UI Patterns

I was able to influence significant changes to Dooney’s existing checkout experience. In some cases, I evangelized and persuaded the use of  unconventional user interface patterns. For example…

  • Improved Shipping/Billing address capture powered by Loqate, a third-party location intelligence platform
  • Aggregation of credit card information capture into a single input control

Delivered

Dooney Design System (Pattern Library)

We had established a Dooney-branded design system during the 2016 Web site overhaul project that focused on redesigning the browse flow user experience track. I continued to groom and add to that design system as I worked through the issues relating to the e-commerce flow updates.

The design tool of choice was Adobe XD. I realize Sketch is the industry standard and I am very familiar and experienced with Sketch. However, I am (traditionally) a PC guy and acting as the only UX contributor on the team, it was my discretion to decide which design tools to leverage. I saw no reason to jump ship from an PC/AdobeXD approach. Adobe XD has the ability to express simple tweens, animations and click events and if I needed to compile advanced prototyping, I could leverage Axure. As a matter of fact, going this route saved us from needing to procure InVision licenses.

Delivered

Redline Specifications

UX and UI design are just steps in a much larger process. Ultimately, UX is required to hand-off the business vision in the form of concrete instructions that make sense to engineers. Those instructions often take the form of a redline specification and/or digital style guide document.

As Lead UX, I provided Dooney’s offshore development group with the approved and vetted redline specifications as well as a online digital style guide whereby elements could be inspected for their various design properties (color values, font syles, etc.). I flew to the client site in Connecticut to formally present this design material to the development manager.

Recap & Outcome

I worked…

Dooney & Bourke makes high-end handbags and accessories, mostly for women but also for men. Dooney products are sold in department stores, online and by catalog (Glassdoor.com).

Web:
Dooney.com

Size:
51 – 200 employees

Headquarters:
Norwalk, CT

Industry:
Consumer Products Manufacturing

Competitors:
Brooks Brothers, Vineyard Vines, PacSun

Revenue:
$25 – 50 million (USD) per year

Methodology
Autonomous

Back-end System
Salesforce Demandware Commerce Cloud

Front-end Framework
PredictSpring / Native iOS

Development
Offshore

I worked…

Dooney & Bourke makes high-end handbags and accessories, mostly for women but also for men. Dooney products are sold in department stores, online and by catalog (Glassdoor.com).

Web:
Dooney.com

Size:
51 – 200 employees

Headquarters:
Norwalk, CT

Industry:
Consumer Products Manufacturing

Competitors:
Brooks Brothers, Vineyard Vines, PacSun

Revenue:
$25 – 50 million (USD) per year

Methodology
Autonomous

Back-end System
Salesforce Demandware Commerce Cloud

Front-end Framework
PredictSpring / Native iOS

Development
Onshore / PredictSpring

"The more engaged users are... the more functionality an application can sustain."

-Jakob Nielsen