The challenge
Edeba Fútbol, a company with over 30 years in the amateur soccer tournaments, contacted me to redesign their website. The goals were giving the site a new style that reflects their quality, boost tournament benefits and optimize the experience for current players and potential new teams.
Approach
To face the website redesign the best way, I started checking analytics to know and understand the users. Analyzing the entire 2019 stats I realized that 70% of the visitors were accessing the site from their mobile devices.
My role
• User research
• Wireframing
• Prototyping
• UI Design
• Interaction
Tools
Sketch
Principle
Photoshop
Invision
Illustrator
Zeplin
First: user research + new ideas
The basis and content of the previous version of the website was broken down, each section and page of the site was questioned.
A small user research was carried out to detect insights. Tournament players were interviewed to identify current problems and as a starting point to create new functionalities.
All new ideas were written down, polished and turned into wireframes defining the new structure.
Interactive prototype
There are things that may seem obvious to us as designers. Because we have a trained eye, because we saw it a thousand times and it is obvious how it works. But the reality is that our client is an expert in organizing football tournaments. Not an expert in the web/product design field.
That is why we should not leave anything to chance or assume that it will be easily understood. The greater precision and detail we can give it will be better for interpretation.
With an interactive prototype our client could navigate the site, using the menu and buttons to access the different sections of what will be the future page.
UI Design: mobile views
It was worked from a mobile first approach, defining the entire site for mobile in the first instance.
Desktop Views
But there is also a 30% of our users that are surfing the site from their computers.
We think about them and guarantee an excellent desktop user experience too.
Redesigned match stats
New style for match statistics: Grouped goals, great goals differentiation. Players can easy access to all the information on their league, check and compare rivals results.
New tournaments identity
A new identity including a trophy was created for every tournament. This allows players an easy identification and access to current tournaments statistics. This new feature also set the basis of ‘Club Museum’, with the possibility to easy group and count cups historial.
Enhanced fixtures and positions
Before: teams name were cut, to see full information an horizontal scroll was needed.
After: Better results display, new icons for easy visualization and all the information displayed on the same screen.
Libraries and symbols
The entire projects was worked with symbols. This way every asset needed by developers can be easily delivered. This generates a total automation for the creation of new pages and sections.
Symbols overrides
Each asset was created to be standardized and reused throughout the entire site development process. If a new designer has to work on the project, he will be able to handle all the components quickly.
