Wireframes and storyboard in

Business Analysis
Group 14
Ranjith M(1527525)
Athira Kumar(1527535)
Dhanya Michael(1527537)

WHAT IS WIREFRAMING?

Wireframes are an important design

tool used inWeb development. It is
a visualization tool for presenting
proposed functions, structure and
content of aWeb pageorWeb site.

The purpose of the wireframe is to

have a conversation with
stakeholders regarding the flows
and functionality of the controls on
the interface. The conversations
yield feedback that can be used to
improve the interface design
The feedback is then used to update
the wireframe and the feedback
cycle continues until all
stakeholders are in agreement on
the interface design

WHAT TYPE OF PROJECTS NEED WIREFRAMING?

Wire framing should be proposed intelligently and after observing the
stakeholder closely and at the same time taking into consideration the
ROI company would gain if it is done.

Dont do it for projects where theclient is low on budget and asking

something pretty straightforward.
Dont do it for projects wherethere is an exact replica of the item
already in the market and client has shared that to you as a reference.
Do it when client wants something which is a complex application or a
website where it is difficult to get a single reference.
Do it when you understand that stakeholder would be more clear
when he sees something in visual.

WIREFRAMING BY A BUSINESS ANALYST

When done by a Business Analyst,wireframing focuses on

the data points, linking between the items, attributes and
sections to be covered
Wireframing is done by the BA after documenting the
requirements
They are created for project stakeholders to make sure that
the product would consider all the requirements that are
needed in the system and give him a rough idea about the
project structure.
While when developed by a Designer or a UX expert,
wireframes focus on visual representation of items

WIREFRAMES HELPS??

Test and refine navigation

See how content lays out on the page
Study and rapidly refine the user interface design of web forms and
interactive elements
Evaluate overall effectiveness of the page layout against usability best
practices
Determine web development/programming requirements

BENEFITS

Prevent project scope creep.

Help in providing better and more accuratetimelines and thus cost
estimates.
Give avisual understanding to the customer about your organizations
understanding of the product to be developed.
Helps all the team members to work in a fast and clear manner with
the system structure in place and items listed down

WHO ALL ARE BENEFICIARIES?

Designers-Has more clarity on what items to put and what

controls can be used where.
Developers-Gain clarity on the data items to understand system
flow anddesign database.
Customer-Gives a brief idea in visual mannerabout how the final
product would look and behave like.
Investors-Helps gain interest in products and make a wise
decision before actually investing into a project.

WIREFRAMES ARE DANGEROUS??

they can make false promises about layout or system functionality if

they are not reviewed with a fine-toothed comb;
if they are initiated too early in the analysis phase (very fluid
requirements at this point), it will take a significant amount of time to
incorporate major changes;
they can interfere with the creative talents of the design team if they
are over-engineered or stylized
they will eventually reach a point of diminishing returns, once
stakeholders have an overall feel for the system but want to
incorporate small changes that dont need visual representation

STORYBOARDS

A Business Analyst try to see the bigger picture

of the business problems of the client.
To get it right storyboards help a lot.
Just like movie makers BA break the bigger
picture of Business into smaller sections and
then focus on one section at a time.
This way BA enrich knowledge of client's
business piece by piece, section by section.
Helping to easily identify where more research is
needed.
Storyboarding not only helps BA in creating a
bigger picture but a High Definition bigger
picture where you can zoom to finer details.

USES AND BENEFITS OF USING STORYBOARDS:

Helps a BA in identifying the areas where more

information is needed.
Helps a BA in identifying the areas where more analysis
is needed.
View the bigger picture (in High Definition)
Easy to communicate the understanding to clients
Helps in organizing the work.
Where do BAs use the Storyboards:
In the Enterprise Analysis Phase, for creating the
Business Case.
In the Requirement Elicitation Phase just before the
Prototype is created

THE ROLE OF STORYBOARDS IN REQUIREMENT

ELICITATION

Storyboards are well-liked by the customer

thus offering an opportunity to discover new
functional requirements early.
Storyboards are fun to create and well-liked
by the most important participant in the
software engineering process, the customer
A storyboard may be focused on the user, but
the primary beneficiary is the developer
They provide a vital opportunity to discover
potential new functional requirements much
earlier."

WHERE A STORYBOARD HELPS

For Initial- Because stories reveal the end value

that a system will provide, they can be effective
sales tools
For Requirements Gathering- Storyboards can
be highly effective tools for generating requirements.
For Design- The process of creating a storyboard
helps designers put themselves in the shoes and
setting of the people for whom they are designing
For System Rollout- It is often hard for users to
understand how and why they should use a new
system. Seeing a story showing the system used in a
detailed real-world setting helps

POINTS TO KEEP IN MIND

WHILE STORYBOARDING:

Keep it simple:Keep the story simple, do

not make it complicated.
Break the story into scenes:Breaking the
story into scenes or sections will help you to
organize the story better. It will also help you
in identifying the shortcomings, if any, in the
story. While making a Storyboad, do the
Horizontal and Vertical analysis of storyboard,
that will ensure completeness of the story.
Make it collaborative:The idea behind
storyboarding is to make the complete picture
clear. To make sure that you have covered
every aspect of the story, involve your clients
in the storyboarding session. Check the logic
flow (necessary and sufficient arguments)
Tell a good story:In the end keep in mind to
tell a good story.

DIFFERENCE BETWEEN WIREFRAME & STORYBOARD

WIREFRAME

STORYBOARD

Focuses onWhattheinterface Focuses onWhattheuser

wouldresemble
wouldexperience
Objective is to brainstorm and
so wireframe need not be an
exact match to end product

Objective is to inspire users to

think, provide inputs and
validate requirements

Wireframe can even be an

image. Look and feel is not
important

Look and feel is more

important than what you see in
a wireframe, but need not
match the look and feel of a
prototype

It focuses more on screen

More emphasis on the users,
layout than on functionality and and how different views and
navigation
content come together to
deliver what the user is looking

CONCLUSION

Wireframes are essential mainly to ensure smooth workflow and

clarity of vision during the development process.
Different teams use the wireframes for different purposes. For
eg., wireframes are used by writers to determine the space
available on a website and to know how much content they
should write for that particular page.
Whereas StoryBoards initiates the user to think how it satisfies
my need
Wireframes and storyboards help BA to make a better
understanding of the Business and provide solution.