Fitted App
Brief
From November 2019-January 2020 I worked on the UI for a fitness app named Fitted as part of my CareerFoundry UI for UX Designers Specialization Course. This is a fun and easy to use workout app that allows users to schedule and maintain healthy habits.
The UX work had already been established for this project by CareerFoundry, so I worked with the provided Design Brief as well as mentor guidance to develop the app's UI.
Problem Statement
Building healthy exercise habits can be difficult and intimidating. This responsive web app helps people make a lasting change with schedule assistance, curated routines, and interactive guides. The feel of the app should be easy, informative, and fun.
Tools Used
Figma, Balsamiq, InVision, Adobe InDesign, Adobe Photoshop, Adobe Portfolio.
Moodboard
I created a moodboard on Behance to organize design inspiration, color theme ideas, and visual direction. I consulted the requirements of the project brief, where I found brand guildelines including the colors orange & black, and an easy, informative and fun style.
I worked with these branding requirements to flesh out the vibe of the app, which was refined and re-iterated in the low, mid, and high fidelity wireframing processes.
Low Fidelity Wireframes
I used Balsamiq to begin ideating composition, link placement, information architecture, and functionality by creating low fidelity wireframes. I took a mobile-first approach to designing this responsive web app to ensure that the most vital elements and functions could be accessed in the smallest necessary screen space.
Mid Fidelity Wireframes
Refinement included improvements to interactive prototyping and visual design with improved information architecture, more defined fonts, icons, and spacing, and a 12-column system.
Style Guide
Major improvements made:A style guide was created in conjunction with the high fidelity prototypes to assist in future development of the app. Hand drawn icons, custom buttons, and color schemes can be explored here.
Hand-crafted Icons
Next, I created a collection of pixel-perfect icons in svg format.
High Fidelity Wireframes
After mentor consultation, review, and feedback cycles - the new polished prototypes were ready to be finalized.
Major improvements made:
Simplified color scheme
Improved text readability
Improved logo design adding white stroke to set it apart from background
Search results as a numbered list correlating to map pins
More functional field error notifications
Interactive Protoype
Go ahead, take a test run:
Credits:
I received guidance and feedback from my CareerFoundry mentor, John Salisbury.