Web Application Design

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.

UI, UX and website app screen design

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.

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

Add activity screen in Move Great section.

Activity log view in Move Great section.

SCREENS

Main dashboard screen 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. — Move Great Dashboard Screen

View recipe screen in Eat Great section.

Meal selector screen in Eat Great section.

Editable shopping list. Auto populated from recipes when added as well as custom items.

SCREENS

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.

WIREFRAMES

Dashboard screen for "Think Great" screen. — Move Great Dashboard Screen

SCREENS

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. — Move Great Dashboard Screen

Webinar list view in Connect Great section.

Individual webinar view in Connect Great section.

SCREENS

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.