ReThink; Man United Digital Experience
Why the world’s biggest football club is missing key digital product opportunities and partying like it’s 1999. Jordan Moore spent a bit of time re-thinking how manchesterunited.com might look in 2018.
It has been a difficult time to be a Manchester United fan, after enjoying decades of success under Sir Alex Ferguson the transition after his departure has been rough to say the least. Instead of relishing the present, us fans have looked to the past with nostalgic-tainted glasses and dream of that magical season in 1999.
The world was different back then. No social media disrupting how humans interact with each other, no always-on devices in our pockets and on our wrists, and a relatively young web was a growing bubble for new companies and investors hurtling towards a dramatic burst. A lot has changed since then. Other things, not so much.
Problem #1 — Outdated UX
Remember splash pages? That pointless additional click before entering a website? I’m not entirely sure as to what the purpose of a splash page was to this day although they existed alongside animated Flash intro sequences (read: design posturing) as some sort of prelude to what you actually came here for.
Manchester United still think this is a good idea. I’m sure they have obligations to sponsors and commercial partners but that’s not what is happening in this space (currently broken on the live site). It’s a gateway to the real stuff behind “Enter Website” which is inexcusable in 2018.
Suggestions: Remove this page.
The outdated user experience doesn’t get much better once you come through the splash page. Any football fan will admit, whether conscious of this fact or not, that their affiliation with their chosen team means they are in for the journey. Each season is a progression along that journey, a chapter in that story, fans want to witness and be a part of that story. With that in mind, looking at the current ManUtd.com they aren’t making things easy for me.
Where can I see my team? When is the next match? How can I get a ticket to the match? What about the last match? How did we do? And what does that mean for our journey as a club? Manchester United pride themselves on having a rich history filled with tragedy, fortune and more hero archetypes than you can shake a stick at. Where the hell is all that good stuff?
A basic contrast exercise reveals the problems at a surface level. The focal points are sporadic at best. Granted they might be the correct focal points: current news, a countdown to the next game sponsored by Tag Heuer and another emphasised area repeating the same information, but take a look at the proportions.
Complete disregard for responsive, fluid grids to adapt the experience to the destination device. And I’m being generous with the screen dimensions above only for the restrictions I’ve put on myself for sizing the screenshots in this teardown. The main grid is an isolated island in the middle of the screen. No flexibility in making sensible use of the screen space (see Responsive Web Design basics 101) and no fluidity typographically either.
I’d love to believe that the typographic decisions regarding the lack of web fonts to orient the experience towards the Manchester United brand was a performance decision and there was some solid rationale behind it.
Nope.
The page clocks in at 3.33MB somehow. And before you ask, it’s not the images causing the weighty load as the image assets aren’t optimised for high-resolution displays. Anyway, we’re here to talk about type…
There is a media query at play here, part of its purpose is to isolate the desktop experience from a poorly implemented Frankenstein adaptively responsive web design (it feels like kicking a lamb at this stage folks, trust me I want this experience to be better more than anyone). The other thing that this media query does is set the base font size at 80%. From here most typographic settings are EM values (Layman’s terms: a proportional from a base rather than an exact pixel value) — I’m all in favour of EMs but Manchester United’s approach is poor.
For starters, 80% of the default browser font size will typically get you 12.8px. A very small starting point to base all of your typographic values from if you are sizing things through EMs which is exacerbated by high resolution displays. Take the paragraph text in the news slider above for example. It is set to a value of 0.9em — a nice, clean value but the decision at base level creates a sizing issue.
To be clear, there is nothing wrong with offloading these calculations to the browser. The problem occurs at the highlighted second point of the chain above where the reset value is simply too small to render anything legible on today’s devices.
A cramped line-height doesn’t help matters either. Even if we corrected a few of the typographic issues, it elevates the overall experience through a series of small changes. The image on the left shows the current version, the image on the right explores a more legible set of type sizes and treatments within the current scope of design constraints.
There are plenty of other UX shortcomings beyond some outdated design decisions, such as the player profile experience (we’ll touch on that later), the fragmented news articles through unnecessary pagination and the shallow history section which flies in the face of the club’s famous, illustrious history — more than we can cover in a short teardown, so in the interest of time let’s move on to the second of the 3 overarching issues…
Problem #2 — Hierarchy? What hierarchy?
In 2000, psychologists Sheena Iyengar and Mark Lepper published a remarkable study. On one day, shoppers at an upscale food market saw a display table with 24 varieties of gourmet jam. Those who sampled the spreads received a coupon for $1 off any jam. On another day, shoppers saw a similar table, except that only six varieties of the jam were on display. The large display attracted more interest than the small one. But when the time came to purchase, people who saw the large display were one-tenth as likely to buy as people who saw the small display.
The lesson from this experiment is that by reducing the cognitive burden on users by reducing the number of options available to them, decision making becomes easier and options are considered rather than discarded.
This is most evident in the navigation that dominates the sidebar and part of the header where News is given as much priority as Investor Relations. As a fan, I care deeply about one of those items. Have a guess as to which one.
Suggestions: Re-architect the site structure starting with sensible groupings on a surface level (see below) and follow up with appropriate redirects so SEO remains unaffected.
Lack of hierarchy leads to a lack of contrast which leads to a lack of focus for the end user. Below are all 25 navigation items which are currently given equal priority. Imagine being hit with all 25 at the same time and trying to find something like matchday hospitality services.
Reorganising them into sensible groups and reducing options is a good starting point. 25 top-level navigation items can quickly become 10 focused, sections that can be prioritised accordingly.
Irrespective of the way you decide to group the items, at least you will have applied some degree of focus to the experience and it reduces the cognitive burden on users having to build complex mental maps of 25+ options.
Here we have applied the groupings as well as use contrast and hierarchy to bring focus to relevant information to Manchester United’s priority user group: fans.
The hierarchy issues extend beyond the architecture into the visuals. Let’s look at Paul Pogba’s player profile for example.
On his day Pogba is one of the most exciting footballers in the world, but here it looks like Manchester United have done the bare minimum to provide fans with opportunities to watch their favourite player in action, keep tabs on him and buy relevant memorabilia.
The photo once again is fuzzy and not suitable for high-resolution displays, and it simply feels flat — the opposite of Paul’s colourful on-field personality. Here he looks like he is ready for a corporate photo. It doesn’t excite and the prospect of browsing through all the players after seeing this page doesn’t seem like a lot of fun.
On that note, check out how they make you navigate to your next player. Click the dropdown (no clear order in here by the way) and then you have to click to select your choice and then click a final time on the tiny “Go” button.
So why do fans come to player profile pages? I can only speak anecdotally — I’m interested in the player’s stats. How well are they performing? Are they doing their bit for the journey? Can I follow their progress? How do they compare to other players in their position?
Manchester United have only recently (as of 2018) embraced YouTube as a channel for video content, presumably because there is a potential conflict of interest with their MUTV offering.
There is a clear opportunity to offer a proper digital MUTV subscription taking cues from the BBC’s iPlayer implementation and using short samples of content, for example, Paul Pogba’s highlight reel on his player profile page. These short previews can entice fans to see the quality content available on MUTV and perhaps subscribe with a well-timed subscribe button at the end of each video.
There are other commercial opportunities on player profiles too, like shirt sales. The current upsell UI shows a red shirt icon saying “Order your Pogba shirt”. What does that look like? Show me the damn product and I might want to buy the thing instead of making me think “What does the home kit look like again? Oh yeah, I think I remember. And what would Pogba’s name and number look like on the back… hmm, let me think…”
Don’t make me think.
Problem #3 — Put the fans first.
Perhaps the most fundamental problem of all is that Manchester United fail to put their fans first when it comes to club engagement online. This is the biggest opportunity they have squandered off the pitch.
I think they’re somewhat aware of it too, and perhaps don’t care enough to fix it just yet. There is evidence of small sticking plasters over the homepage where the club is trying to send fans out to their new YouTube channel which in fact does a great job of categorising engaging fan content. None of which manifests itself here which is nothing short of a failure of cross-brand presence.
The homepage is the same old static content. The big “interactive” piece is the slider and I can’t even manually advance it without disappearing into another poorly formatted, uninteresting news article. Bring what’s great about the YouTube channel and a digitalised MUTV into the mix and embrace the rich content that is there begging to be discovered by passionate reds.
The problem with ManUtd.com is that visiting it as a fan does feel like you could be living in 1999 and not in a good way in regards to this club. There is a complete lack of context around where United are, how they’re doing, where they were in their last match, how they fared and what we thought of that, where they need to go next all with a nod to their history along the way.
For a sport so set on routine, schedules, dates and progression, ManUtd.com is at a stalemate. A dull 0–0 draw in Golden Goal extra time where both teams are parking the bus to put it loosely in football terms. It’s a let-down for fans and it’s time they put the fans first.
It should be easy for fans to land on the homepage and instantly get up to speed on where the club is at. Talk about the last result, who scored and provide the match report.
Keep an eye on the next match, who we face, when it is happening and let me buy tickets for it. Bring in that rich media that exists in their other channels and pull it together in one consistent brand representation.
Can we give fans a way to get the gist of news pieces without having to click through the paginated mess of the current article implementation? What if the summary could summarise the news for time-starved fans?
Perhaps the homepage becomes something between a dashboard and an information hub where fans can get at-a-glance context regarding United’s position and direction as well as having the option to dive deeper into engaging story pieces making use of rich video content and crisp images rather than restrictive word counts and fuzzy media.
As the reds go marching on…
A lot of folks take issue with the idea of unsolicited designs, citing lack of context among other things as problem areas and pitfalls in an attempt to rapidly invalidate ideas. Personally, I find it hard to hold both the viewpoint that design can change the world for the better but it has to sit on its hands and wait to be asked to do so.
I don’t buy it.
If you break any problem down into its fundamental parts, you can at least rebuild something about it or fix glaring errors. And you shouldn’t wait to be asked to do so. If an unsolicited design raises more questions than answers — good. Perhaps they were things that needed to be challenged because the website we’ve just ripped apart certainly wasn’t challenged or asked any questions of it.
Maybe I’m just a little too passionate about my dear club stagnating the way it has both on and off the pitch, but if I can influence course-correction at any level, no matter how small, then I’ll have contributed something towards a positive upward trajectory off (and hopefully on) the pitch.
—
Jordan Moore heads up design at Dawson Andrews.
Find him on Twitter.
Or drop into the office for a cup of Bulletproof coffee.
