This project was an assignment for my CareerFoundry course, UI for UX.  My objective was to design a responsive web fitness app to encourage and motivate people into an exercise routine that suits their level, schedule, and interests. I created this app with Rebecca in mind: a 26 year old female with a Masters in Software Development who is looking to get in shape using a tool for beginners that will help her fit in some enjoyable exercise routines into her busy schedule.

Sketch

InVision

While the course provided research data, goals, tasks, user stories and features requirements, I did a separate competitive analysis to research the strengths and weaknesses of other web responsive exercise apps and designed my app with that in mind.  I reviewed Blogilates and FitnessBlender for some quick strengths and weaknesses, summarized below:

Video guides of all exercises

Good filters for workout videos

Social media features

Can view workout videos for free before sign up

No tracking features for weight loss goals

No achievements

No notification of workouts planned for that day

Calorie burn information not tailored to my body type

After evaluating user stories and feature requirements, a user flow diagram was created and lead to the formation of the low fidelity wireframes.

To decide on a color scheme, I created two moodboards to target different fitness groups. The first one feels more enjoyable, low impact fitness, and social.  While the second one feels more for advanced fitness groups, high impact fitness, and more serious users.

The first moodboard's color scheme was applied to my screens along with imagery that align with the moodboard's theme.  Some major changes I made that stands out from the low/mid fidelity wireframes are:

1) Adding a quick onboarding segment in the landing page and

2) Leaving all filter options expanded rather than allow the user to expand for more.  Making the user expand a category would only add more clicks to the process, and it would not allow the user to quickly see all the choices there are.

Since this is a responsive web app, tablet and desktop breakpoint designs were created as well. With a 12 column grid decided at the beginning of the design process, this made it much easier to design breakpoints for the tablet and desktop versions. 

In the tablet design, I revealed some of the main menu categories in the top navigation bar, specifically all the categories except for "About Us" and "Contact Us," leaving the hamburger menu still intact so that the user could still navigate to those options.  In the desktop design, the hamburger menu is gone now that all the categories can fit along the top navigation bar.  Both the tablet and desktop breakpoints also display more videos per row; 2 per row for tablet, and 3 per row for the desktop. The filter drop down also expands to include more filter options per row as the breakpoint expands to desktop views.

User interface animation was made to show smooth sliding transitions when tapping on the hamburger menu and haptic feedback when scheduling workouts on the calendar.

To maintain consistency throughout my process, I referred back to my branding guidelines and style guide frequently.

Completing this student project didn't go without some struggle! One aspect I had struggled with was the use of colors and color theory.  I had read that gradients were back for UI in 2018 and the coming 2019, so I had experimented with gradients in my app.  What I didn't know right away was how gradients would be used and how the colors should be chosen until I received feedback from my mentor.  What I learned was that gradient colors are typically using colors that are very close together on the spectrum, such as red to orange, yellow to green, etc. My chosen colors, red to black, were very drastic and produced a very harsh color combination with the initial color palette I had chosen.  I also learned that even if I were to use gradients, having more "white space" is ideal as it would be easier on the eyes and allow the user to focus more on the content.  Here's a visual below of the harsh color combinations I had versus what it is now.