Example of Paper Prototype

1. Assignment
Paper Prototyping
Name: Vipul Gaur
Email ID: Vipul.gaur@gmail.com

2. 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. Seeing
the rise in usage of wearable devices, the company is developing apps for both smartphones and
smartwatches (like
Moto360, Galaxy Gear, etc). As the sole product manager working on the apps, you have a few ideas
regarding the design
and functionality of the apps. To communicate these to your team, you need to develop paper prototypes
for the app.
Note: You need not worry about how the apps for smartphone and smartwatch will communicate
between each other
and what data can be shared. 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.
1. Create the required paper prototypes and place the screenshot of each screen on relevant slides
2. Prepare a slide showing the flow of your paper prototype

3. Mobile

4. Screen 1|Mobile (First Screen Post Sign-up)
Initial Prototype
Defaults to pending task.
Swipe to view completed
tasks in upper pane.
Toggle between Work
and Home Views
Icons Legend
Email Tasks
Appointments
Notes
To-Do-List
Grocery
Work
Home
“DT” Icon to take user back
to Work or Home views
Reminders
Search
Navigation to view items
due Today, coming Week or
in future
“Quick Actions” Section will allow user to add
items in various categories quickly

5. Screen 2|Mobile (Reminders)
Initial Prototype
Click on “…” to delete or
stop reminders
Icons Legend
Email Tasks
Appointments
“DT” Icon to take user back
to Work or Home views
- Clicking delete will remove the reminder
from the list.
- Stop reminder will not show any more
reminders for that task.
Pan to view more
reminders.

6. Screen 3|Mobile (Email Tasks)
Initial Prototype
Click on “…” to
delete email task
or to add new
sub tasks or
notes related to
email task
Click on
“more..” to
view detailed
view of email
task
Green and red header at task level
indicates completed and pending
tasks. By Default all tasks are shown
they can be filtered using filter icon.
User can mark the email task closed or re-
open the existing email task.
User can share email task with contacts using
email or SMS.
Email tasks can be created for work
or for home by forwarding emails at
work.dotoday@dotoday.com or
home.doday@dotoday.com
Scroll
down to
view email
details

7. Screen 3|Mobile (Email Tasks)
Initial Prototype
Icons Legend
Add Sub-Task
Add – Related Notes
Share Task
More icon to expand email
details
Icon indicating linked sub-
task
Icon indicating linked notes
Filter
Email
SMS
- Sharing Using Email
- When user clicks on email icon on sharing layover, System
will use the default email app within the mobile and add the
Email task as subject line.
- Body of task will have a short link to open the email task.
- Email Recipient (s) will be able to click the link to view the
details.
- User will be able to draft the email below this section.
- SMS sharing will only text in following format: <User, want to
share email related task with you. Click <short link> for more
details.
- Clicking on linked tasks and notes will take the user to the linked
item.

8. Screen 4|Mobile (To-Do-List)
Initial Prototype
Click on “…” to
delete to-do-list
task or to add
new sub tasks or
notes related to
to-do-list task
Click on task to
access to-do-
list details.
Green and red text within task shows when the task is due or
when it got completed. By Default all tasks are shown they can
be filtered using filter icon.
User will be able to delete and mark task as
complete. They can also reschedule time and date.
User can share email task with contacts using
email or SMS or WhatsApp.
Chick on
Share link
to view
sharing
options

9. Screen 4|Mobile (To-Do-List)
Initial Prototype
Icons Legend
Change Date
Change Time
Linked Items Indicator
WhatsApp
- Change Date icon will let the user change the due date for the
task. On click of change date icon, calendar will open and user
can select a new date.
- Change Time icon can let the user change due time for the task.
On click of a change time icon, app will give option to change
time.
- When user selects Share using WhatsApp option, short URL for
the task will be created and app will open WhatsApp for sharing
with contact.
- Clicking on linked tasks and notes will take the user to the linked
item.

