Author: stepheneighmey

I had taken on 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 XD.

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.

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 or engaging 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. 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 that what the user has already entered once can be used again. Making your potential customer do more work than is necessary is not something they’ll be happy with. I say potential because this might be a place where they decide to abandon the checkout flow, and your product. 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 the user 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 –

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 visual density and cognitive overhead. I found I could get all the information necessary with 3 steps. 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 (purplespace), and proper labeling to create an intuitive and useful design.

One great feature of Adobe XD to help build out 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 on a screen. The last time I used Sketch I remember having to create 12 new artboards to prototype out a menu interaction. With XD 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.

Below are the component states that come up in the shipping details page. I’m indicating type-ahead functionality in my documentation to help the user complete the form. 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. This technology addresses both of these concerns.

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 was being used in certain locations outside the US and connecting to a serrvice for international addresses for the address fields.

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 very nice micro-interactions.

This is a good tool for prototyping. It’s quick and easy. There are many tools dedicated to UX work and they are all relatively easy to learn. But t’s not really the tool that’s important, but what you do with them.

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

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.  Many companies with UX teams approach their work with skill and passion and are truly focused on the customer. But their efforts can be diminished if your company’s structure doesn’t support the dynamic that’s necessary for great UX.

Imagine that your UX department has created a design for an online experience that’s elegant and intuitive. As you’re working with your architects and developers you find out that this design isn’t feasible because of some technical limitations of your backend systems. What do you do? You have to revise your design so that it takes into account the limitations of your infrastructure. This design is called a bandaid, and no designer wants to create one. You can also advocate for change and hope the company decides to dedicate resources towards building out a customer focused ecosystem. But this takes time and a shift in thinking at various levels of the organization. Ideally, your company’s infrastructure would have been built with the customer in mind in the first place, but it’s usually built with the company in mind. It’s not the company’s fault. They probably built out their infrastructure with the best intentions, but many legacy systems were built long before UX became a formal discipline. But it limits what the customer experience could be.

In some companies there are also departments that carry more weight than others for various reasons. Many times it’s a cultural or political artifact, but by inertia alone they can steer the company in a certain direction. If these departments are focused on the customer experience then your path ahead is much smoother. If its focus is something other than the customer then the situation is more challenging. Not only do you have to create great designs backed by research where you can clearly articulate the advantages of your position, but you also have to be a diplomat and strategist working in channels outside of the UX domain in order to affect change. Sometimes this is necessary, but it takes time and effort away from helping your customer.

UX, holistic by nature, doesn’t work as well when it’s not aligned to other efforts in your organization that also contribute to the customer’s experience with your business. But if your company has a structure and strategy where all of your resources work together to create a great customer experience, then you will reap rewards far into the future with increased customer satisfaction and loyalty that directly contribute to your brand and your bottom line.