Usecases & Wireframing

Describing the user-system interaction

Outline What is a usecase?
Content and structure
Building the usecase
diagram
Usecase tips & tricks
Wireframing
What is a The usecase diagram
Whom does it use?
usecase?
Use case
diagram
Definition A use case is a list of actions or event steps
typically defining the interactions between a role
and a system to achieve a goal. The actor can be a
human or other external system.
Use cases user’s perspective:
call somebody
vs.
●

●
receive a call
internal ●
store a new contact
features ●
send a message

designer & developer’s

perspective:
●
transmit / receive voice
●
transmit / receive data
●
manage battery energy
●
manage agenda
Use cases
scenarios

src: https://www.researchgate.net/publication/272565002_Scenario_planning_for_innovation_development_an_
overview_of_different_innovation_domains/figures?lo=1
Use case
description
example

src: https://www.researchgate.net/publication/272565002_Scenario_planning_for_innovation_development_an_
overview_of_different_innovation_domains/figures?lo=1
Who needs Teams benefitting from usecases:
the analysis team
usecases?
●

●
the design team
●
the testing team
Who needs usecases?

the analysis team: Collaborative effort enhances the success of any

team. As the team members work to describe
communication among
business processes, use cases provide a repository of
team members
team members' business knowledge.
Group discussion exposes in-depth viewpoints that
would otherwise remain hidden. With use cases, the
team captures these perspectives while identifying
the related business goals, conditions, and issues. The
result is a comprehensive and meaningful story about
each business process.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Who needs usecases?

the analysis team: Writing and revising use cases produces clarity,
consensus, and commitment. Remarkably, it is
common agreement
common for stakeholders to be uncertain about how a
about system
process they own actually works! Writing a use case
requirements
helps stakeholders align the narrative with the details
of an existing process.
Remarkably, use cases often help stakeholders reach
common agreement on "best practice" processes as well.
In a facilitated group setting, divergent perspectives
are welcomed, understood, and appreciated.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Who needs usecases?

the analysis team: Start a use case by developing the Main Course of
Events. As the group develops a coherent and ordered
reveal process
set of process steps, team members tend to volunteer
alternatives and
statements that begin with the words "what about..." -
process exceptions
a clue to previously unidentified Alternative Paths to a
successful outcome. The Exception Paths often arise
in a similar way. More of these become obvious when
the team considers what happens if any step in the
Main Course fails.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Who needs usecases?

the analysis team: Listen for any jargon used by stakeholders and ask for
a definition for each one. Add these definitions into
reveal undefined terms
the project glossary. Also, listen for issues as they
arise. Is a process step fuzzy? Is there an area that
needs more research, or an item on which team
members disagree? Write these down as well and
later include them in a project issue log.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Who needs usecases?

the analysis team: Create a catalog of the use case titles, and arrange
them into some meaningful order (e.g., by sub-system
what belongs outside
or umbrella process). With this catalog, the analysis
project scope?
team can prioritize the use cases. They may decide that
some fall outside the project scope, or that some are
not needed in the first project phase. Either way, you
have given the stakeholders an opportunity to declare
which functions they need the most, or which ones
they need first.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Who needs usecases?

the analysis team: When software is being designed to automate

aspects of an existing system, the analysis team
transform manual
usually begins by writing as is use cases to describe
processes into
the current business processes, revealing the details
automated processes
of an existing business process (including business
rules, alternative paths, and exception paths).
While writing the use cases, they often discover an
improved process, recognize unnecessary steps, or
reach agreement on best operational practices.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Who needs usecases?

the design team: Software developers often lack an understanding of the

customer's business. The development team must
understand business
understand not only the business process the
processes
software must support, but also the process'
alternatives and exceptions.
Use cases also offer a valuable perspective on the
stakeholders' business goals, assumptions, and
operational rules. These features provide developers
with a solid foundation for developing cost-effective
solutions to business challenges.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Who needs usecases?

the design team: A development team can find patterns within a set of
use cases. Developers may transform these patterns
recognize patterns and
into universal software objects.
contexts in functional
requirements As another aid to developers, use cases also reveal
operational context. The Stakeholders Goals, Pre-
Conditions, Assumptions, and Post-Conditions give
developers a sense of how the software will be used.
By reading these sections, the developer understands
what the role identified in the use case is trying to
accomplish, and what motivates him or her.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Who needs usecases?

