- Fit Fo Sho -

Background

Problem Statement: I am a 20-40 year old college student/working a full time 9-5 job trying to exercise but I don’t know the proper way to start because I don’t have the expertise of what workouts are best and in what order to do them in, which makes me feel like I’m wasting my time in the gym.

For my UI/UX design course, I decided to take on the challenge of creating an app that both fulfilled a need, as well as personally interested me. I went on to create a fitness app called Fit Fo Sho in which users could get a simplified and helpful experience exercising. It was specifically designed to help college students and adults working a 9-5 job to get in some exercise time in despite their busy schedules. I personally have enjoyed going to the gym since 2016, and always wished to have something like this in my life to support my workout journey, and after talking to some of my peers, they seemed to agree.

Let's Begin!

Begin Workout

Defining the Problem

Why A Fitness App?

Throughout my time going to the gym, I always missed having the ever changing, ever helpful workout regimen that my weight training teacher would give back in high school. I wanted to create something that could provide people with that sort of help along with an uplifting feeling that comes with progress.

Limitations

For starters, I was limited in terms of knowledge when it came to UI/UX design as I had never been tasked to create an entire app from the ground up before. Therefore, my biggest limitation is my lack of experience when it comes to both UI design, as well as with the software I used to create the app; Figma. Figma introduced its own share of limitations as some aspects of the app that I wanted to implement such as an infinite stream of workout regiments was not possible on the program. While limitations were certainly present as I continued to work on Fit Fo Sho, the app prototype still ended up being a great example for what a helpful fitness app for the working man could look like.

Understanding the User

Interview Prep

Conducting interviews was certainly my favorite part of the whole app designing process. Calling back to my years working on yearbooks, getting to speak to my peers about something that interests us both has always been an enjoyable experience for me. In order to get a good pool of opinions, I interviewed three college students. Two students who have are fairly new to going to the gym, and one who has been going for many years. I wanted to get the perspective of the new gym-goers as they are my target demographic, while the experienced student on the other hand would provide information from the perspective of what he would've liked to have had when he first started going to the gym.

Interview Notes

One significant insight I gained thanks to these interviews was how important tracking aspects such as amount of crunches done on one day versus another was. I always enjoyed tracking how much progress I've been making, so having confirmation from everyone that they wanted that sort of information in the app as well was very significant. Another critical factor for the app I gained from the interviews was that they wanted it to have information that didn’t just stop after a while but instead wanted infinite workout regiments. I'm unable to have an infinite stream of content as of now, however, that is something my potential users want, so it's something I'd love to learn how to implement in the future.

User Stories

A few of the most significant user stories that came into play when creating the app include:

- As a college student/full time employee I want to be able to get tips that are provided by personal trainers so that I don’t have to hire one.

- As a college student/full time employee I want to track my progress so that I can feel more accomplished post workout.

- As a college student/full time employee I want to have a set of exercises to complete that when done, gives a message notifying me that I’ve leveled up so that I can show friends.

- As a college student/full time employee I want to have an exercise streak feature so that I can make sure I get at least some exercise in each day.

The Design Process

User Flows

Creating user flows made me think out the overall design of my app deeper than I had previously. The importance of the flow of interactions that the user would experience wasn't clear to me until I had to plan them out myself.

Wireframes

After several attempts, the wireframes would continue to develop into my true vision for Fit Fo Sho. I began with some basic greyscale mock-ups (right) that would portray the overall setup of the app.

Visual Exploration

As I made progress on my wireframes, I developed different visual aspects that I wanted to appear in the app. I tried to reference other popular fitness apps to ensure that the app had some of the quality-of-life features that long running apps have already utilized.

The Final Design

A few of the key decisions that came into play when finalizing my design were making the shape design of the overall app more interesting as well as making the interface as welcoming as possible. The overall simplistic design of my original icons was sharp and bland looking, so, I decided to introduce some more visually enticing shapes for the icons throughout the entire app. Working on making every aspect of the app have a gradient look to it gives the app a more modern look when compared to my previous iterations as a nice fade between colors helped give the app a less harsh/lazy look to it. Click the button below to check out the finished design!

Working Prototype

Conclusion

Final Thoughts

Throughout this project, I learned a lot about both UI/UX design as well as myself. For example, the importance of typography hierarchy never presented itself to me until this project as I had to ensure that users had an easy time reading any and all of the information on the screen. The way a person's eyes move across a screen is a very particular pattern that I had to attempt to understand for the first time and in turn, keep in mind while designing. While that part of the design process was completely new to me, one aspect that helped me learn something about myself was the interviewing process. I learned how much I miss doing that sort of thing as I hadn't done those types of conversations since being on the yearbook team. It was great to return to it and I appreciate this project for bringing that to my attention.

Next Steps

In the future, I would like to incorporate all of the skills that I learned from this project/course into both my graphic design and game HUD design. From making better page layouts, to finding out the best ways to create a navigable menu, this course introduced me to so many important aspects of design that I'll remember for years to come.