In 1888, 26-year-old William Henry Belk opened a retailer that will later develop into America’s largest privately owned division retailer chain: Belk. At the moment, 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 world cart abandonment charge 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, primarily based on usability testing, that the common large-scale e-commerce web site might make almost 40 enhancements to its checkout movement—an effort that would end in a 35% conversion charge enhance.
To get forward of those industrywide challenges, Belk’s administration workforce referred to 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 clients evaluation their choices prior to purchasing) and the next checkout movement, 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 enhances buyer satisfaction, conversion charges, and gross sales.
The E-commerce Checkout Problem
Belk’s govt workforce wished to launch an MVP (minimal viable product) in six months, a possible however aggressive timeline. The workforce had already developed a reasonably deep understanding of the corporate’s consumer base, so the design course of grew out of present evaluation reasonably than new consumer analysis. Belk knowledgeable designers that the corporate caters to an viewers that’s almost 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 by way of direct visitors, and the common customer views 5.19 pages and stays on the positioning for greater than 4 minutes.
To enrich this present analysis, I analyzed the websites of opponents like Nordstrom and turned to the Baymard Institute to evaluation greatest observe examples of cart and checkout use instances and design patterns. I additionally drew on my expertise designing and launching desk linen model Prado y Barrio and a earlier venture 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 important.
Analyzing Belk’s web site, I made up my mind that the checkout movement 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 patrons see and perceive what they had been buying. For the audience of middle-aged and older customers—who, as a cohort, typically have issue 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 movement of screens, web page components, and interactions customers encounter as they evaluation objects of their luggage 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 important objective was to simplify the web page and information customers to carry out a key habits: double-checking that the merchandise of their luggage had been the precise measurement, fashion, colour, 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 symbolize a serious loss for retailers: In 2023, clients returned $743 billion value of merchandise.
Pre-overhaul, the Belk website supplied the choice to evaluation bag contents, however the design suffered from three issues:
- Promotional provides cluttered the display, distracting customers from their main targets.
- Product photos had been too small for some customers to see.
- A bag modifying button let customers change their order choices at each step within the movement—reasonably than on the finish of the method after they had been prepared to take a look at.
Rising the thumbnail picture sizes was an intuitive choice—we purchase with the eyes. However our suggestions to rid the positioning of muddle and prohibit the modifying menu to the affirmation display got here as a response to the so-called “paradox of alternative,” a time period derived from a physique of analysis that exhibits having too many selections can result in paralysis and depart individuals much less proud of what they choose.
One seminal research by researchers Sheena S. Iyengar and Mark R. Lepper discovered, as an example, that when grocery buyers got too many gourmand jam selections to buy from a show desk (i.e., 24 jam selections versus six), they had been much less prone to buy any jam in any respect. It’s a stunning discovering that has been embraced by fast-casual eating places with restricted menu choices equivalent 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 cellular 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 completely in the event that they’re not .
- Auto-collapsing colour, 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 movement, 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 to nudge customers by the purchasing funnel.
Reimagining the Checkout Movement
For the checkout expertise, our main goal was to condense info unfold throughout three distinctive pages—delivery particulars, fee info, and order evaluation—to a single, scrollable web page.
The 80-20 rule, additionally referred to as the Pareto precept, 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 all the way down to accessibility and the way straightforward it was to view and regulate order particulars, contact info, fee particulars, delivery places, and arrival pace. That is the place we directed our vitality.
Taking cues from Belk’s high-converting cellular app, we created separate checkout flows for visitors and logged-in customers. This allowed us to higher tailor the checkout expertise. Visitor customers, as an example, are unlikely to have Belk Rewards {Dollars} certificates, so we lowered 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 position an order. Our revised design consists of 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 price, and after they can count on it to reach on their doorstep.
After clients have frolicked looking for 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 the consumer scrolls encourages them to finish their purchases. With their contact info, deal with, 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:
- Decreasing 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 kind fields (e.g., e mail, cellphone 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 success particulars.
- Defaulting to bank card for visitor fee, and offering different choices for PayPal and Afterpay.
Coding Design Options
Most of the choices the brand new checkout movement provides clients—together with in-store pickup, same-day supply (in some areas), and dropshipping—required the event workforce to reconfigure algorithms and write discrete code strings to answer edge instances and geographic dependencies. One of many core challenges of the redesign was to accommodate a number of fee and success choices into the supply code.
For example, whereas commonplace shipments can attain anyplace within the US inside 15 days, same-day supply is simply obtainable for purchasers in choose ZIP codes. Belk’s e-commerce workforce has achieved 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, attaining 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 venture, and I in contrast notes with the engineering workforce almost day-after-day to optimize the UX of present card purchases, different fee choices, and different eventualities.
One other problem was that, whereas Belk’s e-commerce website features as a market for third-party retailers, free and discounted delivery incentives aren’t all the time obtainable for these retailers’ merchandise, which additionally fall beneath totally different return insurance policies. Distinguishing them as “market merchandise” with an accompanying label was essential to deliver 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 instances, in some situations, maintaining issues easy and cost-efficient required exhausting selections. Initially, we had wished to present customers a approach to break up a cargo—say, routing certainly one of two pairs of slacks to a house deal with and the second pair to a piece deal with. However conversations with the event workforce 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 could 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 needs to be primarily based on consumer habits and by no means pursued so zealously it cannibalizes different elements 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 delivered to mild options neither group would have arrived at by itself, equivalent to how you can geographically phase choices for same-day delivery. Prolonged conversations with the advertising and marketing workforce led to equally essential revelations. Promotional banners, as an example, might be an efficient gross sales software, but when inappropriately positioned or too grasping for display actual property, they will worsen clients and kill gross sales. Right here, the answer was a compromise: We saved the banners, however shrunk them in order that they didn’t push the CTA under the fold.
Hanging the precise stability in these ambiguous conditions requires a holistic method and open communication throughout groups. Generally you must push exhausting to advance your concepts; different occasions, it’s greatest to pay attention.
The media and measurement agency Ovative Group carried out a three-month audit of Belk’s redesign in early 2024 and made solely minor recommendations for enchancment, so we launched the permitted adjustments to the desktop and cellular purchasing bag and checkout pages—and Belk clients are responding effectively to the streamlined experiences. For me as a UI/UX designer, this venture underscored the enterprise worth of designing an intuitive, user-friendly e-commerce checkout expertise. Investing in considerate digital design—or redesign—may help manufacturers keep away from the widespread drawback of cart abandonment and allow extra clients to finish their purchases.
