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:

Benchmarking

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.

Solution

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.

Conclusion

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?