A fitness app allowing users to work out in outdoor public spaces using trainer-sourced workouts.
A fitness app allowing users to work out in public spaces using trainer-sourced workouts.
With the closure of gyms, the pandemic limited people's fitness options. GymCity addresses the need for equipment-free workouts, and for doing them outside as users are increasingly confined to their homes.
First I needed to see if this app would fit into the average user's life. I conducted user interviews with five middle-class millennials who routinely went to a gym before the pandemic hit. I hoped to determine:
Meet Derek. He's an amalgamation and extrapolation of the interviews, and having a sense of who he is and what he needs would serve as a valuable reference when I'm making design decisions.
I set about making a map of what the app would look like, ensuring that it allowed for:
The main navigation bar will include:
Through the workouts, Derek will also be able to access the trainer's profile. More validation. More motivation.
Now that I knew how the site might be laid out, I set about putting together wireframes that I could turn into a prototype to be tested.
click image for gallery
I used proto.io to turn these screens into a prototype, because I needed to see if Derek would find this navigation intuitive and effective, but I was constrained by the fact that... Derek doesn't exist. So I used the application "Lookback" to conduct usability tests with 5 not-Dereks.
They were asked to perform the following tasks so that a good amount of navigation could be tested:
All five users completed all five tasks with minimal problems, but two of them first went to "Profile" when asked to change the filters and one was split between "Profile" and the Filters button, before making the desired choice. This was my mistake. The last onboarding page instructed them to change their settings in "Profile" and they likely didn't even consider that they could also change filters on the home screen. That seems pretty cumbersome, though, and Derek doesn't have time for all that. Given how few filters there are, I decided to make them only accessible on the search page and to leave them out of the onboarding entirely. Their search parameters will remain functional until actively changed, so they won't need to do it every time.
One user expressed concern about people having access to their entire workout history. While only one raised the issue, I could see it being an issue for others, and there wasn't enough payoff in the tradeoff. Derek has nothing to hide, but he doesn't like to feel "tracked". Instead, users will be alerted when their friend has completed a workout or challenge, but won't have access to their day-by-day workout history.
Final takeaway: proto.io's swiping interface could use some work. The users knew to swipe through the workouts, but the prototype didn't always cooperate. This was the main source of frustration, but that's above my pay grade.
Now it was time to make this thing look like a real app, filling out the screens with images, colors, and branding, so I developed a style guide. I wanted it to convey legitimacy, strength, motivation, and the outdoors. If this feels like a half-hearted workout option, Derek isn't going to stay motivated... he might not even try it in the first place. GymCity has to convey that it will lead to the same results as the industry leaders.
The green and gray symbolize the grass and concrete that will be among the primary workout surfaces. Also nature and seriousness. This isn't an app for a lazy stroll, but real exercise. This is why I included a lot of black as well. It's sleek and bold and tough.
The logo contains the colors mentioned above, and uses them in an "athletic" font often associated with college sports. Again, hard and bold. Nothing soft here.
Helvetica was chosen to be simple, modern, straight forward and readable. The Panton font, on the other hand, was chosen for its similarity to the type used in signs at sporting events. It's enthusiastic and motivating.
Again, no room for softness. Hard edges convey a seriousness and strength.
Put that all together and it looks a little something like this...
click image for gallery
While more usability testing needs to be done on the reiterated screens, the most important next step will be to have a developer create a prototype workout to ensure that the primary purpose of the app meets the needs of the users
I'd also like to test the filters again. Did the pared-down onboarding make it clearer where to find filters? If not, a quick onboarding tutorial to make sure everything is introduced to the users clearly and quickly when a screen is seen for the first time could be a good way to go.
Pairing functionality with wearables like the Apple Watch to give users more feedback about the effects of their workout would be something to explore. Only one interviewee mentioned this as being important, but it could be more ubiquitous and could add a lot in terms of feedback to the user.