I worked across User Experience Design, User Interface Design, HTML, CSS, and JavaScript, with responsibilities including UX research, game concept development, illustrating, and reward strategy, using tools such as Visual Studio Code, Adobe Photoshop, and Illustrator.
Role:
Front-end Dev, Illustrator
Industry:
Game Design
Duration:
7 weeks
Challenges
The challenge was to develop an innovative idea that positioned Hellmann’s as #1 while creatively engaging younger audiences for the 2025 D&AD New Blood Awards brief, giving me the opportunity to immerse myself in code and learn new programming blocks and terminology.
My Approach
Research
Initial Problem Discovery: After reviewing the brief, I saw an opportunity to help Hellmann’s connect with a younger demographic through a fresh, engaging approach, as traditional campaigns often felt repetitive and lacked originality.
I developed a 2D platform runner web game that positions Hellmann’s as the hero, combining gamification with tangible incentives to create a playful, interactive experience. The game reframes Hellmann’s as essential, reliable, and iconic, while staying true to the brand’s identity and appealing to Gen Z users.
Synthesis
User Persona: I produce a user persona to help me ideate and tailor my game to a younger audience but also in a way that still captures the existing brand look and doesn’t exclude the brands existing audiences.
User Journey: Next, is mapping the user journey out for users who love quick mobile games to play between homework and chores, especially ones with bright graphics, funny sound effects, and a bit of challenge.
Ideation
Developing a solution: Gamification in UX design has been widely recognised as an effective strategy for encouraging user participation and long term engagement, particularly in applications that require consistent use, such as health and fitness apps. Gamification has proven effective across a range of industries and applications.
Results
Final Designs: I wanted the layout to provide clear visual cues, such as progress bars or score indicators, while maintaining focus on the gameplay itself. Additionally, in similarity to the classic Red Ball game’s minimalistic yet charming design, I wanted to add fluid animations, such as smooth transitions between sprite sheet frames, to enhance the overall experience.
HTML, CSS, JavaScript: To build Hellmann’s Heroes, I used a combination of HTML, CSS, and JavaScript. I used Javascript's built-in canvas to draw the game elements and multiplied all elements by a game ratio to make the game resizable and compatible across different screen sizes. This was a really satisfying feature to implement, as it gave the project a more polished and industry ready feel.
HTML was used to create a fun fact generator for the loading screen. I added a bank of interesting Hellmann’s facts and wrote a function to randomly display one each time the game loaded.
CSS was used to style this load screen and keep the visual tone consistent with the Hellmann’s brand.
All core gameplay mechanics such as character movement, collision detection, and enemy behaviours were built using JavaScript. This multi language approach gave me a well rounded understanding of how different web technologies can work together to bring an interactive idea to life.
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 and fun. Submitting it to the D&AD New Blood Awards 2025 was the ultimate highlight, it showed me how far I had come and how powerful self initiated learning can be in building real industry ready outcomes.
