Almarai Game — Interactive Product Matching Game for Healthcare Professionals
We built an interactive web game for Almarai's IPNC conference — healthcare professionals match nutrition products to their medical indications in a timed card-matching challenge with a live leaderboard.
Services
Links
The Challenge
Almarai wanted an interactive way to introduce doctors and healthcare specialists to their therapeutic nutrition products during the IPNC conference. Instead of brochures or traditional presentations, they needed an engaging experience that makes learning fun and competitive.
What We Built
An interactive web game combining card-matching with product education — featuring a custom doctor character illustration that accompanies the player throughout the experience.
Start Screen
A vibrant welcome screen displaying the Almarai and IPNC logos with a prominent “Start” button. The cartoon doctor character surrounded by flying product cards creates a sense of excitement and curiosity.
Participant Registration
A registration form collecting participant details: name, country, hospital or center, specialty, email, and phone number. A blue gradient background with an hourglass hints at the timed nature of the game.
Card Memory Challenge
Phase one: 6 face-down cards featuring Almarai nutrition products. Players need to remember the position of each product. A timer at the top adds pressure and excitement.
Product-Indication Matching
Phase two: match the correct product image to its medical indication. Each card displays the product and its medical description — from high-protein renal nutrition to complete nutrition for chronic pulmonary disease patients.
Live Leaderboard
A real-time leaderboard showing the fastest and slowest participants — adding a competitive element among conference attendees. Each player sees their ranking compared to others.
Congratulations Screen
Upon successfully completing the challenge, a congratulations screen with fireworks and the doctor character surrounded by Almarai products. A closing experience that leaves a positive impression.
Tech Stack
An interactive web game built with Angular 20 and TypeScript featuring custom cartoon illustrations. Includes a registration system with async validation, precise timer, card-matching logic with derangement algorithms, live leaderboard, sound effects, and visual effects (fireworks). Designed to run on tablets at conference booths.
Why This Matters
Gamification turns product education from a boring experience into a fun challenge. Doctors learn about Almarai’s therapeutic nutrition products while competing — meaning better recall and a stronger impression than any traditional brochure.