A case study: FITTY (personal trainer app)

FITTY is a mobile app specifically for personal fitness trainers. I went on the hunt for an app that allowed personal trainers to track, update, communicate and perform scheduling with their clients and the ones I found out there were abysmal. So, I thought — “What if I come up with my own?” And here we are today!

The Problem

Fitness trainers, we love em’ or maybe we love to hate them. Either way, fitness trainers do A LOT of manual work to track their clients. They use email, texts, WhatsApp, Facebook to communicate with their clients. I even found fitness forums showing conversations of how trainers use Excel or their notes app to track client progress and schedules.

Users & Audience

Personal trainers all over the world + people on a fitness journey working with a personal trainer. The latter would be part of a second or third iteration.

The MVP would solely focus on the trainer POV.

Team & Role

Team is made of just me for the moment. I’m the Product Manager, Designer and Developer for this MVP.

I will be leading discovery, research, design, prototyping and front end development. Let’s get started!

Discovery

Searched the web for competitors — I’ve been recently using mural.co, a tool that allows for whiteboarding. I usually use this with design and my fellow PM’s to communicate ideas, especially with being remote this tool is surprisingly super helpful.

I used Mural for FITTY to show competitors, what I liked, what I disliked and their pricing and biz model. This helped in understanding what else was being offered out there and gave me an idea of how FITTY would stack up against these products that had already made somewhat of a name for themselves with some of my potential users.

With this discovery session it was crucial for me to list ideas on what I could do different and unique to stand out from the competition.

Mural.co mood board for FITTY. On the left is where I entered all my competitors.

Inspiration for design — I created a space that showed navigations, colors, profile views, calendar views I have enjoyed using in the past. I also did a lot of research on Behance, Dribbble, UXPin and InvisionApp blogs to get a better handle on common UX/UI patterns.

On top of that I watched video from Futur and dived into posts on typefaces for web and mobile. I found really great insight from Adobe XD’s Youtube channel. And for iOS, Apple has a bomb guideline that has pretty much everything you need for design thinking on iOS.

Planning

Before wireframing I jotted down my core components that I’d want to have on the app. I took this time to write key specifications that needed to make the MVP cut.

Using Notion.so I listed out my main app components/functions on a high level.

In this time I also listed user stories, I used a prioritization matrix to map out my user stories. These included both MVP and non-MVP stories. By doing this I was able to visualize what we can build in the timeline vs. what needs to wait for a future iteration.

Prioritization matrix similar to the one I used, from Clearbridge Mobile

I then used Zenhub to create an Epic and stories beneath it for the MVP launch. By creating user stories first I am able to ensure I cover any designs for the stories and it gives me a base start. If I was working with my team, I’d sit with engineering to speak on the vision as well as brainstorm needed user stories. Each user story contains background information, acceptance criteria and test cases. Having these details ready will help when handing off the stories to the engineering team.

In the Icebox below I placed upcoming issues as well as non-MVP issues that we’d release later on. And in my Backlog I have issues that will be worked on this coming sprint.

Using Zenhub.com I created my user stories for MVP and non-MVP

UI Design

Goal: KEEP. IT. SIMPLE.

Wireframing is one of my favorite areas of launching a new product or feature. It’s the start of placing your research and laying it out on pen and paper or using a tool such as Sketch or Adobe XD.

Landing page: This was going to be the face of the app. It will act as a place that I will share on social media, market it and really drive SEO here. The idea is that once a user lands on the landing page, they’ll get a snippet of what we do and also a CTA to download the app.

Created a digital wireframe using Adobe XD. In a real-life process I would create a wireframe and then huddle with design to review it and iterate a bit more after feedback is given.

Landing wire using Adobe XD.
Mockup of landing page!

Mobile App (Trainer POV):

Now where are those mobile mockups?

iOS is first! Android will come later…I wanted to focus on simplicity. You’ll notice after entering your login information the interface is kept clean and to the point. I aimed to make it as decluttered as possible, focusing solely on three areas:

  • Trainer can login.
  • Trainer can view calendar with upcoming sessions.
  • Trainer can view client list and update their profile.
  • Trainer can access settings and customize their app screens.
Login page with the ability to sign in with FB or Google!
Mockups done in Adobe XD and set on a gradient using Photoshop.

I used uppercase titles to start at the top of each screen for visibility purposes. Keeping that strong title above will ensure that the trainer is able to orient themselves at any point will using FITTY.

The accent color used is a purple-ish blue. This color will be used on active screens as well as on arrows and button backgrounds to keep consistency.

What’s next?

Spin up a working prototype for user testing. I’m hoping to work together with a fellow designer here.

Will also create a user flow, validate the idea through user testing, iterate, keep a customer feedback loop going after each iteration, prototype a functioning app and then gather a team to build and ship it!

Thanks for reading! Leave “claps” if you’d like to see more of these!