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 Name: Avi Tankaria Email: avitankaria@gmail.com
Login/Signup
Personal Details Page
Share & Compete Page Key Functionalities Included Calorie Tracking & Personalized Suggestions
Fitness Goals Page
Homepage & Profile Page
3
Login page ❖ This is the sketch of the first page that will appear after the user installs the HealthieMe app from the play store. ❖ Existing users can login into the app using their phone number/ email id and password. ❖ Users can retrieve or reset their password using the forgot password option.
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Signup page New users of the app will have to sign up & they can use one of the available options for signing up such as entering their Phone number or email id, or signing up directly using their Google, Facebook or Twitter account.
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Personal Details Page ❖ After signing up into the app the user gets a form to fill in his/her personal details. ❖ The details include name, gender, date of birth (for age calculation), height (feet and inches), weight (kilograms) and blood group. ❖ These details are to be filled once while signing up for the first time in the app, later the information can be viewed and modified in the Profile page.
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Fitness Goals Page ❖ The user gets to choose from the 5 available options in the fitness goals page. ❖ This will help determine the goals of the fitness goals of the user. ❖ The 5 questions are as follows Q. Lose Weight?
A. Yes/No
Q. Gain Weight?
A. Yes/No
Q. Maintain Weight?
A. Yes/No
Q. Need a diet plan?
A. Yes/No
Q. Find a workout buddy? A. Yes/No © Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Health Monitoring Page ❖ This page has 5 clickable sections which provide analysis to the user based on the following parameters 1. Steps counter 2. Water intake 3. Food intake 4. Sleep analysis 5. Heart Rate ❖ A progress bar (goal counter) in the bottom shows what percentage of progress has been made by the user so far.
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Calorie Counter Page ❖ The calorie monitor page shows the monthly progress of the user based on the average of every day for 7 days and indicating it weekly with the help of a progress bar. ❖ Average calorie intake/day is mentioned in the progress bar.
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Personalised Suggestions Page Personalised suggestions page includes food, exercise and training suggestions customised for the user.
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Sharing Page ❖ Sharing page allows the user to download their progress report from and to a particular date.
❖ The page shows the progress reports of the user as well as their friends. ❖ Users progress report can be downloaded and shared, but their friend’s report can only be downloaded.
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Home Page ❖ Home page includes a search bar. ❖ A profile tab for the user.
❖ Advertisements, blogs, stories and champs of the week.
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Profile Page ❖ The profile page consists of the name and photograph of the user along with date of birth, gender, height, weight, blood group, age, email id and phone number. ❖ User has the option to save, edit/discard changes.
© 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.
Login Page
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Signup page
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Personal Details Page
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Fitness Goals Page
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Health Monitoring Page
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Calorie Counter Page
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Personalised Suggestions Page
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Sharing Page (Progress report)
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Home Page
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Profile Page
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Navigational Flow
© Copyright. upGrad Education Pvt. Ltd. All Rights Reserved.
Navigational Flow Description ❖ After downloading and installing the application from the play store a new users are directed to login page where they have a sign up form which takes them to the sign up page. Existing users can login by entering their login credentials. ❖ New users are taken to Personal details page where they enter their personal details and fitness goals page to specify their goals. This information is saved for existing users and they are given an option to modify/delete the information by going into Profile Page of the app. ❖ On completing the above steps new users are shown the Home Page while Home Page can be seen by existing users once they login into the app. ❖ Through Home Page the users can navigate to Profile section, Health monitor page, personal feed page. ❖ The user can navigate to Calorie counter page from Health monitor section. ❖ The user can navigate to Sharing section from Personal Feed Page. © 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.