Contenu connexe
Similaire à Wireframe prototype - Mockups (20)
Wireframe prototype - Mockups
- 2. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
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. Listing down functional requirements for all use cases and choose the best solution
2. Create the required wireframes and place the screenshot of each screen on relevant slides
3. Prepare a slide showing the navigational flow for your wireframes
4. Create the prototype
Feel free to add more slides as needed.
Assignment Instructions
- 3. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Functional Requirements
• 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. (Best Possible Solution)
• Provision of Icons for marking the task as completed.
• Provision of about details and contact details in the webpage as a part of
information architecture.
• Provision of embedded sticky note that will be incorporated in the Task card for
user to take notes.
• Provision of Icons for a task as a pop-up (overlay)on 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.
- 4. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Launch Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 5. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Home Page Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 6. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Creation of New Task Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 7. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of attachment icon Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 8. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Addition of PDF details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 9. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Location details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 10. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Meeting details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 11. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Email details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 12. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Links details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 13. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Document details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 14. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Task Saved Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 15. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Task Deletion Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 16. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Manage Existing Tasks Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 17. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Urgent & Important Tasks Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 18. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Task Summary Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 19. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Urgent & Not Important Tasks Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 20. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Task Summary Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 21. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Important & Not Urgent Tasks Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 22. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Task Summary Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 23. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Not Important & Not Urgent Tasks Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 24. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Generic Task Completion Screen (After Clicking Tick icon for any task)
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 25. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Generic Task Deletion Screen (After Clicking trash icon for any task)
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 26. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Task Summary Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 27. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
About Us Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 28. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Contact Us Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
- 29. © Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Navigational flow
Note: For more details on the Navigation flow visit (https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f)
Link to prototype: https://marvelapp.com/106e1f84
- 30. © 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.