Have you ever wondered what the perfect for an online store is? Some designers agree that the best practice is to have no distractions on the , so the user can focus on proceeding with shopping. This approach is widely used on eBay. Other designers claim that the is the perfect place for product cross-selling or upselling, as the user is already motivated to buy and it’s super easy for him to add another product to the and instantly buy it. Amazon is the master of this strategy.

Many times, we see the cart as an entirely separate page, and it’s also quite common to see the cart as a pop-up or sliding tab. This week, in our weekly UX Challenge, I would like to investigate this case and come up with solutions that would create a more pleasant user experience and boost revenue simultaneously.

Actually, we were supposed to investigate the website navigation this week, but we started to wonder: which part of the website navigation should we target? This topic is extremely broad. Finally, we decided to search for an element of navigation that is present in every eCommerce and has a lot to improve.

There are many rules guiding how a specific element in eCommerce should be done. One of the best examples is that the logo should always be placed in the top left corner of the web page and redirect to the homepage (this rule is so great that it works even outside of eCommerce). Another is that the navigation links are either in the form of horizontal text blocks in the top part of the web page or hidden behind a hamburger menu — this one also makes sense. Navigation must always be present and visible, and even if you run some kind of fancy fashion shop, you can hide the navigation behind a hamburger menu, sacrificing the best possible usability for the sake of aesthetics. These rules are simple, and they always work. There is no doubt about it.

The real problem starts with the cart. There are no strict rules on how you should design a cart. So many times I see designers being so lost, that they end up asking clients what they want, and then doing the designs all over again, as the clients don’t know what they want either.

Of course, it’s not the clients’ fault. As designers, we are responsible for the website performance and feel. We should know established patterns and develop them ourselves. The problem is, some of these patterns become obsolete so slowly that we don’t even notice.

Nowadays, our users are shifting from desktop to mobile so fast, that we should rethink everything and build mobile-first eCommerce. Instead of that, many services are still basically desktop versions just downscaled on mobile. And that is a problem.

eCommerce users trends

The modern way of thinking is to create a mobile version of the online store and then upscale it to the desktop. We can use the mobile-first approach everywhere, from a website or search, to operating system design. Just take a look at Googles’ mobile-first indexing or at how Windows changed from versions 7 to 8. Even Apple, in its stubbornness to separate desktop and mobile, introduced a refreshed App Store similar to its iOS version in its new version of macOS — Mojave.

macOS Mojave App Store

So what does a cart look like these days?

Common cart weak points

Nearly every cart looks the same: the cart icon in the top right corner of the web page, a badge with a prompt about the number of items in the cart and, after clicking it, the user is redirected to another cart page (or a side slide mini-cart), and from there, they proceed to the checkout. I see here the fundamental problem with the cart. It’s just another annoying step to go through on the way to the checkout. The cart seems more like an obstacle, lowering the conversion rate, rather than a friendly shop helper that could increase it.

I believe the three main reasons behind it are:

1.Interrupting the flow

Usually, checking your cart is a complicated task and you get redirected several times. First, to check the last product added to your cart, then back to shopping and then back to checkout. A sidebar cart is a better solution, but still not the perfect one. Then we have mobile devices where reaching the cart icon located in top right corner of screens bigger than 5 inches is a very demanding task.

Checking the cart should be one of the easiest actions. Users should be able to dynamically check what is in their cart, and going through the checkout process should have less friction.

2. Restricted functionality

About a week ago, I finished a great book — Blue Ocean Strategy — where the author describes the method of creating “Blue Oceans”, thus removing competition by creating new markets. One of the described techniques was as simple as taking two markets, stripping all the unnecessary stuff from them, and connecting their core value.

A great example of this was Cirque du Soleil which adjoined the (back then) dying circus with popular opera, and in this way, created a whole new market. Maybe by using the same principle, we could connect the cart with some other functionality to create an easy-to-access place to manage products!

Also, from the business point of view, there are many possibilities to use the cart to increase revenue without being pushy (some of them we talked about week ago).

