A fitness app allowing users to work out in outdoor public spaces using trainer-sourced workouts.


UX designer


Sketch,, lookback




4 weeks

gymCity: end-to-end fitness app

A fitness app allowing users to work out in public spaces using trainer-sourced workouts.


uX/ui designer




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.


user interviews

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:

  • How the pandemic has affected their fitness habits
  • What  resources they currently use for working out , and the pros and cons are of these
  • Their comfort level with working out in public spaces
  • Where they turn to for workout plans
  • Their fitness goals
  • Their thoughts on working out on their own

Key Takeaways

  • being guided by someone with expertise is crucial.
  • need for social accountability and - to a lesser extent - social connection/community. While two interviewees mentioned socializing as a benefit of going to the gym, four pointed to the accountability and motivation that comes from working out with others.
  • most do workouts that can - at least to some extent - be done outside and with limited equipment.
  • all of their fitness goals can all be achieved outside and with limited equipment.  I was surprised that three of the five mentioned mental health and other wellness benefits as primary drivers. I was relieved but not surprised that none of them are hoping to become bodybuilders.
  • motivation also came from music, a motivational trainer, and progress tracking
  • time is of the essence - in the form of duration options, immediate access with minimal travel, and duration monitoring.


app flow

I set about making a map of what the app would look like, ensuring that it allowed for:

  • social accountability
  • community
  • progress tracking
  • challenges
  • trainer information

The main navigation bar will include:

  • "Home" where workouts are found through a map
  • "Challenges" to aid in commitment and motivation (only one interviewee mentioned Challenges, but it also seems to be an industry standard in leading fitness apps like Bloglates and Peloton)
  • "History" for easy access to how the user is progressing
  • "Friends" for communication and motivation, and Profile where the users Favorites, cumulative stats, and profile photo can be accessed.

Through the workouts, Derek will also be able to access the trainer's profile. More validation. More motivation.


usability testing

I used 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:

  • go through the onboarding
  • change the filters
  • find a particular workout at a particular location
  • join a challenge
  • find out who your friend's favorite trainer is
  • find out how many pushups you did on a particular date


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:'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.

more design

Style Guide

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

Next Steps

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.

some things I learned

  1. The design pattern that was most crucial came from looking at other industries - in this case, food delivery apps for the home screen. The best ideas come to you when you're ordering a pizza.
  2. We live in a time when more and more aspects of our lives have a social feedback element. The need to make that such a priority for a workout app was certainly a revelation.