UX/UI tricks and tips for a cleaner checkout! The importance of footer in the shopping experience

I will tell you about the steps I and my team did to redesign our footer in checkout!


Naiade Caparelli

a year ago | 5 min read

Computer and Smartphone showing the new footer

My first project after I joined Level UP’s e-commerce team was as enjoyable as it was challenging.

Since the UX culture is very new within the company (everyone is slowly understanding what we do), our goal was not only to improve the usability of our website, Hype, but also to show in practice what user experience is. We wanted to bring simple solutions to problems that existed in our checkout. Thus, we chose to do a benchmarking followed by an analysis of our e-commerce.

Deadlines and Tasks

I tried my best with the time I was given (3 weeks). Me and my team divided the task into two stages:

  1. Benchmarking and Analysis (Discovery) — 2 weeks
  2. Creation (Design) — 1 week

In benchmarking, we used Nuuvem, Epic and Origin as direct competitors and Mercado Livre as indirect. Our focus was checkout, so we studied the available payment methods, content, labeling and taxonomy (AI), features, strengths and weaknesses. From that, we made a table comparing the competitors.

For the analysis of our website, we use Hotjar. We watched several user recordings on the checkout page and studied the heat maps. In addition, each team member also made private analysis by accessing the site and noting points that could be improved or implemented.

In the last stage of this project, we talked to the commercial team to decide what could be modified and what business rules we should follow for each suggested change. Finally, we created a high-fidelity prototype in Figma in order to facilitate the handoff with the development team.

It is worth remembering that the solutions could not be fancy and should require a minimum effort from the developers team.

Checkout footer redesign

As previously mentioned, this project was divided into several small usability problems encountered. In this way I will report the steps relevant to the problem I participated in: the checkout footer. Everyone on the team worked together on the discovery part, however, the design part of this project was entrusted to me.

The problem

Hype is known for its variety of payment methods, which makes games and credits more affordable for our users. And because it is a very strong point of our e-commerce, we wanted to highlight this in our footer, making the payment methods we accept explicit.

However, when talking about a checkout with good usability, the situation was worrying, especially for our mobile users.

Because it was a page with a lot of information, inputs, etc., it ended up being vertically long, which increased scrolling, especially on mobile.

Now, imagine that you are the user who is shopping. You start scrolling the page to make the payment and you are faced with repeated payment methods, you are confused about which one to click. Or you’re in a big hurry and scroll down as fast as possible and get to the end, where you have the payment methods, think how frustrating it is for you to click to pay and not get it.

These were some of the analytics we collected from Hotjar between 7 days and 6 months. Clicks on boleto, pix, card brands or even on the title “Payment Methods” were recurring. Below we can clearly see the confusion that the payment methods in the footer caused to mobile users:

Heat ruler to indicate where users click the most in the footer in warm colors
Footer heat map print — Last 7 days
Footer heat map print — Last 7 days


Nuuvem, Epic and Origin footers at checkout

Of our direct competitors, none use the payment methods in the checkout footer.

UX Laws and Nielsen’s Heuristics

Within still the analysis part, we saw that we were hurting two Nielsen heuristics and two UX laws.

The excerpt below explaining the heuristics was taken from an Gabriel Moma’s article. Here’s the snippet:

5. Error Prevention — There are two types of errors that users commonly make: slip and mistake. It may even look like the same thing but they are subtly different. The slip is when a user intends to perform an action but ends up performing another, this typically happens when he is not fully focused on his action within the application. Deception is when the understanding of some information is mistaken or understood in another way.

8. Aesthetics and Minimalist Design — The greater the amount of information, the greater the amount of information that will be analyzed and decisions that the user will need to make, so it is crucial to keep only the information that is really needed, secondary information can be left in the background (menus, tabs, etc.) so the application becomes very efficient in terms of transmitting information to users.

Explaining the UX laws that we break, I took this excerpt (yes, why invent the wheel?) from an Aela Contents article. Here’s the snippet:

3. Fitts Law  Fitts law is the UX law that concerns the user action time in relation to an interface. It is related to the time it takes the user to understand the interface and act.

Thus, on a poorly developed website, user response time is compromised because:

  • The buttons, or clickable elements, are small;
  • These same elements are very far from each other;
  • In some other way, the user wastes time looking for each of the elements that must interact.

Or even for several other reasons that make the user have to think too much before acting on the interface.

4. Hick’s Law — The Hick-Hyman Law describes that the more choices and options available to the user, the longer it will take him to make a decision. So, be careful that your interface doesn’t have too complex interaction moments or too many options for the user.


Based on the research we did, we opted for a footer without payment methods (as the methods we accept would already be visible at checkout), without social networks and only with what is necessary for the user to be able to complete the purchase and be informed if it appears. any questions during checkout.

New footer without the payment methods — Desktop version

New footer without the payment methods — Mobile version


This was a small step for the UX team within Level Up among many to come on our Hype improvement journey! However, even with a step that seems so small, we managed to:

  1. reduce user confusion,
  2. reduce the size of the scroll and
  3. make our page a little cleaner! :D

The best part of this project was being able to contribute to the UX culture within the company. This was a practical and simple example, which brought positive results within the company and also among our users.

And you, what did you think? What other cool solutions could be implemented to make this footer even more beautiful?


Created by

Naiade Caparelli

My name is Naiade, but you can call me Nai. I have a bachelor's degree in Communication in Digital Media (UFPB 2017). I took courses in UX and Product Design. I am currently studying UX Strategy and taking a risk studying Front-End as well. I have knowledge about UX processes, Agile Methodology, HTML, CSS, Javascript and a huge background in Graphic Design. I'm also part of the Art’n’Science project that aims to represent science through image, with a focus on scientific illustration. I find inspiration in the arts, nature, culture, food and people. :)







Related Articles