We've Launched "The Suddenly Remote Playbook,"
A Comprehensive Guide for Working Remotely
The Suddenly Remote Playbook
Read Now
UX Design
12 minute read

eCommerce Redesigned: How Minor Changes Made Major UX Improvements

Miklos is a UX designer, product design strategist, author, and speaker with more than 18 years of experience in the design field.

It’s often said that “80 percent of your outcomes come from 20 percent of your inputs,” known as the Pareto Principle.

It was certainly the case when I recently engaged a UX-focused redesign for two large eCommerce sites. The project was constrained by a tight budget as well as limited resources and time. Furthermore, I couldn’t touch the sites’ look and feel. Luckily, in spite of the challenges, I was still able to isolate critical UX improvements that were easy to implement. You could say an “80% UX improvement was accomplished with 20% modification.”

These two eCommerce sites were losing customers. They were up against low conversion rates and too many abandoned carts. When we quizzed customers, the frustration with additional usability problems became very apparent. Something needed to be done.

A lot of UX Designers know: First impressions are 94% design-related. A study finds that subsequent impressions, no matter how contradictory, can never make up for the first impression.

The product owners realized they had to move fast. The ultimate goal was to lift the performance of both sites by providing a significantly better user experience, and as a result increase visitor-to-buyer conversion rates, boost sales and turn random shoppers into return shoppers.

The project’s immediate aim was to define the most critical problems and go for the “low-hanging fruit.” As expectations on the ROI were high, it meant we needed to squeeze as much as we could out of each minute and every dollar we spent working on the project.

Music and Arts ecommerce website

The original website

To add extra pressure and a layer of complexity, the sites were created utilizing responsive web design. As our choices were scarce, we decided to zero in on the tiniest adjustments with the greatest impact to improve the UX.

Task Number One: Evaluate Usability

Elaborate usability tests can often be a waste of resources because extensive and expensive testing may be overkill. Basic usability testing is easy, fast and highly effective. It’s not brain surgery. A simple “micro-usability test” will tell you whether your customers can use what you’ve made.

We designed a focused series of formative tests to diagnose specific UI problems. Formative tests focus on the detection and elimination of usability problems (diagnostic evaluation).

You only need to test with five users” and you get tremendous value out of it.

I quickly came up with an audience profile (e.g., several personas from music educators to regular musician-shoppers, as user selection is key), crafted user scenarios and performed task analyses. Why is this important? Archetypal personas portray characters, and user scenarios tell stories. In contrast, a task analysis details sequences of actions taken by an individual person.

Armed with the above, we conducted ten usability-testing sessions—two iterative studies with five users each—and we learned that:

  • The site overall was not attractive which decreased the level of trust
  • Login and registration was a frustrating experience (the very 1st step!)
  • The UI design was noisy; icons for functions were unclear to most users
  • Getting around the sites, i.e., navigation, was less than optimal
  • There was too much inconsistency and confusing language
  • Many basic tasks were difficult to complete
  • Users had issues with the product listing pages
  • On product detail pages vital information appeared disorganized
  • The shopping cart was confusing and messy
  • Saving the cart functionality was not obvious enough and not explained clearly
  • Checkout was frustrating on mobile devices
  • Overall, too many clicks; things were hard to find and the site was frustrating to use

Task Number Two: Pinpoint Effective Solutions

  • Take what we learned and define (and redefine) specific problems and opportunities
  • Ask the questions: What’s worth doing and worth the organization’s investment?
    • Each UX design recommendation must support a mandate of “unlocking value for the user and driving conversion toward more purchases.”
    • Define: “Success for the end user is: …” (e.g., Easily find and buy musical instruments)
    • Define: “Success for the company is: …” (e.g., Increase traffic and sales)
  • What can we actually accomplish within the timeframe and bounds of reality?
  • How are we going to measure a successful outcome?

Task Number Three: Focus on the Biggest UX ROI

After the usability tests, I performed a thorough heuristic evaluation with the aim of identifying anything that was not in alignment with user expectations. Heuristics are “rules of thumb,” UI design conventions, and best practices.

The simplest and fastest-to-implement recommendations expected to give the biggest bang for the buck—a list of quick fixes—were presented to product and engineering for evaluation.

Subscribe to the Toptal design blog and receive our eBook

Exhibit One

Less than optimal user experience with logging in and creating an account.

e-commerce responsive website design login page

The login/registration experience

Logging in or creating an account was a jarring experience that took users away from whatever page they were on to a new page—and then back again. The pop-up lacked hierarchy, was hard to scan, badly organized with too many different font sizes, and—for no apparent reason—a different color background for Educator Login. Wording was incorrect as “Log in” is the appropriate verb, whereas “Login” is a noun. Creating an account for an educator was missing.

During usability testing, users didn’t realize that “Login/Create Account” is clickable and thought they had to log in with a social media account. Explanatory text: Login or create a new account is redundant and unnecessary.

What’s more, “Login/Create Account,” “Login with Facebook,” and “Login with Google Plus” all went to the same page where all options were repeated, while the user expectation was to see a social media login window if they chose to sign in with Facebook.

