Eurohockey
The European Hockey Federation (EHF) was undergoing a rebrand and a complete overhaul. The website was outdated, hard to navigate and struggled to inform it's supporters on anything related to European Hockey. Our task was to interpret the new brand, 'Eurohockey', and design a new website providing a positive experience for hockey supporters.
MY ROLE
User Experience Design Lead
METHODS USED
Discovery, Research, Wireframes, Designs
The Brief
Create an intuitive and easy to navigate website with the new Eurohockey branding, key focus on utilising the calendar to highlight upcoming fixtures, tournaments and officials.
Project Discovery
User Personas & Journeys
We started the project with a Discovery process, kicking off with creating user personas and their journeys. We worked with the European Hockey Federation (EHF) team to understand their key users and the potential journeys they will take on the website. This allowed us to analyse key aspects of the website and think of ways each journey could be improved.
Sitemapping
After the discovery sessions we followed up by delivering sitemap iterations. Mapping out their current sitemap with the EHF team we discussed what could be amended to make it easier to navigate and more tailored to its users.
The sitemap that I came up with was highly tailored to the users that they have mainly neglected, athletes and supporters. Overcoming this hurdle meant putting a lot of the management information into a Portal (Login), creating a secondary project and meaning we were able to have more information pages around matches and tournaments.
Style Moodboarding
Following the persona & journey map session we had another discovery to discuss design styles. I created a moodboard identifying key design elements from websites we all suggested, looking at areas such as: colour, typography, imagery, calendar styles, ranking styles and general layout. We were able to start thinking about how the new website could look.
The Design
Wireframing
Following the Discovery Process I started to create homepage wireframe styles, I wanted to test out different layout styles with the Eurohockey team before proceeding onto the design process.
On defining an overall style I continued to create more wireframes for the site, really focussing on page structure and providing all of the key information required for our target users.
Design Style Iterations
Eurohockey were due to provide us with new brand guidelines, in the meantime we worked as a team to test different design styles with the brand elements already provided to us. We wanted to try and understand their appreciation for colour, use of motifs, layer masks and imagery, so once we received the final creative we knew how we could apply it.
Design System
On receiving the final brand guidelines during the final design process I created a full atomic design system to be handed over to the developers, complete with atoms, molecules and organisms. Using responsive components allowed us to easily move to mobile designs.
Final Designs
The final design route was inspired by key elements from our design moodboard session, being easy to navigate with an editorial feel, while using the brand elements in a subtle yet powerful way. We didn't want the site to feel too white and bare, rather impactful and unique to Eurohockey.
