Crafting a Gamified Hub Against Misogyny: A Dive into UX and Development
In an era where impactful campaigns thrive on innovative storytelling and interactive experiences, the collaboration between the Mayor of London and comedian Romesh Ranganathan to combat misogyny in the UK stands as a shining example. This article delves into the intricate world of user experience (UX) design and development that went into creating a captivating hub page for this campaign. From understanding the sensitive topic to harnessing the power of gamification and technology, let’s explore the journey of creating an engaging platform with a meaningful message.
“Say Maaate to a mate”
ladbible.com/say-maaate-to-a-mate
Understanding the Brief:
At the heart of this project was a challenge that required merging a crucial message with an engaging digital experience. The task at hand was to create a hub page featuring two videos, three articles, and a stream of information aimed at combatting misogyny against women in the UK. The challenge lay in making this content both informative and absorbable, given the sensitivity of the topic.
As with any brief, breaking down the issue into its core components simplified the creation of this hub page, allowing the web team to streamline their development processes and neatly separate tasks. The top level items in this case were the Romesh character animation, the scenes and the interactions between both.
The Romesh character himself, is a sprite animation. We then listen to a multitude of web events, such as scroll or keyboard events, which allowed us to programatically animate the character, so for instance, if we scroll left or press the left keyboard key, Romesh should face left and vice-versa.
The scenes are mainly just full screen <div /> elements with a relative positioning and the elements inside each scene are absolutely positioned. This allowed us to simply add an element and position it exactly where it needed to go. The scenes were then arranged to be next to each other in a single line and added into a horizontally scrollable page element using CSS overflow-scroll x. This horizontally scrollable element then uses similar event listeners as the Romesh character, to traverse the scenes just like a regular web page, but in this case in the X axis.
The final thing to figure out was how the character would interact with certain elements in each scene and how we could make this re-usable, so when a dev needed to add an interactable moment, they could do so programatically using existing methods. The trick with this was Romesh is always in the centre of the screen, this means that interactions would only occur when the interactable element was also in the centre of the screen, so we built a re-usable component which allowed us to specifically track an element, when the element has reached the centre of the screen, when the element is over the centre point and then finally when the element leaves the centre of the screen, along with percentage values that we could make use of to animate accordingly.
The Power of Video:
Video content, featuring comedian Romesh Ranganathan, played a pivotal role in capturing the audience’s attention right from the start. The curtain drop, speech bubble prompt, and background dimming upon pressing the play button. Personalizing the experience further, the Romesh character watching the video alongside the user added a touch of camaraderie.
Enter Gamification:
Understanding the need to maintain user engagement, the UX designer introduced gamification as the driving force. Drawing inspiration from 8-bit games, a nostalgic design was adopted, delighting both users and the web team. Gamification served as a strategic element, not just visually but functionally, as it led users through the hub with bitesize pieces of information rather than overwhelming paragraphs.
The Art of Journey Design:
Segmenting the journey was essential to ensure users could follow the storyline effortlessly. Text-heavy portions, such as the articles, were broken up into engaging conversational chunks. Each interaction was meticulously crafted to encourage users to keep progressing, achieving a harmonious balance between consumption and comprehension.
The Role of UX Beyond the Hub:
UX is not confined to the hub’s boundaries alone; it extends to how users access it and navigate within it. Intuitive mechanisms, like the swipe to move gestures or the conversation controls, contributed to a seamless user experience. These considerations enhance accessibility and drive traffic to the project.
Designing for the Ultimate Experience:
The intricate dance of UX went beyond just interactions. The speed of character movement, interaction mechanics, and design coherence contributed to an immersive experience. The journey culminated with an interactive video by the Mayor of London, showcasing the pinnacle of user interaction.
Challenges and Feedback:
In the realm of UX and development, challenges are bound to arise. Real-world testing, conducted via usertesting.com, provided insights that improved the overall project. Positive feedback validated the design’s appeal, effectively marrying aesthetics with the campaign’s purpose.
The Role of Micro Animations:
Micro animations might seem insignificant, but they elevate the user experience. They inject joy and depth, bridging the gap between static content and immersive engagement. The decision to incorporate these animations, such as bouncing clouds and animated dog flurries, breathed life into the page, making it memorable and shareable.
These animations are driven by meticulously crafted sprite sheets, which comprise multiple frames of a single animation. One significant hurdle we encountered was the orchestration of numerous sprites simultaneously on a single web page, without compromising performance. To address this challenge, we harnessed the power of pure CSS techniques. We ingeniously utilized a basic HTML element as a canvas, adorning it with the sprite as its background image. By deftly manipulating CSS Keyframes, we seamlessly shifted the position of the background image, conjuring the illusion of fluid movement. This approach allowed us to infuse vitality into the page without burdening its performance.
If the world of web sprite animations intrigues you, I invite you to explore React-spriter, a dynamic React component meticulously designed to simplify the animation and manipulation of sprites. This package offers an invaluable opportunity to delve deeper into the mechanics behind the enchanting effects we’ve harnessed in this project. Discover firsthand how React-spriter empowers developers to seamlessly create and control sprite animations, bringing a touch of magic to web experiences.
Navigating Tight Deadlines:
Deadlines are an inescapable reality in the world of projects. This project’s tight timeline pushed the team to creatively balance creativity and functionality. The result? A well-rounded hub that not only delivered on its purpose but also pleased users and stakeholders alike.
Conclusion:
The journey of creating an interactive hub against misogyny united technology, art, and user experience into a harmonious symphony. This project underscores the importance of meticulous planning, understanding user needs, embracing gamification, and infusing a touch of joy through micro animations. As the UX designer, developer, and team collaborated to bring this vision to life, they demonstrated that even serious subjects can be approached with innovation and creativity, leaving a lasting impact on users and conversations.
Please check out this POC for more insight as to how this project was developed. The project can also be previewed here.
