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.