Report of Design

GUJARAT TECHNOLOGICAL UNIVERSITY
Chandkheda, Ahmedabad
Affiliated
SVIT-Vasad
A Project Report On
ONLINE WEB CONFRENECE
Under subject of DESIGN ENGINEERING – I
B. E. II,
Semester – III (INFORMATION TECHNOLOGY Branch)
Submitted by:
SR NO Name Enrolment No.
1 Chauhan Vishal 150413116004
2 Savant Sukriti 150413116021
3 Shah Rishabh 150413116022
4 Soni Pruthvi 150413116025
MR. Manthan Patel

(Faculty Guide)
Prof. Nisha V. Shah
(Head of Department)
Academic Year
(2015-2016)
ONLINE WEB CONFERENCE
CONTENTS
1. Introduction :2
2. Empathy Mapping :3
3. Ideation Canvas :6
4. Production Development Canvas :9
5. Mind Mapping Canvas : 14
6. AEIOU Canvas : 15
7. Diagrams
 Sequence Diagram
 E-R Diagram
 Class Diagram
 Activity Diagram
8. Conclusion : 18
1
1. INTRODUCTION
WHAT IS DESIGN ENGINEERING
Design Engineering is a general term that covers multiple engineering

disciplines including electrical, mechanical, chemical engineer, aeronautical engineer, civil,
Computer Engineering, Information Technology and structural/building/architectural
engineers.
The uniting concept is a focus on applying the 'engineering design process, in

which engineers develop new products or processes with a primary emphasis on functional
utility.
While industrial designers may be responsible for the conceptual aesthetic and
ergonomic aspects of a design, the design engineer usually works with a team of engineers
and other designers to develop conceptual and detailed designs. He may work with industrial
designers and marketers to develop the product concept and specifications, and may direct
the design effort
DESIGN THINKING PROCESS
 Find our Goal

 Evaluation of Goal
 Generate Proposals
 Evaluation of Proposals
 Improvements
2
2. EMPATHY MAPPING CANVAS
The user section of this canvas includes the Customers.
Figure 1 :( USERS, STAKEHOLDERS OF EMPATHY CANVAS)
The stakeholders are the people who are benefitted from the inception of our online web
conference like business man, doctor, travellers, working persons, student, politicians and
teachers.
Figure 2 :( USERS, STAKEHOLDERS AND ACTIVITES OF

EMPATHY CANVAS)
3
The activities section includes the activities carried out by the users and stakeholders together
perform cooking, eating ,reading, listening music, travelling, operations, official meetings
,driving, account handling, booking orders, teaching ,chatting with friends, dialling calls,
receiving calls
STORY BOARDING
HAPPY
HILL STATION
Ravi was at Hill station with his family. His grandfather health started going worst so
he call his family doctor and got his grandfather first aid help till Ravi's family return back
home.
BUSINESS DEAL
Rakesh is a business men, he wants to deal with the foreign investor but he is not able to go to
their company but he made the deal with the help of web conferencing for his new project.
Figure 3 :( STORIES OF EMPATHY CANVAS)
4
SAD
PROBLEM USING SKYPE
over the last 5 to 6 months someone hacked my Skype account something went with Skype
server where my skype account was been used by someone from other country but they had
cannot over it more ,so I had the help of customer support but nothing was solved.
PROBLEM USING IMO
Ramesh was using IMO a video calling app for android since last few weeks in which his
contact was been copied to other persons phone who was in his IMO .This problem is not been
solved even when we Complained to customer care .
5
3. IDEATION CANVAS
The set of the people included in this idea are Student, Business man, Doctors, Working
Persons, Politician, Techer, Travellers, Net Provider, Customer Care Support, S/W supporter.
Figure 4: (IDEATION CANVAS)
The activities carried out are:
Reading Working , Cooking ,Travelling , Photography ,Listing music, receiving calls

,dialling calls, teaching , chatting with friends, Account handling, Official Meeting ,
Receiving orders.
6
Figure 5 :( ACTIVITIES OF IDEATION CANVAS)
The situations, context, location mentioned are as follows
Student, living in hostel at Vasad.
Doctors, Saving Life at hospital in Baroda.
Traveller, receiving order at Anand.
7
Figure 6: (SITUATION, CONTEXT AND LOCATION OF IDEATION

CANVAS)
Figure 7: (PROPS AND SOLUTIONS OF IDEATION CANVAS)
Suppose if the prop is laptop then there might be a situation of laptop charging.
Similarly, if mobile phones is used then it should be connected on net provider servers.
The computer must be connected to the modem of the net provider.
8
4. PRODUCT DEVELOPMENT CANVAS
Product development canvas includes the purpose of our web application, peoples associated
with it. It also shows the experience, features, and components useful for our web application.
Through this canvas we came to know about our drawbacks, we worked on that and
redesigned it.
Figure 8: (PRODUCTION CANVAS)
The section of people covers the individuals who will be working on the web application and
those who own the web application and are responsible for the safety and security of the
application. Peoples associated with our web application are business man, doctor, travellers,
working persons, student, politicians and teachers.
9
Figure 9: (PEOPLE OF PRODUCTION CANVAS)
The product experience shows what the customer feels when he accesses the website which
includes contact sharing, video calling and data usage.
10
Figure 10: (PRODUCT EXPERIENCE AND FUNCTIONS OF

PRODUCTION CANVAS)
The product function section includes the functions video calling, sms, voice calling
synchronizing phonebook, video sharing, file sharing.
Figure 11: (PRODUCT FEATURES OF PRODUCTION CANVAS)
The product features section involves the details of customers, their home branch, and account
information. It includes the special section enquiry blog.
The component section comprises of the following components computers, laptops, smart
phones, modem, router, laptop charger.
11
Figure 12: (COMPONENT OF PRODUCTION CANVAS)
The customer revalidation section includes the review of the customer using the website.
Here is what our customer thinks about the site.
They think that it has Easy Working and Handling. It includes the concept of authentication,
authorisation, integrity and security. The main part of customer revalidation is customer’s
feedback.
12
Figure 13: (CUSTOMER REVALIDATION OF PRODUCTION

CANVAS)
Our Product was retained by the department.
Figure 14: (REJECT, REDESIGN, RETAIN OF PRODUCTION

CANVAS)
13
9. MIND MAPPING CANVAS
Figure 15: (MIND MAPPING)
The mind mapping canvas is the summary of all the canvases. This canvas includes the
brainstorming part. We have made this canvas in the form of tree. As root is one of the main
part of tree, our ideas develop from the roots (Brainstorming).
It includes the elements object, interaction, features, users, activity, and environment.
14
10. AEIOU SUMMARY
Figure 16: (AEIOU SUMMARY CANVAS)
This is the summary of all the canvases. Here in this canvas,
A stands for Activities.
E stands for Environment.
I stands for Interactions.
O stands for Objects.
U stands for Users.
Activities include the following actions taking place on our web application.
Following activities like Reading Working , Cooking ,Travelling , Photography ,Listing music,
receiving calls ,dialling calls, teaching , chatting with friends, Account handling, Official
Meeting , Receiving orders etc. takes place.
Environment includes Unknown, cloudy, humidity, emergency and sunny.
Interactions include the one on one interaction between student and teacher, doctor and patient,
businessmen and client.
15
Objects include the Laptops, computers, smartphones and modem and laptop chargers.
Users are the business man, doctor, travellers, working persons, student, politicians and
teachers.
16
SYSTEM DESIGN:
1. E-R DIAGRAM:
 An entity-relationship model is an abstract and conceptual representation of data.
Entity- relationship modelling is a database modelling method, used to produce a
type of conceptual schema or somatic data model of a system, often a relational
database, and its requirements in top-down fashion. Diagrams created by this
process are called entity-relationship diagrams, ER diagrams, or ERDs. The
primary purpose of the ERD is to represent data objects and their relationships.
 ENTITY: An entity may be defined as a thing which is recognized as being
capable of an independent existence and which can be uniquely identified. By
composite information, we mean something that has a number of different
properties or attributes.
 ATTRIBUTES: Attributes define the properties of a data object and take on one
of three different characteristics. They can be used to name an instance of the data
object, describe the instance, or make reference to another instance in another table.
 RELATIONSHIP: A relationship captures how two or more entities are related to
one another.
 CARDINALITY: The data model must be capable of representing the number of
occurrences of objects in a given relationship. The cardinality of an object-
relationship pair are:
 ONE-TO-ONE (1:1): An occurrence of object ‘A’ can relate to one and only
one occurrence of object ‘B‘.
 ONE-TO-MANY (1: N):One occurrence of object ‘A‘ can relate to one or
many occurrences of object ‘B‘but an occurrence of ‘B‘ can relate to only one
occurrence of ‘A‘.
 MANY-TO-MANY (M: N): An occurrence of object ‘A’ can relate to one or
more occurrences of ‘B’. Cardinality defines ―”the maximum number of
object relationships that can participate in a relationship”.
17
2. ACTIVITY DIAGRAM:
 An activity diagram is a special kind of diagram that shows the flow from activity
to activity within a system. Activity diagrams address the dynamic view of a system.
They are especially important in modelling the function of a system and emphasize
the flow of control among objects. An activity is an ongoing monatomic execution
within a state
 Machine. Activities ultimately result in some action that is made up of executable
atomic computations that result in a change in state of the system or a return of a
value.
ACTIVITY DIAGRAM COMPONENTS:
 ACTIVITY STATES AND ACTION STATES: Action states are executable
atomic computations. They are the states of a system each representing the
execution of an action. Action states are atomic i.e., events may occur but the
work of the action state is not interrupted. Activity states are not atomic i.e.,
they may be interrupted and they take some time to complete. An action state
is a special case of an activity state.
 TRANSITIONS: They represent the path from one action or activity state to
the next action or activity state. It is denoted by a simple directed line.
 OBJECTS: Objects can also be involved in the flow of control associated with
an activity diagram. Not only the flow of an object through the activity
diagram, but how its role, state and attribute values change can also be
depicted.
18
Online Web Conference
Log In
User Registration
and Assign UID And Registration
PWD
Register User
User Account
Send Request Call Meassage
If Only Visitor
Account
Managment
Log Out
19
3. USE CASE DIAGRAM:
 A Use Case Diagram visually represents what happens when an actor interacts
with a system. Its purpose is to present a graphical overview of the functionality
provided by a system in terms of actors, their goals (represented as use cases), and
any dependencies between those use cases.
 The main purpose of the use case diagram is to show what system functions are
performed for which actor.
 ACTOR: An actor may be a person, machine or an information system that is
external to system model but interacts with it in some way.
 USE CASE: It describes the sequence of interactions between the actors and the
system.
 ARROW: Shows the relationship between the actors and use case and/or between
the use cases.
20
Online Web Conference
Open
Register/New User
Fill Up FOrm
Creat a password Register

User
UID-PWD
New User
OPen contect list
Call /Message/file tranfer/share a contect
Manage a Account
Admin
charge as per use
Manage a database
Log Out
4. SEQUENCE DIAGRAM:
21
 A sequence diagram in a Unified Modelling Language (UML) is a kind of

interaction diagram that shows how processes operate with one another and in what
order. It is a construct of a Message Sequence Chart. A sequence diagram shows
object interactions arranged in time sequence.
 It depicts the objects and classes involved in the scenario and the sequence of
messages exchanged between the objects needed to carry out the functionality of
the scenario. Sequence diagrams typically are associated with use case realizations
in the Logical View of the system under development.
 Sequence diagrams are sometimes called event diagrams, event scenarios, and
timing diagrams.
THE PURPOSE OF DIAGRAM:

 The sequence diagram is used primarily to show the interactions between objects
in the sequential order that those interactions occur. Much like the class diagram,
developers typically think sequence diagrams were meant exclusively for them.
However, an organization's business staff can find sequence diagrams useful to
communicate how the business currently works by showing how various business
objects interact. Besides documenting an organization's current affairs, a business-
level sequence diagram can be used as a requirements document to communicate
requirements for a future system implementation. During the requirements phase
of a project, analysts can take use cases to the next level by providing a more formal
level of refinement. When that occurs, use cases are often refined into one or more
sequence diagrams.
 One of the primary uses of sequence diagrams is in the transition from requirements
expressed as use cases to the next and more formal level of refinement. Use cases
are often refined into one or more sequence diagrams. In addition to their use in
designing new systems, sequence diagrams can be used to document how objects
in an existing (call it "legacy") system currently interact. This documentation is
very useful when transitioning a system to another person or organization.
22
Register OWC
Visitor Receiver Admin Server
user System
Registration
Upadte Database
Assign UID & PWD
LogIn
Verify Register User
Display Home Page
User is Online
check Receiver is Online or Offline
Receiver Status
Receiver status to user
Perform an Action(Send Request )
Accept or Reject the Reqest and Update the Database
Request is Accepted or Rejected (to User)
Communication
Account Managment
Upadte Specific User Database
User Logout
Session Closed
Register User is Offline
Admin LogIn
Display Admin specific DataPage
Manage the server(Set Up Accounts)
Update The Changes
Successfully Updated Message
Admin LogOut
X X X X X X
5. CLASS DIGRAM:
23
 Class diagrams are the most popular UML diagrams used for construction of software
applications. So it is very important to learn the drawing procedure of class diagram.
 Class diagrams have lot of properties to consider while drawing but here the diagram
will be considered from a top level view.
 Class diagram is basically a graphical representation of the static view of the system
and represents different aspects of the application. So a collection of class diagrams
represent the whole system.
 The following points should be remembered while drawing a class diagram:
 The name of the class diagram should be meaningful to describe the aspect of the
system.
 Each element and their relationships should be identified in advance.
 Responsibility (attributes and methods) of each class should be clearly identified.
 For each class minimum number of properties should be specified. Because

unnecessary properties will make the diagram complicated.
 Use notes whenever required to describe some aspect of the diagram. Because at the
end of the drawing it should be understandable to the developer/coder.
 Finally, before making the final version, the diagram should be drawn on plain paper
and rework as many times as possible to make it correct.
 The purpose of the class diagram is to model the static view of an application. The
class diagrams are the only diagrams which can be directly mapped with object
oriented languages and thus widely used at the time of construction.
 The UML diagrams like activity diagram, sequence diagram can only give the
sequence flow of the application but class diagram is a bit different. So it is the most
popular UML diagram in the coder community.
24
Register User
Visitor
UID:Char 1* 1*
PWD:char
LogIn()
Communication() Check_Website()
Account_Managment() Registration()
1*
1*
Receiver System
Admin
* 1
ReceiverUID:Char 1 1*
ReceiverPWD:char Admin_UID:Char
Assign_Detail() Admin_PWD:Char
LogIn()
Verify_User()
PerformActionOnRequest() Admin_Login()
CheckReceiver's_Status()
Communication() Setup_Account()
Update_DB()
Account_Managment() Update_DB()
Session_Closed()
ADmin_Logout()
1* -memberName
1 1*
Server
UID:Char
PWD:char
Update_DB()
1
CheckReceiverStaus() 1
Admin_DB()
Communication()
25
CONCLUSION:
Thus, we learnt a lot from this activity and it proved to be

a great brainstorming. We also learned of how to work in
the team, which made us learn about the new things in the
designing canvases.
26

Report of Design

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Report of Design

Uploaded by

Copyright:

Available Formats

GUJARAT TECHNOLOGICAL UNIVERSITY

MR. Manthan Patel

Design Engineering is a general term that covers multiple engineering

The uniting concept is a focus on applying the 'engineering design process, in

DESIGN THINKING PROCESS

 Find our Goal

Figure 1 :( USERS, STAKEHOLDERS OF EMPATHY CANVAS)

Figure 2 :( USERS, STAKEHOLDERS AND ACTIVITES OF

Figure 3 :( STORIES OF EMPATHY CANVAS)

PROBLEM USING SKYPE

PROBLEM USING IMO

Figure 4: (IDEATION CANVAS)

The activities carried out are:

Reading Working , Cooking ,Travelling , Photography ,Listing music, receiving calls

Figure 5 :( ACTIVITIES OF IDEATION CANVAS)

The situations, context, location mentioned are as follows

Student, living in hostel at Vasad.

Doctors, Saving Life at hospital in Baroda.

Traveller, receiving order at Anand.

Figure 6: (SITUATION, CONTEXT AND LOCATION OF IDEATION

Figure 7: (PROPS AND SOLUTIONS OF IDEATION CANVAS)

The computer must be connected to the modem of the net provider.

Figure 8: (PRODUCTION CANVAS)

Figure 9: (PEOPLE OF PRODUCTION CANVAS)

Figure 10: (PRODUCT EXPERIENCE AND FUNCTIONS OF

Figure 11: (PRODUCT FEATURES OF PRODUCTION CANVAS)

phones, modem, router, laptop charger.

Figure 12: (COMPONENT OF PRODUCTION CANVAS)

Figure 13: (CUSTOMER REVALIDATION OF PRODUCTION

Our Product was retained by the department.

Figure 14: (REJECT, REDESIGN, RETAIN OF PRODUCTION

Figure 15: (MIND MAPPING)

Figure 16: (AEIOU SUMMARY CANVAS)

This is the summary of all the canvases. Here in this canvas,

A stands for Activities.

E stands for Environment.

I stands for Interactions.

O stands for Objects.

U stands for Users.

Environment includes Unknown, cloudy, humidity, emergency and sunny.

Online Web Conference

Send Request Call Meassage

Creat a password Register

OPen contect list

Call /Message/file tranfer/share a contect

charge as per use

 A sequence diagram in a Unified Modelling Language (UML) is a kind of

THE PURPOSE OF DIAGRAM:

Assign UID & PWD

Verify Register User

Display Home Page

check Receiver is Online or Offline

Receiver status to user

Perform an Action(Send Request )

Accept or Reject the Reqest and Update the Database

Request is Accepted or Rejected (to User)

Upadte Specific User Database

Register User is Offline

Display Admin specific DataPage

Manage the server(Set Up Accounts)

Update The Changes

Successfully Updated Message

 The following points should be remembered while drawing a class diagram: