Fitted is a responsive fitness app that is designed to be a comprehensive resource for gym goers. It provides users with workout programs and details about exercises and allows them to track their exercise progress.
I worked as the sole UX and UI designer on the project. The scope of the project was starting with the concept for the app, including outlines of the target user and basic functionality, and ending with delivering the finalised polished UI.
Most of the research and analysis work had been completed prior to commencing this project on behalf of CareerFoundry, so the emphasis was on visual and UI design.
PROJECT BRIEF
Who: People with varying levels of gym experience and a range of fitness goals, whether they are looking to get into an exercise routine for the first time or explore new directions on their fitness journey
What: A responsive app that allows users to view exercise routines and guides, complete daily challenges, and track their progress
When: There are elements that the user will likely use when not exercising, such as analysing progress, browsing exercise programs, and creating custom programs, and ones they will likely use during exercise, such as looking at exercise guides and inputting their workouts
Where: On the go, in the gym, at home, exercising outdoors. The only thing that is required is that user is logged into the platform on a mobile or desktop device
Why: Getting into an exercise routine should accessible for everyone, regardless of their fitness levels and goals. This can be made easier by providing a comprehensive resource that has everything users need to get started on a program and keep engaged.
1. OUTLINING THE FUNCTIONALITY
The app was designed around four main features. They were chosen on the basis of what was considered essential to effectively fulfil the user needs outlined in the brief:
1. Finding suitable workout programs
2. Finding information on different exercises
3. Being able to track exercise progress
4. Promoting engagement through gamification
USER FLOWS
I created a user flow map to outline the required steps to complete these actions on the app. This informed the structure of the app and what screens would have to be built.
WIREFRAMES
I then created wireframes to present the user flows for the different actions and provide a basis for the visual design of the pages.
2. DEFINING THE VISUAL STYLE
I took inspiration from vintage weightlifting imagery to find a captivating and distinctive visual style for the app. The goal was to have an aesthetic that would stand out against the bulk of sleek modern style fitness apps.
MOODBOARD
I first created a moodboard with suitable materials to help define the visual language. In addition to referencing vintage weightlifting imagery, I also wanted to include illustration in hand-drawn style to convey a sense of humour and playfulness.
3. APPLYING THE STYLE
The challenge was combining a vintage aesthetic with a modern app in a seamless way. The typography, colours, UI elements, imagery, illustrations and iconography of the app were crucial in establishing this balance.
TYPOGRAPHY
COLOUR
IMAGERY
ILLUSTRATIONS
ICONOGRAPHY
UI ELEMENTS
4. DESIGN ITERATIONS
I refined the design through an iterative process from hand-drawn wireframes into mid- and high-fidelity wireframes and finally into the final polished UI using Figma.
5. DESIGNING FOR MULTIPLE BREAKPOINTS
I optimised the design for tablet and desktop breakpoints to ensure that it was functional across devices.
FINAL SCREENS
Thanks for reading!