the design team: Although the analysis team may have prioritized the
use cases, the development team views them from a
prioritize work
far different perspective. As a good development
teams writes code, they search for coding efficiencies.
While the analysis team may want 12 use cases
completed in phase one, the development team may
see cost-savings in delivering phase one software for
8 use cases, plus two more from phase two that are
cheaper to build as part of phase one. Of course, the
analysis team and the development should jointly
consider the effect of this change.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Who needs usecases?

the testing team: Some projects lack an adequate design phase and
produce poor functional requirements. Code that’s
discover gaps between
written based on such requirements may lead to
the requirements and
missing critical features. Writing usecases even in a
the delivered software
late project stage is highly recommended.
By comparing delivered software to the usecases,
such gaps can be identified and closed rapidly.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Who needs usecases?

the testing team: Bundles of use cases organized into system-wide

process flows become a source for writing
ensure the delivered
comprehensive end-to-end test scripts. The testing
software works
team develops test scripts from the use cases as the
properly
development team begins its work. The test scripts
are therefore ready for use as developers complete
programs.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-indispensable-to-your-software-development-project/
Content and Context
structure Actor / role
Structure
Content
Context use case =
a way of using a system
a scenario that describes an interaction between the
system and its users
●
it captures some user visible function
●
functions may be a large or small; it depends
on the level of detail in your modeling effort
●
a use-case achieves a discrete goal for the
user, like format a document or request an
elevator
Context

user goal:
something the user wants to
achieve
example: format a document

user interaction:
something the user does to
the system to achieve the goal
examples: define a style,
change a style, copy a style to
other document
Actors and Actors are external entities that interact
with the system. It can be a person, another
roles system or an organization.

In a banking system, the most obvious actor is

the customer. Other actors can be bank
employee or cashier depending on the role
you’re trying to show in the use case.
An example of an external organization can be
the tax authority or the central bank. The loan
processor is a good example of an external
system associated as an actor.
 Actors and roles

Give meaningful business relevant names for actors

– For example if your usecase interacts with an
outside organization it’s much better to name it with
the function rather than the organization name. (Eg:
Airline Company is better than PanAir)
Actors model roles, not positions – In a hotel both
the front office executive and shift manager can
make reservations. So something like “Reservation
Agent” should be used for actor name to highlight
the role.

http://www.modernanalyst.com/ http://creately.com/blog/diagrams/use-case-diagram-guidelines/
Actors and roles

Primary actors should be to the left side of the

diagram – This enables you to quickly highlight the
important roles in the system.

http://creately.com/blog/diagrams/use-case-diagram-guidelines/
Actors and roles

External systems are actors – If your usecase is

send-email and if interacts with the email
management software then the software is an actor
to that particular usecase.

http://creately.com/blog/diagrams/use-case-diagram-guidelines/
Actors and roles

Actors don’t interact with other actors – In case

actors interact within a system you need to create a
new usecase diagram with the system in the
previous diagram represented as an actor.
Place inheriting actors below the parent actor –
This is to make it more readable and to quickly
highlight the usecases specific for that actor.

http://creately.com/blog/diagrams/use-case-diagram-guidelines/
Actors for our project

Write down the actors for our project (humans and

systems (if any)).
Usecase The description of each usecase should reflect (at
least):
structure ●
what is the purpose of the usecase?
●
what needs to be done for the usecase to begin? -
start conditions
●
what are the steps in the usecase?
●
what does the actor do? How does the system
react?
●
what is the result of the usecase? (end conditions)
 Usecase structure

http://slideplayer.com/slide/4532464/
Usecase
content

http://slideplayer.com/slide/4532464/
Usecase content

Use-case names begin with a verb – A

usecase models an action so the name
should begin with a verb.
Make the name descriptive – This is to give
more information for others who are looking
at the diagram. For example Print Invoice is
better than Print.
Usecase content

Highlight the logical order – For example if

you’re analyzing a bank customer typical
usecases include open account, deposit and
withdraw. Showing them in the logical order
makes more sense.
Place included use cases to the right of the
invoking usecase – This is done to improve
readability and add clarity.
Place inheriting use case below parent
usecase – Again this is done to improve the
readability of the diagram.
Usecase content

