Designing an interactive, web-based game experience inspired by a D&AD New Blood brief for Hellmann’s, with the goal of increasing brand engagement and reframing mayonnaise as a playful, hero ingredient for a younger digital audience. The primary user action was to engage with the game, complete levels, and unlock a reward experience that reinforces brand affinity rather than direct purchase.
Sector:
Front-end Dev
Industry:
Gamified Marketing
Duration:
7 weeks
My Contributions
End-to-end UX and UI design across the full experience, including:
User research & concept development
User flows and task journeys
Wireframing and interaction design
Visual UI design and component creation
Design system development
Front-end implementation (HTML, CSS, JavaScript)
The Design Process
After defining the project goals and target audience, I mapped out the core user journey from discovering the game, to playing through levels, to receiving a reward.
I focused on balancing playfulness and usability, ensuring the interface felt intuitive while maintaining a strong brand identity.
Low-fidelity prototypes were used to establish the function of the player, obstacles and their collision radii, and game flow. These were then refined into high-fidelity designs, translating game mechanics into clear, engaging elements.
Design System
A cohesive design system was created to ensure visual consistency across the game interface and reward screens. Establishing this system early helped maintain clarity and usability while allowing the experience to feel bold, energetic, and brand-led.
The system included defined rules for colour, typography, spacing, and reusable components to support scalability and consistency throughout the experience.
Typography System
Heading Hierarchy
The interface uses a clear heading hierarchy to guide users through the experience, from level progression to reward confirmation screens. Spacing follows a consistent 4px-based system to maintain rhythm and readability across layouts.
Body Text
Body text styles were designed for clarity and accessibility, particularly during instructional moments and reward explanations. Multiple text sizes were defined to support hierarchy without overwhelming the interface.
Button Text
Button text styles were designed to clearly indicate primary and secondary actions, such as revealing rewards, copying codes, and replaying the game. Sizes and spacing were adapted for responsiveness across desktop and mobile.
Colour Palette
The colour palette was split into primary, surface, and accent colours, drawing directly from Hellmann’s brand identity. Tints and shades were defined to support contrast, accessibility, and visual depth across different UI states.
The palette helps distinguish interactive elements, game feedback, and reward moments while maintaining brand consistency.
Conclusion
What I valued most about this project was the sense of personal growth and achievement. Hellmann’s Heroes is the project I am most proud of because I pushed myself out of my comfort zone and created something both functional playful. The final outcome is an interactive digital brand experience that positions Hellmann’s mayonnaise as the “hero” through interactive storytelling and reward-based engagement. This project reinforced the value of self-initiated learning in producing industry ready outcomes.
