The X-MOVE Fitness Programme designed to help people train smarter, not harder. It identifies individual fitness zones and pairs them with targeted nutrition for optimal performance and recovery.
X-MOVE Fitness Zone Quiz
Designed and built 80% production-ready product with AI tools
Goal
Create an interactive, responsive quiz that engages users, determines their personalised fitness zone, and connects them to the right sports nutrition solution
Quiz's Role in the Campaign
Serves as an interactive tool that helps users discover their fitness zone—from improving endurance, to burning fat and reaching their peak performance. It seamlessly recommends the X-MOVE Fitness Kit+, acting as both a brand engagement experience and a product promotion touchpoint.
Objectives:
Educate users on heart-rate-based training by revealing their fitness zone result in an easy-to-understand format
Promote and generate interest in the X-MOVE Fitness Kit+ through personalised quiz results
Make the quiz experience fast and visually engaging
Ensure brand alignment with XS’s energetic, sporty visual style across quiz design and interactions
Challenges:
Designing a quiz flow that keeps users engaged minimises drop-off before completion
Maintaining brand consistency with XS’s energetic and sporty identity
Completing the full design and foundation of development within 2-3 weeks, while allowing time for developers to adjust, compile, and restructure the code
Disclaimers: Splash screen assets, product images and content were all provided by client.
Design Process
Gather requirements and research
Collected required documents and project brief from direct superior before starting
Brainstormed and researched to define the design direction with direct superior
Key screens design & iteration
Created detailed key screen designs based on approved wireframes and design direction
Refined through multiple iterations, updating content, splash screen animation, and minor design elements that were requested by client
Visual design
Applied neon colours, high-energy visuals elements, and bold typography
Plan and research on the examples of micro-interactions for buttons and transitions to create a dynamic feel
Development & testing
Built the quiz with the help of AI tool and test it on different screen sizes
Handover and collaborated with developers on necessary adjustments
Check out the walkthrough video below, or visit the live site through the link for the immersive experience.
Final Results
The quiz engages users by helping them discover their fitness zone, then educates them on their specific training goals and intensity. It concludes by promoting the X-MOVE Fitness Kit+ as the featured product solution, complete with details and a ‘Buy Now’ link, shown to all users regardless of zone.