How I used Heat Maps
to understand users behavior, optimize the website interface and improve the users flow.
This work was published in UX Collective BR.
This is a story about how users also “judge the book by its cover”.
it’s not a choice, it’s physiological.
For better, for worse, one thing is true: yes, users also use their first impressions to make a decision.
A North American cosmetics company conducted a survey that revealed that the first impression is formed in less than 30 seconds. In other words: judging something, or not, “by the cover” is not a choice, it’s physiological.
When it comes to websites, it’s essential that your homepage is designed according to the needs of the public. The first seconds of contact with the brand must be clear and uncomplicated to make them feel curious about the rest.
the challenge
During this website re-design project I used data from Heat Maps to understand the low performance of the page and design solutions according to the users journey.
How to help users find the answers they need, lower the Bounce Rate and generate more conversion points?
Do you wanna know what are heat maps and how do they work?
You can read the entire article that I wrote for Medium.
what data says
Firstly, the Heat Maps of the Desktop version of the site were analyzed and the data obtained were interpreted:
In the same way, it was done for the Heat Maps of the mobile version:
solution alternatives
alternative solutions were designed using the “How Might We” methodology.
Based on the data obtained, alternative solutions were designed using the “How Might We” methodology. Surveys were also conducted with users to understand their interaction with websites when purchasing a service or consuming content on blogs. Check out more by clicking here.
For each practical action, their notions of success were described, which allowed subsequent monitoring to define which optimizations were effective and whether the intended objectives were achieved.
designing the solution: wireframes and user flow
First, scribbles of the new website interface were designed to make the proposal more visible. The rest of the site was also redesigned, as well as the users flow when browsing them, expecting an increase in traffic on the other pages.
Then, the scribbles were prototyped in Figma and underwent two usability tests where some interface improvements were made until reaching the final version.
Now let’s see more closely
what were the changes made to the interface and user flow in the 2 main points of contact with users on the homepage compared to the old site.
| 1st section of the homepage
| “Products” section
beautiful screens don’t mean results
As I heard Leandro Rezende from the UX Unicorn Program say: “only pretty screens don’t work, they need to be functional!”. And to see if the changes made achieved their objectives and brought results, what better than letting the current Heat Maps speak for themselves?
learnings
The main objective of any business is to achieve its purpose, deliver a quality product, change people’s lives and, of course, obtain their return on investment through sales. For a website to be an efficient tool during this process, it needs to be built based not only on business objectives, but mainly on the experience of its users.
This article is just one part of a re-design project that before designing solutions sought to understand how business users interacted with the interface and what problems they sought to solve.
UX / UI Design is a process of improvement in the users experience along the points of contact with the brand and, like any process, it needs to be monitored, validated and restructured whenever necessary.
People change, behaviors change and so does the user experience!
2021 • ALL RIGHTS RESERVED.