Fitted
Fitted is a highly personalized approach to your fitness journey and is an app designed for users of all levels. Fun, easy to use and highly interactive, Fitted covers all your work out needs.
My Role
UI/UX Design - Wireframes, Prototypes, Web Design, Interaction & Motion Design.
Timeline
Jan 2020 - Apr 2020.
Tools
Process
User centered design was the focus for this app. I placed an emphasis on the users who are beginners and developed visual mood boards, and researched interactive web approaches. Then mapped out a user flow and began some quick sketching, which led to digitized wireframes and prototypes. I continued to refine the design based on feedback and research.
User Flow & Sketches
Low Fidelity Wireframes
Sketches were then digitized and I began to get a feel for the architecture and design of the app.
Moodboards
I drew inspiration from sources of flat design, bright colors and a desire for a high level of web interactivity for the moodboards.
Branding & Identity
Logo
Typography
The primary typeface, Futura has an appearance of efficiency and forwardness and uses simple geometric forms: near-perfect circles, triangles and squares. It is also easy to read from a distance.
Avenir, an organic interpretation of the geometric style, even in color and suitable for extended text is used for body copy and accents or moments of discovery.
Color
Since boldness was a big theme with design, I used a complementary set of lively colors from the moodboards. These choices signify activity, positivity, peace and change.
Illustrations
I used my own illustrations for this app, with heavy influence from flat(ish) design.
High Fidelity Wireframes
I added fidelity to wireframes with imagery and colors/textures. Throughout the process, I continued to iterate until pages felt just right.
Home and Onboarding
Search and Scheduling
Step By Step Instructions
Designing for different devices
I approached the design process with a Mobile first strategy, but the idea of Fitted is of an app that can handle multiple screen sizes well, so responsive and wearable design were constant aspects of the creative process.
Interactions & Gestures
Interactivity and motion exploration were high priority for the design of this app. I explored different masking and animation techniques to best achieve the goals of making Fitted fun and easy to use.
Animation
Onboarding
Fitted has an extensive, fun and interactive onboarding section that collects relevant information to personalize user experience. This section also offers a glimpse all the features that the app provides. The user can opt out of onboarding at any point in the process. View here.
Scheduling
Users can search for exercises based on keywords and explore the exercise in detail on the Info page for a Step by Step breakdown. Users can then proceed to schedule their desired sessions easily by using the calendar to set up a workout plan. View here.
Step by Step Instructions
Users can get a detailed breakdown of the steps involved in an exercise by using the Info button on the Exercise screens. View here.
Observations
Research
I was well versed in the topic of fitness apps, having used a couple myself, but I still found enough time has to be dedicated to doing research to make sure I was covering all the bases when it came to the UI of apps.
Use time efficiently
I have a tendency to concentrate so much on details that I get lost down a rabbit hole sometimes and lose time. I have to create a few hard deadlines so I don't spend time on work that will not really impact the final outcome.
Always keep learning
As the focus was on UI and a Mobile first design approach was used for a responsive app, I have learnt there are particular aspects of design like typography that I need to pay more attention to and learn about.
Organization
Having learnt from my previous projects, I was better organized with all the research material this time, so the process was much smoother.
