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.

It’s time to stop putting UX and UI together all the time

User experience has many components. The user interface is just one of them. By frequently combining these two terms we’re implying that they are equal or two sides of the same coin. That’s not always the case.

UX stands for User Experience. The definition of UX that I like best is that it’s the sum of all the touch points a user has with your product or service over time. UI stands for User Interface. This usually means a digital screen or a voice interface.

A lot of times you are designing screens or voice user interfaces. And there are standards and best practices for this type of effort. But UX is much more. UX by its nature is holistic. It should consider all the elements that impact the user experience.

Imagine you’ve been given the problem of finding out why the call center is getting so many calls from customers asking to explain the bills they’re receiving and bringing that percentage down. After researching the issue you determine that the problem is the way the bill is, or isn’t, designed. And you also find out that the reason it’s designed like this is because the programmers simply let the billing system determine how the bill would look and there weren’t any designers involved in the project. They solved the problem they were given – to send timely and accurate bills to customers, but it wasn’t their job to think of all the elements involved in having a customer receive a bill, understand it, and make a timely payment. This is the job of UX, or at least someone with a UX perspective that can see the real problem. The solution to this problem is to redesign the layout of the bill. There’s no UI involved.

Seeing or hearing UX/UI frequently together can easily build the impression that these two things are tightly aligned and you can’t have one without the other. I’ve had many stakeholders ask about UX/UI and what it is. The first thing I usually do is separate the terms and say that the UI is just one component of UX. Then I explain UX.

The way we talk about things influences how we think about things. UX designers need to think about the big picture. You always have to consider the needs of people in UX design and there are many things that influence people’s behavior and attitudes outside of the UI.

Evidence driven design

Choosing the right words are essential to provide understanding. But over time words can have a variety of meanings and connotations. Sometimes a word or phrase might need to be changed to provide a new perspective.

In UX work you often hear the term “data driven design”. It’s an important approach because it provides some of the information required to move work forward successfully. But “data” is often thought of as just what can be measured. Quantitative data is very valuable, no doubt, but in UX design the core consideration is always people. It’s the “why” behind the “what”.

We attempt to use qualitative data to translate human experience into numbers, but of course there are limitations. Although there are methods and processes that can be used to better understand people, how do you really see through someone else’s eyes?

By using the term “data driven design” we often set the expectation that only what can be measured is important and actionable. But if we start using the term “evidence driven design” people might start to think that there is a broader consideration to understanding a problem and solving it from a human perspective.

No UX is an island

When you make an investment you’re looking for the best return. You want to make sure your resources are put to their best use. But sometimes your investments don’t deliver the dividends you expect because they are put to work in an environment that limits their effectiveness.

One of the best definitions I’ve heard for UX is that it’s the sum of all the touch points a user has with your product or service over time. This means that if someone uses your app, sees a commercial for your company, and walks into your brick and mortar store – each one of these touch points combine to create the user experience. If you want to get the best return on your investment in UX your organization needs to support collaboration and transparency so that these efforts can be coordinated.

UX island, vector map, aerial view
UX island

In today’s marketplace it’s a given that you need to see things from your customer’s perspective and provide products and services that exceed their expectations. And you’ll see many companies with UX teams that approach their work with skill and passion and are truly focused on the customer. But their efforts can be diminished. This can be because the company’s organizational structure and culture doesn’t easily allow for the dynamic that’s necessary for great UX.

I once worked with a UX team designing an app. We put a lot of effort into the app and designed it to be as elegant, intuitive, and as easy to use as we could. It was a fairly simple design and our feedback and testing showed that it worked well.

Since the app was designed to be company facing, our Human Resources department was also involved in the project. Human Resources had a long history with the way they traditionally provided information to employees; excessive instructions for everything, everywhere. They had been used to working with bad design for so long that they felt they had to explain everything, and many times they did. One of the first things they did when we showed them the login/registration pages in a prototype was to take screen shots and put them in a PDF with written instructions on what to do on every page. We didn’t ask them to do this and we didn’t expect that they would. One of their screen shots showed an input field labeled “Username” with an arrow pointing towards it from a sentence saying “Put your username here”. UX needed to help HR understand that there were better ways to solve their problems.

HR was concerned that people using the app would have a lot of questions so they wanted to add a list of FAQs (Frequently Asked Questions) to the design. We knew FAQs weren’t necessary in the design and we were also concerned that it might create more questions than it answered and distract from the user’s goal. There were also better places for this information to be shown than in the app. We had about two weeks of meetings over the FAQs but eventually HR got what they wanted. We added an 18 question FAQ to an app that basically allowed someone to record something they had done by answering 4 questions (and only one field required manual entry).

As hard as we tried to persuade them that FAQs weren’t necessary in the app and to try and talk about a better solution, we weren’t successful. There was no compromise, we were just told by our management to not fight it anymore and add them. I was even asked if it was “that big of a deal?” As designers, we have to choose when we’re going to fight for design principles.

Our environment also provided very little of the psychological safety we needed to speak up and advocate for UX principles so it was difficult to say no. Even though there was a company wide effort underway to promote the value that UX can bring and the need for collaboration and transparency, there were some substantial roadblocks to overcome. 

One way that I would have addressed the root of this issue would have been to determine what common measurement of UX success we needed to use. Google’s HEART framework gives some insight into UX metrics. Then I would have aligned the KPIs of all the departments that work together so that they were measured on how well they met this holistic metric of customer satisfaction. I would also have leaders that could model the behavior necessary to achieve this goal. The hope would be that people would gradually be able to see the new perspectives necessary to achieve these goals. 

Changing the culture of a company takes a lot of time and effort.  Especially considering the entrenched structures, power dynamics, and political realities of the status quo. But if companies are to survive and thrive in the marketplace of today and tomorrow, they need to take calculated risks towards moving away from the perceived safety of the familiar if their current approach isn’t working as well as it once did. A company should share a common goal of building deep relationships with their customers and creating long term value for the business. And all this starts with being able to work together effectively. One step at a time.