Injecting Fun into Fitness

Building a brand and styling a mobile concept

6 min readJun 29, 2019

Overview

A one-week solo concept project designing a native mobile app called Fit Finder. Fit Finder is a simple way for users to find and book local group fitness classes. Read more about user research and the initial design iterations here.

Part two of this case study further iterates on the navigation and information architecture based on testing. I also set out the branding guidelines and style guide to help inform the final visual design as I moved the project into high fidelity.

Going digital

In this phase I iterated from a paper prototype into mid-fidelity wireframes. When people use digital products, behaviors and expectations change. Digital wireframes allow us to test our flows, content, and visual design choices. As a user’s mental model changes, we can uncover new insights we may not have found in earlier paper prototypes.

Samples of Paper Prototype in Mid-Fidelity Wireframe

At mid-fidelity, I can test the user flow, avoiding distracting copy, color or imagery. It is vital to correct any glaring issues in the user experience and screen structure before moving on to visual design.

I observed how users moved through the app, noting reactions to layout and content. I uncovered valuable and surprising insights from this round of testing.

Users unconsciously applied a different context when using the digital prototype. Despite the structure remaining identical between paper and digital, users struggled with details they did not observe in the paper mockups.

For example, in the paper prototype, users focused on details in the progress bar and understanding where they were in the process. But, in moving to digital, that issue did not come up, and the process made sense. Instead users honed in on how “heavy” the first screen/step in the user flow felt in comparison to others.

“I like the progress bar, but it feels deceptive because there’s a lot of things to do in step one. That step’s a bit overwhelming.” -Claire

I also found from user testing that the class results listings were not detailed enough. Users need to go into each result listing to see more details and then back out again to learn about the other classes available, a possible source of frustration.

“I would have to go back and forth a lot to read class descriptions. That feels like a lot of work.”-Lieke

Thus, the key iterations for moving to high fidelity would be:

Reduce the cognitive load in the first part of the flow.
Clean up the layout to feel less cluttered and intrusive.
Avoid potential pain points in comparing search results.

Becoming Fit Finder

A fun part of this project was thinking about the branding of Fit Finder. What kind of values and brand propositioning would the app have? What would be the mood and tone? Colors, typography and visual design?

Considering these questions, I thought back to Jack, my core user, and how he feels about fitness. For him, it’s fun and motivating. Something that can give him variety in his workout and push him to achieve more. A fun, vibrant, interactive experience.

I wanted to bring in these core concepts when building the brand, and landed on these values:

Fitness… but not fanatical
Community… but not cliquey
Positive… but not over-the-top
Motivation… but not overbearing
Fun… but not frivolous

Taking it a step further, I drafted a brand voice to guide the brand’s tone and style:

We are enthusiastic about fitness but not fanatical. What’s important is getting out there and trying something new — kicking butt and taking names (respectfully, of course). Welcome to the gang.

Finally, I developed a mood board to use as inspiration for the style guide.

Based on brand values, stylistic elements should convey brightness, fun, a sense of motivation and community. For inspiration, I looked to the bright and punchy colors found in fitness clothing and equipment. When selecting a typeface, I wanted it to reflect a sense of fun, fluidity and flexibility — Comfortaa. As a supporting typeface, Open Sans counterbalances Comfortaa with a sense of simplicity.

For the iconography, I chose to keep it fun, simple and accessible by using simple line icons. Photography would appear later in the flow to provide context of the classes themselves. Brand colors would be used throughout for accents and visual affordances, aiming for clean yet fun.

Going into hi-fi

Taking the testing insights, I examined the heaviness users described in the first step of the flow and broke the selections up over two screens. With the additional step, I updated the progress bar to five steps to maintain consistency.

Revised User Flow Between Mid and High Fidelity

I updated form inputs to radio buttons and calendar pickers to reduce cognitive load.

I experimented with rearranging information to reduce some of the screens in the flow, placing information in the areas users described in testing.

Finally, I tested the prototype with three users and gathered some learnings. Before taking these into future iterations, I would want to test with more users to ensure they were real usability issues versus preferences:

Build an on-boarding process where users can set search defaults, speeding up the process and getting users to their goal faster.

“I usually do the same class. I’d want to preselect my options, so I don’t have to click all the time.” — Dani

2. Tweak copy on the time selectors and retest. There is still confusion from users on how to interact with this part of the flow.

“The start and end time is confusing. Most classes are only an hour, so I should be able to just put in the time I want to start class.”— David

3. Revise the class results page to have the most relevant information, possibly allowing users to book directly.

“Having to hit next to book felt like another step.” — Esther

Reflecting on Fit Finder

What I enjoyed most in this project was seeing how people react to a prototype based on context. Users morph their reaction and expectations between paper prototypes and digital ones. Paper prototypes are great to test initial concepts and flows. But digital prototypes are where you really get to the meat of usability insights.

Great visual design guides user interactions within a product and communicates brand values. Based on testing and user insights, the application of beautiful UI in conjunction with robust UX can take a product from woe to wow.