Fitbod App Redesign

Fitbod App Redesign - student project

This class was excellent! I'm currently working as a UI/UX designer and want to improve the creativity in the products I work on. For the class project, I decided to use my favorite workout app - Fitbod - as inspiration. My main goal was to explore new, visually creative ways to develop on boarding screens, so I did not focus on user testing.

 

Step one: Answer this question "what are the main benefits users are getting?"

Before sketching out my on boarding screens, I answered Victoria's question and identified the following benefits of Fitbod:

-Users can choose their fitness style (body building, olympic lifting, crossfit, etc)

-Users receive unique, customized workouts built by the Fitbod algorithms

-Users are able to see their achievements over time

-Users gain the ability to live forever (this is my addition & personal goal).

To generate this content, I pulled from the Fitbod website and my personal experience using the app. The last benefit – "achieve immortality" – is a benefit that I added, and a personal goal.

 

Step two: Choose a color palette

-I browsed coolors.co until I found a color palette that jumped out at me. I wanted something with a dark base and a pop of a brighter color.

 

Step three: Find/create illustrations for the on boarding screens

Probably the most time consuming aspect of the project. I browsed the resources Victoria mentioned in the class videos but ultimately found what I was looking for on other sites. However, I'm absolutely keeping unDraw in my back pocket. 

- I found this set of Exercising Silhouettes on Vecteezy and recolored them in Illustrator using my chosen color palette.

- I also used this geometric pattern from Vecteezy because I love finding ways to add texture to my designs.

 

Step four: Arranging screen elements and app flow

This was the most fun for me – because of my background in graphic design, this part of the project let me play around with the visual design of the on boarding flow. 

When I finished version 1, I wasn't completely in love. I felt like the illustrations were too flat, too similar and ultimately didn't fill the space in a balanced way. Back to scouring the internet for illustrations...

Fitbod App Redesign - image 1 - student project


Step three (repeated): Find/create illustrations for the on boarding screens

For version 2, I switched up my app elements with,

-This set of People at the Gym from freepik; again I recolored them in Illustrator using my chosen color palette.

-This abstract pattern from Vecteezy

-and blobmaker to generate some fun background shapes

 

Step four (repeated): Arranging screen elements and app flow

I'm much happier with the visual complexity of version 2, especially in the variety of workout styles shown because I think they better reflects Fitbod. Plus, I'm really digging the background pattern.

Fitbod App Redesign - image 2 - student project

 

Thanks for the class, Victoria! I'd love any and all feedback.

Arielle Nabors
UX/UI Designer. Creative.