Cardi.io App Design
Cardii.io is a start-up running mobile game that incentivizes its users to get active and stay active. Through the efforts of collaboration and by utilizing the double diamond design approach, my team and I were able to take the initial ideas of Cardii.io's CEO Destin Bell and create beautiful wireframes and mockups of his vision for the app.
My team consisted of myself, Abrar Sawani, Carmeena Escobar and Jose Reyes. As a team, we collectively researched, defined, designed and developed prototypes for a competitive and collaborative running mobile game.
Research Goals:
Our team's research began with the foundational background that Destin had provided us. We immediately began expanding his foundations with our own research by looking into competitors and conducted C&C Analysis to figure out the current playing field of running apps and how to make Cardii.io stand above the competition.
C&C Analysis:
As seen from the chart above, Cardii.io's greatest existing competitor was "Zombies, Run!", a solo-player running mobile application. Zombie's, Run! had a variety of features, like leaderboards and health metrics that The Walk and Fitness RPG both lacked. With the goal of making Cardii.io a game that was both competitive and collaborative, we felt that the leaderboards functionality was a necessary component to incorporate in our designs.
The parameters we compared Cardii.io's comparators to were UI Design, Navigation and Features, to which we chose dedicated running fitness apps, focusing on aspects of the UI and navigation. Clash Royale was chosen as a comparator with the intent to understand clean game design visuals/aesthetics and to get a feel for how a top game designs their leaderboard system. Reddit was incorporated as a comparator for Cardii.io's community boards function.
Survey Results:
A large portion of our research was dedicated to pulling in extensive survey data to gain foundational understanding of our user's preferences when it came to exercise, specifically cardio. As pulled from these three survey questions with 150 user responses, the number one form of exercise users conducted was cardio and Running, Walking and Biking sat very high on the list of cardio activities our users conducted. An additional key data metric we looked for was consistency in our user's exercise habits, showing that over half of our users work out four to seven times a week.
In order to assist our users in developing healthy and consistent exercise habits, we focused in on the key features an app would need to retain as much user attention as possible. The four features that our users ranked as most important were health metrics, leaderboards, messaging/communities and personal & customizable avatars.
Interview Results:
Our interview process began immediately after our survey results came in. The interview process was broken into seven questions that intentionally opened up a conversation about exercise habits, previous mobile games played and user opinions/preferences with existing exercise or gaming apps. These interview conversations with our users allowed us as designers to really take a step away from the perspective of a designer and step into the shoes of our users, giving us a deeper understanding of the innate needs of our users.
Refining Research:
After accruing a surplus of insightful data, our team shifted our focus from accumulating research to refining it to focus on the MVP's that our users had selected. The process of defining our research began with affinity mapping our survey and interview responses, which gave us clear understanding of the trends in our research and how to best act upon them.
.png)
Affinity Map: Link to Figma File
A couple of key groupings that were pulled from affinity mapping was a strong trend in competition. Users commented often about having a lack of accountability when they exercise which leads to demotivation and ultimately, an inconsistent exercise routine. Another key aspect users spoke about that went hand in hand with this sentiment was the sociability aspect of the game. Users expressed a desire to connect with fellow runners and expand their communities for the purpose of improving consistency of their workouts.
Other trends pertaining to gamification were categories specifically related to games our users have played before. Users expressed familiarity with the UI of Pokemon Go and were in unanimous agreement regarding the innovative nature of the game. A large part of the design inspiration was pulled from the map view that Pokemon Go modernized as the standard for any geolocator game.
Persona:
After synthesizing our affinity map, we began creating our ideal user who would be interacting with the app. Our persona John was created to emphasize a need for social aspects while still focusing on a motivator that will encourage his exercise habits.
Problem/"How Might We" Statements:
Once our persona was created, we put together a couple of problem statements and how might we statements to guide our design focus. The problem statements were designed to highlight key features that John lacks in his day-to-day routines, while the how might we statements were created to address the said issues that John was experiencing.
Sketching:
My team and I collectively put together our design inspirations to create the initial designs of our product. We decided to pull aspects of good design from competitors we believed set the design standards for our designated MVP's.
Strava:
The competitor we believed had the strongest overall design for their profile was Strava. Strava was chosen as our main inspiration due to the well-designed format of health metrics and social aspects.
Clash Royale:
For our leaderboards, we believed that Clash Royale, a mobile competitive strategy game had an effective ranking system. Supercell, the company behind titles like Clash Royale and Clash of Clans are famous for their competitive titles and Clash Royale's existing structure and design to determine player ranks aligns well with the goals of Cardii.io.
Reddit:
Reddit stands as one of the largest community board websites to date and our team believes that this is due to the familiarity with Reddit's UI. Our goal for Cardii.io's community messaging design was for it to be intuitive and easy to navigate, so pulling from Reddit's design standards was deemed the wisest option.
Wireframing:
With sketches mapping out the overall design of our MVP's, I oversaw the development of our B&W lo-fidelity wireframes, as my team developed screens displaying the end to end functionality of our website.
Prototyping: Lo-Fi Prototype
Once our designs for lo-fi were completed, we immediately began fleshing out the functionality and navigation of our prototype, displaying the "happy path" that users would go through while interacting with the app. With our prototype fleshed out, we transitioned into our first stage of usability testing.
Usability Testing (Round 1):
Our parameters for usability testing were decided based upon the number of screens we had and their prior understanding of mobile apps. Our first round of testing focused more on the usability of our product and follow-up questions that were asked pertained to the app's navigation and intuitiveness.
Our results for the first round of testing were 3 of our 5 users successfully completed each task while maintaining both the time and error limits. Users most commonly were making errors on the community board page due to a lack of clarity on where they needed to click to access the forum posts. Along with this, other errors included misclicks in the post-run screens and navigating the leaderboards, so for our iterative designs, we decided to polish up these areas of confusion.
Mid-Fidelity Wireframes:
Transitioning into our mid-fidelity wireframes, our team began implementing design aspects like color, while appropriately adjusting areas of confusion in the navigation. An area of confusion that we specifically addressed was the community boards forum, where users had to click the "Comments" button to open the thread. We implemented a design where the user can simply click on the post itself to view the discussion board.
After corresponding with Cardii.io's CEO, Destin, he expressed a strong affinity for Robinhood's green (#7BE2B3) and wanted to utilize it as the primary color for his product. With those preferences in mind, we established a theme for Cardii.io and began experiment with implementing color in key areas like the navigation bar and onboarding.
Usability Testing (Round 2):
Our second round of usability testing utilized the same parameters as the first test, and our results validated our pre-existing design choices while also confirming the integrity of the research-based, iterative changes that were made to Cardii.io. The quantitative and qualitative results showed that all users were able to complete all goals with an average mistake count of 2 and an average time of 58 seconds was allotted per goal.
Iterative Changes:
One of the areas I noticed was unclear for our users was the "End Run" screen that prompted users to create an account. I felt that the wording in our mid-fidelity prototype didn't send a clear enough message congratulating our users on completing their first run. One of the driving factors of Cardii.io is its sense of progress and achievement and we wanted to incentivize our users to create accounts to increase engagement.
Usability Flow:
When designing the Cardii.io prototype, Destin expressed clear desires for the app to be interactive prior to making an account, so for the flow of our prototype, we designed it so that our users would be able to interact with the app and start a trial run before creating an account. This way, users would get a feel of what they're getting into and can decide whether or not Cardii.io would be something our users would want to participate in.
Style Guide:
This style guide comprehensively covers all colors and fonts utilized while making our final prototype as well as showcases a couple of the Figma components we utilized.
Hi-Fidelity Prototype: Link to Figma File
To finalize our designs, my team and I polished up the look and feel of Cardii.io, utilizing night mode themes to really make our colors pop with contrast. Once our designs were finalized, we prepared the necessary files for handoff and presented the final product to our client, who was thrilled with how far our team had taken his vision.
Next Steps:
Our next steps regarding our design vision for Cardii.io would be to implement additional features into the prototype that we didn't have the time to address. This includes areas such as direct messaging, which would allow players to send private messages and invites to one another to enforce collaborative elements of the game. Alongside this an established progression system and challenge system would be implemented to incentivize users to continue exercising while utilizing Cardii.io. The final aspect would be designing customizable avatars and implementing a store where users would make micro-transactions through in-app purchases, which would be a primary source of revenue for the game.