The Solution

  • Make primary call-to-actions buttons; signify secondary links with an underline.
  • Utilize a modal login/registration window to keep users in the same place no matter where they are on the site (as we’ll see later, this will also become important when a guest shopper/non-logged-in customer wants to save a cart).

e-commerce responsive website design modal login window

Using a modal window for login/registration allows the user to remain "in the same place" no matter where they are on the site

Note: The reason social buttons were repeated in the login window is because users may be in the cart—as guests/not logged in—and wanting to save the cart.

Exhibit Two

The hamburger menu—on tablets and mobile—was awkward. It took too many taps to move through a horizontally-sliding hierarchy, and return to the main menu.

e-commerce responsive website design hamburger menu

The hamburger menu on tablets and mobile

Main menu options would disappear when a user tapped into “Shop,” and many important account options were not available, or at odds with user expectations—such as order tracking, saved carts, wishlist and account settings (they were in the masthead profile pop-up, a separate menu). Tapping outside the slide-in menu would not close it—users had to travel up to the “X” in the top right corner to do it.

The Solution

Redesign the hamburger menu to include important account information. Utilize accordion menus to improve usability (they are useful when you want to toggle between hiding and showing a large amount of content).

Improving site navigation, this generated more efficient browsing by category and facilitated access to account information such as order tracking, saved carts, wishlist, and account settings. Closing the hamburger menu without making a selection was improved by allowing a tap anywhere outside the menu.

Exhibit Three

The account information pop-up was messy and hard to scan, and it included misleading labeling.

e-commerce responsive website design account info dropdown menu

Once customers were logged in, they accessed account information via a pop-up panel in the masthead. Several design problems contributed to bad usability.

First of all, two columns are harder to scan, requiring a Z-pattern instead of a vertical scan. Second, there were too many different font sizes and colors were used inconsistently. The color red—which is used for links—was also used with non-clickable section headers such as “Orders & Products” and “Support.” In point of fact, the black text under these columns are the active links.

The Solution

Replace the pop-up with a vertical menu that matches the hamburger menu design, and includes a clear hierarchy that would also work well on mobile devices.

Exhibit Four

Unlabeled icons in the header are problematic on mobile.

e-commerce responsive website design masthead icons with labels

Users had no idea what those icons meant (except for the cart). Even though its use is widespread, an unlabeled hamburger menu has several usability issues hurting UX metrics.

People don’t want to learn an app; they don’t want to go on a journey of discovery or experimentation to see what works. Clearly-labeled functions instead of cryptic pictorial icons are a must for good usability.

The Solution

Follow UX best practices and add text labels to icons. This would leave no room for interpretation and reduce cognitive load.

Exhibit Five

Product listings pages had mixed messages about available functions. Additionally, there was no way to look at a product quickly and add it to cart without going to the full product detail page.

e-commerce responsive website design search product listing page

There was a lot of inconsistency. “Add to Cart” only appeared on some products, which confused users. (“Why can’t I add another product to the cart?”) “View Options” was redundant because it took customers to the product detail page, just as a click anywhere on the product tile did.

The assumption was that shoppers would understand that some products had options and some didn’t, and those which didn’t could be added to the cart from the listing page. However, this inconsistency confused users, thereby decreasing efficiency and clarity.

Spacing on the pagination was problematic, as it didn’t comply with touch compatibility guidelines on tablets. The numbers were nearly impossible to target with fingers and therefore users struggled to make contact.

The “grid” and “list” view options were invisible to most users. Manually entering a page number didn’t seem helpful or at all valuable since users wouldn’t know what to expect if they jumped to any particular page.

The Solution

  • Make “Add to Cart” consistent across every product. If an option is available—e.g., silver vs. lacquer—a small pop-up would allow option selection, quantity and adding to cart immediately (this was especially useful on less expensive items where users didn’t want to go to a full product detail page).
  • Increase the size of the “grid” and “list” view options—making them more visible—by using icons as opposed to small text links.
  • Remove the ability to enter a page number manually and increase spacing on the pagination for touch compatibility.

e-commerce responsive website design product quickview modal design

On all products an interim stage was introduced—a “Quick View” modal window which allowed customers to quickly see ratings, choose an option, and get just enough information to make a decision without going to the full product detail page. If they didn’t like what they saw, they could return to the product listings page—stay “in place” and enjoy a smoother product browsing experience.

After adding an item to the cart from “Quick View,” customers would be shown recommended accessories in the same window, with the ability to add those to the cart (an upsell opportunity).

Exhibit Six

The product detail page looked disorganized—decreasing the level of trust—and some important information was hidden under tabs.

e-commerce responsive website design product detail page

There was no Add to Cart button on this page! Customers were forced to select a model/color option first—if they were able to intuit that—and then the Add to Cart button would appear, potentially stifling and confusing users in the flow of shopping. There was no visible clue as to how to proceed if they wanted to buy the product. This was a serious design error on an eCommerce site, to say the least.

Customers had to click the rating stars to see the product reviews, which was not intuitive at all. Additionally, the product hero image could have been larger.

