Global Cart-Checkout

Design Strategy Case Study

Below are most of the steps & processes I took with Autodesk’s eCommerce Product & Engineering teams to create a platform providing business growth although there was a fair amount of business & technical uncertainty.

Problem

Create a more robust, flexible cart & checkout than the existing one. Improving the user experience and allowing the team to meet revenue sales goals through 2022.

primary GOals

The goals of the 3 main internal stakeholders could be broken down this way:

Business goals - a platform that meets revenue target objectives (viable for the company)
Design goals - an improved and continuous user experience & visual design (desirable for customers)
Engineering goals - ease of development and not publishing (feasible to build & maintain)

These goals elevated into broader common ones:

Flexibility across all sectors (time, duration, offer, geography, & business need
Measurable gains with analytics & metrics
Quick and easy changes, development, and updates

Product Vision

Project - Plan - Platform

The eCommerce team product manager, along with myself and the system architect, created a project (and eventual platform) codenamed: GUAC for (Global* Ubiquitous All-encompassing Checkout).

Both project & platform included an initial one-year project to solve the most pressing problem and a number of shorter-term plans, that dovetailed into each other, to reach the overall goal. Thus, certain features were backlogged and would be implemented later.

The largest aspect of the project & the platform was its flexibility. It allowed us to pivot some development or design plans based on changed business priorities once the baseline platform was in place.

Scope

These pressing immediate goals were discussed and agreed upon by the business, system architect and UX then included in the initial scope to accomplish first, thankfully there was a lot of overlap:

Immediate

Move development to the same group as Product & UX
Eliminate the standalone ‘Store’ site and move to Autodesk.com
Engineer the platform on our CMS
Create a UX design that can be used globally with some local variation
Same UX for both Autodesk and external hosted carts (Digital River)
Provide custom cart capability based on Product, terms, or geography
Flexible implementation of existing, planned, & unknown future payment methods

Longer-term

Reuse sections for other transaction systems such as In-product purchase, manual order entry (call-center), or account management
Modularized components for use in other subscription areas such as renewal, add seat, or cancel subscription
Add new payment methods like, ACH, Alipay, bank transfer, Boleto, BACS, CC Avenue, Konbini, iDEAL, Klarna, mobile payments, SEPA, etc…
Implement Online Financing, Pricing (Flex) & Promotion (Mini-Cart)

*Eventually the Platform will handle all transaction*

*Detailed breakdown of needs for smooth work*

* The ‘G’ really stands for ‘Great’, not global, because we were really ambitious

*Animated walk-thru of older existing cart & checkout*

Hindrances

There were a number of issues that hinder the primary stakeholders for a global cart expansion, all effect the business:

User abandonment due to too many steps in the checkout
Screen-to-screen navigation unavailable
Changing the term in the cart was impossible
Cart displays a shipped product legacy
Poor UX on mobile devices
Order Confirmation page too verbose, users can’t find product access

Engineering

Existing Engineering team is not the same team owning the P&L
A new Account Creation & Sign-in is being implemented
Not built on a CMS, so changes & updates require dev work
Also, dev work is on a quarterly waterfall schedule
Lack of cookies & session data between screens
Component & UX reuse is non-existent

Design strategy

Apply Scenario Focused Engineering (a set of Design Thinking principles meant for quick iteration) specifically to the eCommerce strategy, focused primarily on a flexible platform for both the publishers/engineering team as well as the business stakeholders globally.

Target (Business Strategy)

The business not only wanted to increase the breadth of products, but improve the UX, and provide an easier localized experience. We know who our customers are and what and how much they are buying.

Observe

There was also plenty of existing qualitative & quantitative data from our existing stores globally, it was possible to correlate abandonment or pain points, “Too many steps”, “I can’t change this to a 1-year subscription”, “The site timed-out, and I can’t get back on”, with cart data.

Frame

Once we understood where there were bottlenecks or pain points it was easy to understand that speed, ubiquity of device, allowing more flexibility to pay or modify the cart were important. A larger group meeting followed for the primary stakeholder groups to brainstorm potential solutions.

Brainstorm

I was asked to design 3 UX variations and solicited 2 more potentials that were posted to a Confluence wiki for use in our Brainstorming session.

After eliminating a design candidate, four teams were created comprised of cross-functional members: designers, engineers, sales & marketing staff, each team would tackle a design, working through the user journey, annotating pros & cons, suggesting features, and asking additional questions for a larger discussion.

We eventually we ended with two new candidates to test with customers. One was eliminated and the third was too much like the existing experience and therefore would be used as a testing baseline.

Build (Testing Prototypes)

We tested two rough UXPin prototypes on usertesting.com: A single page app with all the cart & checkout components, obviously on one page. And a lightbox modal which would present on top of the existing page and let the user navigate through each step to a separate checkout page.

*Key principles of Scenario Focused Engineering*

Detailed Design Process

Portions of the first 4 steps in the design process are described above. Additional meetings, discussions, and more importantly, wireframe iterations would follow.

The scope of this project required additions or removal of stories as scope was refined. More often than not it was removal to ensure ‘minimal loveable product’ (MLP) and de-scoped stories are placed in the backlog.

Playing of descoped stories would entail 2-4 sprints. And not all of the design steps would need to be followed (e.g., Step 3) since, the base platform design was already established. In fact, some stories could be accomplished by publishing, instead of engineering.

Design Iterations

Early concepts are drawn on white board (as shown above) or paper. Sometimes when I am alone, but more often than not, the Product Manager, System Architect and the Lead Visual Designer are there so that I can communicate the concept as soon as possible and get their expertise and feedback.

Initial wireframes were done using UXPin, then some later concepts were done in Sketch with InVision App, then finally the Visual Designer and I moved to Figma for final wireframes.

Interaction & customization models are tested in wireframes as well as localized language versions, especially French, German, Russian, Spanish, and some double byte languages.

Hand off to the Lead Visual Design converted wireframes to redline specs in Zeplin and ensured that every element adhered to the ADSK Design System

*Each iteration includes a responsive screen*

*Localized proof-of-concepts (Japanese)*

Results

The GUAC platform has been very successful by a number of metrics. But two stand out. 1.) Sales growth has increased quarter after quarter with eCommerce & self-service renewal representing the largest increases. 2.) The customer satisfaction survey has consistently rated the purchase sales experience 80% or higher, well above the overall 65% average for everything else on our website.

Expansion projects continue to expand the platforms usage both globally & internally as well as add additional features and payment methods.

Additional examples of these can be seem below in the Epilogue.

Epilogue

The following are examples of increased platform expansion and usage.