Sketch Assignment - Task Management

Assignment
Name: Suraj Rao
Email ID: raosura@gmail.com
Sketch

Assignment Instructions
●Suppose you’re working as a PM at DoToday, a startup working on a next-gen to-do list and task management
app. You want to launch the smartphone app, for Android and iOS. You understand that the app functionality
would be the same for both of these, and hence you only want to focus on sketching it out. 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.
●The objectives of this assignment are:
1. Functional requirements: Identify the range of functional requirements, taking in consideration all use cases
and identify the best possible solution to perform the task
2. Sketch description: Create the required sketches and place the screenshot of each screen on relevant slides
with details of the screen. Prepare a slide showing the flow of your sketch along with constraints
3. User testing for each screen with a suitable user, along with learning from the same
●Note: Only think of the functionalities you would like to have in both of these apps and sketch the paper
prototypes based on that. Also, don't worry about the nuts and bolts like login or registration; concentrate on the
cool stuff.

Use cases Functional requirements
•Users want to create a to-do checklist and set a timeline for each of the task created..
•Users want to segregate their to-do-list into various categories such as shopping, personal
milestones etc
•Users want to prioritize the tasks created so that they can complete the high priority tasks first.
•Users want to create reminders for each of the tasks created.
•Users want to add notes to each of the tasks for additional details.
•Users want to create sub-tasks for each task e.g. a shopping checklist , travel bucket list etc.
•Users want to mark a to-do as completed once they complete it.
•Users want to mark the previously completed tasks as incomplete whenever required.
•Allow users to create a task by visiting one of the side menus and then filling in all details.
•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 speech to text to create new tasks.
•Allow users to tag the tasks with different colours to differentiate them
•Allow users to create their own priority levels with colours, assign a priority to the tasks and
display the corresponding colours while listing the tasks
•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
Functional Requirements
Choice of best solution: 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. This provides the user an
option to fill additional details if required and skip them as well. This would neither force the users to fill in all the details, nor let them skip the details miss them. 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 3)Providing an actionable item on the toolbar to filter records is the
best choice as the UI would be cleaner and it 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
•Users want to browse the pending as well as the previously completed tasks
•Users want to access the to-do-list over multiple devices so that they are always accessible.
•Users want a consolidated view of the tasks based on the due date set for each task.
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.
•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.

Sketch Description – Login & Dashboard
Slider images for
user understanding
Text to explain the slider
images
Swipe to view the slider
Drop down to filter & view :
All Tasks, Pending tasks and
Completed tasks
Side Menu to list
additional menu,
settings and
other details
Search for tasks or
sub-tasks
A grid view which
provides the
category wise
tasks.(details in slide
8)
List of tasks based
on filters. Completed
tasks will be striked
Click on the
check box to
mark a task
Login with your
facebook
account
Login with your Gmail
account
Swipe to view the slider
images
tasks will be striked
through .
mark a task
as complete
Add a New
task(details in slide 5)
A calendar view to list
the tasks date –
wise(details in slide
6)
Due date set
for the task
Click to view the list of
tasks
Priority set for the
taskTask Title
provided
while creating
a task

Sketch Description- Add Task The category selected in
the previous screen
would be displayed here
with an option to change
by clicking on the drop-
down
Use the “Voice”
option to enter a title
for the task.
The notes for the
specific task can be
added here
Provide a title
for the task
being added.
This is a
mandatory
field
On clicking the + button, the list of all
categories with images(uploaded as in slide
8) would be displayed
The due date for
the task can be
set here.
Drop- down to
set the priority
of the task
Set a reminder
for the
pending tasks
prior to the
due date.
Add one or more sub-tasks for this task. Once a sub-
task is added, provision to add a new sub-task would
be enabled automatically.
Attach images,
documents, recordings
and other files for the
task.

Sketch Description – Calendar View
This provides a calendar view based on the
due dates of all the tasks. Each day of the
month is displayed separately. On clicking the
specific day, the tasks for that day would be
displayed below.
The date selected for
which the tasks need to
be displayed below. As
the user scrolls down,
other dates and tasks for
The number of dots(.) shows the number of
tasks which are due for that day.
Constraint: If more than 4 tasks are due for
a specific date, then the number of dots to
be displayed might cause spacing issues.other dates and tasks for
those dates would be
displayed and the date in
the calendar would
automatically be changed
and the new date would
be highlighted Category-wise listing of the tasks for the
specific date selected.
Constraint: Since due date is not
mandatory for all tasks, if for a particular
task, due date is empty, it won’t be
displayed here.
be displayed might cause spacing issues.
Hence 3 dots could be displayed for 3 or
more tasks due

Sketch Description – Grid View
Click to go back to listing
view (as shown in slide-4)
All the tasks are listed and ordered based
on the category to which they belong.
A task is completed by
clicking on the check-box
and displayed as a strike-
The tasks within each category are
ordered based on the descending order of
their created date.
The background of individual category
sections would be covered with the image
uploaded for the specific category(as per
slide 8)
and displayed as a strike-
through text.
Clicking on the completed
tasks would mark them as
incompleted