You may have a behaviour that is

similar across many usecases. Break
this out as a separate usecase and let
the other ones “include” it:
Usecase content

You may have a use-case that is

similar to another one but does a bit
more.

Put the normal behavior in one use-

case and the extended behavior into
a separate use-case.
Usecase content

There are many templates freely

available on the web!

https://creately.com/diagram-community/popular/t/use-case
Building the 1: Identify system actors

usecase 2: Identify the goals of the actors

3: Identify the candidate usecases
diagram
4: Identify the start point for each
usecase
5: Identify the end point for each
usecase
6: Refine and scope units of
interaction
1: Identify Read through the requirements documentation and
make a note of all the candidate system actors.
system actors Remember an actor is not just a person but may also be
an external system such as a credit card verification
service.
Actors interact with the system and reside outside of it.
If you find that multiple terms have been used to
describe the same actor, group these terms together
and use a generic term.

http://www.cems.uwe.ac.uk/~jsa/UMLJavaShortCourse09/CGOutput/Unit1/unit1(080
9)/page_24.htm
2: Identify the Usecases describe the functionality required of the
system in order for actors to achieve their goals.
goals of the Therefore you need to identify what the goals of your
candidate actors are.
actors
Multiple actors may require the same or similar system
functionality.

http://www.cems.uwe.ac.uk/~jsa/UMLJavaShortCourse09/CGOutput/Unit1/unit1(080
9)/page_24.htm
3: Identify the A usecase represents a substantial piece of system
functionality, not just a single method in software.
candidate Usecases cover a group of related scenarios, for
example, a usecase called "purchase ticket" will include
usecases the scenario where payment is unsuccessful in addition
to the typical payment success scenario.
Using the actors goals try and identify the text in the
requirements document that corresponds to these
goals.

http://www.cems.uwe.ac.uk/~jsa/UMLJavaShortCourse09/CGOutput/Unit1/unit1(080
9)/page_24.htm
4: Identify the Look for an actor and an initial event. You will find this is
easier to do with some usecases rather than others. For
start point for example, with some "Delete" usecase, the initial event
may be to choose some item.
each usecase

http://www.cems.uwe.ac.uk/~jsa/UMLJavaShortCourse09/CGOutput/Unit1/unit1(080
9)/page_24.htm
5: Identify the In a manner similar to that of step 2 (identifying goals of
the actors), you need to identify the beneficial result of
end point for the usecase, the end point. The purpose of this step is
to allow you to refine the size of usecases, ensuring that
each usecase a candidate usecase is neither too small nor too big.

http://www.cems.uwe.ac.uk/~jsa/UMLJavaShortCourse09/CGOutput/Unit1/unit1(080
9)/page_24.htm
6: Refine and All of the functionality described in the requirements
document needs to be covered by at least one
scope units of candidate use case. You need therefore to work through
the list of candidate usecases to refine size and scope.
interaction
Ater completing this step you don’t necessarily get the
final list of actors and usecases!

http://www.cems.uwe.ac.uk/~jsa/UMLJavaShortCourse09/CGOutput/Unit1/unit1(080
9)/page_24.htm
Our project’s usecase diagram

Build the usecase diagram for our project.

Usecase
tips & tricks
 Use case descriptions always include a highway and
may contain both variants and exceptions. The highway
Usecase describes the way the use case is typically run through.
highway Variants describe alternative ways the use case may be
run through. The highway and variants can be equally
important. Start and end conditions will be common
with the highways.
Exceptions describe events that cause failure to
perform use case as described, i.e. end conditions are
not met.
Start and end conditions are often underestimated!
Make sure they are precise and well-defined!

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-
indispensable-to-your-software-development-project/
 Grain of use cases – what is the right size for a use
