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

To get forward of those industrywide challenges, Belk’s administration group referred to as for a six-month e-commerce overhaul, together with redesigning the procuring and checkout experiences. As a part of this broader initiative to streamline the acquisition funnel, I used to be requested to rethink the procuring bag expertise (i.e., how clients evaluate their alternatives prior to purchasing) and the next checkout move, throughout which customers present transport and cost particulars.

The redesigned web site 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 enhances buyer satisfaction, conversion charges, and gross sales.

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 quite 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 clients are 45 years or older, 46% arrive on the positioning through direct site visitors, and the typical customer views 5.19 pages and stays on the positioning for greater than 4 minutes.

To enhance this current analysis, I analyzed the websites of opponents like Nordstrom and turned to the Baymard Institute to evaluate greatest observe 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 an important e-commerce precept: Eradicating pointless steps from the buyer journey is crucial.

Analyzing Belk’s web site, I decided that the checkout move had too many pages and an excessive amount of textual content, the call-to-action (CTA) buttons have been inconsistent and never ideally positioned, and there weren’t sufficient photographs to assist consumers see and perceive what they have been buying. For the target market of middle-aged and older customers—who, as a cohort, typically have issue seeing at shut vary as a result of farsightedness and circumstances like presbyopia that may develop later in life—these points have been notably problematic. These issues are solely compounded on cell screens.

My key goal within the checkout redesign was to simplify the move of screens, web page components, and interactions customers encounter as they evaluate objects 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 cell and desktop procuring funnels.

For the procuring bag expertise, our primary purpose was to simplify the web page and information customers to carry out a key habits: double-checking that the merchandise of their baggage have been the precise dimension, fashion, shade, and amount. Anybody who has ever had a pair of laughably ill-sized pants arrive on their doorstep or booked a flight for the unsuitable date understands why this step is so essential. And returns characterize a significant loss for retailers: In 2023, clients returned $743 billion price of merchandise.

Pre-overhaul, the Belk web site provided the choice to evaluate bag contents, however the design suffered from three issues:

1. Promotional affords cluttered the display screen, distracting customers from their major targets.
2. Product photographs have been too small for some customers to see.
3. A bag enhancing button let customers change their order alternatives at each step within the move—quite than on the finish of the method after they have been prepared to take a look at.

Growing the thumbnail picture sizes was an intuitive resolution—we purchase with the eyes. However our suggestions to rid the positioning of muddle and prohibit the enhancing menu to the affirmation display screen got here as a response to the so-called “paradox of selection,” a time period derived from a physique of analysis that reveals having too many selections can result in paralysis and depart folks much less proud of what they choose.

One seminal examine by researchers Sheena S. Iyengar and Mark R. Lepper discovered, for 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 have been much less prone to buy any jam in any respect. It’s a shocking discovering that has been embraced by fast-casual eating places with restricted menu choices corresponding 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 scale back abandonment and amplify the CTA by eradicating distractions. These included:

• Collapsing the search bar within the cell show of the My Bag web page to restrict abandonment and add scroll depth.
• Decreasing the scale of a Belk bank card marketing campaign banner and permitting customers to shut the window fully in the event that they’re not .
• Auto-collapsing shade, dimension, amount, and transport particulars right into a single, uncluttered container with +/- alternatives for amount adjustments.
• Presenting specific checkout cost choices later within the buy move, 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 cell display screen to nudge customers by means of the procuring funnel.

Reimagining the Checkout Stream

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

The 80-20 rule, additionally referred to as the Pareto principle, helped drive our selections 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 cell and desktop checkout pages, these “causes” boil all the way down to accessibility and the way simple it was to view and regulate order particulars, contact info, cost particulars, transport places, and arrival velocity. That is the place we directed our vitality.

Taking cues from Belk’s high-converting cell app, we created separate checkout flows for visitors and logged-in customers. This allowed us to raised tailor the checkout expertise. Visitor customers, for example, are unlikely to have Belk Rewards {Dollars} certificates, so we decreased 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 web site, these particulars have been displayed in a number of sections and required customers to jump-link previous key info to position an order. Our revised design contains the thumbnail picture, estimated supply date, and order worth on a single web page. This makes it simpler for customers to see suddenly what they’re shopping for, how a lot their order will value, and after they can anticipate it to reach on their doorstep.

After clients have hung out 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 irrespective of how far down the display screen the consumer scrolls encourages them to finish their purchases. With their contact info, tackle, and cost info saved, there isn’t a cause to ask for this information: Logged-in customers can full checkout in two clicks.

In a snapshot, our key suggestions included:

• Decreasing a three-page, multistep checkout course of to a easy one-step checkout.
• Including a sticky CTA to the underside of the cell and desktop screens to maintain the consumer’s purpose in thoughts and encourage funnel development.
• Consolidating kind fields (e.g., e-mail, cellphone quantity, ZIP code, metropolis) to enhance scroll depth.
• Incorporating titles with massive, legible textual content fonts inside enter fields to enhance accessibility.
• Displaying an above-the-fold order abstract with thumbnail photographs, order worth, and achievement particulars.
• Defaulting to bank card for visitor cost, and offering various choices for PayPal and Afterpay.

Coding Design Options

Lots of the choices the brand new checkout move affords clients—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 answer edge circumstances and geographic dependencies. One of many core challenges of the redesign was to accommodate a number of cost and achievement choices into the supply code.

As an example, whereas commonplace shipments can attain wherever within the US inside 15 days, same-day supply is simply out there for patrons in choose ZIP codes. Belk’s e-commerce group has performed a superb job budgeting time to accommodate such nuances, that are essential to the shopper expertise however require pretty refined software program engineering to execute.

On the workflow degree, attaining such a excessive degree of consumer customization has meant near-constant communication between the design and improvement groups. A Figma web page of added situations 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 present card purchases, various cost choices, and different situations.

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

Whereas we did our greatest to accommodate edge circumstances, in some cases, maintaining issues easy and cost-efficient required laborious selections. Initially, we had wished to offer customers a approach to cut up a cargo—say, routing one in every of two pairs of slacks to a house tackle and the second pair to a piece tackle. However conversations with the event group and additional market evaluation revealed that the comfort the characteristic would carry to a tiny subset of customers didn’t warrant the appreciable time and staffing expense it might require to code.

If there’s a lesson right here, it’s this: Comfort often is the linchpin of e-commerce, however the way you ship it needs to be based mostly on consumer habits and by no means pursued so zealously it cannibalizes different facets of what you are promoting.

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 improvement groups delivered to mild options neither group would have arrived at by itself, corresponding to the best way to geographically phase choices for same-day transport. Prolonged conversations with the advertising group led to equally necessary revelations. Promotional banners, for example, may be an efficient gross sales instrument, but when inappropriately positioned or too grasping for display screen actual property, they will worsen clients 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 beneath the fold.

Putting the precise steadiness in these ambiguous conditions requires a holistic strategy and open communication throughout groups. Typically you have to push laborious to advance your concepts; different instances, it’s greatest to pay attention.

The media and measurement agency Ovative Group performed a three-month audit of Belk’s redesign in early 2024 and made solely minor solutions for enchancment, so we launched the permitted adjustments to the desktop and cell procuring bag and checkout pages—and Belk clients are responding properly 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—can assist manufacturers keep away from the widespread drawback of cart abandonment and allow extra clients to finish their purchases.