End-to-end Product Design for a weightlifting studio in need of a mobile app to communicate with clients remotely.
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.
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.
Conversely, 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.
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.
I gathered three themes from this
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 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.
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.
Next I explored and designed ideal user flows for each screen. This informed the flows, wireframes and UI design.
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.
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.
I chose to design in dark mode for several reasons
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.