UEFA hosts champions league every year, It is considered the premier event in football just behind FIFA world cup. Being this big event it has a brilliant branding but the website that features that event is not up to the standards of branding. So I decided to make small changes and try to make more modern.
Objective
My goal with this project was to elevate the excellent branding of the champions league to resemble its website. I didn’t want to make any changes to the content and structure of the website, that will be for another time. In this cleanup, I tried to make small changes that will drastically improve the experience of using the website.
Problems and Solutions
#1.My biggest gripe with UEFA’s current version of the homepage is that there is a jarring effect with the background and foreground. They are using the logo with the gradient as a full-width background, As that logo has a lot of colours and it can easily distract the user from the content he should be focused on. I am not saying that they should go and change the gradient Designstudio did amazing work on that. In the current rendition of site, it seems like content is blending with background and it sometimes makes differentiating between them a very difficult endeavor.
In my design, I have tried to create a disconnection from the background and try to direct the user’s vision to content rather than the background. To achieve that I used the logo in the background with less opacity and not at the centre of attention but away from the main content to the side. I tried to use that excellent gradient to more predominant places than just border and background. I made changes to the header as to make it cleaner and easier to figure out what you can do there and move on to the hero content below.
Below the hero section, The redesigned upcoming matches section where you can see the team emblem more easily and get relevant information easily. I decided to use that gradient as a focus grabber, to direct the user through the homepage.
#2. My next fix was to the news feed section where they had cluttered. the different news with a strange grid that makes it more disorienting. In my opinion video and text-based news should be separate from each other.
So in my design, I did make those changes, I made the section only text-based and instead of making those cards contain the text I made separation at that point and adapted a modern layout. I added section titles to make it blend with the background so as to make it seem as one with the background.
#3. In the video section site switch into a white background out of nowhere and some banner stays in the same style which just looks out of place in this section. There is also a lack of cohesion between the style of displaying an article, here they are using the text below image but in the news section, they used it as an overlay on the image.
In my design, I tried to make the home page uniform and avoid changing the background colour on the whole page as to keep it consistent with the rest of the homepage.
#4. At last, there are stats for the current league. In the mobile version, there is more information displayed than the desktop version. with just a single row of stats for the desktop version.
In my version, I tried to convey more information to the user utilising the space that will be on the desktops. so they can provide more information while keeping the style across the homepage consistent.
Conclusion
In conclusion, Cleaning up the UEFA the champions league homepage was a fun experience it provided some interesting challenges and tackling those challenges were fun and educational.
