The Feel Great Challenge

UI, UX and website app screen design.

 

About The Project

The Feel Great Challenge, a start-up in the weight loss industry, wanted to develop a companion website application to their mobile app. The web application needed to have all the features of the mobile app plus several more helpful features. The app also had to follow the newly developed branding.

I held several close consultations with directors of the company and other key staff to establish the objectives, features and requirements of the website application. I then set about designing the user experience using Balsamiq Mockups to produce wireframes. I held several meetings with the key stakeholders to discuss the wireframes and once we had finalised the user experience, I proceed to the design stage.

During the design stage I designed all the screens of the application using the wireframes as my guide. These screens incorporated the new branding as well as included the design of new features that were web application specific only. The company’s new branding was all about fun, excitement, bright colours and the use of lots of fun, lively graphics and this was factored into the screen designs. These are a selection of the screen designs.

Client:
The Feel Great Challenge

Skills:
Design, Photoshop, InDesign, Illustrator, Balsamiq Mockups

Home & Login

The login and home page wireframes and corresponding screen designs.

Wireframes

Login screen.
Main dashboard display.

Screen Design

Login screen.
Main dashboard display with message from coach.

Move Great

“Move Great” was a coin termed by The Feel Great challenge for the exercise and activity section of the app. This section housed all things related to exercise and movement.

Wireframes

Dashboard display for Move Great section.
Workout view in Move Great section.
Add activity screen in Move Great section.
Activity log view in Move Great section.
Add health record in Move Great section.

Screen Design

Main dashboard screen in Move Great section.
Select an activity and view screen.
Add activity screen in Move Great section.
Activity log view in Move Great section.
Add health record in Move Great section.

Eat Great

“Eat Great” was a coin termed by The Feel Great challenge for the food and nutrition section of the app. This section featured everything from shopping lists and recipes to meal plans.

Wireframes

Dashboard of Eat Great section.
Weekly meal planner in Eat Great section.
Meal selector screen in Eat Great section.
View recipe screen in Eat Great section.
Favourite meals list in Eat Great section.
Editable shopping list that is auto populated from recipes when added.

Screen Design

Dashboard screen in Eat Great section.
Weekly meal plan screen in Eat Great section.
Select a recipe screen in Eat Great section.
Recipe screen in Eat Great section.
Shopping list screen in Eat Great section.

Think Great

“Think Great” was a coin termed by The Feel Great challenge for the mindfulness section of the app. 

Wireframe

Dashboard screen for "Think Great" screen.

Screen Design

Dashboard screen for "Think Great" screen.

Connect Great

“Connect Great” was a coin termed by The Feel Great challenge for the connection and community section of the app. The goal of this section was for people to share the weight loss journey together and use the community to help them stay on track.

Wireframes

Dashboard in the Connect Great section.
Webinar list view in Connect Great section.
Individual webinar view in Connect Great section.
Email a coach in Connect Great section.

Screen Design

Dashboard of the Connect Great section.
Webinar list view screen in Connect Great.
Individual webinar screen in Connect Great.
Email a coach screen in Connect Great section.

Motivate

The “Motivate” section of the web application is for customers to find motivation to keep going on their weight loss journey. Motivation is known to be one of the biggest hurdles with losing weight.

Wireframes

Photo vision board feature.
Quotes and Affirmations feature.
Why I'm Doing This feature.

Screen Design

Photo and Vision Board feature.
Quotes and Affirmation feature.
Why I'm Doing This feature.