Redesigning a checkout flow with Adobe XD

I had been given a project to redesign a mobile checkout flow and wanted to use Adobe XD to build out the prototype. I had worked with Sketch, InVision, and Axure before but had never used XD. I’ve been a big fan of Adobe for some time so I knew they would put a lot of thought into this. Since I had the opportunity I bought a subscription and started teaching myself how to use it.

The image below shows what the original design looked like. It’s one, long, black & white page with about 25 fields. There are many things that quickly stand out that could use attention.

Original check-out flow
The original check-out flow

I won’t list every issue with the design but there are some that are easy to spot. The first is the look and feel. There is nothing inviting about this. Aesthetics play a critical role in usable products. It’s about how we feel. Next, there is no label for the first section (first and last name). Proper labeling helps create mental models that match the users. The title field has also been deprecated for some time so this is unnecessary. There is a section for both shipping and billing address. These pieces of information are frequently the same, but there is no way to let the system know what the user has already entered once can be used again. Making your potential customer do more work than is necessary is not a good way to provide them a customer experience. I say potential because this might be a place where they decide to abandon the checkout flow. It’s important to remember that someone is judging your experience against the best experiences they’ve encountered on the web. This design is also asking to select the credit card type. This is unnecessary as well because the credit card number has the type of card embedded in it. And I can only hope that the right mobile keyboard comes up for the field they’re filling out.

Here is how I re-designed it –

Re-designed check-out flow
Re-designed check-out flow

The use case was that a woman, Samantha, was in an airport waiting to board her plane. She was shopping on her phone and had picked out a dress from a large retailer and had just started the checkout flow. I decided to make the retailer Macy’s.

My first step was to break down the page into steps in order to reduce the visual density and cognitive overhead. I found I could get all the information necessary with 3 screens. I also added some color and styling to make the design more friendly and engaging. I created a color palette off of the Macy’s red star using Adobe Color. I also took into account traditional UI design rules of using grouping, alignment, spacing, whitespace, and proper labeling to create an intuitive and useful design.

One great feature of Adobe XD to help in this design is component states. They allow you to create multiple interactions in the same ‘page’ so you’re not forced to create multiple artboards simply to show a small change in an element in a screen. The last time I used Sketch I remember having to create 12 new artboards to prototype out a menu interaction. You can select any element on a page and make it a component. Below is an example where I made the entire credit card details page a component so I could show the different keyboards and selectors that would come up based on the field someone was filling out.

Adobe XD component states
Adobe XD component states

Below are the component states that come up in the shipping details page. I’m designing type-ahead functionality to provide this information. One of the asks in the project was to make it as easy as possible for the customer to fill out the form and prevent errors. Using type-ahead functionality addresses both of these concerns.

Shipping details initial state
Shipping details initial state
Shipping details page after the customer clicks the first input field
Shipping details page after the customer clicks the first input field
Type-ahead function
Type-ahead function
Address selected and button enabled
Address selected and button enabled

There was also a request for a little bit of internationalization to account for the flow being used outside the US. The only real change needed was to dynamically change the Zip Code label to say Postal Code if it was determined the flow as being used in certain locations outside the US.

There are a number of other great things that Adobe XD can provide including being able to automatically create a responsive design if needed. Allowing the user to create a grid of elements from just creating one element. A very elegant way of handling images in a design. And one of my other favorites, auto-animate. Auto-animate creates motion transitions between elements on a screen as long as the element has the same name in the layers panel. It can provide some elegant interactions.

I think I’d to start using Adobe XD for my prototyping work. It’s useful, easy, and valuable.

If you would like to try the interactive version of my design you can do it here – check-out flow.

Leave a Reply

Your email address will not be published.