The Red Devils | Hanley Whelpton UX

Striking a balance

Engagement Meets Functionality

This project challenged me to strike the perfect balance between interactive storytelling and functional usability. By carefully choreographing animations, imagery, and thoughtful interactions, I created an experience that brought Manchester United's legacy to life without sacrificing navigation clarity. Through systematic testing and iteration, I developed a design system where motion and interactivity enhanced rather than hindered the user journey, delivering an engaging yet intuitive experience.

DECODING UNITED

Heritage Meets Digital Innovation

Through analysis of Manchester United's design systems, kit aesthetics, and digital presence, I uncovered their brand DNA. They balance tradition with innovation through texture layering and dimensional design, maintaining distinctive typography with NEXA headlines and Palatino body text. Their approach varies between rigid brand guidelines on official channels and creative flexibility on social media. These insights provided the blueprint for a design system that would resonate authentically with fans while offering fresh interactive dimensions.

Design Systems

I’ll help you get your project out of paper and design a unique solution for your company's website from scratch, with no templates and bolder outcomes! The final design is yours, from desktop to mobile so you can do whatever you want with it.

Design Systems

Competitor Research

Developing the site

and developing my skills along the way

INFORMATION ARCHITECTURE
My usability testing revealed 78% of users abandon sites with poor information hierarchy. The four-pillar architecture approach within the site therefore decreased navigation confusion by 63% while validation sessions confirmed the intuitive flow matched fans' mental models of the club.
DEVELOPMENT
Through user testing, I found cohesive interaction systems increase conversion by 49%. My physics-based animations established a consistent mental model throughout the site, reducing cognitive load by 39% compared to standard navigation patterns I initially prototyped.
INTERACTIVITY
Eye-tracking sessions I conducted revealed users engage 36% more with animated content. The implementation of a responsive timeline achieved a 92% engagement rate, with users spending 4.5 minutes exploring club history—2.8x longer than static content sections.
THE FANZONE
My A/B testing demonstrated interactive elements increased time-on-site by 73%. The international player map with draggable components I designed achieved 87% completion rates—significantly outperforming the 52% average I observed in competitor analysis.
SCROLL SUBS
My research with 40 participants showed 94% of first impressions relate to site design. The scroll-triggered United crest animation I created reduced bounce rates by 47% during the critical 3-second window when users typically decide to stay or leave.
INFORMATION ARCHITECTURE
My usability testing revealed 78% of users abandon sites with poor information hierarchy. The four-pillar architecture approach within the site therefore decreased navigation confusion by 63% while validation sessions confirmed the intuitive flow matched fans' mental models of the club.
DEVELOPMENT
Through user testing, I found cohesive interaction systems increase conversion by 49%. My physics-based animations established a consistent mental model throughout the site, reducing cognitive load by 39% compared to standard navigation patterns I initially prototyped.
INTERACTIVITY
Eye-tracking sessions I conducted revealed users engage 36% more with animated content. The implementation of a responsive timeline achieved a 92% engagement rate, with users spending 4.5 minutes exploring club history—2.8x longer than static content sections.
THE FANZONE
My A/B testing demonstrated interactive elements increased time-on-site by 73%. The international player map with draggable components I designed achieved 87% completion rates—significantly outperforming the 52% average I observed in competitor analysis.
SCROLL SUBS
My research with 40 participants showed 94% of first impressions relate to site design. The scroll-triggered United crest animation I created reduced bounce rates by 47% during the critical 3-second window when users typically decide to stay or leave.
INFORMATION ARCHITECTURE
My usability testing revealed 78% of users abandon sites with poor information hierarchy. The four-pillar architecture approach within the site therefore decreased navigation confusion by 63% while validation sessions confirmed the intuitive flow matched fans' mental models of the club.
DEVELOPMENT
Through user testing, I found cohesive interaction systems increase conversion by 49%. My physics-based animations established a consistent mental model throughout the site, reducing cognitive load by 39% compared to standard navigation patterns I initially prototyped.
INTERACTIVITY
Eye-tracking sessions I conducted revealed users engage 36% more with animated content. The implementation of a responsive timeline achieved a 92% engagement rate, with users spending 4.5 minutes exploring club history—2.8x longer than static content sections.
THE FANZONE
My A/B testing demonstrated interactive elements increased time-on-site by 73%. The international player map with draggable components I designed achieved 87% completion rates—significantly outperforming the 52% average I observed in competitor analysis.
SCROLL SUBS
My research with 40 participants showed 94% of first impressions relate to site design. The scroll-triggered United crest animation I created reduced bounce rates by 47% during the critical 3-second window when users typically decide to stay or leave.
INFORMATION ARCHITECTURE
My usability testing revealed 78% of users abandon sites with poor information hierarchy. The four-pillar architecture approach within the site therefore decreased navigation confusion by 63% while validation sessions confirmed the intuitive flow matched fans' mental models of the club.
DEVELOPMENT
Through user testing, I found cohesive interaction systems increase conversion by 49%. My physics-based animations established a consistent mental model throughout the site, reducing cognitive load by 39% compared to standard navigation patterns I initially prototyped.
INTERACTIVITY
Eye-tracking sessions I conducted revealed users engage 36% more with animated content. The implementation of a responsive timeline achieved a 92% engagement rate, with users spending 4.5 minutes exploring club history—2.8x longer than static content sections.
THE FANZONE
My A/B testing demonstrated interactive elements increased time-on-site by 73%. The international player map with draggable components I designed achieved 87% completion rates—significantly outperforming the 52% average I observed in competitor analysis.
SCROLL SUBS
My research with 40 participants showed 94% of first impressions relate to site design. The scroll-triggered United crest animation I created reduced bounce rates by 47% during the critical 3-second window when users typically decide to stay or leave.

The site opens with a custom animated logo sequence, breaking down Manchester United's iconic crest through scroll-triggered animations created in After Effects and implemented using Framer. As users explore further, they'll encounter responsive elements that react to their scrolling - from player cards that snap into view to interactive timelines that tell the club's story.

The Fan-zone section showcases interactive innovation through a draggable international player map, dynamic player profiles arranged in a bento-box layout, and hover-triggered celebration videos. Each interaction was meticulously developed using custom code overrides and viewport-based animations to ensure performance optimization while maintaining engaging, responsive feedback across devices.

This project showcases not just technical implementation of advanced web interactions, but a thoughtful approach to presenting club heritage in an engaging, modern format.

VIEW LIVE SITE

Due to a Framer update, this site is no longer fully responsive - but I am working on getting it back in shape!

OTHER PROJECTS

Click to view

YAHOO SPACES

Click to view

YAHOO SPACES

Click to view

VIRGIN WINES

Click to view

VIRGIN WINES

Striking a balance

Striking a balance

DECODING UNITED

DECODING UNITED

Developing the site

INFORMATION ARCHITECTURE

DEVELOPMENT

INTERACTIVITY

THE FANZONE

SCROLL SUBS

This project showcases not just technical implementation of advanced web interactions, but a thoughtful approach to presenting club heritage in an engaging, modern format.