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.
التحدي
المراعي أرادوا طريقة تفاعلية لتعريف الأطباء والمختصين بمنتجات التغذية العلاجية خلال مؤتمر IPNC. بدلاً من كتيبات أو عروض تقديمية تقليدية، كانوا يحتاجون تجربة تفاعلية تجعل التعلم ممتعاً وتنافسياً.
ما بنيناه
لعبة ويب تفاعلية تجمع بين مطابقة البطاقات والتعلم عن المنتجات — بتصميم مستوحى من عالم الطب مع شخصية طبيب كرتونية ترافق اللاعب طوال التجربة.
شاشة البداية
شاشة ترحيب بتصميم حيوي تعرض شعار المراعي وIPNC مع زر "Start" بارز. شخصية الطبيب الكرتونية محاطة ببطاقات المنتجات المتطايرة تخلق إحساس بالحماس والفضول.

تسجيل المشاركين
نموذج تسجيل يجمع بيانات المشاركين: الاسم، الدولة، المستشفى أو المركز، التخصص، البريد الإلكتروني، ورقم الهاتف. تصميم بخلفية زرقاء متدرجة مع ساعة رملية تشير لعنصر الوقت في اللعبة.

تحدي تذكّر البطاقات
المرحلة الأولى: 6 بطاقات مقلوبة تحمل منتجات المراعي الغذائية. اللاعب يحتاج لتذكّر موقع كل منتج. عداد زمني في الأعلى يضيف عنصر التحدي والإثارة.

مطابقة المنتج بالاستخدام
المرحلة الثانية: مطابقة صورة المنتج الصحيحة مع دواعي الاستخدام الطبية. كل بطاقة تعرض المنتج ووصفه الطبي — من التغذية عالية البروتين لمرضى الكلى إلى التغذية الكاملة لمرضى الرئة المزمنة.

لوحة المتصدرين
لوحة متصدرين مباشرة تعرض الأسرع والأبطأ — تضيف عنصر التنافس بين المشاركين في المؤتمر. كل لاعب يرى ترتيبه مقارنة بالآخرين.

شاشة التهنئة
عند إكمال التحدي بنجاح، شاشة تهنئة بألعاب نارية وشخصية الطبيب محاطة بمنتجات المراعي. تجربة ختامية تترك انطباعاً إيجابياً.

البنية التقنية
لعبة ويب تفاعلية مبنية بـ Angular 20 و TypeScript مع رسوم كرتونية مخصصة. تتضمن نظام تسجيل مع تحقق غير متزامن، عداد زمني دقيق، منطق مطابقة البطاقات، لوحة متصدرين مباشرة، مؤثرات صوتية، وتأثيرات بصرية (ألعاب نارية). مصممة للعمل على الأجهزة اللوحية في أجنحة المؤتمرات.
لماذا هذا مهم
التلعيب يحوّل التعلم عن المنتجات من تجربة مملة إلى تحدي ممتع. الأطباء يتعلمون عن منتجات المراعي الغذائية العلاجية وهم يتنافسون — وهذا يعني تذكّر أفضل وانطباع أقوى من أي كتيب تقليدي.