Introduction

Introduction

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.

Project

Project

X-MOVE Fitness Zone Quiz

Role

Role

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.