June 25, 2024

In 1888, 26-year-old William Henry Belk opened a retailer that might later develop into America’s largest privately owned division retailer chain: Belk. Immediately, the corporate has 290 places, primarily throughout the southeastern US, and Belk.com is the seventh most visited e-commerce and purchasing website within the US. However even a profitable retailer like Belk faces digital challenges. The typical global cart abandonment rate throughout e-commerce retailers is a whopping 70%, in response to 2024 knowledge from the shopper expertise researchers on the Baymard Institute. The institute additionally posits, based mostly on usability testing, that the common large-scale e-commerce web site might make practically 40 enhancements to its checkout stream—an effort that might end in a 35% conversion rate increase.

To get forward of those industrywide challenges, Belk’s administration group known as for a six-month e-commerce overhaul, together with redesigning the purchasing and checkout experiences. As a part of this broader initiative to streamline the acquisition funnel, I used to be requested to rethink the purchasing bag expertise (i.e., how prospects overview their choices prior to purchasing) and the following checkout stream, throughout which customers present delivery and fee particulars.

The redesigned website is a vivid illustration of how empathizing with customers’ wants—on this case, these of a largely older viewers—can result in an improved e-commerce expertise that reinforces buyer satisfaction, conversion charges, and gross sales.

An app is displayed next to the text: “Improving checkout UX can potentially increase the conversion rate of the average large-scale e-commerce site by 35%.”

The E-commerce Checkout Problem

Belk’s government group wished to launch an MVP (minimal viable product) in six months, a possible however aggressive timeline. The group had already developed a reasonably deep understanding of the corporate’s consumer base, so the design course of grew out of current evaluation slightly than new consumer analysis. Belk knowledgeable designers that the corporate caters to an viewers that’s practically 80% feminine, with its largest buyer base between the ages of 55 and 64 years outdated. What’s extra, 65% of Belk’s prospects are 45 years or older, 46% arrive on the location via direct traffic, and the common customer views 5.19 pages and stays on the location for greater than 4 minutes.

To enhance this current analysis, I analyzed the websites of rivals like Nordstrom and turned to the Baymard Institute to overview greatest apply examples of cart and checkout use circumstances and design patterns. I additionally drew on my expertise designing and launching desk linen model Prado y Barrio and a earlier challenge designing a loyalty app for Etos, one of many largest drugstore chains within the Netherlands. Each roles uncovered me to a vital e-commerce precept: Eradicating pointless steps from the shopper journey is crucial.

Analyzing Belk’s web site, I made up my mind that the checkout stream had too many pages and an excessive amount of textual content, the call-to-action (CTA) buttons had been inconsistent and never ideally positioned, and there weren’t sufficient photos to assist consumers see and perceive what they had been buying. For the target market of middle-aged and older customers—who, as a cohort, usually have problem seeing at shut vary attributable to farsightedness and situations like presbyopia that may develop later in life—these points had been significantly problematic. These issues are solely compounded on cellular screens.

My key goal within the checkout redesign was to simplify the stream of screens, web page components, and interactions customers encounter as they overview gadgets of their baggage and proceed to checkout. The adjustments particularly goal older customers, although I imagine they may make the expertise extra user-friendly and intuitive for everybody. As a deliverable of the design effort, I shared prioritized suggestions for usability adjustments throughout Belk’s cellular and desktop purchasing funnels.

For the purchasing bag expertise, our predominant objective was to simplify the web page and information customers to carry out a key habits: double-checking that the merchandise of their baggage had been the best measurement, type, coloration, and amount. Anybody who has ever had a pair of laughably ill-sized pants arrive on their doorstep or booked a flight for the fallacious date understands why this step is so essential. And returns characterize a serious loss for retailers: In 2023, customers returned $743 billion price of merchandise.

Pre-overhaul, the Belk website provided the choice to overview bag contents, however the design suffered from three issues:

  1. Promotional affords cluttered the display screen, distracting customers from their major targets.
  2. Product photos had been too small for some customers to see.
  3. A bag modifying button let customers change their order choices at each step within the stream—slightly than on the finish of the method after they had been prepared to take a look at.

