Implementing Psychology to Revamp Order Summary on BerandaToko

Background

As UI/UX Designer at BerandaToko, an ever-evolving e-commerce platform, I constantly strive to provide a superior user experience. To increase the effectiveness of order summaries, BerandaToko has applied the principles of psychology, especially cognitive bias. I’ll explore how BerandaToko uses cognitive bias to update order summaries to improve the user experience.

Problem Statement

As a UI/UX Designer and a user who uses BerandaToko for shopping. The existing Order Summary was not good regarding UI and UX. Here I will describe which parts I will revamp in terms of UI and UX using cognitive bias, and here I will divide several functions:

1. Header

Users need to find out exactly what page they are on.

2. Alamat Pengiriman

The information on the delivery address is incomplete because it doesn’t display location details, and the visual hierarchy aspect is unclear.

3. Detail Pesanan

The details of this order do not include information on the weight of the order and note that the user has entered on the cart page.

4. Detail Pengiriman

In this shipping detail, it’s too much to use dropdown options in all options, even though it could be simplified again. In addition, the possibilities provided still use text from the API, which should already use text or a language that all users can understand.

5. Metode Pembayaran

In this section, the user can’t recognize the payment because the options provided still use text from the API, which should already use text or a language that all users can understand.

6. Rincian Pembayaran

Complete information on payment details needs to be visible, and the options provided still use text from the API, which should already use text or a language that all users can understand.

7. CTA (Call To Action)

The CTA section can still provide other information, such as the total payment.

Objective

1. Revamp the appearance of the Order Summary according to the application of cognitive bias so that users get a good experience.
2. Revamp the User Interface of the Order Summary to be more appealing.

Implementing Cognitive Bias

1. Header

In the header section, I used the Anchoring principle (what we see first affects our judgment about everything afterward). So, when users visit this page, they are clear to recognize.

2. Alamat Pengiriman

In this section, I first used the Visual Hierarchy (Visual elements are used to guide and cue the user’s eyes), making the information readable following the hierarchy on top. And then second, I used Proximity (Elements close to each other are usually considered related) to explain the address is part of Rumah Kos.

3. Detail Pesanan

In this section, I used Recognition Over Recall (Easier to recognize than trying to remember). So the user will better identify the components provided, such as which shop sells the product, the notes he has entered, the number of items he wants to check out, and the weight of each product.

4. Detail Pengiriman

In this Delivery section, I use several principles. The first is Tiny Habits (We are more likely to achieve a goal when broken into smaller ones) and uses the Spark Effect (Users are more potential to take action if the effort is small). And the second is the Picture Superiority Effect (We remember pictures better than words). So when users want to choose a shipping option, they are much happier because it is simpler and the effort spent is more minor. At the same time, using images helps the user more easily recognize the options provided.

5. Metode Pembayaran

In this section, I used Picture Superiority Effect (We remember pictures better than words). And then second, I used Fast and Slow Thinking (We make spontaneous decisions that can cause regrettable damage). When we put images representing the content, it will help the user more easily recognize the options provided and then put the information to remember the user take care if wanna make a decision.

6. Rincian Pembayaran dan CTA

In the last section. I used Attentional Bias (Users’ minds filter what they pay attention to). So, the users don’t need to filter back information they think is essential, such as the total payment.

6. Full Section

And last, the cognitive bias I used is Serial Position Effect (We’d better remember the first and last item in the list). Second, for the result, I used Aesthetic Usability Effect (People assume that good design is feasible and easy to use). In psychology, users better remember the first and last item. That’s why I put the delivery address first and CTA last. And then, users love to see something aesthetically, and that’s the reason why I revamp the design. 👀

Conclusion

The conclusion can be drawn is that the use of psychology, especially cognitive bias, is beneficial in making decisions in making user interfaces (UI) and user experience (UX). Here are some reasons why this happens:

1. Understanding user behavior: Psychology helps understand how users interact with the interface. By understanding user mindsets, preferences, and behavior, designers can create more effective and satisfying user experiences.
2. Optimizing cognitive limitations: Humans have certain mental limitations, such as limited memory capacity, limited attention span, and decision-making abilities that are affected by bias. By understanding cognitive biases, designers can design UI and UX that reduce the user’s cognitive load, make it easier to understand information and help users make better decisions.
3. Emotional influence: Psychology also considers the emotional impact on the user experience. Emotions play an essential role in decision-making, and designers can use knowledge of the psychology of emotions to create UI and UX that trigger positive emotional responses and build emotional connections with users.
4. Minimizing errors: Knowledge of cognitive biases allows designers to anticipate common mistakes that users can make in interacting with interfaces. By designing UI and UX that reduce the risk of errors and lead users to the desired action, the user experience can be improved.
5. Improve user satisfaction: By leveraging the science of psychology, designers can create UI and UX that match user preferences and expectations. By providing a more intuitive, easy-to-use, and satisfying experience, users will be more satisfied and more likely to return to using the product or service.

Using psychology, especially cognitive bias, in creating UI and UX can help designers optimize the user experience, reduce errors, increase user satisfaction, and create more effective and successful products.

We are always trying to improve the experience for all my loved users that always use BerandaToko to buy daily necessities. If you are interested in shopping at BerandaToko, let’s connect with WhatsApp BerandaToko and visit our website, www.berandatoko.com ❤️