How can we make it easy for customers and instructors to connect outside a
Timeline: 2 months
Project Type: Student Project
My Role: UX Researcher, writer and UI designer
Anywhere Fitness is an app that allows fitness instructors to create classes outside the classic brick-and-mortar gym. These days, fitness classes can be held anywhere — a park, an unfinished basement or a garage — not just at a traditional gym. Certified fitness instructors need an easy way to take the awkwardness out of attendance taking and client payment processing. While you could use several mobile apps, accomplish this, Anywhere Fitness is the all-in-one solution to meet your “on-location” fitness class needs.
I conducted a survey to figure out what users would want most in a fitness app and from those questions I came up with three things users want:
Based on the survey and on in-person user interviews with people who regularly take fitness classes, I came up with a theoretical user, Cindy Kraster.
Our target user is a gym rat that gets bored easily and wants to change things up with unique classes
I then mapped out Cindy Kraster’s journey as she uses the Anywhere Fitness app, showing how each step of her journey would help solve her pain points and give her the experience she wants.
I also analyzed a direct competitor, mindbody.io, to see what features it offers and how Anywhere Fitness can improve upon them so that users would enjoy using our product more.
After consulting with two colleagues, they offered up ideas on what users would need. From their ideas I created an affinity map with Miro, and organized those ideas into categories.
My colleagues chose “background checks” and “price-based search” as the two most important features based on my user needs
Based on some initial user interviews, I started sketching different design ideas. All of the sketching was done on paper, as I wanted to iterate quickly before coming up with the first mock-up. I used the crazy 8's method, which involves spending 30 seconds on each design, to iterate the most efficiently and quickly. Here is an initial sketch of the sign up page. The circled sketch is the one I ended up choosing.
After choosing a basic sketch, I began creating some initial prototypes of how I thought it might look.
I tested this product out with three subjects. I sat with them and asked them to perform a series of tasks. As they clicked-through the product, I observed them and I asked them what they thought and what they thought the product needed. I came up with a table of all their comments and problems, and compiled them in a table with the issues and what I was going to do to resolve those issues.
Based on the feedback I got, I realized that I needed a design that effectively conveyed the health and fitness ethos of the brand. One of the users who tested my prototype told me that the initial typography I chose for the “Anywhere Fitness” logo didn’t match the image I chose.
The initial typography I chose was rugged, while the image I chose was clean and fluid. It confused the user as to what I was trying to convey with this brand. I realized that although Anywhere Fitness might include rugged experiences, I wanted it to feel clean and welcoming, that even newbies to fitness would feel welcome to try the app.
I chose Raleway because:
For the color palette, I chose a strong, bright orange as my primary color, and a muted, pale red for the secondary color.
I chose this combination because orange is the color that’s associated with health and vitality, and it’s a vibrant and energetic color — all of which embodies the ethos of my fitness app. I want people to feel energized looking at this app, so I made sure that the orange was bright and punchy; giving users a literal “kick” in the pants to go work out.
The secondary color, a muted red, provides a needed respite from the overly energetic orange, and tones the aesthetic down where needed. But because it’s base is so fiery, it meshes well with the vibrancy of the orange.
I went through a few iterations of how the product would ultimately look. Below, is a series of iterations I went through to create the ultimate product, using the “sign up” page as an example. As you can see from the last image on the right, I increased the button size, focused on text hierarchy, and made the final sign up page clean and easy to manage.
In final iteration, the typography is now Raleway; header is now in primary orange color; “Sign Up” header is smaller and meshes better with the form size
First button was compact and dated; second iteration followed the form field more consistently in length and height
Original rugged typography made more bold in the second iteration
Once the final mock-ups were done, I was ready to show my work to my developers. As the designer, I took on a leadership role to help explain to the front-end developers on my team how their code needs to look in a visual sense, and to the back-end developers what functionality was needed in order for users to properly use the site. I checked-in regularly on their work to make sure that the user was being considered first and foremost.
In the future, the next iteration would need to include a ratings and reviews system, and the ability to search for instructors by rating. In addition, I would make some adjustments to the text hierarchy, and also include more features such as reviews.