Important, persuasive UI badges such as “on sale,” “online only,” “top rated,” etc., were missing from the original page. The ability to add products to the Wish List was not visible, and the product video was too far down the page.

The Solution

  • Redesign the product detail page to appear more balanced and well-structured (increasing customers’ trust), with critical product information visible above the fold on the majority of screens.
  • Display the Add to Cart button on all product pages, and when required gently prompt users to select the model/color option first.
  • Use large, bold text with whitespace surrounding it to attract the eye and showcase the most important information.
  • Bring the recommended accessories section closer to the top to make it more visible for upsell opportunities.
  • Make the product video available next to the main image as part of browsing product images.
  • Make product reviews more discoverable, add a customer reviews link next to the rating stars.

e-commerce responsive website design adding a product to shopping cart

Additionally, a huge upsell opportunity was lost when customers added expensive products to their cart. The company offered a coverage program (a form of extended warranty) that only became available in the cart after they added the product, and was overlooked by most users.

Cross-selling and upselling are important revenue sources in retail. Amazon is said to have about 35% of their revenue coming from these areas. Therefore, the extended coverage program was identified as a huge missed opportunity (the upsell), and in addition to showing recommended accessories (the cross-sell).

The Solution

We added the extended coverage program to the “shopping stream” in a way that could not be missed. After a customer adds a pricey product to their cart, we show a modal window front-and-center outlining coverage program benefits with a big call-to-action button: Protect My Gear.

Exhibit Seven

The shopping cart appeared cluttered and haphazard—again, decreasing customers’ level of trust and leading to abandoned carts. The font size on prices was too small, the discount from MSRP was missing, and changing product quantities was awkward (clicking into a field and manually entering a number then clicking outside of the field to save it).

e-commerce responsive website design shopping cart

An important and handy feature, the Save Cart link, was almost invisible. If customers weren’t logged in, they were taken out of the cart to a login/register page from which they had to return to the cart—a poor user experience.

The Solution

  • Redesign the cart to look well-balanced and organized.
  • Increase font size on prices so they’re easier to see.
  • Make Save Cart a prominent button.
  • Add the MSRP (manufacturer’s suggested retail price) to emphasize the discount.
  • Change the quantity selector to a dropdown.

e-commerce responsive website design login or create an account

As discussed above, the Save Cart functionality was a jarring experience for customers: If they weren’t logged in, they were taken out of the cart to a login/ register page from which they then had to return.

The Solution

Design a site-wide global login/register window that would keep customers “in place,” i.e., not lead them away from the page if they needed to log in or create an account.

Exhibit Eight

When customers added a product to the cart, as a way of confirmation, a “mini-cart” would slide in from the right side.

e-commerce responsive website design adding to shopping cart confirmation

A neat idea, but… it had multiple usability problems. There was no grand total shown. There was redundancy with View Cart and Edit Shopping Cart, as they do the same thing.

If customers added an extended coverage plan in the main shopping cart, it showed up as a separate item in the “mini-cart,” appearing as if it was another product, whereas it should have been tied to one. Promotional codes—again, applied in the main cart—didn’t show up in the mini-cart. And it was also missing a “Checkout with PayPal” option—an important feature.

There was no obvious visual cue (signifier) as to how to close the side panel—it remained open until the user clicked outside of it. Not an intuitive experience.

The Solution

  • Show the total price for items in the cart.
  • Show “Platinum Coverage” clearly tied to specific items.
  • Display promo codes applied to specific items.
  • Add “X” icon top right to signify the ability to close the mini-cart.
  • Remove the redundant Edit Shopping Cart.
  • Add a “Checkout with Paypal” button.

Better UX Leads the Way to an Improved Bottom Line

A product’s end-user experience is the cornerstone to its success. A good user experience doesn’t guarantee success, but a bad one nearly always leads to failure.

It’s well known in the eCommerce space that people are more likely to purchase products if they perceive a high degree of trust. This is influenced by the level of overall user experience and perceived site quality.

According to web credibility research from Stanford, 75% of users admit to making judgments about a company’s credibility based on their website’s design. It takes 50 milliseconds (that’s 0.05 seconds) for users to form an opinion about a site—all a customer needs to decide whether they’ll leave or stay.

Considering the fierce competition in the eCommerce space, it’s critical to focus on user experience. Consumers have a myriad of choices when it comes to online shopping, and they will invariably gravitate toward those experiences that are the most pleasant and frustration-free.

It may not be the only problem, but a low-performing eCommerce site’s issues can often be attributable to impoverished UX. Its prospects can be significantly improved by examining the user experience and running it through some basic usability testing, competitive user experience research, and heuristic evaluation.

Due to our efforts focused on boosting the overall user experience with small, specific fixes:

  • Frustrating interactions were eliminated.
  • Products were easier to find and purchase.
  • Cart abandonment was diminished.
  • Customer trust-level increased.
  • Visitor-to-buyer conversion was lifted.
  • Sales increased.

In other words, applying the 80/20 rule to redesigning the user experience led to success.

• • •

Further reading on the Toptal Design Blog: