6 Months / 2023 / UX/UI Designer
Quest Up
Fitness App Designer For Gamers
Context
Quest Up began as my Capstone project at BrainStation's 3-month Bootcamp. Post-bootcamp, I refined it further, turning it into a startup. Notably, Quest Up won 1st place at a City Ventures startup competition, earning a £3,000 investment to bring it closer to launch.
PROBLEM SPACE
Gamers often struggle with maintaining an active lifestyle due to their sedentary habits. Traditional fitness apps fail to engage this demographic effectively.
WHAT IS QUEST UP?
Quest Up is a gamified fitness app designed to combat gamers' sedentary lifestyles by making exercise as exciting as gaming. It encourages activity, reduces health risks, and fosters an engaging fitness community.
Project Timeline & Approach
Originally created as my bootcamp capstone project, Quest Up followed an iterative design process, progressing through research to prototyping & evaluation within three months. Post-bootcamp, I refined it further for a startup pitch, incorporating additional prototyping and branding revisions, aligning with Human-Centered Design and the Double Diamond framework.
THE PROBLEM
Gamers struggle to stay active
A clash between gaming and health.
Gamers often face difficulties maintaining an active lifestyle due to their sedentary habits. Traditional fitness apps fail to engage this demographic effectively.
Research reveals that prolonged sitting during gaming can increase health risks like cardiovascular disease, obesity, and joint issues. The sedentary nature of gaming sessions, coupled with extended screen time, often leads to eye strain, back pain, and stiffness. Over time, these habits can also contribute to metabolic disorders and higher risks of conditions such as diabetes.
MONTH 1
Research
Primary & Secondary Research
MONTH 2
MONTH 3
MONTH 4
Ideation
Sketches, Wireframes
Visuals & Branding
Sketches, Wireframes
MONTH 5
MONTH 6
Prototype & Evaluation
Formative User Evaluations
RESEARCH OBJECTIVE
To identify the health consequences of a sedentary lifestyle due to prolonged gaming sessions and uncover the key barriers preventing gamers from adopting traditional fitness solutions.
KEY INSIGHTS
Lack of motivation to exercise
A clash between gaming and health.
By engaging with gamers on platforms like Discord, at gaming conventions, and in gaming cafes, I uncovered a series of patterns that shaped my approach. Three critical insights stood out:
PROBLEM
Gamers often spend long hours sitting while gaming
PAINPOINT
Exercise Feels Like A Chore
OPPORTUNITY
Gamers Are Interested In Gamified Fitness
Meet Adam
Based on the research insights, I developed a primary persona that encapsulates the average gamer struggling to balance gaming and physical activity.
This user profile became my reference point for all of my design decisions moving forward, ensuring that every feature and interaction aligned with the user's needs and motivations.
Actions
Behaviours
Frustrations
Frequently engages in gaming sessions that last 6-8 hours, particularly during weekends.
Neglects physical activity, opting to game instead of exercising or participating in outdoor activities.
Skips meals or opts for fast food while gaming, contributing to unhealthy eating habits.
Struggles to balance gaming with maintaining a healthy lifestyle, leading to weight gain and fatigue.
Experiences back pain and eye strain due to prolonged gaming sessions.
Establish a healthier routine that includes regular physical activity and balanced nutrition while still enjoying gaming.
Reduce gaming hours and incorporate physical activity to improve fitness and overall well-being.
" I love gaming, but I know I need to take better care of myself. It's hard to find the right balance between what I enjoy and what I need."
Sedentary lifestyle
Sustainable fitness habits
Healthy lifestyle integration
Adam
University Student
Adam, a 21-year-old Computer Science student, loves gaming but faces health and academic challenges. Now, he's motivated to adopt healthier habits while balancing gaming.
Ray spends several hours each day gaming, often late into the night.
"I enjoy gaming and it helps me relax, but I know I’m neglecting my health."
Contentment from gaming, but underlying guilt about physical inactivity.
Lack of exercise, poor eating habits, and fatigue.
Ray notices weight gain and a decline in energy levels.
"I need to do something about my health, but I’m not sure where to start."
Frustration and concern about the impact of his lifestyle.
Difficulty balancing gaming with a healthier lifestyle.
Ray explores ways to incorporate exercise into his routine.
"Maybe I can find a way to exercise that’s as engaging as gaming."
Hopeful but skeptical about finding a sustainable solution.
Struggles to find motivation and time for exercise.
Ray tries out gamified fitness apps and starts incorporating workouts into his day.
"This could be a fun way to stay active without giving up gaming."
Encouraged by small progress but aware of the challenges ahead.
Maintaining consistency and not reverting to old habits.
Actions
Thoughts
Emotions
Behaviours
Stage 1:
Gaming Routine
Stage 2:
Realisation
Stage 3:
Seeking Solutions
Stage 4:
Taking Action
HOW MIGHT WE
How Might We motivate gamers to engage in physical activities to improve their long-term health?
IDEATION
Keeping fitness within reach via mobile apps
Lowering the fitness barrier was key
My persona emphasised the importance of making workouts effortless and accessible to avoid overwhelming users. A mobile app emerged as the perfect solution—familiar and intuitive for gamers, keeping fitness within reach.
Constructing the blueprint for the app
Using the sketch as a guide, I created the app's information architecture to structure the order and hierarchy of user tasks, ensuring a seamless and intuitive flow throughout the app. I then created a user flow to map how users would interact with the app according to the designed information architecture.
Splash Screen
Onboarding
Login
Create Account
Home
Locker
Guild Hall
Daily Quest
Change Tops
Change Bottoms
Change Accesories
Change Background
Local Board
Power Ups
Cosmetics
Subscription
Friend Board
Global Board
Boss Quest
Shop
Leaderboard
Select Avatar
Locker Screen
Guild Hall
Quest Screen
Leaderboard
Screen
User Action
Home
Shop
User clicks on “Guild Hub” to browse a library of real-time quests (challenges/goals) that are updated on a weekly basis
User earns digital currency by completing challenges/quests and uses it to exchange for rewards in a digital store
User accesses “Character Profile” to change their avatar’s clothing and to see how their progress in the form of their virtual avatar
User takes time to customise their avatar using the digital currency they just earned
User checks the “Leaderboard” to see their fitness progress against their friends and other users
User also takes time to view achievments
User clicks on “Shop” to use their virtual currency to redeem in-game rewards or clothing for their avatar
User purchases customisable clothing for their virtual character
User completes the quest
User accepts a “Boss Quest” that require extra effort
I translated the sketches into wireframes
I translated the latest iteration of my sketches into mid-fidelity wireframes, prioritizing:
Layout clarity: Ensuring an intuitive and gamer-friendly structure.
Interaction concepts: Focusing on smooth and engaging user flows.
This stage allowed me to solidify the app’s core functionality and gather valuable feedback through early usability testing—setting the stage for visual and interactive refinements.
USABILITY TESTING
I conducted two key usability tests
Think-Aloud &
First-Click Test
For the usability tests, I allowed users to test the prototype while capturing their live thoughts as they navigated the app, providing insights into their decision-making process.
I also observed their initial interactions and click patterns to identify issues with the information hierarchy and pinpoint moments of confusion or obstacles encountered without intervention.
The usability issues were pointed down and the necesssary changes were made
INCONSISTENT SCROLLING
Users were confused by varying scrolling behaviors
OVEREXERCISING RISK
No mechanism existed to encourage breaks during sessions
UNFAIR LEADERBOARD
Lack of equal opportunities to climb ranks
UNABLE TO TRACK PROGRESS
Users couldn’t monitor their fitness stats
UI INCONSISTENCIES
Design elements lacked cohesion
STANDARDISED SCROLLING
Standardised scrolling behavior for consistent navigation
ENERGY BALANCE
Introduced an energy balance feature to encourage breaks
LEADERBOARD TIMER
Added a leaderboard timer for fair competition
NEW REPORT SCREEN
Implemented a statistics report screen for tracking fitness progress
REFINED UI
Refined the UI for a cohesive and polished look
Statistic Report
M
T
W
T
F
S
S
Quests
Show More
Awards
Show More
100% done
25/25 km
25 km Power Marathon
100% done
25/25 km
25 km Power Marathon
New Move Record
0 of 0 Calories
New Move Record
0 of 0 Calories
New Move Record
0 of 0 Calories
BRANDING & HIGH-FIDELITY WIREFRAMES
I created a design system before creating my
high-fidelity wireframes
Branding: Neon Meets Fitness Gaming.
The branding for Quest Up is deeply rooted in the cyberpunk aesthetic, merging the futuristic allure of neon lights with cutting-edge technology. This approach highlights how gamers are leveraging tech to redefine fitness while staying connected to their gaming culture.
Futuristic Atmosphere: Neon visuals reflect innovation and align with the gaming community’s love for RGB lighting systems.
Immersive Experience: The design resonates with gamers, creating a relatable and visually captivating environment
Adventurous
Exciting
Playful
Futuristic
Cyberpunk
Building Consistency: From Icons to Interfaces.
A major challenge in the design process was ensuring consistency across UI components, particularly with icons that didn’t always align with the app’s aesthetic due to varying dimensions.
To overcome this, I built a design system from scratch in Figma that included:
Text styles: Unified typography for seamless readability.
Color palettes: A consistent neon-inspired color scheme.
Components and variants: Standardized UI elements for uniformity.
This design system ensured a cohesive and polished final product, simplifying the design process and enhancing the app's overall visual appeal.
Typography
Iconography
Colours
Turn your fitness progress into a real-life adventure!
Your personal trainer levels up as you complete workouts, earning rewards like in-game currency and XP.
Customise your trainer and track your journey in a way that makes every workout feel like an epic win. Fitness meets fun—take control and start your quest today!
Choose your adventure and crush your fitness goals!
The Guild Hub lets you tackle exciting daily and boss challenges, each designed to boost your strength, speed, and agility.
With stunning cyberpunk visuals and action-packed stories, every workout becomes a mission you can’t wait to complete. Are you ready to level up?
Compete, climb, and conquer! See how you stack up against friends and players worldwide.
Whether it’s earning bragging rights or extra motivation to hit your goals, this feature brings out your competitive edge and makes every step count. Will you claim the top spot?
Upgrade your adventure!
The Shop is your go-to for unlocking new gear, skins, and power-ups with your hard-earned rewards.
Customise your trainer, boost your progress, and stand out in the game. Fitness meets fun and it’s all yours to explore!
Track your progress like a pro! Receive an in-depth view of your achievements, workouts, and milestones.
From calories burned to quests completed, you’ll see your fitness journey visualized like never before. Stay informed, stay motivated, and keep leveling up!
Gear up and get ready! Personalise your trainer with epic gear and showcase your achievements. It’s your space to prep for the next quest and look awesome while crushing your fitness goals!
SUCCESS METRICS & KEY LEARNINGS
From Concept to Reality: Turning Quest Up Into a Winning Idea.
Success Metrics
Quest Up reached a major milestone by winning the City Ventures Grand Spark Start-Up Competition, earning £3,000, a spot in the 10-week accelerator program, and guidance to transform it into a real startup.
The next step is crowdfunding, with a £5,000 goal to validate market demand. Achieving this will confirm the app’s viability and pave the way for its launch, positioning Quest Up to revolutionize fitness in the gaming community.
Key Learnings
Consistency is key: Developing a comprehensive design system streamlined the design process and ensured consistency across UI components.
User feedback is invaluable: User testing and feedback were crucial in identifying and resolving usability issues, leading to a more intuitive design.
Balancing creativity and functionality: Gamifying fitness is a creative challenge that must balance engaging elements with practical features that genuinely support health goals.