Summary
Volleyball World was launching a premium video service.
They wanted new components to promote it across their site and app. But as we worked on that need, it became clear that there were deeper issues that needed fixing.
Starting point
VBW asked Deltatre present some ideas for showcasing the new video service at a periodic strategy review meeting.
I was asked to join the team temporarily to help the regular VBW designer prepare designs and create the presentation.
We audited the site looking for ways to surface video organically.
This became the structure of our presentation - we worked through each page to explore options in detail.
We threaded design proposals through the presentation.
This example was deliberately over-the-top to help us understand what ‘too much’ looks like.
I like to use a ‘show don’t tell’ approach for decks like this.
Hence we included examples from similar sites. ‘What do you think of this’ yields more actionable insights than ‘What would you like?’
However the audit had uncovered a lot of deeper issues than just the requirement to showcase VBTV
Deeper issues
A lot of the issues we saw came from an effect that I call Design Entropy
That same decay can happen in the UX of mature websites. Often 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. It’s not one big thing wrong, it’s lots of tiny issues which compound to create a large impact on the UX and UI of a page, and then the whole site.
Typical effects of design entropy
Primary navigation is overloaded with more nodes than it was designed to carry
Poor secondary and tertiary navigation making it hard to find things and easy to get lost at lower levels of the site
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 which have clearly been used in ways they weren’t designed to be used
Design entropy
Entropy is a concept used in diverse contexts, but the TL;DR is that everything tends to chaos and it takes work 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 rest of the beach.
Fixing the issues
There wasn’t budget for extensive user or A/B testing, so we proposed a partnership approach using a mix of UX expertise, sector knowledge and evidence from analytics
Proposal
We suggested four-step approach:
Idenfity possible issues
Validate our assumptions with analytics
Hypothesise issues
Design solutions
Microsoft Clarity click map
As an example, one of our hypotheses was that recirculation was being harmed by elements of the design and navigation.
The lower graph on the GA4 stats example shows spikes in visitor numbers during the 2024 Volleyball Nations League (a flagship event for VBW) and the Paris Olympics.
The upper trace is the number of clicks, scrolls etc per user. This remains flat - users are attracted by high profile events, 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 confused by the design and expecting onward journeys where there aren’t any. This is the kind of thing which was impacting on retention
(Values are obscured for client confidentiality reasons)
Analytics
We used data Google Analyics 4 (GA4) and Microsoft Clarity.
GA4 gives us high level views of things like entry points, page traffic and user events.
Clarity complements this by allowing us to drill into individual pages using heatmaps and session recordings
GA4 Events vs Weekly visitors
Outcomes
I worked with Cunard’s web team to create a new sitemap combining the best of the ideas from the sort sessions.
A tree test was used to validate our proposals.
Tree testing is a task-based process where participants are shown a model of a site’s navigation and asked to click where they’d expect to find certain content types.
These are slides from my test report.
Two trees were used - one with the new map and one with the existing one as a control.
In most areas, the new structure outperformed the old one, but there were some tasks where the proposal still underperformed.
However the tree test tool provided extensive data on user behaviour which gave us evidence for further improvements
Final structure and next steps
I ran a series of weekly workshops with the Cunard digital team to finalise the structure and create a plan for implementing the changes.
Week 1 - Rework the structure based on the outputs of the tree test and re-test with the new proposal
Week 2 - Review the re-test outcomes and make any final sitemap tweaks
Week 3 - Goup pages into page types with similar content payloads and functional features, and use this to create a set of required templates
Week 4 - Identify net new vs re-used content
Week 5 - Prioritise the templates for implementation and create a migration plan to move the existing content and create new assets and copy
As this was a content exercise, we were limited to re-using existing CMS components rather than creating new ones. However we did capture a wish-list of new components that would help implement our proposals if development resources could be found