fitted app

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.

https://www.behance.net/collection/174153463/Fitted-UI-01

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:

https://www.figma.com/proto/6Zh4xlKNsM5qP7ixub7478/Fitted-2.6-Design-Handoff-and-Deliverables?node-id=3%3A367&scaling=scale-down

 

Credits:

I received guidance and feedback from my CareerFoundry mentor, John Salisbury.

 

© 2023 by CREA8ME. Proudly created with Wix.com for deeburger darcy.rosenberger@gmail.com

  • Instagram - Black Circle