Keeping tens of thousands of fans informed, entertained, and able to buy tickets, merch, or stream Hibs TV on one seamless experience. Hibs needed a new mobile-first site where fans could connect with their club and engage with a rich match-day experience.
Reinvigorating a famous Edinburgh football brand
Designed for
Hibernian F.C. and Whitespace
Date
Q2 2020
Role
UX Designer
Impact
As well as receiving nominations for a Scottish Design Award and Marketing Society Star Award, the new site created a 78% increase in new visitors, 45% increase in the average session duration and a 12% increase in pages per session.
The problem
The previous Hibs website was using a legacy CMS and a limited set of templates. The marketing team struggled to easily update content and instead focussed on their social channels. The team wanted a way to leverage the successes of their social strategy to drive more visitors to the site and cross-publish content to create an engaging match-day hub.
Bringing stakeholders together and learning about their challenges
This was the first time our team at Whitespace had worked with Hibs, so I created a kick-off workshop to dig into some of the challenges the marketing staff were experiencing with the current site and what research had been conducted with the fanbase.
Kickoff workshop materials and photos
The workshop gave us an opportunity to listen to concerns and build important relationships with the team we'd be working with for the next few months.
Understanding and reworking the information architecture
As with any large-scale site, some sections that had become redundant and others had outgrown the current structure. I studied the available analytics data and crawled the site using Screaming Frog to build up a detailed picture of what we could archive and where we needed to rework the structure.
The site made use of separate ticketing, merch and media platforms which all required different accounts. We aimed to use single-sign-on methods to ensure fans could use one account for all of their transactions with the club.
Before we started any layout and UI work, I developed a detailed visual sitemap with the team which was iterated and eventually approved by all stakeholders.
Section of the visual sitemap
Rapid low-fidelity ideation and iteration
Once the sitemap was approved I worked with the design and development teams to rapidly generate low-fidelity wireframes. These were regularly reviewed by the client to quickly get us to a point where we could start focusing on UI details and how we could apply the brand.
Example wireframes created and iterated with our design and development team
All page layouts and templates were wireframed prior to spending time on UI details and brand
Focusing in on the details
The Hibs marketing team had done a great job with their social strategy and we wanted to leverage this content in the onsite match day experience. We created components to help the team easily embed social posts on match days and in post-match reports.
Iterations designed with NatWest and FreeAgent mobile teams
Working with a football brand meant we had access to really rich, dynamic photography. We wanted to lean on this to elevate a fairly rigid grid layout into something that echoed the action on the pitch. The use of heavy image overlays allowed us to use more text on images than we usually would, while ensuring appropriate contrast levels were maintained.
Iterations designed with NatWest and FreeAgent mobile teams
Outcomes and tradeoffs
I was lucky enough to work with some great visual and marketing designers on this project. They did an amazing job of bringing the Hibs brand up to date and together we created a site that helped connect the club with its fanbase on a platform that was uniquely their own.