AGENDA

• WorkFlow diagrams
• DataFlow diagrams
• ERD
• UI prototypes

CONFIDENTIAL 1
BUSINESS NOTATION

• Flow chart Diagram

– Data Flow Diagram (DFD)
– Workflow Diagram (WFD)
• Entity Relationship Diagram (ERD)
• IDEF
• Unified Modeling Language (UML)
• Business Process Diagram (BPMN)

CONFIDENTIAL 2
LIFECYCLE MODELS AND BP NOTATIONS

LIFECYCLE DATA FLOW WORK FLOW DATA STRUCTURE

MODEL MODELS MODELS MODELS
Waterfall DFD WFD ERD
Waterfall IDEF0 IDEF3 IDEF1x
Agile Information Activity Class diagram
process diagram Package diagram
diagram

CONFIDENTIAL 3
 WORKFLOW DIAGRAM - WFD

CONFIDENTIAL 4
WFD (WORKFLOW DIAGRAM)

• A Workflow Diagram is the flow of tasks or actions from one

person or group to another.
• It typically consists of a set of symbols representing actions
or individuals connected by arrows indicating the flow from
one to another.
• Different symbols represent different aspects of the
workflow.
– a process is represented by a rectangle
– a diamond is used to depict a decision.

CONFIDENTIAL 5
 EXAMPLE

E-Commerce – The most common use here is tracking an order.

1.Customer submits the order.
2.The transaction is confirmed and money received.
3.Employee responsible picks up the item and sends it to the fulfillment partner
4.The item is shipped to the customer

CONFIDENTIAL 6
EXAMPLE

CONFIDENTIAL 7
EXAMPLE

How to Buy/Sell an Item on eBay

CONFIDENTIAL 8
 How to choose the most appropriate estimation technique

https://www.adaptiveus.com/blog/business-analysis-estimation-technique

CONFIDENTIAL 9
BEST PRACTICES

• Start the diagram. Define the start point of the process or system to be
visualized and place it inside a rounded rectangle at the center of the
top of the page.
• Create the process. Place another shape below the start point,
connecting them with an arrow to show the flow. Continue this until the
entire workflow has been illustrated. In some cases, it may loop back to
the start point.

• Verify accuracy. Consult with all stakeholders to verify accuracy.

CONFIDENTIAL 11
READ MORE …

• https://kissflow.com/workflow/workflow-diagrams-jargon-
free-guide/

• https://zapier.com/blog/flowchart-diagramming-software/

• https://thedigitalprojectmanager.com/flowchart-software/

CONFIDENTIAL 12
 DATAFLOW DIAGRAM - DFD

CONFIDENTIAL 13
DATA FLOW DIAGRAM

• A data flow diagram (DFD) is a graphical representation of the "flow" of

data through an information system, modeling its process aspects.
• DFDs can also be used for the visualization of data processing
(structured design).

CONFIDENTIAL 14
MAJOR ELEMENTS

• External entity

• Process or function

• Data store (database)

• Data flow.

DFD - NOTATION

GANE - SARSON YOURDON-DEMARCO

CONFIDENTIAL 15
EXTERNAL ENTITY

• External entities are objects

outside the system, with
which the system
communicates. External
entities are sources and
destinations of the system's
inputs and outputs. Yourdon-
Gane - Sarson
DeMarco

CONFIDENTIAL 16
EXTERNAL ENTITY

Typically, an external entity is a person, department, outside

organization, or other information system that provides data to the
system or receives outputs from the system.

CONFIDENTIAL 17
PROCESS

• A process transforms incoming data flow into outgoing data flow.

YOURDON-DEMARCO GANE - SARSON

CONFIDENTIAL 18
DATA STORE

• Data Stores are repositories of data in the system.

• Data Store represents an internal physical or electronic repository of
data, into and out of which data is stored and retrieved

YOURDON-
GANE - SARSON
DEMARCO

CONFIDENTIAL 19
DATA STORE

• Data can be written into the data store, which is depicted by an outgoing arrow

• Data can be read from a data store, which is depicted by an incoming arrow.

• Examples:

CONFIDENTIAL 20
DATAFLOW

• Data flows are pipelines through which packets of information flow.

Label the arrows with the name of the data that moves through it.
• Data Flow represents how data flows through the system, in physical or
electronic form

CONFIDENTIAL 21
RULES

CONFIDENTIAL 22
DATA FLOW DIAGRAM LAYERS

CONFIDENTIAL 23
CONTEXT DIAGRAMS

• A context diagram is a top level DFD.

• It only contains one process node that generalizes the function of the
entire system in relationship to external entities.

