Fitted // 2020-21
UI for Fitness App
Brief and Context:
Creating a mobile application to motivate and inspire the users to take their fitness to the next level, one step at a time. This application was designed as part of CareerFoundry's UI for UX designers course that I started towards the end of 2020 and completed at the start of 2021. I worked on designing this application over a 6 week period (part time). The approach used to create this product was a user centred design process and create a motivational and playful look to the application. My work for this project covered wireframing, UI design, branding and design guidelines/deliverables.
I used Sketch to create the wireframes and prototypes and Adobe CC for other visual work.
Design Objective
Creating a playful, motivating mobile application that will encourage the user to be more active. Fitted curates workouts from its extensive library for the user based on their preferences. The workouts are short . The visual and verbal language incites the user to be accountable of their fitness journey
WHO IS IT FOR?
People are busy with their everyday lives and sometimes, their health takes a backseat- especially the fitness end. Fitted was designed for anyone looking to add some movement to their day.
User Flow and Initial Wireframing
What is included
- The application will have alerts that pop up on the lock screen.
- A tool that also shows an animation or a video of the exercise.
- Have the language be fun and encouraging.
- Focus on progress rather than weight as a way to keep the user motivated (weight change has been proven to not be enough to have people keep exercising.
- Introduce challenges that the user can join and be a part of the Challenge community. The more challenges they compete, the better their ranking.
- Ranking/awards will go from: Just getting started to Elite Athlete I want the interface to be fun, colourful and engaging.
This is where a primary feature of the application was defined: a search page that showcases the curated workouts organized by category. The user still has the option to do their own search beyond what's suggested to them on that list. From there, I developed Higher Fidelity Wireframes as seen below.
Mood-Boards
I created two mood-boards to explore how I wanted the application to look like.
First moldboard: Simpler colour palette, sleek and bold.
Second Moodbaord: more colourful, playful, brighter
I went with the first mood. Here are the main takeaways and reasonings behind that decision:
- Working with less colours would make the application easier designer, as visual consistency will be simpler.
- A memorable colour palette- in line with the provided brief. It also gives more direction to how the images will look.
- The application caters to young professionals working at home and they will prefer a simpler colour palette.
- Stronger, bolder fonts will give more weight to the text, and motivate the user which is an advantage to the application.
Style Guide
The mood-board and preliminary ideas helped define the Style Guide. The colour palette stayed true to that of the mood-board. Images Guidelines were also introduced in order to make sure that there is a visual cohesiveness throughout the entire application. Do's and Don'ts were introduced in order to make these guidelines easier to follow.
Different Breakpoints
Designing for different break points was important to me as I want this mobile application to be available on several screens. Besides having it available on smart phone devices, I decided to design it for an iPad Mini and Desktop. I went from hand sketches to then applying the concepts used from the mood-boards and style guide mentioned above.
To design for the bigger screens, I chose to go with the grids in sketch to help with the layout. It allows me to divide the screen into different quadrants and allows me to also see the main division and thus establish hierarchy.
Below is a slideshow of the design process of the different breakpoints.
Final UI and Mockups
The entire design process detailed above helped me with creating the final UI and mockups for the mobile application. The colour palette and style guide gave the framework for the visuals as seen below.
To view the application in your browser, click here
Future Iterations to be Considered
Currently the application does not have a smart watch UI. It would be interesting to add for those users who enjoy having the extra features that a mobile application can provide (heart rate, step count etc.)
Having a small progress bar with the upcoming moves is also a feature that would be interesting to add to help the user better assess transitions from one move to another.