Cart and Checkout Redesign
Simply To Impress
Simply to Impress is an e-commerce website owned by PlanetArt that offers personalized holiday cards, invitations, announcements, and photo gifts.
Over the past 6-7 years, PlanetArt has only made minor changes to the Simply to Impress desktop site. Realizing that we could make improvements that could increase conversion and make the customer experience better, management asked me to redesign the cart and checkout experience.
Redesign the desktop shopping cart and checkout experience to increase the conversion rate.
Lead designer responsible for research, UX/UI design
December - February 2019; implementation TBD
Understanding the problem
Researching e-commerce best practices and looking at competitors
To shape my vision for a new shopping cart and checkout experience, I first read a few online articles about cart abandonment. A 2018 Baymard Institute study found that the average shopping cart abandonment rate was 69.57%. Here are some reasons they found for abandonment:
I also read about e-commerce best practices and looked at the sites of direct and indirect competitors to see how they’ve implemented best practices.
How did our shopping cart compare?
After reviewing our current shopping cart, I thought we needed to make the primary CTA (i.e., checkout) more prominent, make costs more clear, and simplify the functionality in the cart.
As shown in the image of the cart above, a number of UI elements needed to change:
The Checkout button is small and is given the same visual weight as the less important Save Cart button; if we want customers to click the Checkout button, we need to make it the most prominent button on the page
There’s a Remove button under the quantity and an Update Quantities button next to the Continue Shopping button, making the steps for updating quantity confusing
Costs are only shown at the end of the item list, which could be hidden in carts with a lot of items
Sales tax isn’t included as a cost even though we add it during checkout; with 21% of adults abandoning carts because they can’t see their total cost in the cart (per the Baymard study), our customers need to be able to see their costs up front
The My Orders tab is out of place and unnecessary, especially for customers not logged in
How did our checkout process compare?
After reviewing the checkout process, I knew we needed to reduce friction and present the right information at the right time to minimize checkout abandonment.
The main header and footer is still present, which may distract customers during checkout
Checkout progress indicator doesn’t match the checkout steps
Customers can’t see their order information (items, cost) or their personal details as they progress through the checkout process
Using “Submit” as the CTA is not descriptive
There’s no mention of where my order confirmation is being sent
Estimated arrival dates are grouped together with the card details, making it hard to find
Defining the design requirements
Even without usability testing the current cart and checkout process, it was clear there were many improvements to make based on best practices. Our site needed the following if we wanted customers to purchase from us:
Clear, non-competing CTAs
Clear progress indicators during checkout
Transparent costs in the cart and throughout checkout
Reduced clutter and friction during checkout
How might we improve the cart so that customers can checkout successfully?
In redesigning the cart, my goal was to simplify the UI and make costs transparent at all times so that our customers have the information they need to move forward with their purchase.
In my first iteration, I removed the tabbed view showing Shopping Cart, Projects in Work, and My Orders because the focus of the cart should be on items in the cart. I also added an Order Summary section to the right of the items so that customers can easily see the cost of their order regardless of how many items are in their cart.
To make checkout CTA the most prominent item on the page, I made the button bigger and used ghost buttons for secondary actions, such as Continue Shopping and the Apply promo code button
I moved the Projects in Work section (i.e., the items a customer saves for later) under the cart items and renamed it Saved Projects because many of the e-commerce websites follow this layout—this makes saved items easier to find and serves as a reminder for items customers are interested in buying
I removed My Orders from the cart because customers can still access orders from the My Account drop down in the header
I added PayPal express checkout in the cart for faster checkout, but the company later decided against it because it would have been too complicated to implement, and we’d lose customer information for marketing purposes
I updated links to green to better distinguish them from the brown text
After getting some feedback on my first iteration and looking at fashion websites for more inspiration, I simplified the cart even more.
I removed the order cost summary and checkout buttons below the list of items and decided to make the right side order summary and checkout buttons stick to the top of the page as the customers scrolls—customers will always be able to access their cost information and checkout buttons no matter how far down the page they scroll.
I moved the promo code field to the right so that it’s always accessible. I also added the Save Cart button, which I left out of my first iteration.
To reduce the clutter of all the Edit links next to each editable card type attribute (e.g., cardstock, size, envelope type), I grouped the editable options into one modal that the customer can access by clicking Change Card Options
Customers can now change more than one attribute at a time.
To focus on items in the cart, I simplified the Saved Projects section by hiding all the item details.
Customers can click Show Details if they want to see more information or take action on their saved items.
How might we improve the checkout process so that customers can checkout quickly and confidently?
My goal for the checkout redesign was to show costs at all times and make it easy for customers to see and edit their information so that they quickly and confidently purchase their items.
I removed the confusing progress indicator bar at the top of the page since I felt that having the 4 checkout steps listed vertically sufficiently communicated all the required checkout steps. I also added a preview of the cart items under the Order Summary section so that customers always see what they’re purchasing.
To make checkout super fast for returning customers, clicking Checkout from the cart would take them directly to the Review Your Order step.
Customers can always see their order cost to the right wherever they are in the checkout process. Buttons are not enabled until all required information is filled out.
Form fields now have labels to help customers fill out forms more easily.
I kept the accordion-style checkout the site currently has but added a summary of each completed step as the customer progressed through the flow.
For the payment step, I decided to show the billing address details even when the address is the same as the shipping address to make it quick and easy for customers to confirm their details are correct.
A more detailed preview of the cart items show in the Review step to allow customers to see exactly what they’re paying for before they place their order. Returning customers would be taken directly to this page.
I added more details to the order confirmation page and added a separate column for the estimated arrival date. I also added a Create an Account section to give guest customers the opportunity to create an account.
I created a mini UI component style guide for the developers to reference.
In my second iteration of the checkout flow, I decided to replace the accordion-style checkout with a multi-page checkout process so that customers can focus on one step at a time—they still have the opportunity to review their details in the last step before placing their order. Another reason I replaced the accordion-style checkout was to eliminate confusion over what clicking the back button in the browser would do.
While we currently offer easy access to guest checkout, I wanted to speed up checkout even more by making guest checkout the default option for customers who were new to the site.
After a new customer clicks Checkout from the cart, they are taken to the next step where they enter their email and fill out their shipping address.
Since the checkout steps are no longer visible on one page, I added a progress indicator at the top.
I moved the cart items section to the bottom of the page to give more space for item details—customers feel more confident throughout the checkout process if they get to see exactly what they’re paying for.
If a customer had an account, they could click the Log In link to log in. They could also create an account in this modal by clicking Sign Up.
I also thought it’d be helpful if we automatically checked email addresses entered in the guest checkout email field against registered accounts so that we can automatically prompt guests to log in if their email addresses was tied to an account.
Shipping Address and Shipping Method are grouped under the Shipping step.
In order to keep the checkout process focused on the payment step here, customers don’t see their shipping address or chosen shipping method until they get to the Review step.
Once customers proceed to the Review step, they see a summary of all their information and have the ability to edit each piece.
Instead of making customers go back in the checkout process to edit their information, I decided to use a modal so that they can focus on the task without navigating away from the Review page.
After getting more feedback, I decided to revert back to the original sign in/guest checkout page because we didn’t want to prioritize guest checkout over creating an account—I learned from our product manager that having more customers check out as a guest could lead to more customer service tickets down the road if these guests have questions about their order or their account but can’t find their information on our website.
This is an updated version of how our current log in/sign up/guest checkout page looks. It’s still easy to checkout as a guest, but customers have the option to create an account if they want to save their information.
Validating the changes with usability testing
I created a clickable prototype in Sketch and tested the latest iteration of the cart and checkout process with 3 people who fit our target market—women ages 25-54 who have ordered cards from an online site like Minted or Shutterfly. All three testers did not experience any difficulty navigating through the cart and checkout process, nor did they find anything confusing or unexpected.
Here’s a video walkthrough of the cart and main guest checkout flow:
To help the developers understand the interaction details, I created task flows.
As of May 2019, the new cart and checkout changes are in development. Once the changes go live, I’ll be checking in with the product manager to monitor the conversion rate and see if any customer support tickets are related to the new changes.
Through this project, I realized that secondary research is very valuable. E-commerce is a 500+ billion dollar industry in the United States, and research on what works and what doesn’t is widely available. This secondary research helped me identify areas of improvement for our site. Spending time looking at a variety of retail sites from a competitor like Minted to Home Depot shaped my vision for what I thought would work best. Even though our customers may be different from Home Depot’s customers, I think all online shoppers have similar mental models for how a trustworthy and seamless checkout experience should work, so there’s no need to reinvent the wheel. If we’re asking customers to give us money, we better at least meet their expectations.