Assignment Paper Prototyping - WordPress.com...Assignment Instructions The subject of this...

AssignmentPaper Prototyping

Name: P V Manohar KiranEmail ID: [email protected]

Assignment Instructions

The subject of this assignment is wearable technology, an up and coming industry.

This assignment is intended to be a combination of a design challenge and a prototyping exercise. The emphasis is on hashing out a design on paper quickly and testing it, similar to what we saw in the video. The scope here is pretty wide and only a few details are specified. It's up to you to figure things out.

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

DoToday Task Management App

Requirements & Use Case

The DoToday App is positioned as catering to the up and coming tech influenced consumers who prefer to stay on course & track of their regular task.

Our model user is someone who takes pride in being in control of his daily & long term task, as he plans with rigour and executes with finesse.

The app can work standalone, however it also has a cross integration to support a smartwatch

to augment the solution.

Reminders –• setting up, • deferring, • marking as complete • deleting

Browse All Tasks –• view each task• navigate via categories• navigate based on time or

due date

Smart Watch App + Mobile App

Create & Edit Tasks –• Assign due date/time• Reset task description• Pool under categories

DoToday Task Management App

Initial Prototypes & Flow of Screens

The upcoming slides shall explain each screen for the respective platform specific app prototype, in detail.

The given links here are Marvel Prototypes to help you experience the entire solution & understand the Flow of the apps.

Mobile App Prototype

Smartwatch App Prototype

Please be advised, due to some common Logical Flow based constraints in designing a prototype on platforms like Marvel, you may have to exercise some discretion at your

end while assessing the aforementioned

Typing being a major constraint in the smartwatch, we have limited the input as voice based only

https://marvelapp.com/59e1d07

https://marvelapp.com/59110bb

DoToday Smartwatch App

Screen 1 : Reminder

The crown (top right button) on the watch is a function for navigating back & the lower button will get you to the main screen

This is how the Reminder shall pop onto the user’s watch whenever a task is due

User can perform following action on this:• Mark ‘Done’• Reschedule• Dismiss


Screen 2 : App Home


This is the home screen for the DoTodaySmartwatch app.

User can perform following actions on this:• Browse ‘My Tasks’ • Browse ‘My Timeline’ • Quick Launch ‘New Task’ creation


Screen 3 : My Tasks


This is the place to view/browse/navigate all the task categories.

User may also attempt to create ‘Custom Task Types’ from this screen.

Tapping on any of the Task Type would enable user to browse tasks under that task type.


Screen 4 : Browse Tasks by Task Type


Here the user can browse and create tasks under the category or Task Type listed on the top.

The interface is enabled for a scroll down to allow user to access the various task listed under the Task Type.

Tapping on a task would lead the user to the Task view.


Screen 5 : My Timeline


Navigate from home screen via the ‘My Timeline’ option to reach this screen where the user can choose which part of his timeline to view & thus browse tasks based on their urgency

User can view tasks that are due:• Today• Tomorrow• This Week• Later


Screen 6 : Browse Task by Due Date


Here the user can browse and create tasks based on when they are Due, i.e. Today, Tomorrow, etc.

The interface is enabled for a scroll down to allow user to access the various task listed under the Task Type.

Tapping on a task would lead the user to the Task view.


Screen 7 : View Task


This is the screen where users can view their entire task details.

Users can take following actions here:• Mark task as ‘Done’• Edit Task• Delete Task


Screen 8 : Edit Task


When a user chooses to edit a particular task, this screen allows him/her to choose between:

• Editing the Task Detail

• Updating the Due Date/Time


Screen 9 : Change Task


User would be allowed to change the task, using the voice over.

Change shall get registered once the user speaks the new task description


Screens 10, 11, 12 : Change Due Date/Time


When user chooses to edit or change the due date/time of a specific task, these screens help the user achieve the goal.

The screens are pretty self-explanatory


Screen 13 : New Task Type


When a user chooses to define and create a new Task Type to pool a different set of tasks, he/she taps on the + Add Type in screen 3 “ My Tasks” to navigate to this screen, where he can create a new Task Type i.e. Category.

