ITQAN LAB
Design & Technology Studio
Get in Touch Available Now
Almarai Game — Interactive Product Matching Game for Healthcare Professionals لعبة المراعي — لعبة تفاعلية لمطابقة المنتجات للمختصين في الرعاية الصحية
Almarai Healthcare / FMCG

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.

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.

Start screen with doctor character

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.

Participant registration form

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.

Face-down product cards with timer

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.

Product-indication matching screen

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.

Leaderboard showing fastest and slowest

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.

Congratulations screen with fireworks

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 مع رسوم كرتونية مخصصة. تتضمن نظام تسجيل مع تحقق غير متزامن، عداد زمني دقيق، منطق مطابقة البطاقات، لوحة متصدرين مباشرة، مؤثرات صوتية، وتأثيرات بصرية (ألعاب نارية). مصممة للعمل على الأجهزة اللوحية في أجنحة المؤتمرات.

لماذا هذا مهم

التلعيب يحوّل التعلم عن المنتجات من تجربة مملة إلى تحدي ممتع. الأطباء يتعلمون عن منتجات المراعي الغذائية العلاجية وهم يتنافسون — وهذا يعني تذكّر أفضل وانطباع أقوى من أي كتيب تقليدي.

Have a project in mind?

Tell us what you're building. No sales deck — a real person responds within 24 hours with an honest take on whether we're the right fit.

hello@itqanlab.com
New Cairo, Egypt — Working globally Clear scope · No surprises Available Now