GymHop
UX / UI DESIGN
Overview
GymHop is an early stage start up based out of New York City. Our health and fitness app grants its members unlimited access to an entire network of independent gym locations. The network currently boasts dozens of gyms in NYC and Long Island and is quickly expanding down the east coast.
My Challenge
I was brought onto the team to give their current product and brand a complete redesign that will optimize the user experience and set forth a positive business growth trajectory. As the sole product designer, I was given a lot of creative freedom to add and remove features on the existing app, as well as reimagine the interface with a fresh and delightful brand experience.
Role
Sole Product Designer, UX consultant, brand designer
Tools
Figma, Adobe Illustrator, Whimsical
Scope
3 Months part time, currently in development
Meet the Team
In the first month there was a lot of communication. I got to understand the problem they were trying to solve, their target user base, the revised vision of the brand, and the long-term goals of the business.
STEP 1. Explore the existing product (MVP) and find the weaknesses.
The look of their MVP drastically draws from initial users’ experience with the product. Overall, I found the interface to be poorly designed and falling short in many visual design principles such as alignment, visual hierarchy, typography, balance. and white space.
Main Re-design Challenges & Goals
• Create a new onboarding experience that guides users through the GymHop platform.
• Remove out-dated functions like the QR code and reimagine the check in process.
• Add key features for gym pages like amenities, reviews and ratings, classes offered etc.
• Create a section that tracks users’ activity from which they can set personal health goals.
• Make gamification that can reward users for hitting goals and frequent gym use.
• Re-brand the company with new logo, marketing materials, and design system
STEP 2. Researching our Users and Competitors
DISCOVERY
User Interview
Being the only designer it is imperative for me to fully understand our target audience. Because GymHop is already a product on the market, my first move was reach out to current users and see if they would be interested in an interview. This was a challenge, at this point our user base was extremely limited, but we managed to get one user on board and scheduled an interview.
Objectives:
- Understand general attitude towards accessing many gyms
- Understand general attitude of their current/past gym membership experiences
- User habits, preferences, tendencies in gym activity
- Discover pain points of current app, as well as opinions on new feature ideas
- Discover what other apps they use for fitness/gym related
Sample Questions (not limited to):
Getting to know the user:
-
- How often do you use the gym? (pre-pandemic)
- How often do you travel? For work, locally, nationwide etc.
- Talk me through your approach to searching for new gyms?
- What are you looking for in a gym membership?
User preferences:
-
- What are the main pain points/challenges of our current app?
- What kind of features would you be most interested in a new product?
- How do you feel about a location based check in vs a QR code scan?
- How useful would an activity section be for you? Where you can track your gym usage with stats and set goals etc.
- What kind of stats would you be most interested in seeing?
- How important would a ratings and reviews feature be to you?
- How do you set personal goals with your workouts/gym visits?
- What other gym/fitness apps have you/do you use?
- What are the most frustrating parts of using these apps? If you could change one thing, what would it be?
- What do you like most about the apps?
Main Findings (not limited to):
- He is an avid gym-goer (6x a week)
- He travels a lot for school/work, so he was often in different places
- Having a variety is super important, he loves exploring new different gyms and testing the waters
- He used to go for large scale corporate gyms, now is more into old school/independent gyms.
- Amenities are important for him, he looks for stuff you can’t find at other gyms
GymHop specific info
- In terms of functionality, he ran into some issues with the QR code check in at reception
- Sometimes reception was unresponsive/untrained on GymHop (lack of communication)
- He likes the idea of automatic statistics, he probably would track his workouts on the app because he doesn’t do that himself
- Reviews and ratings would be very helpful
- He really likes the idea of a points/ranking system that could reward his gym usage
- He discovered GymHop through a friend- mentioned a referral incentive.
Interview Analysis
• The user 100% believed in our product, and was mainly drawn to the convenience of gyms in multiple locations, where he enjoys exploring a variety of gyms without too much commitment.
• GymHop needs better communication with our Gym partners, at least a refresher for employees or a new Gym onboarding guide.
• He agreed that our UI needs some work, it looks unprofessional and he was wary at first
• He backed the idea of a new check in system, agreeing that the QR codes could get messy for the both the user and gym employees.
• Gamification is very appealing and would incentivize him to use the app more
Speaking with a user that fully backed my ideas for new features was very reassuring, and sparked some direction on how I wanted to implement them.
DISCOVERY
Competitor Analysis
The next step was to take a look at the competitors to see whats already out there and what works/does’t work.
Analysis Findings
• We are unique in our membership subscription service with unlimited access, instead of individual passes.
• Main competitors require employer sponsorship through benefits.
• The use of QR code scanners can get in the way of user experience.
How might we streamline the check in process to ensure an easy and delightful experience?
IDEATE
User Stories
This is where the brainstorming starts. At this stage I came up with ideas for what features the user needs in order to have a complete and wonderful experience. I broke it down into three tiers- 1 being the most important and 3 being what we could leave out or remove from the app. I also broke it down into the 4 main sections of the app- the onboarding, map, gym profile, and the user account.
INFORMATION ARCHITECTURE
Site map & User Flows
With my user stories and design goals in mind I can start to organize the structure and flow of the new product. Basic structure from the current app remains similar with a few new pages and features to improve the user experience- these including additions to the map, gym profile, user profile, and a new check in screen.
One of my main goals is to make check in extremely simple. This is where I got the idea to track the users location and when they are within a certain close distance, all they have to do is press a button. The check in screen will prompt the user when they are within range. And they can also access the check in screen from the gym profile as well to make it extra easy.
Another main goal was to improve their onboarding experience. I decided to add the options to sign up with facebook, google, or apple which is consistent with industry standards. Also we are going to allow the user to scroll through some general training pages to show them how the platform works.
IDEATION
Sketches
Lets get some ideas down on paper. After I established the updated information architecture I can start to think about how these screens should look and the layout of the new interface. It is at this stage where I made some important design decisions:
As the user swipes through the onboarding steps, the “GET STARTED” and “I ALREADY HAVE AN ACCOUNT” buttons stay constant on the bottom, leaving the user with the option to skip the steps if they please.
These screens are are where the bulk of changes come from. The map screen acts as our homepage, where the users browse from our network of available gyms. As you can see, I added a search bar and a new gym profile pop up.
Once the user selects a gym, they are taken to the gym profile where all the important details are located. It is at this stage where I made a key design decision to add centered icons for location, amenities and reviews for the user to easily navigate through their desired information.
The last page is the check in screen, which pops up as the user is within 200 yards of the gym. It was established that the user must confirm with reception in order for the gym to keep track of their traffic as well.
Here we have the users account where they can access their settings, subscriptions, activity, health goals, rewards, and wellness resources.
This page is consistent with the centered icons for details, activity, and wellness so the user can easily navigate through screens.
INTERACTION DESIGN
Wireframes
With my ideas for the interface laid out I can now start to wireframe my designs using my sketches as references.
Pivot!
The team received news of a partnership opportunity with a large gym franchise based in New England. I had to quickly pivot to design a slideshow presentation representing how the app works, the partnership benefits, and our brand.
Working in a small start up has taught me the importance of being a team player in situations like these. As a multidisciplinary designer, I am happy to wear many hats and pivot my skills to benefit the business. The largest gym franchise in our network was acquired.
BRAND IDENTITY
Moodboards
At this stage before I could continue with any hi-fidelity designs, we had to establish some updated brand direction. There was a lot of communication at this point for how we want to be represented visually. I made it easier for the owners by giving them some mood boards for possible color palettes and UI inspiration. By guiding me through what they liked/disliked, it helped me with my own art direction and design decisions.
The team was leaning towards a green color palette to represent energy and good health. They were attracted to gradients c1 and c2, and color palette 3. Now with a good starting point for our aesthetic, I could continue to make a style guide for the brand.
VISUAL DESIGN LANGUAGE
GymHop Design System
After some meetings discussing the mood boards and art direction, we decided to stick with the name GymHop and start fresh with a new design system and style guide.
BRANDING
Logo Design
The founders wanted to recreate their brand identity across a number of channels. I was tasked to create a new logo and was given a lot of creative freedom. After a lot of sketching, drafting, and audience feedback this is what I came up with.
Previous Logo
New Logo
HI-FIDELITY PROTOTYPING
First Draft Designs & Team Iterations
Once we had the new design system laid out, I could start to design our hi-fidelity prototype. This was a long process of coordinating with the team to reach consensus on many features and design decisions. This was challenging at times in certain areas, but our overall collaboration efficiency was imperative to building this new product. Below illustrates my original designs with the changes in collaboration with the founders and developers.
Clickable Prototype
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Prototype is still under Construction.
Full Case Study Coming Soon!
OTHER PROJECTS
ZWENDE
GRAM CITY
SPOX