You Fit
Overview
You Fit is a fitness related mobile app for iPhones. The purpose of this app is to help build and find your own workouts, keep track of your progress, and to help maximize your training. This app was created for a class project in my Advanced Prototyping class at Kennesaw State University to help expand our prototyping skills.
​
End Goals
-
Create an aesthetically appealing prototype.
-
Display prototyping skills using animation.
-
Create information architecture.
Duration: March 2022 - May 2022 (6 Weeks)
Role: UI Designer/Prototyper
Introduction
For my Advanced Prototyping class, We were individually assigned to work on a final prototype which showcased the skills that we had learned throughout the semester. During the semester we focused on learning how to create an appealing aesthetic and were given a number of challenges to help create an interactive interface. The difference between this project and past projects displayed in my portfolio is that I was required to work on it completely solo to help me learn the prototyping skill using the tool Figma. There was no design method required, just simply prototyping and designing a user interface. From the ideas, to the animations, to the designs, etc. we were each individually required to create our own functioning prototype. There were many challenges faced along the way since I had little to no experience with the tool, but as I practiced I learned so much about prototyping that I can now add it to my skillset.
Creating The Prototype
Design
Color Styles
After I had come up with my final idea, I knew I wanted the design to be simple and inviting. I chose mainly pastel, light, and cool colors for my color styles; white, light pinks, light blue, and light purple. The main color I used throughout the design are different shades of pinks and then I used blue and purple as the accent colors.
Text Styles
For the text throughout my whole prototype I wanted to keep a consistent typeface. I used the san serif typeface, Noto Sans, utilizing the different fonts; regular, bold, semi-bold, light, thin. As for the text color I used black for the main headings, main- text, titles and grey for some of the sub-headings.
Components
Components in Figma are elements you can use across your design as an instance to help create a consistent design. I created components for my navigation menu, status bar, and header. I also incorporated components for creating buttons and adding symbols. With components I was also able to create variants that are component sets that I used to create certain animations which I will discuss in the prototyping section.
​
When creating my components I took into consideration of Fitts' Law which is the amount of time it takes the user to reach the target area. So this can include the buttons or the cards within my prototype. For my navigation component I only kept five choices to consider Hick's law which states the time it takes to make a decision increases with the number and complexity of choices.
My Favorite Screen Designs
Home Screen
Music Screen
Training Screen
Prototyping
After I had created a consistent design and chosen my text and color styles, I focused on the prototyping. Not only does that mean connecting all of my buttons and screens, I also utilized what I learned this semester creating animations using interactive components and variants. Some features I included were a parallax for the main screen, smart animation of a music player, a drag to delete list, and a timer.
Smart Animate
Smart animate require screens to have matching layers within the prototype to help create seamless animations. I used smart animate for multiple interactions to help created a smooth flow when animating. An example of me utilizing smart animate is creating a music player which animates out when clicked on and then back to it original state when click the bar.
Variants
Variants are the single components which are grouped to create a component set. With these you can create interactive components throughout your design to create different interactions. For this I created a drag list which deletes, check boxes, and buttons.
Interactive Components
Interactive components allow designers to define their interactions and animations between variants and component sets. The benefit of of interactive components are that it helps create a higher fidelity prototype for better feedback and testing and it can cut down the time spent prototyping. I included this in my filters overlay on my workout screen by using check boxes that the user can check and uncheck.
Auto Layout
Auto layout is a feature you can add to your frames and your components in Figma. This allows you to create your designs that you want to grow to fill or shrink to fit. This helps you align the spacing and text within the frames easily. As part of the project we were required to incorporate auto layout. I utilized auto layout within my prototype on the card carousels and the drag to delete workout list
Screens With Auto Layout
Home Screen
Training Tips Screen
Workout Screen
Redlining Screens
As part of our final project we were required to do redlining on our screens. Redlining throughout the screens of the prototype help developers ensure that the designs are made to the specifications. In this case we used guides which are red that show the spacing and margins between every element. I utilized redlining within my screens showcasing the dimensions and spacing of each element on the screen the screens shown below.
Redlining Screens
Home Screen
Music Screen
Training Tips Screen
Conclusion
Overall, I am satisfied with my final project I started the semester with little to no knowledge on how to use Figma and now I know the basics and more. What I learned this semester is the importance of file hygiene, designing, animating, and trouble shooting. There were many times where I had issues and certain parts were not animating properly. I went back multiple times and played around with timing and animation to get it to where I needed it to be. As I kept designing from start to finish, I found myself changing my designs constantly. Finally, I would say that the challenges presented to me this semester accomplished the goals of my final project. I can utilize what I learned in this course on future UI/UX projects.