Usecase case? A usecase must contain a complete task that
needs solving – not just a step in a task.
grain
Feel your way forward – it takes experience.
The aggregate use cases do not need to reflect a
workflow! If you do that, the use cases may well be too
fine-grained.
Use imperative verbs to name a usecase! Examples:
”Acquire car” – ”Search for car” – ”Get FDM test” – etc.
A good idea to attach numbers to the use cases, rather
than “meaningful” Ids.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-
indispensable-to-your-software-development-project/
Be business Know your business & be business oriented! The
professional experts must participate in the completion
oriented! of use cases.
Keep matters abstract! Describe functionality, not
solution designs! Keep use case descriptions free from
”computer monitor-thinking”.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-
indispensable-to-your-software-development-project/
Innovate! Innovate! It is important that project participants are
visionary and do not ”re-create” existing solutions.
Delegating the task of usecase writing: You may want a
resource able to coordinate business and technical
aspects, who has an idea of how a use case can be
technically realised, and who can discuss issues with the
technical staff.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-
indispensable-to-your-software-development-project/
Review your After completion of usecases (or during) a need will
often rise to adjust the process diagrams. You gain
process knowledge as you dig deeper into the material.
diagrams! The activities (and their order) may need adjustment.
You typically discover new actors/roles and new
interfaces with other systems / stakeholders.
You may need to add new terms to the data dictionary,
and probably correct the use case descriptions to
ensure strict use of these terms.

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-
indispensable-to-your-software-development-project/
Don’t over- Try not to get in an "analysis paralysis" cycle trying to
document every little use case, instead of moving
document! forwards.
Avoid the situation in which use cases become the
focus of attention, instead of the functionality itself
("no, I want them to click on the 'OK' button, not the
'Finish' button!").

https://www.techrepublic.com/blog/software-engineer/10-reasons-why-use-cases-are-
indispensable-to-your-software-development-project/
Wireframing Wireframes
Mockups
Who uses wireframes?
How to wireframe?
Wireframes A wireframe (page schematic, screen blueprint) is a
visual guide that represents the skeletal framework of
an application screen or a website.
Wireframes are created for the purpose of arranging
elements to best accomplish a particular purpose.
Wireframes
Wireframes

A wireframe is much It is quicker and cheaper to review and amend the

easier to adapt than a structure of the key pages in a wireframe format.
concept design Iterating the development of the wireframes to a final
version will provide the client and the design team
confidence that the page is catering to user needs
whilst fulfilling the key business and project
objectives.

https://www.experienceux.co.uk/faqs/what-is-wireframing/
Wireframes

Wireframing takes Often used to complete the User Centred Design

place early in the process, wireframes are also used at the beginning of
project lifecycle the design phase. A prototype usability test will often
be a test of the wireframe pages to provide user
feedback prior to the creative process.
Wireframes can be simply hand drawn, but are often
put together using software, to provide an on-screen
delivery.

https://www.experienceux.co.uk/faqs/what-is-wireframing/
Wireframes

Advantages of Wireframing provides an early visual that can be used

Wireframing to review with the client. Users can also review it as
an early feedback mechanism for prototype usability
tests. Not only are wireframes easier to amend than
concept designs, once approved by the client and the
users they provide confidence to the designer.
The wireframes ensure the page content and
functionality are positioned correctly based on user
and business needs. They can be used as a good
dialogue between members of the project team to
agree on the project vision and scope.

https://www.experienceux.co.uk/faqs/what-is-wireframing/
Wireframes

Disadvantages of As the wireframes do not include any design, or

Wireframing account for technical implications, it is not always
easy for the client to grasp the concept. The designer
will also have to translate the wireframes into a
design, so communication to support the wireframe is
often needed to explain why page elements are
positioned as they are.
Also, when content is added, it might initially be too
much to fit within the wireframe layout, so the
designer and copywriter will need to work closely to
make this fit.

https://www.experienceux.co.uk/faqs/what-is-wireframing/
Mockups A mockup is a static high-profile visual design draft of a
design or device, used to represent the structure of
information, visualize the content and demonstrate the
basic functionalities in a static way.
Mockups

https://mockupui.com/examples/index.html
Mockups

http://spacerchaser.com/prototype-website-template/prototype-website-template-design-
interactive-html-prototypes-for-web-and-apps-with-axure-rp-ideas/
Mockups

Why use mockups: Mockups can help the designer to uncover visual
Organize project elements that clash, before you arrive at the final
details  design. Visual hierarchies, that shows the difference
between design elements such as font and color,
should be determined at the mockup phase of the
design process. With the visual elements more refined
than with wireframes, mockups allow stakeholders to
actually review the visual side of the project.

https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/
Mockups

Why use mockups: Mockups are flexible and this makes it easy to iterate.
Find errors early on Much like working with a wireframe, mockups allow
for easy and quick revisions that can stack up pretty
quickly, as they do not require code or programming.

https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/
Mockups

Why use mockups: For clients and stakeholders, presenting a digital

Translate ideas into a mockup can be best the way to go, as simply using a
stakeholder language flat design might not be enough in terms of
visualization and translating ideation.
Sometimes, it’s too difficult for the client to
understand the final result just by looking at a flat
graphic file, which is, more often than not, completely
out of context. This is where the mockup has one up
on the wireframe, providing a language that all can
communicate with and understand.

https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/
Mockups

Why use mockups: Not only can the mockup serve as a discussion
Communicate ideas medium between the designer and user or
between team stakeholder, it can also act as a communication device
members between the members of the design teams. Mock-ups
may help facilitate work across disciplinary borders,
bringing together teams who are working on different
objectives.

https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/
Mockups

Why use mockups: How does your initial design flow and perform? By
Design looking at a mockup, you should have a good idea of
implementation how the final product will look and a rough idea of
how it might function (even if the functionality isn’t
yet in place).

https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/
Mockups

Why use mockups: Paper and low-fidelity mock-ups get a lot of stick
The user’s perspective  from users because they are low-cost. But if a user is
presented with an early version of a system – a mid-
fidelity digital UI mockup – that required substantial
work, they may be more inclined to focus on the value
of the design.

https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/
Mockups

Why shouldn’t you use Mockups require substantial time and resources to
mockups? create something that will then need to be pulled
apart and put back together during development.

https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/
Mockups

Why shouldn’t you use From designers to final users, to stakeholders:

mockups? everybody should be able to create, test and
comment on them. But low-fidelity screen or paper
mockups alone cannot capture the flow through the
system.

https://www.justinmind.com/blog/wireframes-and-mockups-whats-the-best-option/
Who uses The purpose of any particular wireframe varies slightly
by the people creating or using them in any company.
wireframes? Whether sketched, “grey boxed”, wireframed in a
graphic editor or in a dedicated wireframing and
prototyping tool, the same information can be
conveyed. Therefore, it’s less about the tool and more
about how fast you can convey the information you
need to others.

src: https://www.uxpin.com/studio/ebooks/guide-to-wireframing/
Who uses wireframes?

Interaction & UX Interaction & UX Designers and Information

Designers and Architects use wireframes to show user flows
Information Architects between views or pages. Typically, a combination of
flowcharting, storyboarding and wireframing are used
to achieve this.

src: https://www.uxpin.com/studio/ebooks/guide-to-wireframing/
Who uses wireframes?

Graphic Designers Graphic Designers use wireframes to push the user

interface (UI) development process. It can inspire the
designer, resulting in a more fluid creative process.
And is ultimately used to create graphic mockups,
interactive prototypes, and the final design. Typically,
a combination of sketching, storyboarding and
wireframing in low or high-fidelity are used to achieve
this.

src: https://www.uxpin.com/studio/ebooks/guide-to-wireframing/
Who uses wireframes?

Developers Developers use wireframes to get a more tangible

grasp of the site’s functionality. It gives the developer
a clear picture of the elements that they will need to
code. For back-end development, wireframes can be
low-fidelity the way a ux designer or information
architect might produce them – they care more about
product structure, functionality and behavior. For
front-end development, it’s more helpful to have
high-fidelity wireframes a designer would produce –
they care about content and information hierarchy as
much as the structure, functionality and behavior.

src: https://www.uxpin.com/studio/ebooks/guide-to-wireframing/
Who uses wireframes?

Business Analysts Business Analysts use wireframes to visually support

the business rules and interaction requirements for a
screen. Depending on the business, industry or the
analyst’s specific role, they will care more about only
one or two of the following – structure, content,
information hierarchy, functionality and behavior. For
example, an advertising or content analyst probably
cares more about content, functionality and behavior
whereas a regulatory analyst may care more about
information hierarchy or structure. However, it varies
too widely to say.

src: https://www.uxpin.com/studio/ebooks/guide-to-wireframing/
Who uses wireframes?

Internal Business Internal Business Stakeholders (e.g. Product

Stakeholders Managers, Project Managers and Executives) review
wireframes to ensure that requirements and
objectives are met through the design. This fits into
their overall product strategy and scope of a specific
project or set of projects. It gives managers an early,
close-up view of the site or application design (or re-
design).

src: https://www.uxpin.com/studio/ebooks/guide-to-wireframing/
Who uses wireframes?

External Business External Business Stakeholders (e.g. Partners and

Stakeholders Clients) also review wireframes to ensure that
requirements and objectives are met through the
design.
However, they typically care more about annotated,
polished (if not high-fidelity) wireframes than many of
the types of wireframes internal business
stakeholders favor for speed in collaboration and
execution.

src: https://www.uxpin.com/studio/ebooks/guide-to-wireframing/
How to At the wireframing phase of the design process, our
ideas are young and unpolished. Wireframes, whether
wireframe? created on scraps of paper, a whiteboard, or in a
software program, serve to establish relationships
between elements in a project such as: navigation,
imagery, and calls to action.
But if we think of wireframing as a tool, it’s ultimate
purpose is to create an ideal space for collaborative
conversations about design solutions, while supporting
iterations and driving rapid ideation.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-10-best-practices
How to wireframe?

Question to tell if wireframes are effective:

When I share my wireframes, are the conversations about
the execution OR about the experience I’m creating?

If discussions are getting stuck on “how your wireframes look”:

●
your wireframes are executed poorly
●
you failed to set clear expectations with the client about how
you are using wireframes as a tool to drive the conversation
about design solutions
●
your wireframes are too polished and not solution-oriented
How to wireframe?

Don’t use color. If you Color is powerful! As such, it can be distracting. If you
do, use it intentionally. must use color, use it sparingly and consistently and
choose a color not in the clients’ pallette to ensure
your discussion remains focused on the experience
you are creating and not the visual design solutions to
come.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-
10-best-practices
How to wireframe?

Consistency is key. Your wireframes are meant to facilitate, not distract.

One of the best ways to do this is to be consistent
with things like typography, spacing, and delivery.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-
10-best-practices
How to wireframe?

Use actual content. If you don’t have content, write it. Writing is a design
skill, it will only help you understand the client and
story better.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-
10-best-practices
How to wireframe?

Never wire alone. All we’re talking about here is sharing your ideas.
When we release ideas, their potential for greatness
doubles. Often times, you’re not the expert, so get
over your ego and be great together.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-
10-best-practices
How to wireframe?

Communicate Wireframing and prototyping are amazing tools, but

functionalities and they serve very different purposes. Prototyping is
interactions statically. more time intensive than wireframing. Key
functionalities or interactions can be easily
communicated statically. Ask the client what they
need. If user testing is an important part of the
project, prototyping may get you far. The key is to
know when you’ve crossed over to prototyping and
be deliberate about it.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-
10-best-practices
How to wireframe?

Set clear expectations. Talk with the client about how you are using
wireframing as a tool. If a client’s expectations are not
met, it doesn’t matter how brilliant your work is, they
will not hear you. The best way to proactively avoid
failed expectations is to communicate them clearly,
early, and often.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-
10-best-practices
How to wireframe?

Avoid unnecessary If you’re using a program, don’t let it be a barrier to

barriers to success. setting your ideas free. Take the time to learn the
basics or choose a more natural medium like
sketching or whiteboarding.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-
10-best-practices
How to wireframe?

Practice non- Don’t get too attached to your wires, they’re not
attachment. glamorous portfolio pieces. With rapid ideation, we
must be willing to entertain change and pivot often.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-
10-best-practices
How to wireframe?

Be selective and keep When we have lots of new ideas, it’s easy to try and
it simple. make them all work together or confuse elements of
one idea with another. Give each idea their own
platform.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-
10-best-practices
How to wireframe?

Control the A beautiful conversation doesn’t happen by itself or

conversation. even with the most profoundly perfect wires. Support
your wireframes by controlling the conversation. If
things get off track, bring it back around. Don’t be
afraid to interrupt politely and ask meaningful open-
ended questions.

src: https://www.dtelepathy.com/blog/design/learning-to-wireframe-
10-best-practices