Project and Proposal overview
This is a university project I completed for an animation unit. All files along with additional information can be downloaded through a dropbox link found at the bottom of this page with the final product.
Proposal:
Plan, design and create a functional mobile app prototype with Adobe XD and Adobe After Effects. I decided to design a fitness app which had a niche target audience of experienced weight-lifters who needed additional customisable options to more accurately track their workout sessions. The project needed to be presented in a video which displayed the user flow or user interaction within the app.
​
Overview
This project began with basic wireframing in adobe XD, with the requirement that the mobile app needs to have four distinct sections. After establishing the brand guidelines in colours, typography, iconography and the logo I built upon the wireframes to create the mock-ups for the final animation. Once this was completed I moved onto Adobe After Effects to complete the animation of user interaction, including audio and an animated logo in the landing page.
​
Let's Get Started!
Ideation - Low to Mid fidelity designs
There was a lot of development from the sketches to the final version of wireframing but there are still clear designs and ideas from the sketches I've built upon. The application's functionality is based off the four distinct pages navigatable through the bottom navigation bar. These pages are Workout, History, Statistics and Profile.
I was quite eager to get this project started and began some very low-fidelity sketches to grasp a better idea of what I wanted my fitness application to look like and do. It didn't take long after this to move onto wireframing using Adobe XD.
Sketching
Wireframing
​
-
The first page 'Workout' provides the users at the top of their screen the day, date, and a calender icon. Directly below this is a display of each day of the week with your current day highlighted starting on Sunday and ending on Saturday. This can be seen more clearly in the mock-ups.
-
The second page 'History' acts as a way for users to view their previous workouts and sessions. This however is changed in the mock-ups
-
The third page 'Statistics' was created to allow the users to analyse their performance and see how they have been able to improve. As this app is designed for experienced weight lifters, it is important for them to see how they have progressed. The app tracks the quantitative data from the user's workouts and puts them into graphs with a filter option, the main graphs display calorie count, reps and weights.
-
The final page 'Profile' first shows a short overview of their statistics with total amounts of reps, calories burnt and weight acting as both a motivator and inventive to continue tracking their workouts through the app. At the top, the page shows the user's name and a profile icon
​
This is explored more in the Mock-ups
High Fidelity Mock-ups
Next up was the higher fidelity mock-ups. As one of my first projects designing for mobile I liked how this looked visually. I have chosen a few examples from the full mock-ups which display some of the changes from the wireframes aswell as the improvements to the user interface and visual communications. The most significant changes come with the page 'Library,' previously known as 'History,' in the wireframes. Read more below to learn more about these changes and improvements.
I have selected a few examples from the fourteen page mock-up to display some key changes from the wireframes and ​
-
The first mock-up is for the page 'Workout,' there was limited change from the wireframe in this. The bar at the top communicates what day it is, the date and where in the week you are clearly and effectively. This is to help keep users on track and to not miss workouts. When the user has a workout set for the day, I created a focal point with the button 'Start Session' as a clear encouragement for users.
-
The next two images relate to the changes made to the second page now being 'Library.' The users are given a search bar at the top to search for particular workouts to add to their sessions, learn more about particular workouts and browse their sessions. The workout video section has a scrolling functionality to view some of the recommended videos. The sessions section however stayed quite similar to that of the 'History' page wireframe version. Originally, I didn't include a Library function as the application was for experienced weight lifters, and therefore wouldn't use something like this as much. However including this now into the application makes it easier for them to establish their workout sessions and uses other workouts as a substitute for others.
-
The fourth image displays the 'Statistic' page. This remained quite similar as well to the wireframes. Although to increase it's usefulness towards users, a comprehensive filtering system was added, in which statistics can be based off days or sessions, and then can be filtered to from last 5 days/sessions to all time.
-
The final image is of the 'Profile' page. This page somewhat changed in the upper section from the wireframing to have more continuity between pages. There is an icon for the user alongside their name with a total statistic summary underneath similar to that of the wireframe. Some of the settings options also changed, and each setting option has a corresponding icon.
-
In terms of colour palette, the theme is very monochromatic to prevent excessive distractions for users to make sure they are focused in a gym setting. I chose a bold red however as a continues focal in the application, being used to highlight which page you are on, for important buttons, statistics and so on.
​
To better understand the functionality of my prototype download the Adobe XD file from the dropbox
Brand Guidelines
To finalise this project I formed an extensive brand guidelines document which outlines the visual design of the application itself and guidelines on colour, typography, the logo and iconography.
FINAL ANIMATION
Finally the application is fully animated with Adobe XD and Adobe After Effects to produce the final prototype with the inclusion of sound! I've included two new elements with an animated logo for the main loading screen and a barbell loading icon. Play the video below to see the finished product.
Fitness You Dropbox:
