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.

Discovery

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.

• 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

Ideation

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.

Client Opportunity

• 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

Trainer Opportunity

• 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

Information Architecture

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.

User Flow

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.

Blockframe

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.

Wireframes

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.

Card Sort

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.

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.