10. Screen 5|Mobile (Appointments)
Initial Prototype
Click on “…” to
cancel or
reschedule
appointment
Click on task
to access
appointment
details.
Green and red text within task shows when the appointment is
starting or when it got finished. By Default all tasks are shown
they can be filtered using filter icon.
User will be able to delete and mark task as
deleted. They can also reschedule time and date.
User can share the task through email or event.
Scroll
down to
view email
details
Click on “…” to
delete past
appointment or
add tasks and
notes post
discussion.

11. Screen 5|Mobile (Appointments)
Initial Prototype
Icons Legend
Add New Event
- Change Date icon will let the user change the due date for the
appointment.
- All will attach the appointment into ICAL format while sharing
with other contacts.
- User can add a new appointment by clicking “+” on the
appointments screen as well.

12. Screen 6|Mobile (Grocery)
Initial Prototype
Click on “…”
to delete
grocery
item
Click on
item to
view
details
User will be mark the task complete by clicking
“Ok” button or go back to list view by clicking
cancel
Pan down
to view
more
items
Click on “+”
to add new
item to list

13. Wearables

14. Screen No. 1,2|Wearlables (Home Screen and Work Screen)
Initial Prototype Icons Legend
Work View
Home View
Tasks created directly
through Email
Appointments
To Do List
Notes
Home Screen NavigationSwipe To change
the pending
dates grouping.
Click on Icons or red
(pending) or green
(Completed) number
to view next screen
Swipe To change
between completed and
pending tasks

15. Screen No. 3|Wearlables (Reminders)
Initial Prototype
Icons Legend
Reminder (Bell Icon)
Close Button
Pan to view
all reminders
Click on bell icon at the top
to view list of all the
reminders
- Icons next to reminder item to
indicate the reminder type.
- User can press “Close” button to
dismiss the reminder.
- Text next to icon to indicate due
time.
Click the reminder type icon
to open the original item
which triggered the
reminder.

16. Screen No. 4,5|Wearlables (Home Screen and Grocery)
Initial Prototype
Icons Legend
Tasks created directly through
Email
(Email to: dotoday.home@dotoday.com)
Appointments
To Do List
Notes
Home Screen Navigation
Grocery List
Cancel Item
Click on Grocery Icon to
open Grocery list
- Grocery item will be shown in
following format. “Item, quantity”
Example: Sugar, 2 KGs
- User can select the item on check-
box to mark it completed and item
will be moved out from the pending
list.
Click on item to
view detail
Defaults to pending items. Swipe
to view completed items

17. Icons Legend
Completed Linked sub-tasks
Pending sub-task
Add Sub-Task
Add linked Note
Complete button
Reopen
Screen No. 6|Wearlables (Email Tasks Work/Home)
Initial Prototype
Defaults to pending
task. Swipe to view
completed tasks
Pan to view
next email - Users can create email tasks in work and home views by
sending email to work.dotoday@dotoday.com and
home.dotoday@dotoday.com.
- Users will be able to view sub-tasks and notes on click of
icons.
- Click on home icon on top will take the user back to work
or home views.
- User will be able to mark the email task complete or
reopen existing completed email task.

18. Icons Legend
Linked Tasks indictor
Add a New Task
Linked Items icon
Save
Completed
Screen No. 7 |Wearables (To Do List – Task List)
Initial Prototype
Defaults to pending
task. Swipe to view
completed tasks
Click on
“+” to add
a new To-
do-List
item
Click on the task to
view task details
Pan to view
more details
- User can add sub-tasks and related notes to
existing tasks.
- New task can be added by clicking “+” button at
the top.
- User can mark the pending task as completed on
task details page.

19. Screen No. 8 ,9,10|Wearlables (Existing Appointment List and New Appointment)
Initial Prototype
Defaults to pending task.
Swipe to view completed
tasks
Icons Legend
Reschedule
SMS
WhatsApp
Shared
Selected appointment icon (Office)
Click on “+”
to add a new
appointment
Click item to
view details
Click on Share icon
- User can reschedule, share or cancel existing
appointment from details page.
- User will be able to share the appointment in
SMS and WhatsApp.
- SMS and WhatsApp sharing will only text in
following format: <User, want to share email
related task with you. Click <short link> for more
details.