SlideShare a Scribd company logo
1 of 30
Name: Raghavendra Pratap Jujjavarapu
Email ID: ragssets@yahoo.co.in
Assignment on
Wireframing &
Prototyping
© 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
© 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.
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Launch Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Home Page Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Creation of New Task Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of attachment icon Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Addition of PDF details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Location details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Meeting details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Email details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Links details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Document details Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Task Saved Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Task Deletion Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Manage Existing Tasks Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Urgent & Important Tasks Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Task Summary Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Urgent & Not Important Tasks Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Task Summary Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Important & Not Urgent Tasks Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Task Summary Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© 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
© 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
© 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
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Click of Task Summary Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
About Us Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© Copyright 2018. UpGrad Education Pvt. Ltd. All rights reserved
Contact Us Screen
Put the link to wireframe: https://whimsical.com/LnJ2PFynChtQZQ5K72ZeBD#7YNFXnKbYhoCaS3o8p52f
© 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
© 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.

More Related Content

Similar to Wireframe prototype - Mockups

Intro to Web Design 6e Chapter 3
Intro to Web Design 6e Chapter 3 Intro to Web Design 6e Chapter 3
Intro to Web Design 6e Chapter 3 Steve Guinan
 
Wireframe & Prototype - Task Management
Wireframe & Prototype - Task ManagementWireframe & Prototype - Task Management
Wireframe & Prototype - Task ManagementSuraj Rao
 
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017Alen Leit
 
What is Django | Django Tutorial for Beginners | Python Django Training | Edu...
What is Django | Django Tutorial for Beginners | Python Django Training | Edu...What is Django | Django Tutorial for Beginners | Python Django Training | Edu...
What is Django | Django Tutorial for Beginners | Python Django Training | Edu...Edureka!
 
Python Django tutorial | Getting Started With Django | Web Development With D...
Python Django tutorial | Getting Started With Django | Web Development With D...Python Django tutorial | Getting Started With Django | Web Development With D...
Python Django tutorial | Getting Started With Django | Web Development With D...Edureka!
 
How do we work with customers on Big Data / ML / Analytics Projects using Scr...
How do we work with customers on Big Data / ML / Analytics Projects using Scr...How do we work with customers on Big Data / ML / Analytics Projects using Scr...
How do we work with customers on Big Data / ML / Analytics Projects using Scr...GetInData
 
Activity 5 a little scratch and squeak
Activity 5 a little scratch and squeakActivity 5 a little scratch and squeak
Activity 5 a little scratch and squeakPhilip Spalding
 
Automating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend KeynoteAutomating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend KeynoteChristian Heilmann
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Christian Heilmann
 
Take groovy to places you never thought were possible
Take groovy to places you never thought were possibleTake groovy to places you never thought were possible
Take groovy to places you never thought were possibleKyle Goodfriend
 
How to boost your workflow, or git rebase for designers
How to boost your workflow, or git rebase for designersHow to boost your workflow, or git rebase for designers
How to boost your workflow, or git rebase for designersAnton Parkhomenko
 
Progressive Web Apps – the return of the web?
Progressive Web Apps – the return of the web?Progressive Web Apps – the return of the web?
Progressive Web Apps – the return of the web?Christian Heilmann
 
INTERNSHIP PPT - INFOLABZ.pptx
INTERNSHIP PPT - INFOLABZ.pptxINTERNSHIP PPT - INFOLABZ.pptx
INTERNSHIP PPT - INFOLABZ.pptxDevChaudhari15
 
IRJET- Tour and Travels
IRJET- Tour and TravelsIRJET- Tour and Travels
IRJET- Tour and TravelsIRJET Journal
 

Similar to Wireframe prototype - Mockups (20)

Sketching - DoToday App
Sketching - DoToday AppSketching - DoToday App
Sketching - DoToday App
 
Intro to Web Design 6e Chapter 3
Intro to Web Design 6e Chapter 3 Intro to Web Design 6e Chapter 3
Intro to Web Design 6e Chapter 3
 
Wireframe & Prototype - Task Management
Wireframe & Prototype - Task ManagementWireframe & Prototype - Task Management
Wireframe & Prototype - Task Management
 
Sketch
SketchSketch
Sketch
 
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
 
What is Django | Django Tutorial for Beginners | Python Django Training | Edu...
What is Django | Django Tutorial for Beginners | Python Django Training | Edu...What is Django | Django Tutorial for Beginners | Python Django Training | Edu...
What is Django | Django Tutorial for Beginners | Python Django Training | Edu...
 
Python Django tutorial | Getting Started With Django | Web Development With D...
Python Django tutorial | Getting Started With Django | Web Development With D...Python Django tutorial | Getting Started With Django | Web Development With D...
Python Django tutorial | Getting Started With Django | Web Development With D...
 
How do we work with customers on Big Data / ML / Analytics Projects using Scr...
How do we work with customers on Big Data / ML / Analytics Projects using Scr...How do we work with customers on Big Data / ML / Analytics Projects using Scr...
How do we work with customers on Big Data / ML / Analytics Projects using Scr...
 
LR2 (1).pptx
LR2 (1).pptxLR2 (1).pptx
LR2 (1).pptx
 
Activity 5 a little scratch and squeak
Activity 5 a little scratch and squeakActivity 5 a little scratch and squeak
Activity 5 a little scratch and squeak
 
Automating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend KeynoteAutomating all the wrong things - You Gotta Love Frontend Keynote
Automating all the wrong things - You Gotta Love Frontend Keynote
 
Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017Progressive Web Apps - Goto Chicago 2017
Progressive Web Apps - Goto Chicago 2017
 
Take groovy to places you never thought were possible
Take groovy to places you never thought were possibleTake groovy to places you never thought were possible
Take groovy to places you never thought were possible
 
How to boost your workflow, or git rebase for designers
How to boost your workflow, or git rebase for designersHow to boost your workflow, or git rebase for designers
How to boost your workflow, or git rebase for designers
 
Cross browser testing
Cross browser testingCross browser testing
Cross browser testing
 
Progressive Web Apps – the return of the web?
Progressive Web Apps – the return of the web?Progressive Web Apps – the return of the web?
Progressive Web Apps – the return of the web?
 
INTERNSHIP PPT - INFOLABZ.pptx
INTERNSHIP PPT - INFOLABZ.pptxINTERNSHIP PPT - INFOLABZ.pptx
INTERNSHIP PPT - INFOLABZ.pptx
 
216170316007.pptx
216170316007.pptx216170316007.pptx
216170316007.pptx
 
IRJET- Tour and Travels
IRJET- Tour and TravelsIRJET- Tour and Travels
IRJET- Tour and Travels
 
Resume
ResumeResume
Resume
 

Recently uploaded

Healthcare Feb. & Mar. Healthcare Newsletter
Healthcare Feb. & Mar. Healthcare NewsletterHealthcare Feb. & Mar. Healthcare Newsletter
Healthcare Feb. & Mar. Healthcare NewsletterJamesConcepcion7
 
Darshan Hiranandani (Son of Niranjan Hiranandani).pdf
Darshan Hiranandani (Son of Niranjan Hiranandani).pdfDarshan Hiranandani (Son of Niranjan Hiranandani).pdf
Darshan Hiranandani (Son of Niranjan Hiranandani).pdfShashank Mehta
 
1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdf1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdfShaun Heinrichs
 
How to Conduct a Service Gap Analysis for Your Business
How to Conduct a Service Gap Analysis for Your BusinessHow to Conduct a Service Gap Analysis for Your Business
How to Conduct a Service Gap Analysis for Your BusinessHelp Desk Migration
 
Welding Electrode Making Machine By Deccan Dynamics
Welding Electrode Making Machine By Deccan DynamicsWelding Electrode Making Machine By Deccan Dynamics
Welding Electrode Making Machine By Deccan DynamicsIndiaMART InterMESH Limited
 
Features of a Call Recorder Spy App for Android.pdf
Features of a Call Recorder Spy App for Android.pdfFeatures of a Call Recorder Spy App for Android.pdf
Features of a Call Recorder Spy App for Android.pdfOne Monitar
 
EUDR Info Meeting Ethiopian coffee exporters
EUDR Info Meeting Ethiopian coffee exportersEUDR Info Meeting Ethiopian coffee exporters
EUDR Info Meeting Ethiopian coffee exportersPeter Horsten
 
Technical Leaders - Working with the Management Team
Technical Leaders - Working with the Management TeamTechnical Leaders - Working with the Management Team
Technical Leaders - Working with the Management TeamArik Fletcher
 
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...ssuserf63bd7
 
Jewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource CentreJewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource CentreNZSG
 
20200128 Ethical by Design - Whitepaper.pdf
20200128 Ethical by Design - Whitepaper.pdf20200128 Ethical by Design - Whitepaper.pdf
20200128 Ethical by Design - Whitepaper.pdfChris Skinner
 
How do I Check My Health Issues in Astrology.pdf
How do I Check My Health Issues in Astrology.pdfHow do I Check My Health Issues in Astrology.pdf
How do I Check My Health Issues in Astrology.pdfshubhamaapkikismat
 
Implementing Exponential Accelerators.pptx
Implementing Exponential Accelerators.pptxImplementing Exponential Accelerators.pptx
Implementing Exponential Accelerators.pptxRich Reba
 
Cyber Security Training in Office Environment
Cyber Security Training in Office EnvironmentCyber Security Training in Office Environment
Cyber Security Training in Office Environmentelijahj01012
 
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring CapabilitiesOnemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring CapabilitiesOne Monitar
 
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdf
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdfGUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdf
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdfDanny Diep To
 
Planetary and Vedic Yagyas Bring Positive Impacts in Life
Planetary and Vedic Yagyas Bring Positive Impacts in LifePlanetary and Vedic Yagyas Bring Positive Impacts in Life
Planetary and Vedic Yagyas Bring Positive Impacts in LifeBhavana Pujan Kendra
 
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxGo for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxRakhi Bazaar
 
Driving Business Impact for PMs with Jon Harmer
Driving Business Impact for PMs with Jon HarmerDriving Business Impact for PMs with Jon Harmer
Driving Business Impact for PMs with Jon HarmerAggregage
 

Recently uploaded (20)

Authentically Social - presented by Corey Perlman
Authentically Social - presented by Corey PerlmanAuthentically Social - presented by Corey Perlman
Authentically Social - presented by Corey Perlman
 
Healthcare Feb. & Mar. Healthcare Newsletter
Healthcare Feb. & Mar. Healthcare NewsletterHealthcare Feb. & Mar. Healthcare Newsletter
Healthcare Feb. & Mar. Healthcare Newsletter
 
Darshan Hiranandani (Son of Niranjan Hiranandani).pdf
Darshan Hiranandani (Son of Niranjan Hiranandani).pdfDarshan Hiranandani (Son of Niranjan Hiranandani).pdf
Darshan Hiranandani (Son of Niranjan Hiranandani).pdf
 
1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdf1911 Gold Corporate Presentation Apr 2024.pdf
1911 Gold Corporate Presentation Apr 2024.pdf
 
How to Conduct a Service Gap Analysis for Your Business
How to Conduct a Service Gap Analysis for Your BusinessHow to Conduct a Service Gap Analysis for Your Business
How to Conduct a Service Gap Analysis for Your Business
 
Welding Electrode Making Machine By Deccan Dynamics
Welding Electrode Making Machine By Deccan DynamicsWelding Electrode Making Machine By Deccan Dynamics
Welding Electrode Making Machine By Deccan Dynamics
 
Features of a Call Recorder Spy App for Android.pdf
Features of a Call Recorder Spy App for Android.pdfFeatures of a Call Recorder Spy App for Android.pdf
Features of a Call Recorder Spy App for Android.pdf
 
EUDR Info Meeting Ethiopian coffee exporters
EUDR Info Meeting Ethiopian coffee exportersEUDR Info Meeting Ethiopian coffee exporters
EUDR Info Meeting Ethiopian coffee exporters
 
Technical Leaders - Working with the Management Team
Technical Leaders - Working with the Management TeamTechnical Leaders - Working with the Management Team
Technical Leaders - Working with the Management Team
 
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
Intermediate Accounting, Volume 2, 13th Canadian Edition by Donald E. Kieso t...
 
Jewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource CentreJewish Resources in the Family Resource Centre
Jewish Resources in the Family Resource Centre
 
20200128 Ethical by Design - Whitepaper.pdf
20200128 Ethical by Design - Whitepaper.pdf20200128 Ethical by Design - Whitepaper.pdf
20200128 Ethical by Design - Whitepaper.pdf
 
How do I Check My Health Issues in Astrology.pdf
How do I Check My Health Issues in Astrology.pdfHow do I Check My Health Issues in Astrology.pdf
How do I Check My Health Issues in Astrology.pdf
 
Implementing Exponential Accelerators.pptx
Implementing Exponential Accelerators.pptxImplementing Exponential Accelerators.pptx
Implementing Exponential Accelerators.pptx
 
Cyber Security Training in Office Environment
Cyber Security Training in Office EnvironmentCyber Security Training in Office Environment
Cyber Security Training in Office Environment
 
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring CapabilitiesOnemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
Onemonitar Android Spy App Features: Explore Advanced Monitoring Capabilities
 
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdf
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdfGUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdf
GUIDELINES ON USEFUL FORMS IN FREIGHT FORWARDING (F) Danny Diep Toh MBA.pdf
 
Planetary and Vedic Yagyas Bring Positive Impacts in Life
Planetary and Vedic Yagyas Bring Positive Impacts in LifePlanetary and Vedic Yagyas Bring Positive Impacts in Life
Planetary and Vedic Yagyas Bring Positive Impacts in Life
 
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptxGo for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
Go for Rakhi Bazaar and Pick the Latest Bhaiya Bhabhi Rakhi.pptx
 
Driving Business Impact for PMs with Jon Harmer
Driving Business Impact for PMs with Jon HarmerDriving Business Impact for PMs with Jon Harmer
Driving Business Impact for PMs with Jon Harmer
 

Wireframe prototype - Mockups

  • 1. Name: Raghavendra Pratap Jujjavarapu Email ID: ragssets@yahoo.co.in Assignment on Wireframing & Prototyping
  • 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.