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.
“It's hard to find the right balance between what I enjoy and what I need.”
ABOUT
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.
BEHAVIOURS
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.
FRUSTRATIONS
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.
ACTIONS
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.
KEYWORD
Sedentary Lifestyle
Sustainable fitness habits
Healthy lifestyle integration
STAGE 1
GAMING ROUTINE
Adam spends several hours each day gaming, often late into the night. He enjoys gaming and finds it relaxing, though he’s aware it’s affecting his health. While content, he feels a sense of guilt about his physical inactivity. This stage is marked by a lack of exercise, poor eating habits, and frequent fatigue.
STAGE 2
REALISATION
Adam notices weight gain and a decline in energy levels. He realizes he needs to make a change for his health but doesn’t know where to start. Frustration and concern begin to build about the long-term impact of his lifestyle. He struggles to balance gaming with attempts at healthier living.
STAGE 3
SEEKING SOLUTIONS
Adam begins exploring ways to incorporate exercise into his routine. He wonders if there’s a way to make physical activity feel as engaging as gaming. Although hopeful, he remains skeptical about finding a solution that sticks. He finds it hard to stay motivated and carve out time to exercise.
STAGE 4
TAKING ACTION
Adam tries out gamified fitness apps and starts building short workouts into his day. He sees this as a fun way to stay active without giving up gaming. Encouraged by small wins, he becomes more aware of the effort it takes to maintain progress. His focus shifts toward staying consistent and avoiding a return to old habits.
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
Select Trainer
Home
Guild Hall
Shop
Leaderboard
Locker
Change Tops
Change Bottoms
Change Accesories
Change Background
Daily Quest
Boss Quest
Power Ups
Cosmetics
Subscription
Local Board
Friend Board
Global Board
I translated the sketches into wireframes
I translated the latest iteration of my sketches into mid-fidelity wireframes, prioritising:
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
Typograghy
Font Family
Type scale
Font weight
Aa
Techno Race
Aa
Roboto
Seven styles from "Heading 1" to "Small Text" are used.
The Techno Race font was chosen to evoke a futuristic, cyberpunk aesthetic in line with the moodboard, while Roboto was selected for its clarity and readability across a wide range of users.
Style
Font size
Line Height
Heading 1
30
Auto
Heading 2
24
Auto
Heading 3
20
Auto
Heading 4
14
Auto
Medium Text
10
Auto
Button Text
10
Auto
Small Text
08
Auto
Regular 400
Medium 500
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 (a snippet shown above) from scratch in Figma that included:
Text styles: Unified typography for seamless readability.
Color palettes: A consistent neon-inspired color scheme.
Components and variants: Standardised 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.
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.