Nike HTML5 Games

This project integrates HTML5 games within the Nike app, allowing users to check in by playing short, interactive games. Completing challenges unlocks rewards—like vouchers and promotions—redeemable both in-store and online.

Our goal was to create a seamless, engaging UX/UI that blends gaming elements with Nike’s brand experience while maintaining accessibility and ease of use.

The Game Dashboard serves as the entry point for users to explore and engage with Nike’s gamified check-in system.

• Game Selection – Users can browse a curated list of HTML5 games designed for quick, interactive check-ins.
• Progress & Rewards Tracking – We provide a clear visual hierarchy to display check-in streaks, earned rewards, and upcoming promotions.
• Seamless Navigation – Designed with minimal friction, users can jump into a game instantly while keeping their progress visible.
• Brand Integration – The UI aligns with Nike’s energetic and dynamic visual language, ensuring an immersive brand experience.

💡 Design Focus: A balance between gamification and functionality—keeping it fun but also clear and user-friendly.

Once inside a game, the goal is to make interactions intuitive and rewarding while reinforcing Nike’s brand engagement.

• Onboarding & Game Start – Users are introduced to a quick, skippable tutorial before diving into the game.
• Interactive Check-in Challenges – Gameplay is designed to be short and engaging, ensuring users can complete check-ins effortlessly.
• Real-time Feedback – Score tracking, animations, and subtle microinteractions keep users engaged and aware of their progress.
• Reward Confirmation & Redemption – At the end of a session, users instantly see what they’ve earned and how they can redeem it.

💡 Design Consideration: Optimizing for quick session lengths while maintaining engagement, using visual cues and motion to enhance the experience.

Would love to hear your thoughts on the interaction flow, UI choices, and overall experience!