ORIGINAL Site Login Page and Navigation

In simplest terms, this website helps users track their current activity and calculate recommended calories based on their personal weight goals. The client's website could be used by athletic trainers or individuals to customize their fitness goals. The calculator's goal is to show how reasonable a health goal is based on the individual current state and all the factors that play into that fitness goal to promote health living.

Problem Statement

My main goals were as follows for this project:

Update Style
Mobile Optimize
Concentrate on users' main goals for the app and reorganize information to facilitate this

Research

I first deep-dive into the original application and did my best to get an understanding of its purpose. Going into the application I did not have previous knowledge about the subject matter. This allowed me to ascertain the key questions a novice would have going into the application:

1. What information do I need to input and what does this information mean?
2. How is my calorie recommendation calculated and what does it mean?
‍

Information Architecture

When establishing my information architecture, I recognized the need for a special flow for new users compared to returning users. The original application made no distinction between new and returning users. This led to confusion for new users because they needed more guidance and frustration for returning users to go through extra steps to access the information they needed. This was further supported by competitive analysis of other similar apps. All the competitors, such as my Fitness Pal had different processes for returning and new users.

Returning users and new users also had two drastically different goals/needs. The most important goal fo the returning user was to reference their personal activity goals and recommended calories. A new user's first priority is to establish a weight goal and find out recommended activity and calorie intake to achieve this goal.
‍

Returning User - Home page

Returning User - account info

daily Activity Log - Expanded

Wireframe

I began grouping information from the original site into a wireframe. I was not concerned about aesthetics at this point, mostly reorganizing the information in a way that made sense, for a returning user to move through.

Another challenge I found was the original application, it was only designed for desktops. The primary users for this would be athletes or trainers, who would mostly use this application at the gym. Most people don't bring their computers to the gym and would more likely have their phones. For this reason, I designed first for mobile, keeping in mind that later I would design for desktop. This also forced the processes of the application to be simplified as possible.

Design

Moodboard

COlor Decisions

I wanted a bright energetic color scheme to reflect the subject of the app. Also during benchmarking of other popular fitness applications, many had dark colored backgrounds. To make this application stand out I chose a lighter background.

Textures from the gym also inspired me, particularly weight plates causing me to come up with a graphical motif.

Returning user High FIDELITY Mockups

Unfortunately, sometimes even though they are your favorite designs a client project can still fizzle out. This project never made it past high-fidelity mockups for the returning users. Despite this, this project illustrated my ability as a designer to condense and reformat information from an existing system.

‍