Sketch Description – Side Menu
Click to view the profile
details
Click to view the productivity
graph & other details Enter the name of the
task category
View the category list
and click on ‘Add new’ to
add a new category
Attach a picture .
This picture would
appear as a
background image in
the grid view of task
listing (slide 7)
Enter the name of the level
eg :p1, p2, p3
View the priority level
list and click on ‘Add
new’ to add a new
level
Click to open the settings
page (details in slide 9)
Click to write an email to a
specific email id for support.
This opens the email client
currently available on the
mobile
Set a color for this
level.
The color set here for a
level would reflect in
the list view of tasks(
slide 4) i.e. All the task
sections would be
coloured according to
the priority set
Pick a color from the pre-
defined list of colors

Sketch Description - Settings
Click to go back to the side menu
Any settings related to the way the
productivity graph is plotted for the
user’s tasks
Click to set the dashboard
settings such as default list of
tasks, sorting order etc (details in
slide 10)
Toggle button to turn on / turn
off the setting.
If ‘On’, all the tasks would
automatically get synced to
gmail
The list of all mediums
through which the tasks
could be accessed are
listed here such as
Gmail, Alexa, Smart
Watch etc with a toggle
button for each.
Click to access the list of
The current version of this mobile
app.
Click to logout of the
mobile app
Click to set the notification
settings i.e. The actions for
which the notifications need to
be triggered to mobile vs email
triggers.
Additionally, set notification
ringtone, time-zone etc
Select the account with
which the tasks need to
be synced for gmail
mediums via which the tasks
could be accessed.

Sketch Description – Dashboard Settings
Users can configure the task
which need to be displayed by
default – All , Pending or
completed
Click to set the order in which the
tasks need to be displayed on the
home page.
Sorting Options
•Sort by the task which
was most recently
updated i.e. Any
changes made to an
existing task
•Sort by the date on
which the tasks were
Click to set the details which need
to be displayed in the listing page
for the tasks eg: Due Date,
Priority , Category etc
Click to set the dashboard
settings such as default list of
tasks, sorting order etc (details in
slide 10)
which the tasks were
created
•Sort by due date of
each tasks. Tasks for
which due dates are
empty need to be listed
at the bottom
•Sort by priority level –
p1 , p2....
•Sort by alphabetical
order of the title of the
task

Initial Sketch After Feedback
Screen No. 1 – Dashboard
Menu for Dashboard settings like
sorting, view details etc
Any actions associated to the tasks i.e Call,
Whatspp, Email, Payment to be displayed
here and on clicking the task, relevant action
to be taken.
Color of the task section based on the priority
Feedback received from the user: 1) As per the user its convenient to place the + button on the right side as it is easier to access using the right thumb. 2) The priority of the tasks need not be
specified in the listing page, instead a visual effect could be provided by providing a background colour for the individual task section. 3)Actions related to the tasks need to be displayed within
the task section. From the listing page, the user should be able to directly take action on clicking the action icon for a task. 4)Dashboard Settings – Instead of visiting the side menu and then
navigating to the Dashboard settings section, its better to provide the same on the home page as it is more frequently used compared to other settings. 5)Re-arrangement of the menus in
bottom navigation- only icons are sufficient to understand the functionality and the text need not be shown. This would bring in consistency of the bottom navigation 6) The method to mark a
task as complete(by clicking on the task) was appreciated by the user as it was simple and easy to unmark a task
Constraint : Since all tasks listed might not be actionable, what needs to be displayed in the placeholder for non-actionable tasks needs to be considered.
Color of the task section based on the priority
of the task.
Add button relocated as per the
user feedback
Rearrangement of the bottom navigation to
accommodate user feedback.
No text displayed, only icon is displayed for
the sections

Screen No. 2 – Add Task
Feedback received from the user: 1) On clicking the + button for add task, the user has suggested to remove the intermediate step of selecting the category and instead showing the
category as a drop-down field in the task addition page. This would help reduce a step. 2)While adding a task, user wants to define the actions associated with the task. For eg : If the user
wants to set a reminder to send an email to XYZ person or make a payment to XYZ , they should be able to set that action and tag that person from the phone contacts , email contacts as well
as whatsapp contacts . From the listing page, the user should be able to directly take action on clicking the action icon for a task. This suggestion could further be expanded to include other
actions such as Buy and make it a source of revenue by tying up with relevant service providers( eg if a user has a task of buying a Shirt, the tie up could be with Myntra, Flipkart etc
Constraint : 1) Whether a person could be tagged directly from email contacts needs to be verified.

Screen No. 3 – Dashboard Settings
Select the default list of tasks
which need to be d
Feedback received from the user: Dashboard Settings – Instead of visiting the side menu and then navigating to the Dashboard settings section, its better to provide the
same on the home page as it is more frequently used compared to other settings.

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● 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.

Sketch Assignment - Task Management

More Related Content

Similar to Sketch Assignment - Task Management

Recently uploaded

Sketch Assignment - Task Management