background
illustrated logo for TinyTales app

The assignment invites a student to choose an imaginary client scenario among six examples.

The client scenario: a company that owns a fitness app wants more sustained engagement with its users.

Big Moves (2023)

Big Moves is my second capstone in Springboard's UI/UX curriculum.

The assignment invites a student to choose an imaginary client scenario among six examples.

The client scenario: a company that owns a fitness app wants more sustained engagement with its users.

Designer's Role

šŸ”Ž Brief research on the problem space

šŸ’­ Ideate for a digital product as a solution

šŸ›  Prototyping of product based on research

šŸ”¬ Testing design prototypes (mockups) with users

āœ‚ Update prototype based on tests & re-test (iterations)

šŸ“ˆ Report findings

Stakeholder's Needs & Problem Space

On the surface ā€œwe need more social features for our fitness appā€ is a pretty simple ask, but I wanted to dig deep into why someone might not feel ready to socialize within a fitness app.

ā“Why would someone not engage in a social space? It is due to lack of belonging?

ā“What would someone find about fitness apps that makes them feel as if they don't belong?

As a person with lived experience in a larger body, I had opinions, but that’s not what research is all about, so I decided to dive into a community like me to get their word for it.

Community Immersion Research Insights

After this immersive research phase and a few conversations with friends, I gathered these notable insights:

šŸ’” People who feel alienated in fitness apps are the same ones who feel alienated in public or commercial workout spaces such as gyms

šŸ’” Some fat individuals avoid ā€œthe thin gazeā€ while working out, causing a preference for working out in their own home instead of going outside or to the gym

šŸ’”On the Instagram pages of two fat runners , more than one commenter proclaimed that they didn’t know someone of their body type could be a runner until seeing their running videos.

šŸ’”Language around ā€œfitnessā€ is different in fat liberation communities. Instead of a strive for ā€œfitnessā€ there is instead a pursuit of ā€œjoyful movementā€.

In the spirit of fat liberation, I think it would be appropriate to approach fitness apps differently by calling them activity tracking apps or movement apps instead. This will reduce the pressure to achieve fitness and instead will encourage users to achieve activity and movement.

Redefined Problem

ā“ How might we improve engagement among users who feel alienated on fitness apps?

ā“ How might we encourage community and belonging through the pursuit of joyful movement?

User Profiles / Personas

While immersed in community research, I formulated two types of user: An "independent user", and a "social user". They are separated in this way because they have different goals.

😌 The ā€œIndependent Userā€ is someone who prefers solo activities such as at-home workouts and long walks. They might not talk about exercise or movement compared to other topics. They might be very serious about tracking their steps and workouts, but simply don't socialize about it.

😁 The ā€œSocial Userā€ is someone who likes to share advice, ask questions, collaborate, and compete with others. They could be very active or less active, it's more about the fun and community for them.

Minimum Viable Product / Minimum Value Product

The Independent User and Social User groups make an appearance in this spreadsheet to determine what tasks are the most valuable to each.

Two functions on this spreadsheet (Sharing Steps and Messaging Friends) have been doomed for a later release to prioritize the four other functions (Step Tracker, Locating Events, Community Spaces, and Checking in with a Buddy).

"Sharing Steps" and "Messaging Friends" are features in this Google Sheets Document as high-priority user stories to be included in the MVP.

Wireframes and User Flows

Below are user flows: maps pointing from left to right following a user’s journey in the product based on their tasks.

The social user persona is more likely to engage with new people such as posting publicly or asking questions to event hosts.

The tasks that involve matching with a buddy are meant to encourage an independent user persona to interact with others more.

Wireframe Test Insights

šŸ’”I tested six users. Five of them expressed confusion about the requirement and value of checking in regularly with a buddy in this context. There was also confusion about the category of ā€œbuddyā€ compared to the category of ā€œfriendā€.

šŸ’”The original prototype had many popups and questions related to the buddy system, but did not seem to add as much value as other features, such as sending a direct message to another club member.

šŸ’”I replaced the buddy system with a ā€œmessagesā€ tab, where users could message any mutual friend or member of one’s club on the app.

High-Fidelity Prototype Visual Design

In the prompt, the company describes its brand personified as ā€œa trusted friend with a good sense of humor who always hasĀ your best interests in mindā€

I decided to use some shades of red and orange, and energetic shapes such as starbursts and jagged points, to simulate encouragement, energy, and playfulness.

High-fidelity Prototype Testing Insights:

I tested this more visually-designed prototype with a different set of six users. Below are insights I’ve learned from usability tests, and the changes I’ve applied to the iterated prototype.

navigation bars of the original hi-fi and iterated prototype

šŸ’”The label of the ā€œprogressā€ tab on the navigation bar was changed to ā€œprofileā€ to ease confusion over its two functions. It is used primarily as a profile. Step tracking is always visible atop the navigation bar, and therefore is less needed to find in the progress tab.

šŸ’” My design mentor pointed out that elements on the Progress page were center-aligned while all other pages were left-aligned.

šŸ’”I decided to left-align the profile content, while keeping the step tracker section center-aligned.

Progress page was the only center-aligned page in the product’s UI. New profile page adheres to grid.
ā€œnew postā€ corner button removed to eliminate competition with a better-placed button

šŸ’”The high-fidelity testing revealed that having multiple ways to do something isn’t necessarily better. Test participants stalled when trying to decide which button to press to submit a new post to a club.

šŸ’”Most participants chose the input on the top of the page instead of the corner button out of familiarity, so the corner button was removed.

šŸ’”Users were confused by ā€œsearch communitiesā€ because they assumed the search bar could only search for communities, not people or events.

šŸ’”The new search bar says ā€œsearchā€ instead of ā€œsearch communitiesā€ to signal that it can be used to search for any keyword within the app.

Screenshots of the old and new prototype, where the old version is too descriptive and the new version is just right.

Retrospective

šŸ’” This was my first attempt to design social features.

šŸ’” I made the task even more complex by challenging the original app’s existing functions, which was an extra battle that may not have been ideal to stakeholders (if there were any).

šŸ’” In order to know if my changes were successful, I would want to test the high-fidelity prototype on more participants.

šŸ’” In a different context, I would try to work very closely with stakeholders to help them figure out what they need and want.

Want to try the prototype for yourself? šŸ‘€

see case study for Tiny Tales

see case study for Medicaid Kit

made by Meg in 2023 on TypeDream