Screen Shot 2021-06-06 at 9.37.33 PM.png

This Is Not Hard.

fitness tracking app design


Project Overview

Client

In the brief for this project, it is supposed that the National Wellness Institute wants to make an app to assist their certified coaches in the achievement of wellness related goals. The app must:

  • Allow users to set goals

  • Must visualize data related to those goals

  • Have features that allow the coach to communicate with a client, in-app

Tools

  • Figma

  • Miro

  • Otter.ai

  • Useberry

Duration

2 weeks

Problems

  • Users are lost because they are lacking reference information and guidance. 

  • Users are having trouble staying motivated because working out and dieting take a lot of discipline.

  • Users are frustrated by the unease of using currently existing workout logs.

Solution

My design includes a wealth of reference information in comparison to other similar products, and motivates users by reminding them of their current progress, and projected results.


Research

Secondary Research & Competitive Feature Analysis

I began my research by reviewing the landscape of the wellness app industry, particularly those apps focused on diet and exercise. I tried them out, and noted which notable features were present in each, in order to get a sense of where my design could innovate.

Market Positioning Chart

The research I conducted on the competition allowed me to find potential opportunities in the market. I noticed that there was room for a product that provided the user with more information, educating them like a personal trainer might.

User Survey

The first phase of my user research was conducting a survey. When designing, it’s important to know how people actually think and feel, and not work off of assumptions. The most useful thing I learned in this survey was what knowledge people felt most and least confident about.

User Interviews

I conducted interviews with people with various experience levels when it comes to body recomposition. The most useful information I got from this process was learning how people maintain their motivation, and why people employ personal trainers.

Affinity Mapping

Screen Shot 2021-06-06 at 9.42.02 PM.png

I sorted out my key takeaways from my research into this affinity map, by whether they were a “pain”, a “gain”, or a “job”. This helped me synthesize information about my potential clients, and start to tease out where I could create value for them.

User Persona

I use personas in the design process to keep my focus specific, which is the best way to ensure that my solutions are actually useful. This character is a person who is middlingly familiar with body recomposition and looking to make a larger commitment.

User Journey Map

Screen Shot 2021-06-06 at 9.42.44 PM.png

This tool creates a narrative about what my user is thinking and feeling as they try to complete a task. This helped me to make note of paint points, which I could then address in my design phase.


Design

Ideation

Screen Shot 2021-06-06 at 9.40.23 PM.png

After identifying some problems, I could begin to think up how a mobile app could address these issues. I brainstormed, laying out all my ideas, before narrowing them down.

Feature Prioritization Chart

Screen Shot 2021-06-06 at 9.39.25 PM.png

I took the features I had come up with in my brainstorming, and sorted them into this matrix, prioritizing them by which I believed Must, Should, Could, or Won’t become features in the final version.

Value Proposition Chart

This tool displays the needs of the customer that I identified in my research, and compares them directly to the features I determined I must or should include, to make sure they are related. The hope is that if I address those needs with my product, I will create value for the customer.

Minimum Viable Product

After determining what features I should prioritize, I knew what I absolutely had to include to address the identified problems. I wrote this working description of the product before moving to the prototyping stage:

Our user and competitor research suggests there is an opening in the market for a fitness app that de-emphasizes weight loss and emphasizes a knowledge-rich approach to body recomposition. Most users seem to be happiest left to their own devices, but want to be able to access guidance if they need it. Having the ability to easily make decisions about their own plans using reference information, as well as automated and personalized guidance, leaves the user in a position of confidence in regards to both their plan, and their expected results from that plan. Our minimum viable product must include:

-workout recommendations and logging

-macronutrient recommendations

-the ability for a trainer and client to communicate back and forth

-projected rates of weight loss, muscle growth, strength gains

-reference information about exercise form, measuring various health metrics, and nutrition

-an ability to log and track progress on goals related but not limited to: performance on individual exercises, strength of muscle groups, size of arms, size of thighs, size of waist, size of chest, size of neck, total weight, total lean muscle mass, and body fat percentage

Job To Be Done

When trying to change their body composition, a user wants to have relevant knowledge, so that they can make their own decisions, which makes them feel confident.

Interaction Design & User Flows

Screen+Shot+2021-06-06+at+9.37.33+PM.jpg

Before moving forward to create deliverables, I spent a long time laying out various user flows, to have a road map when I began to create my prototype.


User Interface

Lo-Fi Prototype

Screen Shot 2021-06-06 at 9.29.33 PM.png

I began by creating and testing paper prototypes. These couple tests taught me to be less ambiguous with button labels, and to have a more considered hierarchy for those buttons.

Mid-Fi Prototype

Screen Shot 2021-06-06 at 9.27.02 PM.png

The next step was to create a wireframe of the design. After some feedback, I determined that there was still confusion as to what was what and that the copywriting in my next prototype should be specific, not vague.

Visual Competitive Analysis

Screen Shot 2021-06-06 at 9.38.12 PM.png

Before creating the next prototype, I put some thought into the visual design. I started by scoping out competing products to see what I could do to be both normative and familiar, while remaining unique.

Brand Attributes

I also thought about what I wanted my design to convey, and began organizing and designing assets in an effort to project the following attributes:

Athletic

Motivating

Empowering

Approachable

Rugged

Moodboard & Style Tile

Screen Shot 2021-06-06 at 9.43.32 PM.png

Between both my mood board and style tile, I was able to convey most of my brand attributes with my collected design elements. According to desirability tests I conducted, I had not yet achieved “approachability.”

Visual Design Documentation

Screen Shot 2021-06-06 at 8.28.46 PM.png

In order to make my design feel more “approachable” I rounded the edges on buttons, and chose new, warmer, brighter colors.

Hi-Fi Prototype

Screen Shot 2021-06-06 at 8.27.10 PM.png

My design includes a wealth of reference information in comparison to other similar products, and motivates users by reminding them of their current progress, and projected results. This prototype includes the screens where a user would, create, edit, and track their current goals.


Next Steps

  • Designing more microinteractions (reordering goals, press to animate graphics, highlight footer menu when relevant tab is open)

  • Designing other user flows

  • Desirability and User testing hi-fidelity prototype

  • Confirming accuracy of in-app information with NWI Coaches

Success Metrics

  • Time on Task

  • Users Achieve Long term goals

  • Feedback from users and coaches

  • Growth of user base