Case study: Volleyball World
Volleyball World is the websiite of the Fédération Internationale de Volleyball (FIVB), the international governing body for all forms of volleyball.
The FIVB is a long-standing client of Deltatre’s. They use our Forge content management system and we provide them with design and digital strategy services.
They were launching a premium video streaming service and wanted us to provide new CMS components, and to propose a strategy to promote it accross their existing website and mobile app.
But as we worked on that need, it became clear that there were deeper issues that needed fixing.
Starting point
VBW asked Deltatre to use one of our regular strategy review meetings to present some ideas to showcase the new video service.
I was brought in as design lead to help the account’s regular designer to gather and analyse evidence, propose solutions and present our findings.
We audited the site, looking for ways to surface video.
This became the framework of our presentation. We mapped every page and used the structure to present detailed proposals.
We threaded design proposals throughout the presentation.
This example was deliberately over-the-top to show what ‘too much’ looks like.
I like to use a ‘show don’t tell’ approach for decks like this.
Hence we included lots of examples from reference sites to focus discussion
However the audit had exposed deeper issues which were impacting on the whole user experience, not just the ability to promote the new video offer.
Deeper issues
A lot of the issues we saw came from an effect that I call design entropy
Entropy
Entropy is a concept used in diverse contexts, but the TL;DR is that everything tends to chaos and work is required to create and retain order.
For example, it takes effort to organise sand into a sandcastle.
Left unattended, the sandcastle will decay into a heap of randomly arranged grains, and then disappear completely as its organised state vanishes into the chaos of the beach.
Design Entropy
That same thing can happen to mature websites.
Small changes are made over time. Being small, there isn’t a proper analysis of the impact of each one, but they all add up.
The result is a ‘death by a thousand cuts’ effect.
Not one big thing wrong, but lots of tiny issues which compound to create a large impact on a page, and the whole site gradually loses its original structure.
Typical signs of design entropy
Primary navigation is overloaded with more nodes than it was designed to carry
Poor secondary and tertiary navigation - it’s hard to find things and easy to get lost
Mid-journey pages which lack a clear narrative or purpose
Multiple components doing similar, but not quite identical, things
Inconsistent placement and styling of calls to action
Modules used in ways they weren’t designed to be used
Fixing the issues
With limited budget for user or A/B testing, we proposed a partnership model combining our UX expertise and VBW’s domain with evidence from analytics.
I created a four-step plan.
The review stage was mostly done, so we moved quickly to the analytics.
Analytics
We used data from Google Analyics 4 (GA4) and Microsoft Clarity.
GA4 provided macro-metrics like user types, entry/exit points, and interaction volumes.
Clarity complemented this with page-level data such as heatmaps and session recordings.
Here’s couple of slides from our analytics report showing how we did that.
The lower graph on the GA4 slide shows large spikes in visitor numbers during the Volleyball Nations League (a flagship tournament for VBW) and the Paris Olympics.
The upper trace is events - clicks, scrolls etc - per user. This remains flat. Users are attracted by high profile tournaments, but they’re not engaging with the content.
The Clarity heatmaps show users click/tapping on non-functional elements in a mid-page module. They’re expecting onward journeys where there aren’t any.
This validated one of our hypotheses: poor recirculation was caused by design and navigation issues. It gave us an evidence base to evolve solutions.
(Values are obscured for client confidentiality reasons)
Design
We reimagined designs to restore site order: more intentional pages, a cohesive visual language and more streamlined navigation.
Old page top
New page top
Page top and nav
1 - IA reworked so that the overloaded navigation could be streamlined
2 - Non-navigation elements grouped into a clear functional nav
3 - Clean, visually led tournament navigation replaces the confusing card-based version
4- -Story promos given a strong, clear look
Old Live & Upcoming carousel pattern
New Live & Upcoming pattern
Content carousels
5 - Rail split into tournaments to allow skim browsing, especially on mobile
6 - Content cards resized and rearranged to showcase more content
7 - Text moved below the cards to aid readability
8 - Onward journey given a stronger visual look and moved into the user’s eyeline
Outcomes
We saw significant growth in all of our key KPIs.
The client was so pleased that they posted about it unprompted on LinkedIn.
The improved stats are detailed in the post.