Bulky Gym is a weightlifting studio located in Europe. They specialize in weightlifting but also offer fitness training like calisthenics as well as nutrition counseling. The studio founder needed a way to interact remotely with traveling clients. I was asked to design a mobile app for both trainers and clients to help solve this problem.
Role - Research, Branding, UX for a mobile app
Team - Founder, Product Designer (me)
Client - Bulky Gym
I captured how different personas fulfill their needs and meet their goals based on their habits and tools. The customer journey map would capture the steps involved and where pain points are experienced in the process. The journey map also surfaced serveral opportunities to improve the experience.
The personas above note how the audience fulfills their needs based on their habits and tools. I created a customer journey to map out their process from start to finish. Here I discovered opportunities to improve their flow. These opportunities would serve as feature ideas as I built the app.
Better understand their fitness goals
Create touch-points pre and post workout that would invite users back into the app
Suggest relevant fitness and nutrition content based on goal, location, season and time of day
Make a smoother flow from market/sales funnel to client onboarding
Make it easier for trainers to engage in key business activities
Establish expertise of trainer through a natural sharing experience
After wire-framing I wanted to quickly test the apps navigation and content hierarchy. I chose to use card sorting to understand how people categorized content.
I then did an exploratory analysis to see an overview of how people thought about content. This informed how I prioritized content placement. I discovered that the onboarding category had the least amount of agreement at 75%. This led me to focus on storytelling and app functions when designing the onboard screens.
The primary goal of the app was to facilitate interactions between clients and trainers. Inherently I needed to uncover the needs for these two user types.
The clients needed to use the app to receive information about their workout routine. While the trainers needed to use the app to manage their client interactions.
The challenge here was finding a way to add duality to the app flow. I wanted to consider how to merge the trainer and client experience across the journey. A prototypical trainer or client could take these steps without spoiling the app experience.
I find blockframes helpful in visualizing how the design is displayed within the UI before designing the details. This is a snapshot of how I quickly thought about element placement.
The user flow helped me unravel context by informing the interaction screens. Once I began wireframing these screens I saw the chaos that could come with designing for duality. I quickly found commonalities between their journeys on screens like chat, profile and home. Where the only difference would be the types of content displayed versus how the content is displayed.
I started by conducting secondary analysis around the fitness market. Since most of the trainers at Bulky Gym provide nutrition counseling, I decided to evaluate the UX of apps like Noom and 8Fit. I also evaluated a traditional fitness app - Nike Training Club. I identified the patterns from each app to inform the UX context.
Noom does a great job at creating uninterrupted UX by allowing users to complete a task with the swipe of a finger
8Fit communicates the experience really well by giving its users relevant content, customizable meal planning and step-by-step workout tutorials
NTC provides variety in their overall experience from the basic activity tracking to premium workout programs
I gathered three themes from this
Uninterrupted UX to help form habits
Communication in how the app functions
Relevance of the content displayed
With this, I conducted user interviews for more context. I interviewed personal trainers, competitive athletes and moderately active people. They gave me a high level understanding of their paint points. I concluded that the clients needed an accountability tool while the trainers needed a business operations tool. I translated the interviews into personas
I started by quickly sketching the core screens for the app such as home, recent activity, profile and chat. I reviewed best practices for each screen so that they had necessary elements.
Home Screen would serve as a collective for content
Recent Activity would display key data in a usable way
Chat would enable both parties to communicate only what's necessary
Profile would only show relevant information
Next I explored and designed ideal user flows for each screen. This informed the flows, wireframes and UI design.
I chose to design in dark mode for several reasons
When interacting with content-heavy apps like Medium, I observed many people look for the dark mode option.
It enhances legibility and reduces eye fatigue from screen glare.
It is an increasingly popular feature among mobile and web apps.
The dark mode screen designs had three levels. The pop-up modal has an opaque grey, the darker primary level acts as the background while the lighter pushes up to separate content. Playing with the brands bright colors against the dark backdrop helps add sprints of energy to the design.
I conducted a usability test on the V1 prototype with the above screens to help evaluate the design, flow and overall usability. I was then able to iterate on the prototype after synthesizing the test findings in an affinity map.
Top feedback included
Mindfulness around accessibility on login
Legibility on the recent activity screen
'Aha' moments during the product tour
The end to-end-design process created a space for me to stress test my system. It forced me to keep it simple from a design and user perspective. Although combining various UX disciplines means connecting more dots. It's also an invite to keep simplicity at the forefront of desig