Growing the thumbnail picture sizes was an intuitive determination—we purchase with the eyes. However our suggestions to rid the location of litter and limit the modifying menu to the affirmation display screen got here as a response to the so-called “paradox of choice,” a time period derived from a physique of analysis that exhibits having too many selections can result in paralysis and go away folks much less pleased with what they choose.

One seminal examine by researchers Sheena S. Iyengar and Mark R. Lepper discovered, as an example, that when grocery customers got too many connoisseur jam selections to buy from a show desk (i.e., 24 jam selections versus six), they had been less likely to purchase any jam in any respect. It’s a shocking discovering that has been embraced by fast-casual eating places with restricted menu choices similar to Chipotle and—more and more—digital product designers.

Taking the spirit of those classes to coronary heart, we made a number of tactical suggestions to the My Bag web page to cut back abandonment and amplify the CTA by eradicating distractions. These included:

  • Collapsing the search bar within the cellular show of the My Bag web page to restrict abandonment and add scroll depth.
  • Lowering the scale of a Belk bank card marketing campaign banner and permitting customers to shut the window totally in the event that they’re not .
  • Auto-collapsing coloration, measurement, amount, and delivery particulars right into a single, uncluttered container with +/- choices for amount adjustments.
  • Presenting categorical checkout fee choices later within the buy stream, after the consumer has progressed to checkout.
  • Including the choice to edit the bag’s contents with a modal (lightbox) that requires consumer engagement and eliminates the necessity to return to the product record web page.
  • Utilizing a sticky CTA button on the backside of the cellular display screen to nudge customers by means of the purchasing funnel.
A screenshot of Belk’s redesigned My Bag page shows the product details for a pair of shorts, an order summary, and the Belk rewards banner.
The desktop view of Belk’s redesigned My Bag web page features a minimized bank card banner and an uncluttered container that shows the merchandise’s coloration, measurement, amount, and delivery methodology. A characteristic that allows customers to shut the bank card banner is in growth.

Reimagining the Checkout Circulate

For the checkout expertise, our major goal was to condense info unfold throughout three distinctive pages—delivery particulars, fee info, and order overview—to a single, scrollable web page.

The 80-20 rule, additionally known as the Pareto principle, helped drive our choices about what content material choices to prioritize within the design. Briefly, the rule posits that 80% of enterprise outcomes are the results of the identical 20% of causes. Utilized to Belk’s cellular and desktop checkout pages, these “causes” boil right down to accessibility and the way simple it was to view and modify order particulars, contact info, fee particulars, delivery places, and arrival velocity. That is the place we directed our power.

Taking cues from Belk’s high-converting cellular app, we created separate checkout flows for company and logged-in customers. This allowed us to raised tailor the checkout expertise. Visitor customers, as an example, are unlikely to have Belk Rewards {Dollars} certificates, so we diminished the scale of these fields within the visitor checkout.

For logged-in customers, our focus was to maintain all related order particulars above the fold. On Belk’s earlier website, these particulars had been displayed in a number of sections and required customers to jump-link previous key info to put an order. Our revised design contains the thumbnail picture, estimated supply date, and order value on a single web page. This makes it simpler for customers to see abruptly what they’re shopping for, how a lot their order will value, and after they can count on it to reach on their doorstep.

After prospects have frolicked trying to find a brand new swimsuit or pair of sandals, they don’t need to spend extra time scrolling round for the Purchase button. A sticky Place Order CTA pinned to the underside of the checkout web page that stays in place regardless of how far down the display screen the consumer scrolls encourages them to finish their purchases. With their contact info, handle, and fee info saved, there is no such thing as a cause to ask for this data: Logged-in customers can full checkout in two clicks.

