Assignment Instructions

Consider that you’re working as a Senior Product Manager at HealthieMe, and you want to launch the smartphone app,
for Android to start with. As the sole product manager working on this app, you have a few ideas regarding the design
and functionality that you’d want to incorporate. Based on these functionalities which you want to include in the app,
sketch the basic layout of the application and design the wireframes for the HealthieMe app. The guidelines for this
assignment are:

Part-1
1. Create the required sketches and place the screenshot of each screen on relevant slides on the right side. (Hint: Add
the sketches of all key functionalities and add any other features based on your understanding. You can duplicate and
add more slides as per your convenience to show the sketches of the additional features you wish to add.)

2. Add a small description of the features/buttons/redirections of the pages on relevant slides on the left side. (Hint: Also
show a navigational flow of the different pages/sketches i.e. how the different pages are linked to each other)

Part-2

3. Create the required wireframes and place the screenshot of each screen on relevant slides

4. Prepare a slide showing the navigational flow for your wireframes

Feel free to add more slides as needed.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Assignment
Part-1 Sketching
Login/Signup Page
• This is the sketch of the first page that will
appear after the user installs the
HealthieMe app
• New users of the app will have to sign up
& they can use one of the available
options for signing up
• While the existing users can directly sign
in using their credentials

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Personal Details Page
• This page will appear just after a new
user has signed up to the app
• It will only appear for new users, as the
existing users would have already
entered these details when they first
signed up
• It will capture essential details of the
users such as - Name, Age, Gender,
Height, Weight & Workout Frequency
• These details hold the key for the smooth
functioning of the app

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Fitness Goals Page
• This page will appear after the user has
entered their personal details
• It will only appear for the new users as
the existing users would have already
entered their fitness goals. However,
existing users will have the option to
update their fitness goals in the profile
section
• This page will capture the primary fitness
goal of user
• It is an important element for providing
personalized recommendations to the
users
• These goals can be – Lose Weight, Gain
Weight, Increase stamina and increase
workout frequency.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Home Page
• This sketch is for the homepage of the
app.
• It comprises the summary of all major
features available in the app.
• Due to personalization based on user’s
preferences the content of the homepage
will be different for all users
• It shows all the goals of the user to make
them remind of the goals
• It also shows the workout of that day with
details such as workout time, calories
burnt, running time

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Hamburger Menu
• This is the sketch of the hamburger menu
which will be accessible from almost all
pages of the app
• Hamburger menu acts as a quick & easy
entry point to all the major features in the
app
• It will also help the users seamlessly
navigate to different pages of the app
• It has options like home, feed, profile and
logout.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Profile Page
• This is the sketch for the profile page,
which lists all the information captured
while onboarding a user
• This information is editable as a user may
want to update his/her fitness goals & the
personal details such as height & weight.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Health Monitoring Page
• This sketch is for the health monitoring
page of the app
• This page comprises major monitoring
tools such as Sleep Tracker, Calorie
Counter & Water intake
• For tracking workout & calories burnt
accurately, the users will have to connect
their mobile phones to other wearables
such as smart watch.
• The other option is to manually enter
these details in the app

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Calorie Counter Page
• It is the sketch for the calorie counter
page of the app where the users can
simply scan the bar code on the food
items they are consuming or manually
select food items to calculate the number
of calories they consume
• Scan Code option enables the users to
scan the bar code on packed food items
& the number of calories get updated in
the app
• Selection of food items option allows user
to add/search food items consumed, with
the counter adding up individual calories
to give the total calorie count of food item
consumed

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Personalised Suggestions Page
• This page provides personalized
suggestions of meal & workout
plans to the users
• The idea behind including this
page is to provide meal &
exercise plan suggestion based
on the fitness goal selected by the
user
• Healthy Food Recipes will be
provided to the users based on
the type of meal plan they select
• Videos from expert trainers will be
shown based on the exercise plan
the users select

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Sharing Page
• This is the sketch for share &
compete page of the app. It
enables users to share their
progress with their friends/family
& also compete with other users
of the app.
• This feature is to instill the
concept of community workouts -
Users are encouraged to share
their achievements and workout
details on social media as well as
compare with friends using the
app - An external validation plays
a vital role in increasing
engagement and repeat behavior
in a health tracking app

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Assignment
Part-2 Wireframing
Wireframe

Tool used for wireframing Whimsical

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Log In/Sign Up Page
Add the screenshot of the wireframe for this page below.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Personal Details Page
Add the screenshot of the wireframe for this page below.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Fitness Goals Page
Add the screenshot of the wireframe for this page below.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Home Page
Add the screenshot of the wireframe for this page below.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Hamburger Menu
Add the screenshot of the wireframe for this page below.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Profile Page
Add the screenshot of the wireframe for this page below.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Health Monitoring Page
Add the screenshot of the wireframe for this page below.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Calorie Counter Page
Add the screenshot of the wireframe for this page below.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Personalised Suggestions Page
Add the screenshot of the wireframe for this page below.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Sharing Page
Add the screenshot of the wireframe for this page below.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Navigational Flow
Place the navigational flow structure here

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.

Disclaimer
All content and material on the upGrad website is copyrighted material, either belonging to upGrad or its
bonafide contributors and is purely for the dissemination of education. You are permitted to access print and
download extracts from this site purely for your own education only and on the following basis:-
● You can download this document from the website for self use only.
● Any copies of this document, in part or full, saved to disc or to any other storage medium may only be
used for subsequent, self viewing purposes or to print an individual extract or copy for non commercial
personal use only.
● Any further dissemination, distribution, reproduction, copying of the content of the document herein or
the uploading thereof on other websites or use of content for any other commercial/unauthorized
purposes in any way which could infringe the intellectual property rights of upGrad or its contributors, is
strictly prohibited.
● No graphics, images or photographs from any accompanying text in this document will be used
separately for unauthorised purposes.
● No material in this document will be modified, adapted or altered in any way.
● No part of this document or upGrad content may be reproduced or stored in any other web site or
included in any public or private electronic retrieval system or service without upGrad’s prior written
permission.
● Any rights not expressly granted in these terms are reserved.

© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.