3.No shopping feedback

In many cases, internet shopping doesn’t remind us of shopping at all. More often than not, a webstore experience differs drastically from one in a brick-and-mortar store. We can change this mechanical feel by adding a small human touch via animations and full control, as in fluid interfaces. As Nathan Gitter says: “Fluid interfaces improve the user’s experience, making every interaction feel quick, lightweight, and meaningful”.

Brainstorming the problem solutions

So, as always, we did a brainstorm and tried to figure out solutions to each problem. Here’s what we came up with:

1.Mobile-first cart

Let’s forget existing patterns and rethink the problem. This time with the mobile-first approach in mind. As we know from the great Lyft case study, the best way to make something accessible is to make it reachable with the thumb.

What if we design the shopping cart that way? It would not interrupt a user’s flow thanks to 3 easily switchable states: invisible — when nothing is in the cart, top shown — when there are items in the cart but you see just item count and price, and an expanded view where you just pull your cart up and see all the items in it. That would be super handy for people who shop online a lot. Everything within reach of the thumb. Imagine how handy it would be to shop Amazon or eBay this way.

2.Enhanced animations

Sometimes, redesigning the whole website is too much. But by adding a little human touch, we could provide the users with “living buttons” and enhanced animations.

This way, users would gain the feeling of real-life shopping. Simple, yet elegant.

3.Multicart (cart + shopping list)

Is there really that big a difference between a shopping list and a cart? Maybe users should make many lists, and then buy a whole set with a single click?

Imagine that you are buying office equipment for several companies. With a separate list for each company, you could browse an online store and add e.g. 10 pens to the “Company1” and “Company2” lists, and then a whiteboard to the “Company1” and “Company3” lists, and then finish your shopping in one step. Convenient shopping for many customers at once.

4.Live comparisons

This idea goes a little bit further, it connects “compare” with “cart”. When you add a product to your cart, it is automatically compared to others. So, for example, let’s say you are shopping for a graphics card: you add one to your “cart”, and then continue browsing other graphics cards that are instantly compared with the one you picked. No need to add every product to a compare page. You could do that with ease using your cart, and compare your chosen item to every item in the same category.

5.Drag and drop to the cart

Going back to our a human touch, we could present our items as a horizontal list, and enable users to “drop” items into the cart just by swiping. That would remove the need for CTA’s, and create natural move where users just “put” items in their cart.

6.Cost sharing cart

rMany times, we buy something online with our friends, but later on, we have to split the bill. That creates a mess and an unnecessary problem. Here we present an idea where you could split the bill at the level of your order and pay in parts! A great example of that system working perfectly is a Polish canteen where you can order food for your office, and thus share the delivery cost. The best part about such a service is a list, where everyone sees how much they have to pay and who still must pay. Only after everyone pays for their lunch is anything ordered. Wouldn’t it be great to have such a system in more places?

What is the best cross-selling solution?

After sketching these ideas, we decided to choose two ultimate cart solutions for future eCommerce.

As always, each of us had “4 dots to use”, to place on the designs that we valued most. It turned out that two designs won out, and so we worked them out in detail. We decided to skip digital wireframes, as such deep focus is not needed here.

We made animated shots to show exactly what we meant, as still shots can be confusing, and animation made them even more pleasant.

What do you think? Which two did we pick?

“Mobile first cart” and “Drop cart” are the ones we favoured most, and after a few hours of designing, we managed to output these gems:

Bottom cart concept
Drag and drop cart

So, what do you think about these cart ideas? Maybe you see something that can be improved or think that another type of cart page would be better? Please let us know in the comments!

If you like this kind of activity, please let us know by giving a clap or a comment.

Thank you for your time, and if you want to, check out more at Divante’s Dribbble .

______________

The cart case study is part of the Divante weekly UX challenge.

Check out more case studies.



Source link https://blog.prototypr.io/ux-challenge-why-cart-page-design-is--4-10-862d58d801a1?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here