CONFIDENTIAL 24
EXAMPLE

•All external entities are shown on the context diagram as well as major data flow to and
from them.
•The diagram does not contain any data storage.
•There will be only a single process in the context-level diagram, representing the entire
system

CONFIDENTIAL 25
DFD LEVELS

• Each of these processes can be broken into further processes.

CONFIDENTIAL 26
EA EXAMPLE

CONFIDENTIAL 27
FREQUENTLY MISTAKES

Black holes - A processing step may have input flows but no output flows.

CONFIDENTIAL 28
FREQUENTLY MISTAKES

Miracles - A processing step may have output flows but no input flows.

CONFIDENTIAL 29
FREQUENTLY MISTAKES

Grey holes - A processing step may have outputs that are greater than the sum of its
inputs

CONFIDENTIAL 30
PRACTICE

CONFIDENTIAL 31
READ MORE…

• https://www.visual-paradigm.com/guide/data-flow-diagram/what-is-
data-flow-diagram/

CONFIDENTIAL 32
 ENTITY RELATIONSHIP DIAGRAM - ERD

CONFIDENTIAL 33
ENTITY–RELATIONSHIP DIAGRAM

• ERD is a data model for describing the data or information aspects of a

business domain or its process requirements, in an abstract way that
lends itself to ultimately being implemented in a database such as a
relational database.
• The main components of ER models are entities (things) and the
relationships that can exist among them, and databases.

CONFIDENTIAL 34
LEVEL OF THE ER

Conceptual data model

Logical ER model

Physical ER model

CONFIDENTIAL 35
ENTITY

• An entity may be defined as a thing capable of an independent

existence that can be uniquely identified

CONFIDENTIAL 36
RELATIONSHIP

• The relationship is the interaction between the entities.

• Relationship’s cardinality:

CONFIDENTIAL 37
CROW’S FOOT NOTATION

• Person has the only one Location as the birthplace. Every Person must
have a birthplace.
• Many different persons can be born in the same Location. It is possible,
than nobody was born in some Location.

CONFIDENTIAL 38
ATTRIBUTES

• An attribute is some quality about the entities that we are interested in

and want to hold on the database.
• Attributes could be mandatory or optional.

• The attribute that is used to identify each entity from all the others in
the entity type is known as the primary key.

CONFIDENTIAL 39
STEPS TO CREATE ERD

• Identify the entities.

• Determine all significant interactions.

• Analyze the nature of the interactions.

• Draw the ERD.

CONFIDENTIAL 40
EXAMPLE

CONFIDENTIAL 41
 UI PROTOTYPING

CONFIDENTIAL 42
DEFINITION

• User interface (UI) prototyping is an iterative

analysis technique in which users are actively
involved in the mocking-up of the UI for a
system.

CONFIDENTIAL 43
UI PURPOSES

• As an analysis artifact that enables you to explore the problem space

with your stakeholders.

• As a requirements artifact to initially envision the system.

• As a design artifact that enables you to explore the solution space of

your system.

• A vehicle for you to communicate the possible UI design(s) of your

system.

• A potential foundation from which to continue developing the system.

CONFIDENTIAL 44
REQUIREMENTS

• High creation velocity

• Detailed elaboration.

• Easy maintaining and updating.

• Interactivity.

• High availability.

CONFIDENTIAL 45
LEVEL 0

• Essential user
interface

CONFIDENTIAL 46
LEVEL 1

• Paper sketch

CONFIDENTIAL 47
LEVEL 2

• Wireframe (PC sketch, may be clickable)

CONFIDENTIAL 48
LEVEL 3

• Concrete UI prototype (dynamic HTML page)

CONFIDENTIAL 49
LEVEL 4

• Mockup

CONFIDENTIAL 50
ON EACH LEVEL …

• What is good about the UI prototype?

• What is bad about the UI prototype?
• What is missing from the UI prototype?

CONFIDENTIAL 51
SUM UP

CONFIDENTIAL 52
TOOLS FOR WIREFRAME

– http://builds.balsamiq.com/b/mockups-web-demo/
– http://ninjamock.com/project/create
– https://app.moqups.com/
– https://app.diagrams.net/

And more!

https://webflow.com/blog/wireframe-tools

CONFIDENTIAL 53
PRACTICE

CONFIDENTIAL 54
READ MORE

• Essential user interface prototyping

• Exceptionally useful article for beginners to understand
properly the differences between wireframing / prototyping
/ mockups -> http://designmodo.com/wireframing-
prototyping-mockuping/

CONFIDENTIAL 55
 THANK YOU !

CONFIDENTIAL 56