�ݺ�ߣ

Assignment
Wireframing
Name: Vipul Gaur
Email ID: Vipul.gaur@gmail.com
Link To Wireframe: https://wireframepro.mockflow.com/view/D94ae6d760d8e1958a3a7699b34b424bf#/page/f720bb6e455843c097a402fb44de9b28

Assignment Instructions
Problem statement: In the previous session on ‘Introduction to
Prototyping’, you developed paper prototypes for. DoToday, a startup
working on a next-gen to-do list and task management app. Suppose the
app, based on those paper prototypes, was launched and received a
huge response from users. But 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.
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

Website Navigation Flow
 Do-Today application has been designed as single –page application
where can toggle between Office Board and Home Board.
 Application can be designed to give a Omni channel experience
where all actions will be in sync. across all devises. Sync. frequency
can be configured from settings section.
 User can configure work and personal email addresses in settings
section and reminders will be triggered to respective email addresses
based on the origin of task.
 For ease of use, tasks have been pre-grouped into today, Week and
upcoming (Beyond Weeks time). User can navigate through these
boards by clicking these tabs at the top. ( This flow has not been
covered due to lack of time)
 Post login, user is taken to office board by default, however this
setting can be changed using settings section. ( this workflow has not
been covered)
Key Consideration while designing
Hyperlinks have been embedded on screens to cover the workflows and
to toggle back to respective boards.

Screen No. 1 ( DoToday Home Page)
Icons Legend
Settings
Reminders
Office Board
Home Board
Filter
To-Do-List
Linked Task
Contains Sub-task or notes
Notes
Single Note
Email Task
Details
Expand
Appointments
 Search bar will let the user search all the items across home
as well as office board

Screen No. 2 (Reminders Layover)
 “Clear All” deletes all the
reminders
 Cross button removes 1 item for
the reminder section.
 Clicking on more details icon open
the item in layover which
triggered the reminder.

Screen No. 3 (To - Do- List - Item Detail)
 User can change the due date and
time.
 New sub-task or notes can be
added from the window.
 Same task can be shared over
email or SMS with users.
 Changes made will be saved by
clicking update button.
 Done will mark the task
completed.
 Delete will remove the item from
the list.

Screen No. 3 (To-Do-List - Share Task)
 When sharing application will convert the
item details into a short URL, similar to
layover and will include it in email or SMS
text.
 Based on the selection of email or SMS text
box will validate the input.

Screen No. 3 (To - Do- List Edit Linked Items)
 Clicking of edit next to linked item option will
allow users to update the information.
 Clicking of delete icon will de-link and
remove the linked item from task and from
the original pool of to-do list or notes.
 In case user will try to remove the linked
item from main menu, system will confirm
from user to before removing the item from
the list.

Screen No. 3 (To-Do-List - Completed Task view)
 Already completed item can ne re-opened.
 Related task and notes can be added to the
completed task.
 Linked task can be open even if parent task is
complete. User has to manually reopen the
existing task.
 Clicking delete will remove the completed
task from the list.

Screen No. 4 (Appointments Expanded View)
 User can expand any of the containers to
view all items within a category.
 By default system shows all the items.
 System will trigger an alert 15 min before any
appointment. This duration can be controlled
from settings section.

Screen No. 4 (Appointments Expanded View - Filters)
 User can then use available filters to view
pending or completed items in the complete
list.
 Edit and share features will behave in similar
way as explained in earlier slides.

Screen No. 5 (Email Tasks – Expanded)
 Email tasks are created by the system
automatically when user forwards any email.
automatically when user forwards any email
to either work.dotoday@dotoday.com or
home.dotoday@dotoay.com from his
preconfigured emails in settings.
 User can view the email by clicking view
email button.
 User can filter the tasks based on time at
which they were created.

Screen No. 5 (Email Task - Email Content)
automatically when user forwards any email
to either work.dotoday@dotoday.com or
home.dotoday@dotoay.com from his
preconfigured emails in settings.

Screen No. 5 (Email Tasks – Filters)
 By default all tasks created are selected.
 User can filter the results based on task
crated today, previous week or older tasks.
 Same filter options are available for notes as
well.

Screen No. 6 (New Notes Layover)
 User can add a new note by clicking the “+”
icon within notes section.
 User will have the option of using a HTML
editor for better user experience while
creating notes.
 Clicking of delete will remove existing note
form the list.

Screen No. 7 (Home Section - Main screen)
 User can view the home board by selecting
the home icon at the top.
 In addition to the features described earlier,
home section will have a custom list for
grocery.
 User can add a new item in the list clicking
the + button within grocery section.

Screen No. 7 (Home Section – New Grocery Item)
 User can add item and the quantity required
while adding a item in a grocery.
 Quantity is not a mandatory field.

�ݺ�ߣ

Wireframes do today

Recommended

More Related Content

What's hot (10)

Similar to Wireframes do today (20)

Recently uploaded (20)

Wireframes do today