Sketching - DoToday App

Name: Raghavendra Pratap Jujjavarapu
Email ID: ragssets@yahoo.co.in
Assignment
Sketch

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

Choice of best solution:
Creating Tasks
Different colored Task cards are used to categorize the tasks based on urgency and importance. User can easily pick and access cards based on the color coding in
our App. The reason to choose this as the best solution rather than just naming the cards and sorting them out is visual depiction provides decluttering ,reduce
confusion and increase the accessibility of the tasks.
Use cases Functional requirements
• User needs to login to the app with an user account
• User needs to Create tasks based on urgency and importance
• User needs to mark the completed tasks and unmark the
previously completed tasks by browsing them.
• User needs to take notes for a particular task.
• User needs to update a task with more details like email address,
location, time, attachments (PDF’s /docs), website links etc.
• User needs to get a remainder based on the details given for a
particular task card.
• Provision of login page via Google /Microsoft accounts at the
launch of the application.
• Provision to different colored cards for varied
importance(Important/Not Important) and urgency(Urgent/Not
Urgent) that can be categorized and shown using progressive
disclosure technique.
• Provision of Icons for completion, Non Completion, Pending and
InProgress tasks.
• Provision of embedded sticky note that will be incorporated in the
Task card for user to take notes.
• Provision of Icons for a task in the footer of the task card.
• Provision of a notification for the user in the app while he/she
creates a task card, based on Machine Learning Technology.
Functional Requirements

Feedback received from the user:
Test Summary: The Login Screen needs change on the title and details. For example, it is better to use the LOGO of the organization since visual
representation of the LOGO strikes well with the user with the Tag Line (Welcome Tab Note). These changes are implemented in the feedback sketch.
The login potions using Google and Microsoft accounts helps to sync with Calendars in the respective mobiles.
Initial Sketch After Feedback
Login Screen

Test Summary: The Tasks Screen worked well in terms is simplicity to use, just two push buttons (sized in coherence with screen’s dimensions) for creating new tasks and
managing existing tasks works well with user. The simplicity of this particular screen is the unique point that worked well with the user of the app. No changes were made
when compared to previous sketch.
Tasks Screen

Test Summary: The initial screen has a problem of cluttering in terms of number of icons that were in the footer of the “ADD Notes” card. This cluttering could affect the possible selection of
any icon from the user. This is rectified in the next sketch by de-cluttering with a single attachment option that by selecting the option a pop-up appears in which we can select any option the
user wishes for. And since the color is automatically given by ML(Machine Learning) technology, the option for custom coloring is removed.
New Task Creation Screen

Test Summary: The Manage existing tasks screen has different groups , associated with urgency and importance, called as SAFE’s and different
colors(Red/Yellow/Orange/Grey) were given to the SAFEs. The feedback from the user suggested a vertical scroll that helps to ease the navigability of different SAFEs.
Manage Existing Tasks - Screen (SAFE Cards)

Test Summary:
By Clicking each SAFE Card, different tasks which are sorted by ML Technology based on urgency and importance are viewed in the initial sketch . The tasks contains task summaries and will not
show any details in this screen. The feedback from the user is to also implement scroll bar for ease of navigability of different tasks, which is implemented in the screen (after feedback).
Manage Existing Tasks -SAFE Card Screen (Tasks View)

Test Summary: The initial screen has design constraint that will blur the view of other tasks and their respective summaries. Though we use progressive disclosure
principle of UX, the user isn’t convenient with the popup view of the details of the tasks that unfolds. Hence the user wants to view the details of the task selected,
by also viewing of other tasks and their summaries. Hence, this is implemented in the “After Feedback” Screen.
Manage Existing Tasks - Task Selection Screen

Test Summary: The initial screen has an info about the pending task but doesn’t have any info about the task. User feedback suggests that a downward arrow
button is placed for the notifications that helps in viewing the details associated with the task with out visiting the App. This helps in easy access to the content in the
app by not having the pain of frequently opening the App. Hence, this is implemented in the “After Feedback” Screen.
Notification Screen

Screen Flow

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

Sketching - DoToday App

Recommended

Recommended

More Related Content

What's hot

What's hot (11)

Similar to Sketching - DoToday App

Similar to Sketching - DoToday App (20)

More from Pratap R Jujjavarapu

More from Pratap R Jujjavarapu (6)

Recently uploaded

Recently uploaded (20)

Sketching - DoToday App