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.