The creation process is very similar to how a user edits his/her task description

DoToday Mobile App

Screen 1 : Reminder

The lower panel with ‘Back’ and ‘Home’ navigations for any mobile would work as they do by default

The reminder on the mobile version of the app, comes as small overlay on the active screen of the mobile.

It contain brief Task details, and allows user to:• Mark ‘Done’• Change Due Date/Time• Dismiss Task

DoToday Mobile App

Screen 2 : App Home >> My Tasks


This screen allows user to view/navigate to all tasks, pooled under Task Types.

Each task also has a brief note of its due date/time

• User can add Tasks directly under any type here• User can quick create a new task • User can create a custom Task Type • User tap on any task to navigate to the Task

details• User can navigate to the alternate tab – where

he/she can view task by their due date/time

DoToday Mobile App

Screen 3 : App Home >> My Timeline


This screen allows user to view/navigate to all tasks, pooled as Today, Tomorrow, etc. i.e. by Due Date Relevance.

Each task also has a brief note of its due date/time

• User can add Tasks directly based on Due Date range

• User can quick create a new task • User tap on any task to navigate to the Task

details• User can navigate to the alternate tab – where

he/she can view task by Task Type

DoToday Mobile App

Screen 4 : Task Detail


Here the user can view the Task and its details

User can understand:• which Task Type this fall under• And, what time the task is due for

User can perform quick actions like: • Edit task• mark as Done• Change due date/time• Dismiss• Delete task

DoToday Mobile App

Screen 5 : Task Edit


Here the user can edit the Task and its details

User edit task in two ways:• Using Voice• Using Keypad

Additionally user can also edit the due date/time, using the Remind Me button

DoToday Mobile App

Screen 6 : Change Task Due Date/Time


When user chooses to edit or change the due date/time of a specific task, these screens help the user achieve the goal.

There are multiple points in app user flow where the need change date/time arises, and this screen would come in for all such cases.

DoToday Mobile App



When the user chooses + Add New Type, so that he may add a new Task Type to the existing collection –this screen is the place that lets him do so.

The method is similar to that of Creating/Editing a Task

Navigate from: screen 2 - + Add New Type

Smartwatch App Prototype

User Feedback, Analysis & Prototype Iteration

The following slides would detail the findings of initial user feedback & present an alternative design based on the feedback received

Constraints, Feedback analysis & User Aha moments are covered in brief only

Screen 1 : Reminder

Feedback received from the user: In summary, User was confused with too many CTAs (call-to-action). The user questioned ‘X’ (meaning it was needless) and what the ‘timer’ icon implied. User was confused with bell at the top – and thought it was a snooze button. The interface needed simplicity and lesser CTAs, so I redesigned to include a Snooze option, instead of the Change Time/Date, reducing friction in action. The X was removed too. CTAs were simplified

Initial Prototype View Old Prototype

After Feedback View New Prototype


https://marvelapp.com/212g622


Screen 2 : App Home

Feedback received from the user: With earlier bell placement at top, users confused the + icon and did not use it for creating a new task. They asked for a Quick Create task button.I decided to give equal weightage to all actions, and easier access to Timeline & New Task creation





Screen 3 : My Tasks

Feedback received from the user: Users found the screen too cramped and could not differentiate between +Add New Type and all other Task Types easilyNeeded a clear demarcation for the action and the options, so redesigned accordingly.





Screen 4 : Browse Tasks by Task Type

Feedback received from the user:Users wished for more context on each task, and the ability to quickly clear/reprioritze task. Users complained that scrolling through such small screen space was inconvenient when they had too many task.

I changed the interface to a swipe left-right form, to enable access to various tasks under a Task Type. Added the DONE button to quick mark finished tasks, and also the New button allow new task creation.





Screen 5 : My Timeline

Feedback received from the user:Users loved the simplicity of this interface & commented that such design could be made more prominent.They were smiling and wanted to come to the screen more often, just to experience this.

Felt awesome to me





Screen 6 : Browse Task by Due Date

Feedback received from the user:Users has same feedback as for the earlier screen on Task Types. Similar experience has been created to ensure continuity and quicker user adoption to the app.

