Bag & Checkout Redesign
Helping users understand complex pickup/delivery options, easing various usability issues, adding a ‘Save for Later’ feature, and other usability improvements for Bag & Checkout at Express
Background
For many who don’t work in e-commerce, the checkout stream on your favorite e-tailor’s websites and apps may seem like an afterthought. All checkouts seem pretty straightforward and they don’t vary much from site-to-site, right?
In this ever-evolving e-commerce landscape, major retailers are constantly adding new features to their Bag & Checkout experiences such as: new delivery methods, alternative payment methods, third-party vendors, customer loyalty rewards, and the list goes on. With all of these variables changing rapidly at the hands of various internal teams, it becomes imperative for a UX team to keep a close eye on the performance and usability of this absolutely business-critical area of the e-commerce site and apps.
-
Senior UX Designer at Express
Checkout project UX strategy lead -
Web: desktop and mobile
App: iOS and Android -
Sketch, Figma, UserTesting.com, Miro, OpinionLab, Adobe Analytics, session recordings
-
Phase I (Research)
January 2022 - March 2022
Phase II (Design)
April 2022 - June 2022
Early Discovery
OpinionLab
Discovery for this project began with user feedback from OpinionLab, an always-on service which captures feedback that users provide (vent about) while experiencing issues online or in-app. Express had received hundreds of complaints regarding Bag/Checkout issues, and these complaints were our starting point for the UX research process.
High-level themes:
Users not able to find expedited shipping options
Input issues with international orders
Requests for a ‘Save for Later’ feature
Competitive Analysis
A standard early step in all projects, competitive analysis was done to help analyze the current state of our Bag/Checkout from a comparative perspective, to help form more hypotheses around what may be improved.
High-level hypotheses:
More white space makes content easier to scan
Flexible pickup/delivery options throughout both Bag and Checkout streams
Signed-in users should have saved info / skip certain checkout steps
Analytics & Session Recordings
In collaboration with the Analytics team, we were able to leverage Adobe Analytics as well as a session-recording tool in order to gain insight into users’ behavior, and to identify which areas of the checkout stream we should be most concerned by, from a cart abandonment standpoint.
High-level observations:
High cart abandonment at Delivery Options step
Options hidden behind drop-downs were not seen
User Testing
In order to solidify our hypotheses around improving existing features, I organized user tests with real Express customers: one for Bag and a separate test for Checkout. Participants were able to use their own devices to access the live website (desktop and mobile) and app (test was limited to iOS). Results of this testing were helpful in determining not only what existing features needed tweaks, but also gave insight into what areas were working well as they were. Both tests provided qualitative and quantitative feedback.
Bag Test
The bag test saw users perform various basic tasks and collected all verbal reactions, written responses to questions, and recordings of the test sessions. Users were asked to add 2-4 items to their cart, share broad reactions, remove items, edit items, and interact with various elements on the page, like the promo field.
Bag test plan and notes
Bag test analysis and findings
Checkout Test
Testing the checkout flow was a bit more complicated, as there are many steps involved in the checkout flow (Contact Info, Delivery Options, Payment, etc.) and a litany of different possible scenarios that users encounter at each step. Rather than test every extreme scenario, I had to focus on a basic flow to send participants through. Despite this, valuable insights were gathered, and users made great suggestions for improvements.
Test participants wasted an average 30 seconds of time and effort entering in redundant or unnecessary information, due to repetitive form fields and mis-ordered Checkout steps.
Full name and email address needed to be entered in twice, unnecessarily
Billing address was unnecessarily collected, despite the user not using a payment method which required it
11/12 total participants expressed frustration around visual clutter and distractions, like the Express Credit Card adverts, scarcity messaging, and overall sloppiness around the display of information
Checkout test plan and notes
Results / HIghlights
All test participants (6/6) overlooked the dropdown menu for expedited shipping method selection. One, narrating their thought process while completely missing the shipping options, expressed disappointment that they would be unable to get their order in time for the holiday season. This helped to prove that the Delivery Options needed to be much more prominent in order for users to intentionally find them, let alone discover them organically, and therefore have a more fluid and flexible experience.
At the time, on-site analytics were showing an unhealthy amount of cart abandonment happening at the Delivery Options section of Checkout, and the rate of users purchasing an expedited shipping method was below five percent
Problem Areas
Having compiled all of these findings from various research and discovery methods, the path ahead was beginning to look clearer. It was apparent that we had various issues to tackle across Bag and Checkout, large and small. Below is just a handful of the issues which stuck out the most from the research.
Estimation & Requirement Definition
The research done up to this point had provided a large amount of findings and suggestions for enhancing the Bag & Checkout experience. There would be a lot of work to do from small tweaks for improving usability, to the introduction of whole new features, like ‘Save for Later.’ At this point, it was imperative to break this large list into digestible, iterable pieces, and to begin discussions of feasibility and timing with product and delivery teams. After plenty of affinity-mapping and matrix-prioritization exercises, the following epics were created, with visuals below:
Reduce Visual Clutter
Error & Promo Messaging Improvements
Marketplace Shipping Clarity
Order Confirmation Screen & Email Refresh
Improve Visibility of Delivery Options in Checkout
Checkout Usability Improvements
Streamlining Checkout
‘Save for Later’ Feature Addition
High-level requirements as visuals, used for dev/product estimation
Final Designs
After few weeks of negotiating with product teams and hours of design work from Interaction Design partners, final comps were handed off for development. Keep reading for some of the redesign highlights, which are still being rolled out to production today.
Design Refresh + Card Based Structure
This project involved an entire refresh of the Bag & Checkout design system. One of the most important, however subtle, visual changes to come from this project is the new card-based structure wherein content is neatly grouped into appropriate sections, and divisions between content are clear. This small visual design tweak makes it easier for users to scan the items in their bag, corrects the issues of legibility around the Bag Summary section, and lowers the cognitive burden associated with looking at long forms in checkout.
New ‘Save for Later’ Feature
The biggest “net new” addition to from this Bag & Checkout redesign was the introduction of a ‘Save for Later’ feature. Users had been requesting a way to save items within their Express accounts for years, and this project was a perfect introduction to an MVP of that concept for our users. We found that ‘Save for Later’ raised our conversion rate and decreased the amount of time before users made another order.
This feature was launched in fall of 2022, and is expected to bring in over $5M in annual revenue.
Product Card Content Clean-Up
In the discovery phase, we learned that users were not satisfied with the display of products in their bag. Some products, like e-gift cards, were lacking critical details, while all cards in general were also lacking visual distinction and appearing to look cluttered based on poor design system maintenance. Our new product cards are clean, detailed, and specific to the products they represent — not to mention, they no longer all bleed into one another. This passive enhancement is expected to have a positive impact on users’ cognitive load and to improve brand perception.
Delivery and Pickup Options
The redesigned Shipping & Pickup Options step is impossible to miss, and much easier to read or scan than its predecessor. Shipping options are no longer hidden behind a link, marketplace shipping is clarified and segmented by vendor, E-gift cards finally display, and users no longer need to go back to Bag to remind themselves of what shipping/pickup options they’d chosen.
Previously, this was a section of Checkout notorious for cart abandonment, and which was bringing in almost no revenue at all from expedited shipping due to usability hindrances with the previous design. Now, we expect revenue in the hundreds of thousands for expedited shipping, and a dramatic decrease in cart abandonment.
Payment Section
The new Payment step in Checkout is streamlined to save users from entering unnecessary information, make it easier to use gift cards as payment, and also includes Apple Pay on all channels (Apple Pay was originally only available in iOS app). While users previously needed to enter a Billing Address regardless of their form of payment, we now only ask for billing address when payment options that require it are selected (credit/debit cards, and certain scenarios with Apple Pay).
Order Confirmation
The redesigned Order Confirmation screen reflects the same visual language that users encounter in the rest of the new Bag/Checkout flow. Users can see thumbnails of their purchased items displayed next to information around their selected delivery and/or pickup method. This newly redesigned page is a major improvement compared to its predecessor, which often caused users to call in with questions around missing information and questions around how to pickup items in-store. In addition to this redesigned page, a complementary email is sent to the user, which has also been redesigned to reflect the new visual language.
Looking for more designs? Please feel free to review the iOS, mobile, and desktop designs for this project here: