Cardii.io
a fitness gaming app
Project
Client - Cardii.io
My Role
I was the user researcher and ux designer. My contributions include: user research, competitive & comparative analysis, wireframing & prototyping, usability testing, content writing and typography
Duration
3 weeks
| Project Overview
Background: The client had a conceptual idea for a team-based turf war mobile game where you & friends can capture & defend turf through outdoor walking, running and biking routes.
The Problem: The client needed help illustrating his idea for this fitness gaming app. The client had a meeting with a gaming company scheduled and needed some sort of prototype.
Solution: We created a ‘happy path’ prototype for Cardii.io. Through user research, we were able to find the top three features users wanted to see in a fitness gaming app and focused on building those out for the prototype. The prototype includes an onboarding trial run, creating an account & profile, local & global leaderboards, and a community page.
| Research & Synthesis
According to the article, “Understanding Different Types of Recreational Runners and How They Use Running-Related Technology” from the International Journal of Environmental Research and Public Health, running is one of the most popular exercise activities in the world but dropout rates are high due to demotivation.This was important to us during the design process because we want to ensure that our users are motivated and keep interacting with the app — this is where gamification comes into play.
Read on to follow our research process that led to our final design!
Our goals for the survey were:
find out how users exercise & what type of cardio users do
find how often users exercise
have users rank features from most important to least to give our design direction
**these are just a few of the research goals
5 users in total were interviewed virtually, a summary of our insights:
Users feel a sense of accomplishment or feel motivated when they can track their progress
Users like team collaborative games
The Social factor of games is important to users
Users want/like leaderboards because of the competitive aspect
Users like seeing others’ progress because it is motivating
What users said in interviews
“I like playing with other people. It heightens the competitive vibe. I like the sociable factor of collaborative games.”
“I find cardio to be boring but I still do it. I try to listen to music or run outside because it helps make the time go by faster.”
“I love competing with my friends for fitness goals. That’s one of the reasons I got an apple watch.”
“I’m a very competitive person so that’s what drives me in games and exercise.”
“Seeing progress is important to me and being able to track that to see how much I accomplished. I want to be able to see if I have improved over time.”
“I think sharing on social media is something I care about so I can flex on my friends. I think having a community board would e cool because I hate running alone and I could maybe find someone on there to go with.”
Competitive Analysis
Zombies, Run! is our main competitor
Cardii.io stands out against all three competitors because it is a multiplayer game
Comparative Analysis
The client established a connection with these brands and sought to draw inspiration from their design
| User Flow
We created four separate user flows of how users would navigate the leaderboard, creating a profile, and the community feature. Included here is a combined flow we created for our client to help him understand the ‘happy path’ user flow.
| Sketches
As a team, we came together and sketched out multiple ideas. We worked closely with our client to make sure our ideas aligned with what he envisioned as well as meeting the users’ needs. We went through multiple iterations before settling on the ideas below. This process really helped me think through how to organize the content and potential design patterns,
| Wireframes
These frames reflect the features that were focused on for the ‘happy path’
| Usability Testing & Iterations
First round of testing & Iterations
60% of users were able to successfully complete all goals
The main area of confusion were the icons. On the left is the original icon for leaderboards which users could not navigate to from the community page. On the right is the updated leaderboards icon which we felt was more intuitive
The other issue area was a button incorrectly prototyped on the community boards which was a quick and easy fix
| Style Guide
The client had specific color preferences for the app, which formed the foundation of our design. We then presented them with multiple font pairings that complemented their chosen palette. After several rounds of adjustments and feedback, we landed on the chosen font pair which perfectly balanced legibility and brand identity.
| Usability Testing & Iterations - High Fidelity
Second round of testing & iterations
100% of users were able to successfully complete all goals (same goals as previous testing)
We noticed a reduced time spent for users to select both communities and leaderboards tabs
We conducted A/B testing in order to justify some changes to our client. While users preferred the bottom option, we found that is had some accessibility issues. We combined the two designs together and settled on the top option which was better for accessibility reasons
| Final Prototype
Results
The success of our prototype sparked a thrilling partnership with a leading gaming company. This collaborative effort opens exciting doors for our concept's future, allowing us to refine and deliver it to a passionate gaming community.
Next Steps
Conduct more usability testing (that never hurts!)
Implement the direct messaging feature
Design some personal customizable avatars
Finalize the details of the progression system & challenges
Design some turf customization options
Reflections
Collaborating with my team on this challenge was truly rewarding. We bounced ideas off each other, tackled obstacles, and ultimately delivered a successful design iteration.
Something I learned was the struggle to find user to test, I would’ve liked to have more participants
Although time constraints limited my exploration of UI options, I gained valuable insights into our client's preferences and the project's direction. I'm eager to further explore the user interface in future projects and refine my ability to present clients with compelling alternative design solutions while respecting their core vision.