In a snapshot, our key suggestions included:

  • Lowering a three-page, multistep checkout course of to a easy one-step checkout.
  • Including a sticky CTA to the underside of the cellular and desktop screens to maintain the consumer’s objective in thoughts and encourage funnel development.
  • Consolidating type fields (e.g., e-mail, telephone quantity, ZIP code, metropolis) to enhance scroll depth.
  • Incorporating titles with giant, legible textual content fonts inside enter fields to enhance accessibility.
  • Displaying an above-the-fold order abstract with thumbnail photos, order value, and achievement particulars.
  • Defaulting to bank card for visitor fee, and offering various choices for PayPal and Afterpay.
The redesigned checkout page shows two pairs of shorts, shipping method, fields for the user’s address and email, total cost, and a blue “place order” button.
The cellular view of the redesigned checkout course of contains an above-the-fold order abstract. Prospects scroll right down to enter their fee methodology and full the acquisition, making the expertise a one-step checkout.

Coding Design Options

Lots of the choices the brand new checkout stream affords prospects—together with in-store pickup, same-day supply (in some areas), and dropshipping—required the event group to reconfigure algorithms and write discrete code strings to reply to edge circumstances and geographic dependencies. One of many core challenges of the redesign was to accommodate a number of fee and achievement choices into the supply code.

As an example, whereas customary shipments can attain anyplace within the US inside 15 days, same-day supply is barely obtainable for purchasers in choose ZIP codes. Belk’s e-commerce group has carried out an excellent job budgeting time to accommodate such nuances, that are essential to the shopper expertise however require pretty subtle software program engineering to execute.

On the workflow stage, reaching such a excessive stage of consumer customization has meant near-constant communication between the design and growth groups. A Figma web page of added eventualities was my largest file for the challenge, and I in contrast notes with the engineering group practically day by day to optimize the UX of reward card purchases, various fee choices, and different eventualities.

One other problem was that, whereas Belk’s e-commerce website capabilities as a market for third-party retailers, free and discounted delivery incentives aren’t at all times obtainable for these retailers’ merchandise, which additionally fall below completely different return insurance policies. Distinguishing them as “market merchandise” with an accompanying label was necessary to deliver readability to the acquisition course of and, hopefully, keep away from misunderstandings that may frustrate customers and injury their belief.

Whereas we did our greatest to accommodate edge circumstances, in some cases, holding issues easy and cost-efficient required onerous selections. Initially, we had wished to provide customers a strategy to cut up a cargo—say, routing one among two pairs of slacks to a house handle and the second pair to a piece handle. However conversations with the event group and additional market evaluation revealed that the comfort the characteristic would deliver to a tiny subset of customers did not warrant the appreciable time and staffing expense it will require to code.

If there’s a lesson right here, it’s this: Comfort stands out as the linchpin of e-commerce, however the way you ship it ought to be based mostly on consumer habits and by no means pursued so zealously it cannibalizes different points of your small business.

Collaboration Breeds Confidence and Belief

E-commerce checkout is a realm of digital design that calls on open collaboration from stakeholders throughout a company. On this case, dialogue between the design and growth groups dropped at mild options neither group would have arrived at by itself, similar to learn how to geographically phase choices for same-day delivery. Prolonged conversations with the advertising group led to equally necessary revelations. Promotional banners, as an example, may be an efficient gross sales device, but when inappropriately positioned or too grasping for display screen actual property, they’ll worsen prospects and kill gross sales. Right here, the answer was a compromise: We stored the banners, however shrunk them so that they didn’t push the CTA under the fold.

Putting the best stability in these ambiguous conditions requires a holistic strategy and open communication throughout groups. Typically you might want to push onerous to advance your concepts; different occasions, it’s greatest to hear.

The media and measurement agency Ovative Group performed a three-month audit of Belk’s redesign in early 2024 and made solely minor strategies for enchancment, so we launched the accepted adjustments to the desktop and cellular purchasing bag and checkout pages—and Belk prospects are responding nicely to the streamlined experiences. For me as a UI/UX designer, this challenge underscored the enterprise worth of designing an intuitive, user-friendly e-commerce checkout expertise. Investing in considerate digital design—or redesign—may also help manufacturers keep away from the widespread drawback of cart abandonment and allow extra prospects to finish their purchases.