Assignment

Wireframing
Name: Tejasvi Vaddiparti
Email ID: [email protected]
Link for wireframe: https://balsamiq.cloud/s5o705z/pexsvds
 ASSIGNMENT INSTRUCTIONS

• 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.
• OBJECTIVES:
1. CREATE THE REQUIRED WIREFRAMES AND PLACE THE SCREENSHOT OF EACH SCREEN ON RELEVANT SLIDES
2. PREPARE A SLIDE SHOWING THE NAVIGATIONAL FLOW FOR YOUR WIREFRAMES
3. USE POP OR MOCKINGBOT APP TO ADD INTERACTIVITY AND CREATE THE PROTOTYPE
• FEEL FREE TO ADD MORE SLIDES AS NEEDED.

© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved

 SCREEN NO 1: HOME SCREEN DETAILS
• HERE THE HOME SCREEN TAKES YOU TO THE MASTER-LIST,THERE IS AN OPTION TO NAVIGATE THROUGH
CATEGORIES(COLOUR-CODED,AND LISTS OF COMPLETE,PENDING TASKS).WITHIN THE MASTER-LIST, THE
CHECK-BOX IS COLOUR-CODED TO DISTINGUISH BETWEEN CATEGORIES.A TOOLBAR APPEARS ON THE LEFT
WITH THE FOUR OPTIONS,
➢ ADD A NEW LIST
➢ SYNC THE LIST WITH EMAILID( CAN BE UPDATED IN SETTINGS)
➢ SHARE THE SELECTED LIST ON WHATSAPP/FACEBOOK,ETC
➢ SWITCH TO THE TIMELINE MODE.
• FINALLY, A PRODUCTIVITY METER IS PLACED ON THE RIGHT THAT HELPS YOU TRACK YOUR PROGRESS ON THAT
PARTICULAR LIST BASED ON HOW MANY TASKS ARE MARKED COMPLETE.
• IN THE TIME-LINE MODE, THE USER CAN SELECT THE DEFAULT TIME PERIOD OF THE HOME-SCREEN AS PER
THEIR PREFERENCE,IN THE SETTINGS.

© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved

SCREEN NO. 1- HOME SCREEN-LIST MODE

Place the screenshot of the wireframe Screen-1

here

© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved

SCREEN NO. 1- HOME SCREEN- TIMELINE MODE

Place the screenshot of the wireframe Screen-1

here

© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved

 SCREEN NO. 2- TASK CREATION AND MODIFICATION

Here, the tasks are written in a checklist format, and we add tasks by simply clicking enter,and mark them
complete by simply touching on it, similar to the usual checklist format. To further edit the task, user has
to long-press on the given task and options to edit/delete category appears.Each of these inturn gives you
further options as shown above. This has been incorporated in the wireframing stage after finding this
more practical than the one followed in©the sketch
Copyright 2018. model.
UpGrad Education Pvt. Ltd. All rights reserved
 SCREEN NO. 3- REMINDER NOTIFICATION

The reminder notification is a small overlay on screen.The user felt that the icons were
placed too closeby and difficult to differentiate. Therefore, ahas been changed a bit. The
options remain the same- Done, Snooze button and calender option to look at the
schedule. On cicking on the overlay, the user is taken to the specific task page.
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
PROTOYPE SCREENS
SCREEN NO. 1- HOME SCREEN-LIST MODE

Place the screenshot of the wireframe Screen-1

here

© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved

SCREEN NO. 1- HOME SCREEN- TIMELINE MODE

Place the screenshot of the wireframe Screen-1

here

© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved

 SCREEN NO. 2- TASK CREATION AND MODIFICATION

Here, the tasks are written in a checklist format, and we add tasks by simply clicking enter,and mark them
complete by simply touching on it, similar to the usual checklist format. To further edit the task, user has
to long-press on the given task and options to edit/delete category appears.Each of these inturn gives you
further options as shown above. This has been incorporated in the wireframing stage after finding this
more practical than the one followed in the sketch model.
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
 SCREEN NO. 3- REMINDER NOTIFICATION

The reminder notification is a small overlay on screen.The user felt that the icons were
placed too closeby and difficult to differentiate. Therefore, the lyout has been changed a
bit. The options remain the same- Done, Snooze button and calender option to look at
the schedule. On cicking on the overlay, the user is taken to the specific task page.
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
 NAVIGATIONAL FLOW

Home page- Screen1 Task creation and modification page

• List mode • Edit
• Timeline mode • Migrate
• Change category
Flow 1

Reminder notification Task creation and Modification page

Flow 2 • Task page • Edit
• Migrate
• Change category

Reminder notification
Flow 3 Home Page- Timeline Mode
• Calender

Please note that login,emailID are options that will be available in the settings tab, and this
design focusses on the basic functionality, and the one-time-use features are considered to
be out of scope.
Link to prototype: https://marvelapp.com/66hc886
© 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©INCopyright
THESE TERMS ARE RESERVED.
2018. UpGrad Education Pvt. Ltd. All rights reserved