1. Suraj Rao was assigned to develop wireframes and a prototype for the web version of a task management app called DoToday. 2. Functional requirements for the app were provided, including allowing task creation and editing, filtering tasks by status, and syncing tasks. 3. Suraj developed wireframes for the home page, add task page, task management page, and pages for changing a task's category and status. A navigational flow was also included.

1. Assignment
Name: Suraj Rao
Email ID: raosura@gmail.com
Link for Wireframe: https://balsamiq.cloud/sdu8hva/pqye7wx
Wireframing

2. Problem statement: In the previous session, you developed a sketch for DoToday, a startup working on a next-gen
to-do list and task management app. Suppose the app, based on those sketches, was launched and received a huge
response from users. But the feedback was also received that a web version of the app is needed. As the PM, you
have decided to develop the web version based on the current mobile version. So you need to develop wireframes
for the layout of your web app. Once you have your wireframe, you also need to develop a prototype by adding
interactivity to your wireframe.
Assignment Instructions
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Objectives:
1. Listing down functional requirements for all use cases and choose the best solution
2. Create the required wireframes and place the screenshot of each screen on relevant slides
3. Prepare a slide showing the navigational flow for your wireframes
4. Use POP or Mockingbot app to add interactivity and create the prototype
Feel free to add more slides as needed.

3. Functional Requirements
•Allow users to create a task by visiting the task management menu and then clicking on the ‘add button’’
•Allow users to quickly create a task from the home page and then later add other details.
•Allow users to create a task from the home page by filling in all the required details and keeping some fields non-mandatory.
•Allow users to import task using excel or csv
•Allow users to edit a task and then allow them to mark it as complete. Similarly allow users to edit the tasks and mark them incomplete
•Provide an option on the home page to click on a check-box associated to a task to mark a task as complete / incomplete
•Provide a section within the side menu wherein user can click and view the completed tasks.
•Provide a filter button which would provide an option to filter the pending, completed and all tasks
•Provide an actionable item on the toolbar to filter the records based on their status.
•Provide different tabs on the home page for Pending , Completed and All Tasks
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
•Allow users to sync their tasks at a task level.
•Allow users to sync the tasks specific to a category i.e. Provide a sync option at category level.
•Provide a sync option at an app level so that all the created tasks can be synced or not synced.
•Provide a date range based for the due date which could be used to list the tasks.
•Provide a calendar view of all the tasks and display t he tasks once a specific date is selected.
Best Choice : 1) Task Creation –Allow users to create a task from the home page by filling in all the required details and keeping some fields non-mandatory as well as by visiting the task
management menu. Other options seem time consuming and a better user experience could be provided by using the best choice mentioned here
2) Allowing users to mark a task as complete/incomplete from the home page as it would be much quicker rather than visiting different menus to mark them as complete/incomplete .
Additionally, allow marking them as complete/incomplete after editing a task
3)Providing different tabs on the home page to filter records is the best choice would always be visible on the home page for the users to filter records.
4)Allowing tasks to be synced at a global level is better than providing options at task or category level as there would be lesser configuration involved here and easier for users to
choose. Also, user might prefer either all or no tasks to be synced rather than few.
5) Providing a calendar view is the best choice here as the user does not need to input any data and can view all the tasks date-wise with ease. The user experience would be much
better in this case

4. Screen No. 1 – Home Page
Side menu to compress
the list so that the
dashboard is visible in the
entire space
Logo of any.do
Search bar to search for tasks
and sub-tasks. This would filter
the records in My Tasks section
based on the search parameters
Grid view to arrange the tasks based on
category. Clicking on this would change
the look of te home page completely
User Profile, account settings
(logout, password change etc
could be accessed from here)
Scroll bar to scroll down if the list
of tasks is large. The graphs
would scroll up and only the tasks
could be viewed if the list is long.
List of all the tasks for which the due date
All to-do tasks can be
managed here.
All the categories
for tasks can be
defined here.
View task Details
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
List of all the tasks for which the due date
has been crossed would be listed here.
Constraint – To display tasks which do not
have a due date updated
Graphical representation of
efficiency of the user based on
the tasks completed and
representation of total tasks under
each category.
defined here.
A calendar which
provides a
consolidated view
of all the tasks.
Users can access
reports which
would provide
visibility on their
productivity &
performance
Filter to view Pending, Completed
and all tasks
Click to add a
new task
The subtasks
associated to a
particular task
Notes associated
to the task Attachments associated to the
task
List of tasks
Task Category
Filter to Sort tasks, set default
task list
Task Title. Check on
the check box to
complete a task

5. Screen No. 2 – Add Task
Category of tasks e.g. Personal,
Official etc
Task title which would be
displayed on listing page
Due Date of task
Reminder for the
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Reminder for the
task
Set Task priority e.g
High,Low, Medium
Multiple files
can be
attached
here.
Any task
related notes
can be added
here
Add sub-tasks here.
These sub-tasks
would be displayed
on the home page
Actions associated
to the tasks can be
added here.

6. Screen No. 3 – Task Management
Place the screenshot of the wireframe Screen-2 here
Edit a task
Print the
tasks by
clicking here
Export the
tasks to excel
Delete a task
Add a new
task
Navigate to
the next page
in the list
Navigate to
the last page
in the list
Click to sort
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Navigate to
the first page
in the list
Navigate to the
previous page. If
you are in 2nd
page, you would
be navigate to
first on click of
this .
The page on
which the user is
currently on out of
the total pages
containing tasks
The number of tasks
user wants to display
on a page, e.g if 10 is
selected, 10 tasks
would be displayed
here.
The headers
mentioned indicate the
fields associated to
each task and the
values are displayed in
the table
Click to sort

7. Screen No. 4 – Task Management(Change category)
Click on the
hyperlink under
category value to
change a category
for a task.
Close the window
to save the
changes made or
to go back to the
task management
dashboard.
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Radio button- click
to select an option
The image associated
to a category

8. Screen No. 5 – Task Management(Change status)
Click on the
hyperlink under
status value to
Close the window
to save the
changes made or
to go back to the
task management
dashboard.
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
status value to
change the status
for a task.

9. Navigational flow
Login
Home
Page
Task
Management
Category ListMy
Calendar
Reports Settings
Add Task
No NotificationSync
Task List User
Profile
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Link to prototype:
https://marvelapp.com/5c79dja/screen/63270299
Success
?
Yes
Task Created
Change
Status
Change
Category
View Tasks
Export/PrintEditTask
Delete Task
Grid view
All Tasks Pending
Tasks
View Task details Mark as
Complet
e
Completed
Task
Edit
Task
Mark as
Incomplete

10. 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.
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
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.