Redesigning Verdazzo’s Website
UX/UI Project
Problem
To completely restructure Verdazzo’s website, a project dedicated to Palmeiras, a Brazilian soccer team. Despite having unique content, the former website is neither functional nor responsive, and does not offer intuitive and easy navigability across all sectors. In addition, with the majority of the public having started to access the website primarily by cell phone in recent years, there was also a need to give greater focus to mobile navigability.
Solution
A new website, including from a visual point of view, fully responsive, with easy access to all available sectors. The most accessed sections (pre-match and post-match analysis) have been given greater prominence on the homepage, and space has been provided for advertisements. Furthermore, the menu was redesigned so that the Almanac, a specific section containing all the information from Palmeiras’ inception to the present day, was given more prominence.
My role
Lead UX Designer in a team of 4 professionals.
Scope
Ongoing project starting in June 2024.
Unraveling the problem
The project consisted of completely restructuring Verdazzo’s website. Although it presented unique and relevant content for its fans, the site faced functionality and usability problems. The lack of a responsive
structure compromised the user experience, especially considering the diversity of devices used for access. The site was not intuitive to navigate, making it difficult for the public to access information.
In addition, in recent years it has been observed that most users have started to access the site predominantly via mobile devices. This has highlighted an urgent need to optimize navigability for cell phones,
guaranteeing a fluid and satisfactory experience.
Given this scenario, the central objective of the project was to transform the site into a modern, accessible, visually attractive and uniform platform that reflected the passion and identity of the users.
Benchmarking
Before embarking on a more in-depth study of Verdazzo’s website, I did some detailed research on other soccer websites in order to observe how they work on different platforms and identify the most relevant
features from a usability point of view. Many sites were visited; below are the ones I thought were most in line with what I envisioned for the project:
Detailed study of Verdazzo’s website
After a detailed analysis of the Verdazzo website, the following usability and design problems were identified that could negatively impact the user experience:
Non-Responsive Design:
Failure to adapt the layout to mobile devices compromises navigation on smartphones and tablets, damaging the experience of a significant proportion of users who access the internet via these devices. It is essential that the site is responsive, providing a consistent experience across all devices.
Confusing navigation:
The menu structure presents categories and subcategories that can confuse the user, making it difficult to locate specific information. Intuitive navigation is essential for visitors to find what they are looking for easily.
Loading speed:
The site has a longer than ideal loading time, which can lead users to abandon the page before even viewing it completely. Studies show that 40% of users abandon a website if it doesn’t load in less than 3 seconds.
Insufficient contrast:
Some color combinations between text and background do not offer adequate contrast, making reading tiring and making it difficult to understand the content. It’s important to ensure good contrast to make reading easier and improve the user experience.
First insights for the problems presented
Responsive Design:
Implement a layout that automatically adapts to different screen sizes, ensuring a consistent experience on desktops, tablets and smartphones.
Menu Restructuring:
Simplify the navigation structure, grouping information in a logical and intuitive way, facilitating access to the various sections of the site.
Performance Optimization:
Reduce the size of images, minimize scripts and use caching techniques to speed up page loads. Tools such as Google PageSpeed Insights can help identify points for improvement.
Visual Enhacement:
Adjusting colors to ensure adequate contrast between text and background, as well as increasing font size to improve readability. Adapt the website to the brand’s new visual identity.
Personas
I conducted a series of interviews with Verdazzo’s executives to gain a deeper understanding of the site’s target audience, their behaviors, and expectations. Following these discussions and meetings with the CEO, developed two detailed personas to reflect the main profiles of the site’s audience:
Complementary insights for the problems presented
Complete redesign of the menu so that a specific Almanac section is created (instead of leaving it scattered throughout the menu items as it was before) and a specific section for the current Palmeiras season.
Fix the menu when scrolling to make it easier to navigate the website.
Considering that Verdazzo lives off social networks, making the social network icons more visible so that they can be easily accessed is essential (today, they are hidden at the bottom of the page).
Make the call to action much more visible so that people become sponsors of the project.
UX Writing: Standardize the titles in all sections of the site (menu, submenu and pages) to maintain clarity and consistency and thus correct duplicate names. Rewrite the titles of some sections so that they more
accurately reflect the content they will show.
MoSCoW Technique
Using the MoSCoW technique, a prioritization framework that helps define the essential (Must), recommended (Should), optional (Could), and excluded (Won’t) features, I established the scale of priorities in building the new website:
Designing the new screens
After understanding the main needs for the new site, which was the result of a thorough process of analysis and immersion in existing problems, we began developing the new Verdazzo screens. As well as incorporating the lessons learned in the study, it was also essential to plan spaces dedicated to advertising, both for the mobile and desktop versions.
Current stage
The project is currently at the stage of creating the high-fidelity prototype. We will then move on to usability tests and post-test adjustments.