Transfermarkt

As with any redesign, I had to start off with a UI audit to assess the breadth of what I was working with and to also begin to map out the key components that would need to feature and where they would be positioned on the page. A takeaway I found from this was that, despite feeling blocky and outdated on table and card elements, there was a strong branding effort for some of the static graphics that were featured on the website. My plan was to use elements like the strong, varying blue gradients and bold imagery as a starting point of reference for the redesign, to establish a consistent theme going forward.

‍

From the audit, I was able to create a simplified site map to plan where components would sit on the page. It was at this point that I decided to only focus on the homepage in the desktop layout, given the time constraints and it being a purely conceptual and self-initiated project.

Off the back of the UI audit, I was able to target the key components I needed to work on during the redesign. Despite the layout adding visual complexity, the components on the homepage that held the statistical data were relatively straightforward, consisting of a series of cards, sliders and table modules. With this in mind, I set out to build a mini UI component system in high-fidelity that I could use to flesh out the rest of the homepage.

After setting a visual tone with the component system, I proceeded to map out how each element would sit across the homepage, ensuring that each section retained the same original function. I didn’t want to mix and match the ordering of the sections or implement new journeys that allowed the users to navigate through the site in different ways; I wanted to focus solely on the UI to avoid breaking that familiarity.

‍