Fitverse
Your Friendly Fitness App
The product Fitverse is a fitness tracking app focused on creating more engagement and activity within the app by promoting a community within the app and allowing users to chat within the app to increase app activity.
Context
A well-established company launched a family and friends health tracking app three years ago. The app allows users within a group (a family or group of friends) to see how others within the group are doing regarding health and fitness. Currently, there is no messaging feature within the product. The company would like to integrate messaging into the app.
Problem and Goals
Problem: On average user engagement is heavy for the first three weeks then it drops off and soon after users delete the app.
​
-
Create the opportunity for users to message each other with health and fitness goals/achievements
-
Create an integrated messaging experience throughout the product drives engagement and repeat usage
​
The company wishes to add a messaging feature into the app, however the main goal and problem for this situation is to promote continued user engagement and usage.
Target User
The company already had their intended user in mind, so that was one of the predetermined components of this capstone project.
-
18 - 34 years old
-
Very tech-savvy — they are on their phones for several hours a day
-
Very budget-conscious
-
Messaging and communicating with friends and family is a very important part of their daily lives
Roles & Responsibilities
I was the sole UI and UX designer for this capstone project. I received guidance from my mentor, but other than that, I was responsible for all of the mockups, the low and high fidelity frames, the research, the testing, the prototype, and anything else that was necessary for this capstone to function.
Scope & Constraints
Restrictions that this capstone faced were those of financial means. There was no funding, and a limitation to how far and wide the testing was able to be done. With very little resources other than outside of my own social circle, the testing is incredibly localized and specific to those close in proximity to me. Additionally, there was a slight time constraint with this second capstone, so I did not conduct any interviews in terms of research which I will address later in this case study.
Process & What I Did
Research
For this capstone project, I was presented with a choice between five different scenarios to create a product for the given prompt. I am not a fitness app type of person, so I wanted to push myself as a designer to create a product that I am not personally familiar or comfortable with to promote my own growth.
The scenario provided me with a four wireframes: home, class card, search and profile. I was also provided with the company's brand:
​
-
Brand personality - a trusted friend with a good sense of humor who always has your best interests in mind.
-
Brand attributes
​-
Trustworthy
-
Humorous
-
Motivational
-
Contemporary
-
​
The prompt also provided me with other examples from within the industry. So from there I went straight into research and looking into my competitors for information and inspiration.
With this capstone project, due to a time constraint, I made the decision to not conduct any interviews and rather gather my informaiton from secondary research through journals and studies.
Through my research I found that individuals who do use fitness tracker apps typically quit using the fitness tracker app when the mobile app fails to provide and produce accurate information.
Additionally, research found that three needs need to be met and satisifed for the user motiviation and continued use to be high. These three needs are: autonomy, compentence, and psychological relatedness.
“The majority of these wellness wearables provide users with immediate feedback and information associated with a variety of metrics related to broad goals, for example, step count, calories burned, stairs climbed, distance travelled, active vs. passive activity and sleep cycle and length.”
50%
users
abandon who adopt a Fitbit abandon it within the first two weeks of use after purchase
62%
users
downloaded an activity tracking mobile app abandon it within the first two weeks or at best within six months after purchase
Something important to note is that self-efficacy and motivation seem to be the main driving factor when it comes to continued and consistent engagement for fitness tracker apps. Similarly to video games, having a purpose and using heuristics to keep people coming back to continue the fitness plan.
Wireframes
For this capstone, I was provided a few wireframes for the project. I was provided the home, class card, search and profile screens.
From here I created a user flow, a style guide, and then built upon these wireframes to create the product with additional features along the way.
I created a user flow for what I intended to create with the additional screens that I wanted to add onto the preexisting wireframes. I knew that I needed to create a messaging tab and then create a separate component for individual chatting and group messaging.
Along with that, I knew that I needed to create screens to view and add goals because that was somethin that was listed as already existing within the app.
Style Guide
The following step after the user flow and wireframes was to decide on a color palette and style guide. Because the app is a fitness tracker app, I wanted the aesthetic of the app to portray sharpness and a feeling of 'awake' and 'alert'. I wanted the mobile app to feel fresh and alive, while still keeping in mind the brand attributes.
My main concern was the color palette. I knew the feeling I wanted the colors to evoke. When thinking of colors that were sharp and I thought of colors such as neon green, black, white, sharp orange, blue, purple and combinations using those colors. However, because the company wanted to exude feelings such as trustworthy, humorous and motivational, I felt like a good choice to depict such feelings would be a sharper and brighter shade of blue with slight accents of a brighter deeper blue and a green that verged on neon, but not quite.
As for font choice, I wanted to stick to the default font that Apple products use, which is Roboto because I feel like Roboto is familiar but has a rather clean, contemporary and sharp feeling. I didn't want anything too rounded in font, and I felt like Roboto was the best choice when it came to font selection.
Lastly, I had initially wanted to use abstract-like images and artwork for the imagery used within the app. I wanted the app to feel friendly and inclusive to the user and felt like a good way to portray that was to use illustrations. Along with that sentiment, I also felt like illustrations are interesting to view and would draw interest from the user.
​
However, later I ended up on using actual photos of people because I decided that since the app is designed for people to be used by people and its focus is around people and their health and fitness, the best way to portray that would be through actual photographs rather than illustrations.
First Round of High Fidelity
At this step I began creating the first round of high fidelity screens. These were created and prototyped with the user and future testing in mind. In the first round of designing, I didn't really stray too far from the initial wireframes that I was provided. However, the search, map and profile screens, even with the wireframe provided, gave me a little bit of trouble.
I would have to say, of the provided wireframes, the profile page probably gave me the hardest time when trying to figure out how to manage and oragnize the information that was provided to me. I wasn't sure what some of the information was trying to depict or present to the user.
It wasn't like I could actually talk to the company (since the company is fake) and ask them questions about what the values were supposed to depict and what the graphs were supposed to show the user.
So not only did I not understand what exactly I was looking at, I didn't really know how to present it in a way that would be easily understandable to the user because I am not a fitness app user personally.
I was eventually able to solve it easier than the profile page, but the map and search screens also proved to be a challenge in how I wanted to provide information.
​
In comparison to previous projects where I knew exactly what I wanted to showcase and present to the user, I wasn't sure what I wanted to include. It was in these design moments that I really realized just how insightful and useful interviews of potential app users are for the design process.
​
I ended up conducting unofficial very light interviews asking friends and family members what they would like to see in a fitness app. The information was limited however since no one within my immediate circle is really a fitness app user themselves.
In the end, after a lot of trial and error I was able to put together screens that I felt were ready enough for the first round of testing.
After a lot of back and forth, I finalized my designs and felt good enough about the layout and the aesthetics to conduct my first round of testing.
At this point, I conducted my first round of testing. Most of the feedback was quite positive and it seemed like at first glance, that the testers didn't have a lot of issues with the app. However, when further pressed for any wants or needs, or any kind of area where they felt like the app was lacking, a list of issues were brought to attention. Such as:
​
-
“I want to be able to see what kind of goal my friends completed”
-
“I can’t click on anything on the map. What if I want to see beach volleyball?”
-
“I want to see my goals”
-
“I want to know that I’ve RSVP’d to class”
-
“In the notifications, I don’t know what the goals are. I want to know what the goals were.”
-
“How do I change what groups I’m in? What if I want to leave a friend group? What if I want to add a friend group?”
Most of the comments had to do with some lack of prototyping, but some of the major complaints were features that I hadn't thought to add when designing the app itself, which was a lack of foresight as a designer. In the aesthetic and design sense, users didn't seem to have any issue with the color palette or the overall imagery that was used throughout the app.
Taking these comments and concerns into consideration, I went back into design to design the second round of high fidelity screens, building off of the first round of screens.
High Fidelity Round Two
After the first round of testing, I went back and added the features that the testers had commented on wanting and further built upon what I had created. I began adding the new features and other screens that had not existed and therefore was an issue in the first round of testing.
I added more functions and features so that it would prototype better and then I added additional screens such as a screen to add a goal, view a goal and choose the dates when RSVP-ing for a class or club of the user's choosing
After addressing the most pressing and major concerns, I took some time to work on some of the design aspects of the app edited details and slight functions throughout the app and its prototype for the second round of testing to go smoother than the first.
Final Iterations
Clickable Prototype
After the second round of testing, I went back and changed the overall aesthetic and color palette of the product because a few of the test users did comment on how it didn't really evoke a fitness type active feel that I was going for. They weren't bothered by it or anything, but it simply did not really have an impact on them, and at the very least, I want someone to feel something about the overall aesthetic of the app.
I also changed out the hard straight lines for some shapes with more movement since the basis of the app is a fitness tracker app.
​
I wanted to use colors that felt striking and active and alive more than the blue that I had previously used in my first round of high fidelity designs. I felt like the combination of orange and red were a better contrast with a slight accent of blue to really make the mobile app feel active.
​
With a warmer but livelier color palette I feel like the mobile app really came to life.
Once I was satisfied with the new color palette, I turned my focus to the minor tweaks from the second round of testing. This time around for the testing, there weren't nearly as many errors or edge cases to add or fix. In general, there were little to no complaints in the second round of testing, and everything went smoothly.
​
In the second round of testing the most common concerns were:
​
-
“While pressing takes me into the class info, so change to two separate taps”
-
“It would be cool to see a ‘level of intensity’ for the classes for more information”
-
“On the map, show everything instead of nothing on the map”
-
“After selecting all the days, I’d like to deselect some days so that I don’t have to select every single day.”
​
Taking these problems into consideration, I adjusted accordingly and fixed those features within the mobile app to function well and with no problems.
In the map screen I edited the tapping function so that when tapping on one of the available sessions close to the user they would get a preview before tapping the bubble again to view the session information in full. Additionally, for the map screen, I also included all of the available courses around the user according to the set range at the top. Initially, I hadn't included all of the sessions available to user because I had been concerned that putting that much information on a single screen may be overwhelming to the user, but that was not the case when testing.
In the class screen I added an intensity marker for users to get a gauge on how challenging a class may be, and for the New Goal screen, I allowed the users an easier function by prototyping a deselect one at a time from when the days were all selected originally.
Another screen that I ended up re-iterating was the profile screen. Even though there weren't any concerning or pressing comments or criticism about the profile screen after the first round of testing. I felt like the information presented wasn't cohesive nor was it really easily understandable. I, the designer, was feeling confused by the information on the screen, so how could I expect the user to.
​
Additionally, I also felt like the profile screen just felt like an overthought comparitive to the rest of the screens that clearly had more time and effort and care put into it, compared to the profile screen. So I cleaned it up and provided some copy and context that made the information easier to digest and comprehend.
Outcomes & Results
Overall, this product and scenario definitely pushed me out of my comfort zone and challenged me as a designer and as a user. Testing time and time again proves to be a powerful source of information and inspiration and quite literally drives the entire design of the product.
​
Through many changes and iterations, I believe I was able to complete what this imaginery company had wanted and intended.
Clickable Prototype
Other Projects