Note that this design allows me to show all task details, including due date/time in plain words. Users may find this more relevant that showing a Date in figures.





Screen 7 : View Task

Feedback received from the user:Users were confused with what the ‘BIN’ icon meant, and why they would want to delete a task, if it can be marked finished. They don’t seem to care!

Eliminated the Task detail page altogether, by inculcating the swipe right-left feature on task list. Editing a task is as simple as tapping on the Task itself, like it was before where user had to tap to view details.





Screen 8 : Edit Task

Feedback received from the user: Users questioned how can they set Task Type when creating a task. Users found the time icon misleading.

Redesigned to allow simpler choices, and more direct CTAs





Screen 9 : Change Task

Feedback received from the user: Users said often text speech is misunderstood by devices. How can one undo such things?

So, added the option to approve and redo the record action.





Screens 10, 11, 12 : Change Due Date/Time

Feedback received from the user: Users thought this was too long a process and for then coming back from each screen was exhausting. That was qute counter-intuitive to me, as I spent a lot of time to design this experience of date & time edit process.

Default Watch-based calendar and timer will pop now, for the time/date input. Seems very straight-forward now that I faced user flak. People would be more comfortable with the stock interface – so use when you can.






Feedback received from the user: Users had same opinion here as they had for task creation.So added the same functionality of recording, approving and redoing for the New Task Type creation too.





Mobile App Prototype

User Feedback, Analysis & Prototype Iteration

The following slides would detail the findings of initial user feedback & present an alternative design based on the feedback received

Constraints, Feedback analysis & User Aha moments are covered in brief only

Screen 1 : Reminder

Feedback received from the user: Users were same as the ones tested for smartwatch, so had the same complaint that icons were confusing. X was misleading.Users also wanted the ability to land on task, when they tapped on task Header detail.

Added the option to lead users to task directly when they tap on task header. Changed the icon and simplified the CTAs. Added the ability to quick snooze or set a custom time for the reminder.




https://marvelapp.com/59e4f87

Screen 2 : App Home >> My Tasks

Feedback received from the user: Users found the screen to be very organized and appreciated the brief detail on Task due period on each task.Users expressed desire to be able to quick mark as Done against any task.

Inculcated the option to tick off tasks, and quick mark them as done.





Screen 3 : App Home >> My Timeline

Feedback received from the user: Same feedback as for the My Tasks screen.

So included the ability to quick mark tasks as done





Screen 4 : Task Detail

Feedback received from the user: Users found the icons misleading earlier. Here again the complaint was why delete or dismiss a task.

Simplified the CTAs hence by adding textual details to CTAs, and reduced the actions not desired.





Screen 5 : Task Edit

Feedback received from the user: Users said not all tasks need reminders. So they wanted to save tasks without reminders too. Additionally, they wanted the option to add a Task Type to the task.

Included the CTAs for Task Type assignment, and saving a task without any details beyond the task description.





Screen 6 : Change Task Due Date/Time

Feedback received from the user: Users liked this interface to select Date and time. They especially loved the ability to toggle between today, tomorrow and next week.

No complaints, so retained everything.






Feedback received from the user: Users found it confusing how the Task Type would be set, since there was no button.Makes sense, and seems like a design flaw.

Inculcated a CTA to apply changes.





Additional Features Requested

Users asked for a few sensible and a lot many ‘not so feasible’ features. Here is a list of the ones which we should plan in product roadmap.

• Ability to assign tasks to friends or colleagues• Attach photos, location, email, etc. to task to increase context• Cross-integration from work/personal calendar to show upcoming calls,

appointments, etc.• Weekly productivity index –

something that shows how many tasks were executed and how often were the users snoozing (also, what type of tasks)

• Move tasks from one Task Type to Another• Ability to create sub-tasks• Assign priority to tasks, in addition to due date/time

We can proceed by including these in the Product Backlog to begin with

Assignment Paper Prototyping - WordPress.com...Assignment Instructions The subject of this...

Documents

Transcript of Assignment Paper Prototyping - WordPress.com...Assignment Instructions The subject of this...