In cryptography, a message authentication code (MAC), sometimes

known as an authentication tag, is a short piece of information used

for authenticating and integrity checking a message. In other words,
to confirm that the message came from the stated sender (its
authenticity) and has not been changed (its integrity).

Wireframing and prototyping play a crucial role in the field of UI/UX

design, serving as powerful tools to conceptualize, iterate, and
refine user interfaces and experiences. These processes allow
designers to visualize and structure the layout, functionality, and
interactions of a digital product before diving into the development
phase. By creating wireframes and prototypes, designers can
effectively communicate their ideas, gather feedback, and make
informed design decisions. This article explores the significance of
wireframing and prototyping in UI/UX design, delving into their
importance, benefits, techniques, and best practices, along with
real-life case studies. Whether you are a seasoned designer or new
to the field, understanding the role of wireframing and prototyping is
essential for creating intuitive and user-centered digital experiences.

UX sketching is a crucial, yet often overlooked, aspect of user experience

design. Sketching is a very efficient way of communicating design while
allowing designers to try out a multitude of ideas and iterate them before
settling on one.

In this UX design sketch tutorial, I intend to cover everything you need to

know about sketching in UX design, including the following points:

 Introduction to UX sketches and wireframes

  UX sketching basics, tools, and techniques

 Clarifying sketches with notes, annotations, numbers

 UX sketching tips and tricks

 Mini-methods designed to boost quality and productivity

 All you need to know about Wireflows

 A quick guide to UX flow sketching

UX Design Sketching Is a Two-step Process

Many options must be considered in design, which results in the choice

and the execution of the best one. Designers consider their options, and
then proceed to work out the details, thus making UX design a two-step
process:
  Idea Generation
In the initial step, multiple ideas are generated, but since they cannot be
fully shaped, it is not uncommon for some of the elements to be
incomplete or missing. The main thing is to consider different approaches
and to decide which is the most efficient in the context of your task and
the various constraints of the project.

 Adding Detail and Refinement

Step by step, you settle on a few promising variants and proceed to work
out the specifics, thus rendering some ideas unsuitable.
UX Sketches and Wireframes: Introduction and
Classification

Your wireframes may differ depending on factors such as the desired level
of detail, colors and style, whether you are going to show them to
someone, and so on.

I singled out the following sketch types:

 Sketch: Idea Generation

These are initial sketches. Lower-level details are simply noted. A limited
number of colors is employed.

I draw a lot of basic sketches to consider the problem from different

angles and to consider different solutions. While drawing such sketches, I
am also striving to generate as many solution variants as possible.

At this particular step, incompleteness frees my mind, which is why it is so

important to avoid getting bogged down in minutiae at this stage. My goal
is to generate as many ideas as possible and choose the most promising
ones.

 Wireframe: Specification, Detailed Phase

I usually pick promising sketches and go over the details, after which I
choose the best variant and work it out in greater detail.

However, this does not mean every single detail. Obvious things may just
be noted. Moreover, some aspects will be difficult to describe on paper.
At this step, I draw all the important details, but I do not yet draw
wireframes in Balsamiq. After everything is done on the paper, I start
drawing in Sketch.
Digital tools provide a lot more creative freedom than paper and you can
easily shift attention to minor things. For example, you can focus on “pixel
polishing” instead of design.

 Visual Design Draft

This is a rarely used approach, but sometimes it can be helpful. Various
visual solutions are considered at an early stage of the project, but it may
take a long time to create digital sketches for all of them. That is why I
draw design sketches on paper first, to consider different options and
choose a visual design direction.

 Components/Elements Breakdown
I find this technique useful when I already have a general idea and I am
thinking about a particular page functionality or of the integral parts of
interface components. I draw different page elements, going into detail,
and then draw different possible positions of the page elements.

Elements, even the most simple ones, must have a state; a button can be
pressed and it has a hover text block that may or may not be empty. The
more complex it is, the more states it has.
Getting Started with the Basics

 Prepare your UX sketching tools. Find the most

convenient place possible, a large table with plenty of space.
Take a lot of paper and prepare some pens and markers.
 Warm up. In order to get ready, I recommend drawing some
lines, circles, basic templates, and icons.
 Define your goals. Decide what you want to draw. Set your
aim and decide what story you have to tell. Determine the
 desired level of detailing. Decide whether you are ready to
draw a lot.
 Define your target audience. If you are doing this for
yourself, you don’t need to worry about the way your sketch
looks. However, if you intend to show your drawings to a
client, make sure you allow some extra time to add more
details to your sketch.
 Set a time frame. Having decided on the amount of time
you are ready to allocate for sketching, let’s say 30 minutes,
will help you focus on your work.
Now, you are all set and you can get started:

 Draw the edges. Draw the frames, a browser or phone

window, a part of the interface, and so on.
 Add the biggest or basic elements: menu, footer, main
content.
 Add details. Add relevant details, but keep them simple at
this stage.

 Add annotations and notes. These are required only if

you’re planning to share the sketches. However, they can be
useful even if you’re doing them for your eyes only.
 Sketch alternatives. Sketch some quick alternatives to your
solution.
 Pick the best solution. Choose the best options.
 Add shadow and bevel. This is particularly important for
sharing purposes. Add a shadow to make your sketch visually
appealing, which is important if you plan to share it with team
members and/or clients.
 Save the sketch. Take a photo or put it in a folder. I have a
few paper trays on my table for sketches.
 Share. I usually use one of the following sharing methods:
o Scan sketches via Evernote and provide a
permalink to other team members or
stakeholders.
o Take a photo and upload to InVision.
o Upload and map images to Realtimeboard.
o Or just email a photo.
 Review the sketches and add notes. Take a break and
then come back to your sketches a while later. Take a look at
them again. Does the sketch still make sense to you? A good
sketch must be easy to follow.
Clarifying Sketches with Additional Elements

Find or draw a proper sketch, and then add the following details to it:

1. Title. Sometimes, adding a title is a good option. Write a

description and date, if necessary, at the top of the sketch.
The title will help you understand what you are looking at and
whether or not the sketch is relevant. This is especially useful
 if you have a lot of sketches or you are going to show to
others.
2. Annotations. Annotations are names and notes placed close
to an element, to explain its content or other attributes. They
add details that clarify other elements and are usually difficult
to draw. For example, it could be the name of the block, some
interaction details, an explanation of a picture, some ideas for
future design variations, and so on. You can check out one of
my UX sketch examples to see what an annotation sketch
looks like.
3. Numbers. Number the elements of your sketch, or the
sketches themselves. You can decide how to order them (e.g.,
by interaction flow, the order in which you created them,
etc.). It may also be useful during discussions (especially
remote discussions), as your colleagues and clients can just
point out the sketch number in their feedback and you will
understand which one their comments refer to.
4. Arrows. You can use arrows to indicate screen transitions.
They can also be used to connect different parts of sketches,
to indicate a sequence of actions, and so on. Since the
meaning of an arrow can vary, just above the arrow you can
add a description or explanation of what the arrow is meant to
signify. Here is an example of a basic sketch showing a
transition and several different states.
5. Notes. Just like annotations, notes are used to explain
concepts. However, notes differ from annotations in their
placement. They are not attached to an element or located
near the described element, similar to this example. Notes
can be placed at the top or bottom of the page. They can
even describe elements that are not included in the design,
 questions that you may have, general explanations,
unsketched ideas, and so on.
6. Gestures. Gestures are relevant in the case of touch device
design. Drawing a hand gesture may require practice. There
are several variants of gestures used to indicate different
types of actions, so it is better to decide in advance how you
designate a particular action (if it is not obvious, of course)
and to practice drawing it.
7. Feedback. You may receive suggestions for fixing or
improving the sketch after showing it to others, or after you
take another look at it yourself. It is often useful to mark such
feedback in a different color so as to help differentiate
feedback from the original sketch.
You can use different colors for different types of elements. Sometimes, I
use black for drawings, blue for links, dark green for notes, red for titles
and feedback. Try to use different colors in your sketches, but make sure
your choice of colors is consistent!
More Specific Tips and Tricks

1. Don’t worry about the quality. Don’t look at the sketches

on Dribbble; they are about something completely different.
Bear in mind that the main purpose of sketches is to help you
think more clearly, find better solutions, and save time.
2. Practice. For a start, you can try to draw a few apps. Open a
web or mobile app and try to copy the screen, describing the
elements in the notes. Whenever you have some free time,
 practice drawing basic building blocks of your designs. In
general, practice makes perfect. In a while, it will become part
of your designer self.
3. Buy a folder. I often don’t work from my office, but rather
from a cafe or my home. Paper sketches are very prone to
damage, so buy a simple folder to keep them safe and sound.
4. Bring tools with you wherever you go. This helps ensure
that you can capture your idea on paper at any time,
otherwise you may just lose the thought or not be able to
remember it in sufficient detail. I always have a notepad, a
few A4 sheets, and pens with me.
5. Share with others. It’s very important to engage other
people and communicate with your team. Involving others
and getting their feedback, especially early on, helps save
time and resources in the long run. You can also encourage
others to draw the way they envision the design.
6. Paper trays. Think of placing paper trays on your worktable.
For example, I have three of them: for incoming tasks, for
sketches, and clean sheets of paper.
7. Experiment and customize. My recommendations are
based on my experience. In time, you’ll find out what suits
you best; which methods, which sequence of steps, what
exactly fulfills your creative potential. You will get there only if
you constantly try something new, which is why it’s important
to experiment with different formats, styles, and try new
templates.
8. Use templates. Templates will save time and implicitly take
into account format restrictions, freeing up more time to focus
on what is important.
Additional Mini-methods to Improve Your
Sketches

These aren’t necessarily tips and tricks, but they’re a collection of

methods, tools, and suggestions that should boost your productivity or
improve the quality of your sKetches.

1. Create a sketch board. One of the biggest benefits of using

pen and paper instead of a digital sketching tool is that you
can actually stick it to a wall. Everyone on your team can see
 it and participate (although I recommend setting up review
sessions).

 You will see your sketches yourself, and this will

stimulate your thinking and let you see the big
picture, not isolated pieces, but the whole
system. You will see interactions between parts
and the way they fit one another.

 Create the sketch board - attach your whiteboard

sketches. If there is no whiteboard in your office,
you can use double-sized adhesive tape or post-it
note sheets to stick your sketches to the wall. If
you don’t want to stick to the wall, you can find a
big piece of cardboard paper instead. I strongly
recommend using sketch boards, as they’re one
of the best design tools.

2. Use a whiteboard. A whiteboard is a great drawing tool. It

has a number of advantages:
 It is collaborative, and it is easy to involve other
team members in the discussion and in the
drawing as well. Even if their ideas do not fit well,
you will understand their way of thinking, and it
will help you to be on the same page.

 Markers do not let you focus on details, you have

to think about the general things. Sketches are
open to interpretation.

 A whiteboard is easy to clean and make

corrections on.
  There is a lot of space and you can easily think
through the whole system flow.

 You can attach sketches, printouts, and reference

materials using magnets.

3. Prototypes. Make a clickable prototype to evaluate your

design. Try to get feedback about some elements. This works
particularly well when you are using templates - your
sketches are of the same size. Obviously, it will be much
easier to draw same size sketches if you are using a template.
I will try to make it even easier by providing you with a few
templates you can download and use: Mobile, Browser multi-
window, Browser scroll, Personas.
4. Use your printer and scanner. Draw the framework by
hand (you can use ruler to draw more accurately), then just
scan it using a scanner or mobile app, and print it. You can
edit your template in image redactor before printing. You can
remove unnecessary details or duplicate some elements. You
can also print a readymade site page, photos, and other
descriptive elements. You can paste the cut-outs in your
sketch.
5. Use Evernote for scanning. Evernote is a great design tool.
You can keep and share your sketches in it, you can create
themes, and use tags to organize your sketches. The abilities
of the “Scanner” mode are particularly impressive. You put
your sketch in front of it and it “scans” it, so you get the copy
of the sketch. Then you can invite your colleagues to Evernote
and give them your note link. Since there is a mobile app for
tablets and phones, you can always have your sketches at
hand.
 6. Hybrid sketching. To put some life and realism into your
sketches you can combine them with photos. That means that
you have to take a photo and then draw some story with
interface elements on it. This can also help you to notice
some interaction issues and details.
7. Tracing real world. If you need to create a
storyboard, illustrate an experience in a specific context (e.g.,
a person using a smartphone at a bus station), you need to
include depictions of people, places, and various real-life
objects. These can be difficult to draw, especially if you
haven’t mastered drawing skills, but here’s a simple tip: Take
a photo of the object or the situation, and then obtain the key
objects contour using an image editor. You can use the
resulting contour in your sketches afterward. Of course, if you
have a tablet and stylus, it will be even easier.

Wireflow: Outlining System Flow and Branching

The wireflow is essentially a sequence of the system flow, screen after

screen, with branches and decision points. We should consider how a user
addresses their task, the way they move from screen to screen, and their
overall experience of the product over time.
Wireflow, or what you are drawing and the way it is connected, could be
organized according to the following approaches:

 Sequence. A sequence is a straight journey, screen after

screen. It can also be a story with decision points; you show
not only the journey but also decision points and different
paths the user can choose. You can show the structure of
screen interaction.
  State changes. Depict different screen states of some
element and the conditions or actions that cause the
transitions between these states.
 Screen vs. screen elements. You can draw the whole
screens or consider micro-interactions and interactions.
 Platforms. You can consider one platform experience or
multiple platforms.
 Scope. Will you depict a part of the user journey or the whole
journey? One user interaction with the system, or multiple
users’ interactions?
I generally try to define the following wireflow types, depending on the
organization and practical use:
1. Mapping overall flow and high-level flow. Promptly
sketch the screen shifts and draw the general journey of your
product usage. Here you can include some context and you
can optionally show some user interaction. For example, an
eCommerce shopping service is quite a long journey that may
include a lot of steps: how the user found the shop, the steps
they went through to order the product, how they paid, and so
on.
2. Screen flow. This focuses on a specific functional flow
through the system. It could be a small straight sequence of
 screens or a journey with branching. For example, a user
uploading some photos or a video.
3. Navigation scheme. Draw your screen and the options it
contains. This is not supposed to map the journey. This step
includes information that shows the options a user can
choose, the directions users have, and various app parts. I
usually create a navigation scheme at the beginning of a
project. It serves to understand how navigation should be
structured (what points should be included, how many levels
are necessary).
4. Screen states. Draw the screen or element states (an
example might be a file upload dialogue). In this case, for
example, the screen will have the following states:
 Blank

 A user pulls the file in the active area

 The file is uploading

 The file is uploaded

 There is an error

Sketching UX Flow: A Quick How-to Guide

The wireflow design process is similar to the wireframe one. Many steps
are similar or identical, but there are some important differences:

Define what you need to draw. Decide exactly what you want to draw
(e.g., the general history or a fragment of your design). Do you want to
generate different options or to think through the details of one journey?
Decide whether you are going to show your sketches to someone else or
not.
Define what keyframes and transitions you should include in your
drawing. If you add all the screens and shifts your wireflow will be very
long and complex. Consider which key screens you should show to convey
the essence of the interaction that helps accomplish your task. The same
goes for screen shifts. You need to choose which shifts will be more useful
in expressing your idea. Check out this example for reference.
Define the starting point. What will be the starting point of your
journey? You can start with the entry point, i.e., the start of the journey,
for example, what a user sees when they log into your app. Alternatively,
you can start at the midpoint or with the most
interesting/difficult/important screens or process steps. Or you can start at
the end, with the end result achieved by a user, and describe the steps
the user took to come to this point.
Decide what comes next. After drawing the starting steps, decide what
goes next by answering the following questions:
 Which way does this step lead users?

 Which way do you want them to go?

 What do they have to do to get there?

Sketch alternative routes, entries. Think about alternative ways the

user can get to each step:
 What will happen if the user’s Internet connection fails?
  What other options do they have?

 What can go wrong in the case of user or app error, what will
happen?

 What will happen if the user closes the app at this step?

 Where will the user start the next time he launches the app?

Think about alternative flows. Analyze the history, design an

alternative flow, and sketch it.
Add annotations, notes, details. Add the explanatory elements that
will clarify non-obvious details.
Save. Make a digital copy of the sketch.
Share. Share the sketch (e.g., via Evernote or InVision).

Essential UX Flow Sketching Tips and Tricks

Draft a wireflow first. If you are going to think quite a long journey
over, you would better make a quick sketch in order to understand how
much space you need and in order not to miss some important steps or
details. It would be difficult to add them to the paper sketch afterward.
Don’t create a huge map with too many details. Paper sketches
don’t have an undo button, so it will be difficult to make changes. You
may draw the details too accurately and this will distract your imagination
from the generation of different high-level variants. Instead of creating a
huge scheme that would illustrate the entire system, try to focus on the
key scripts and try to dedicate an individual page for each script.
Cut unnecessary details and combine various detalization
levels. It is not necessary to draw all the interaction descriptions, so try
to use only the key elements of your journey. While drawing a huge
interactions map, you have no need to work every single screen out in
detail. Some screens could be just represented by several squares, and
other, key screens, could be worked out in detail.
Try different paper sizes. Try different paper formats, A3 or A5. Paper
sheet size will limit you and will affect your process in different ways. A
small paper sheet will not let you add many screens or details, but it can
help you to concentrate on the main ideas. Using a big paper sheet, you
can draw one huge journey, a lot of details, and additional notes.
Alternatively, you can place a number of small journeys on it.
Post-it notes can help too. You can also try to use post-it notes. You
can draw separate screens or some footnotes on them, or you can draw
additional states of your sketch’s elements. Their advantage is that they
can be easily replaced, you can also simply move the note somewhere
else. For example, in case the flow has changed, you can just change the
order of your post-it notes.
Use templates. Try to use templates. They will save time and will enable
you to create more clickable, high-quality prototypes.
Try using a whiteboard. A whiteboard has a number of advantages. It is
becoming more and more popular because it allows you to draw a huge
journey with a lot of branches. You can draw a lot of application
components on paper and then just attach them to the whiteboard using
magnets, adding them to the journey.
Sketching a shadow. Shadows can help you to mark important
elements and they add visual attractiveness to your sketch. I use three
different types of shadows:
 Lines following the light direction - this does not always look
beautiful, but you can use the graduation and pick the objects
up to different “heights.”

 Outlining some part out with a darker color (only the bottom
or the bottom and right side)
  Using the Pro-marker (or its equivalent in the app you use for
drawing)

Drawing components. An objection like “I can’t draw that well” may

stifle your initiative. It is actually easier than it sounds. Even the most
complex sketches are generally composed of a number of basic blocks,
like in this example. If you can draw a point, a line, a triangle, a square,
and a circle, then you have the essential building blocks you need to draw
anything for your sketch.
Putting it all together. The basic elements, buttons, radio buttons, and
dropdowns are composed of basic elements. After learning to draw these
elements, you can combine them and draw complex blocks and
components.

Wrap Up

The goal of this post was not to create the ultimate, one-size-fits-all guide
to UX sketching, or sketching in general, because designers have different
needs and personal preferences.

As you can see, this is a lot to cover. Designers use a myriad of tools,
techniques, and approaches to produce UX sketches, and it’s rather
subjective. Certain techniques may or may not work for different people
working on different projects. If you’re just getting started, you should
definitely experiment. Constant practice and experimentation will help
you find what works for you.

SKETCHING RED ROUTES

Red routes are a matrix which helps prioritise your content and
functionality based on usefulness to the most users. They can be
particularly helpful when you have 2 equally distinct user groups.
It's quite a simple exercise that you can do internally with data on
an existing app or with user interviews.

Red routes
Red routes are a matrix which helps prioritise your content and functionality based
on usefulness to the most users. They can be particularly helpful when you have 2
equally distinct user groups.

It’s quite a simple exercise that you can do internally with data on an existing app or
with user interviews. If your product isn’t live, you can brainstorm with your team.

The set up
Draw an axis of time and an axis of people. For a red route exercise it doesn’t matter
which is which, but I usually add time as the x-axis as is convention in other
professions. Next draw a grid of 16 squares (4×4).

See below for label axes along with the initial set up. The shading is normally done in
red, but can be any colour; this gives a more direct visual clue to a hierarchy of
features. Just using lines here is perfectly fine too.
Completing your red route
Next, place your features within the quadrants you’ve created. Ideally you want one
in each, but depending on the size and complexity of your app, you could have a
few. Those features used by most users most of the time go top right, those used by
very few people, very little of the time go bottom left. Everything else fits in
between.

And here’s an example of a completed red route with features in for an app I worked
on in 2015, which was for both creatives and recruiters. The most used feature by
both groups of users is browsing content followed by uploading content (just
creatives) and liking a project (both recruiters and creatives). The least used would
be messaging creatives, which was a paid option that few people would users some
of the time.
Responsive Design principles
Responsive design principles in UX design are based on creating
user experiences that seamlessly adapt and respond to different
screen sizes and devices. Responsive web design allows the
website to automatically resize depending on the device size.
Responsive websites appear smaller to fit smaller screens, such as
mobile phones, and larger to accommodate larger screens, such as
desktop computers. Responsive web design often involves more
than resizing a website. When planning a website design, UX
designers must consider how the elements on each page will
respond to different screen sizes. A smaller screen means less
space, so a responsive website may change where elements
appear. Here are the key principles of responsive design in UX:

Fluid and flexible layouts: UX designers use fluid and flexible layouts
that easily adjust to different screen sizes. Design elements are
scaled and arranged appropriately to maintain a cohesive and
visually appealing presentation.

Content prioritization: Prioritizing essential content for smaller

screens is very important in responsive design. UX designers
strategically determine which elements to display prominently on
smaller devices to maintain a clear and focused user experience.

Performance Optimization: Performance optimization is crucial in

responsive design to ensure smooth loading and fast response time
across devices. Efficient coding, image optimization, and reduced
data consumption contribute to a positive user experience.
Test and Iterate: Responsive design involves continuous testing and
iteration. UX designers gather feedback from users of various
devices to identify any problems or areas for improvement and
refine the design accordingly.

User-centered approach: Responsive design puts users at the

center of the design process. Understanding the needs, preferences
and behaviors of users is essential to adjust the design for their
comfort and satisfaction on different devices.

Consistency in experience: Regardless of the device used, UX

design ensures that the user experience is consistent and seamless.
Layout, navigation and interactions should be familiar and intuitive
across all platforms.

Mobile-first approach: Following the mobile-first approach, UX

designers prioritize designing for mobile devices first and then
expand to larger screens. This ensures that the design is optimized
for mobile users who make up a significant portion of the audience.

Touch interactions: For mobile and touch-enabled devices,

responsive design has touch interactions. Buttons and interactive
elements are designed to accommodate finger taps and gestures,
enhancing usability on touchscreens.

Text Navigation: The navigation is designed to adapt to different

devices and page sizes. UX designers may use drop-down menus,
expandable sections, or other text navigation methods to improve
the user experience.
Clear and legible typography: UX designers focus on typography
that is legible and easy to read on different screen sizes. Font size,
line spacing and text contrast have been carefully considered to
increase readability.

Text Navigation: The navigation is designed to adapt to different

devices and page sizes. UX designers may use drop-down menus,
expandable sections, or other text navigation methods to improve
the user experience.

Following these principles, UX designers create responsive designs

that provide users with a seamless, accessible and enjoyable
experience across a range of devices, ultimately increasing user
engagement and satisfaction with the product or service.

Wireframing is a process where designers draw overviews of

interactive products to establish the structure and flow of possible
design solutions. These outlines reflect user and business needs.
Paper or software-rendered wireframes help teams and
stakeholders ideate toward optimal, user-focused prototypes and
products.
Wireframing is the Art of Efficiency
The aim is to communicate the structure of a possible
solution so your team can identify solid user experience
(UX) design foundations to build on and stakeholders can
offer feedback on a visual item.

So, you should show what elements your users would expect to
find and how these work in flow. To begin, you should:

1. Focus on functionality, accessibility, layout and

navigation to make a design easier to use, produce
and sell – Leave nice-to-have features out.
2. Structure a hierarchy with a list of prioritized
elements for each page – Determine the information
architecture early so you can categorize information clearly.
3. Divide the screen into large blocks for content.
4. Fine-tune these blocks with details – links, placeholders
for images, etc.
 5. Maintain a clean grid-oriented view of all content –
Apply best practice design principles to maximize ease of
use.
6. Use annotations to help others understand your
wireframes faster.
7. Put mobile first – When you start wireframing for the
smallest screens, you can achieve better consistency across
devices.
8. With higher-fidelity wireframing, be more specific –
Although you shouldn’t overdo content, still show
what needs to appear and accurate sizes of fonts, icons,
links, etc.
9. Keep your wireframes concise – Don’t worry about finer
details such as aesthetic appeal.
Remember, wireframes are primarily tools for
collaboration toward making better prototypes and
products faster. As such, they’re deliverables you shouldn’t
overinvest in. Your best wireframes will prove your ability to strip
back to basics and recognize constraints in user-centered design.
They’ll therefore confirm your expertise as you and your design
team iterate toward the most effective solution in a project.

What Exactly Is
Wireframing? A
Comprehensive Guide
BY JAYE HANNAH, UPDATED ON MAY 10, 202311 mins read

If you’ve dipped your toes into the fascinating field of UX design, you’ve
likely heard the word “wireframes” tossed around. Wireframing is a crucial
part of the product design process—but what actually are wireframes, and
why are they important?
In this blog post, we’ll take you through everything you need to know about
wireframes. We’ll start off by dissecting the anatomy of a wireframe—from
what it is, to where it fits into the product design process, to what features
are included within one.

We’ll then take a look at the different types of wireframes, what tools are
required to build them, and finish off with some wireframing examples to
showcase their versatility.

Without further ado, let’s take you from wireframing novice to bona fide
expert!

Here’s a summary of what we’re going to cover:

1. What is a wireframe?
2. When does wireframing take place?
3. What is the purpose of wireframing?
4. What are the different types of wireframes?
5. What is included in a wireframe?
6. Website wireframes vs. mobile wireframes
7. What tools are used to create wireframes?
8. Examples of wireframes
9. Conclusion

Ready to lift the lid on the wonderful world of wireframes? Off we go!

1. What is a
wireframe?
Let’s start with the obvious question: what is a wireframe?
Not dissimilar to an architectural blueprint, a wireframe is a two-
dimensional skeletal outline of a webpage or app. Wireframes provide a
clear overview of the page structure, layout, information
architecture, user flow, functionality, and intended behaviors. As a
wireframe usually represents the initial product concept, styling, color, and
graphics are kept to a minimum.

Wireframes can be drawn by hand or created digitally, depending on how

much detail is required.

Wireframing is a practice most commonly used by UX designers. This

process allows all stakeholders to agree on where the information will be
placed before the developers build the interface out with code.

2. When does
wireframing take
place?
The wireframing process tends to take place during the exploratory phase
of the product life cycle. During this phase, the designers are testing the
scope of the product, collaborating on ideas, and identifying business
requirements. A wireframe is usually the initial iteration of a webpage, used
as a jumping-off point for the product’s design.

Armed with the valuable insights gathered from the user feedback,
designers can build on the next, more detailed iteration of the product’s
design—such as the prototype or mockup.

To learn more, head to our blog post explaining the difference between a
wireframe, a prototype and a mockup.
3. What is the
purpose of
wireframing?
Wireframes serve three key purposes: They keep the concept user-
focused, they clarify and define website features, and they are quick and
cheap to create. Let’s take a look at each of these purposes in more detail.

Wireframes keep the concept

user-focused
Wireframes are effectively used as communication devices; they facilitate
feedback from the users, instigate conversations with the stakeholders, and
generate ideas between the designers. Conducting user testing during the
early wireframing stage allows the designer to harbor honest feedback, and
identify key pain points that help to establish and develop the product
concept.

Wireframing is the perfect way for designers to gauge how the user would
interact with the interface. By using devices such as Lorem Ipsum, a
pseudo-Latin text that acts as a placeholder for future content, designers
can prompt users with questions like “what would you expect would be
written here?”

These insights help the designer to understand what feels intuitive for the
user, and create products that are comfortable and easy to use.
Wireframes clarify and define
website features
When communicating your ideas to clients, they may not have the technical
lexicon to keep up with terms like “hero image” or “call to action.”
Wireframing specific features will clearly communicate to your clients how
they’ll function and what purpose they’ll serve.

It also enables all stakeholders to gauge how much space will need to be
allocated for each feature, connect the site’s information architecture to its
visual design, and clarify the page’s functionality.

Seeing the features on a wireframe will also allow you to visualize how they
all work together—and may even prompt you to decide to remove a few if
you feel they’re not quite working with the rest of the page’s elements. The
wireframing stage is when stakeholders can be brutal!

Wireframes are quick and

cheap to create
The best part about wireframes? They’re incredibly cheap and easy to
create. In fact, if you have a pen and paper to hand, you can quickly sketch
out a wireframe without spending a penny. The abundance of tools
available means you can also build a digital wireframe within minutes (we’ll
talk more about that a little later on!).

Often, when a product seems too polished, the user is less likely to be
honest about their first impressions. But by exposing the very core of the
page layout, flaws and pain points can easily be identified and rectified
without any significant expenditure of time or money. The later it gets in the
product design process, the harder it is to make changes!

4. What are the

different types of
wireframes?
There are three main types of wireframes: low-fidelity wireframes, mid-
fidelity wireframes, and high-fidelity wireframes. The most significant
distinguishing factor between these wireframes is the amount of detail they
contain.

Let’s look at these more closely:

Low-fidelity wireframes
Low-fidelity wireframes are basic visual representations of the webpage
and usually serve as the design’s starting point. As such, they tend to be
fairly rough, created without any sense of scale, grid, or pixel-accuracy.

Low-fidelity wireframes omit any detail that could potentially be a distraction

and include only simplistic images, block shapes, and mock content—such
as filler text for labels and headings.
Low-fidelity wireframes are useful for starting conversations, deciding on
navigation layout, and mapping the user flow. In short, low-fidelity
wireframes are ideal if you’ve got stakeholders or clients in the room and
you want to sketch something up with a pen mid-meeting. They’re also
incredibly useful for designers who have multiple product concepts and
want to quickly decide which direction to go down.

Mid-fidelity wireframes
The most commonly used wireframe of the three, mid-fidelity wireframes
feature more accurate representations of the layout. While they still avoid
distractions such as images or typography, more detail is assigned to
specific components, and features are clearly differentiated from each
other.

Varying text weights might also be used to separate headings and body
content. Though still black and white, designers can use different shades of
grey to communicate the visual prominence of individual elements.
Although they are still relevant in a product’s early stages, mid-fidelity
wireframes are usually created using a digital wireframing tool, such
as Sketch or Balsamiq.
Source: Katherine Lu’s portfolio

High-fidelity wireframes
Finally, high-fidelity wireframes boast pixel-specific layouts. Where a low-
fidelity wireframe may include pseudo-Latin text fillers and grey boxes filled
in with an ‘X’ to indicate an image, high-fidelity wireframes may include
actual featured images and relevant written content.

This added detail makes high-fidelity wireframes ideal for exploring and
documenting complex concepts such as menu systems or interactive
maps.

High-fidelity wireframes should be saved for the latter stages of the

product’s design cycle.

Curious about a career in UX design?

Start learning for free!
5. What is included in
a wireframe?
As we touched on earlier, how many features are included in a wireframe
depends largely on whether the wireframe is low, mid or high fidelity.
However, elements that are typically found in wireframes include logos,
search fields, headers, share buttons, and pseudo-Latin (Lorem Ipsum)
placeholder text.

High-fidelity wireframes may also include navigation systems, contact

information, and footers. Typography and imagery should not be part of a
low or mid-fidelity wireframe—but designers often play with the sizing of the
text to represent the information hierarchy or indicate a header.

Wireframes are traditionally created in greyscale, so designers often play

around with shading—using lighter shades of grey to represent light colors,
and darker shading to represent bolder colors. In high-fidelity wireframes,
designers may throw in the occasional color; such as red to indicate a
warning or error message, or dark blue to represent an active link.
As wireframes are two-dimensional, it’s important to bear in mind that they
don’t do well with showing interactive features of the interface like drop-
downs, hover states, or accordions that implement show-hide functionality.

6. Website
wireframes vs. mobile
wireframes
When we think of wireframes, we often cast our minds to desktop website
wireframes. But mobile wireframes require special considerations. So what
are the core differences between the two?

Size
Due to the size differences between mobile apps and desktop
websites, layouts have to be thought about very carefully. Due to the
screen width on a desktop website, for example, your website wireframe
might feature a layout that spreads over multiple columns.

On a mobile app, the number of columns is usually restricted to one or two

columns maximum. You’ll need to decide whether they see an infinite
scroll, or whether you want to decrease the number of items per page in
order to display other content beneath.

Behaviour
The second core difference is the behavior of the mobile app or website.
On a website, the user will use a mouse or trackpad to navigate the page.
The user can also click on certain features to reveal additional pieces of
information, or even hover over certain interactions to reveal menus.

On a mobile app, however, users will have to tap the screen to open a
feature. When wireframing for mobile apps, this means thinking more
carefully about how you will encourage your users to tap a specific button
to reach a specific goal.

Interaction
The way that users interact with mobile apps differs vastly from how they
interact on a desktop. The app may pull content and data from the Internet
in a similar fashion to a website, but many apps also offer the user the
option to download content for offline use. These “offline modes” specific to
mobile applications should be reflected in your wireframe.

To learn more about creating wireframes for mobile apps and websites,
head here!

7. What tools are

used to create
wireframes?
In today’s technology-abundant landscape, designers have a myriad of
advanced wireframing tools and programs at their fingertips. Built-in UI
components, such as form elements, button states, and navigation allow
designers to take advantage of pre-made design decisions and create
wireframes in a fraction of the time.
One of the best-known wireframing tools on the scene is Sketch, which
uses a combination of artboards and vector design shapes to enable
designers to easily create wireframes on a pixel-based canvas. Sketch also
has a convenient Symbols feature, meaning you’ll be able to reuse UI
elements once they’ve been created.

Need something more professional than a paper wireframe but aren’t

striving for pixel perfection? Opt for the equally popular Balsamiq, a tool
that enables designers to focus on the layout, intuitive interaction design,
and basic information architecture rather than the aesthetic quality.

To learn more about wireframing tools, check out our take on the 8 best
wireframing tools that every UX designer should know.

8. Examples of
wireframes
To give you an idea of the variety of ways wireframes can be created (and
to provide you with some well-needed inspiration for your own wireframes)
let’s take a look at some wireframing examples:

Monica Galvan shows us the transition from low-fidelity wireframe to high-

fidelity wireframe, right through to the final UI for her Impossible project.
Elvira Hellenpart’s wireframes for the VocabApp project, created as
part of the CareerFoundry UX Fundamentals Program.
“Starting with low-fidelity ink-on-paper wireframes and a mobile-first design
approach, I began to iterate my way to a higher-fidelity prototype,” says UX
alumnus Aaron Akbari Mort about his Inktank project.

9. Conclusion
So there we have it: everything you need to know (and then some) about
wireframes. They may seem basic enough to be overlooked, but
wireframes will enable you to get vital user, client, and stakeholder
approval when it comes to the layout and navigation of the product’s key
pages.

Armed with this approval, you can move forward with the confidence that
you’re designing something that your clients and users will love. The
bonus? Wireframes save heaps of time and money in the long run

Ultimate Guide to Prototyping in Figma

Written By

Molly Hellmuth

Read Time

12 min

Last Updated

August 9, 2023
Figma is a great tool for prototyping UX/UI designs. It allows you to create interactive
flows directly in the design file with advanced, yet easy-to-use features. In just a few
minutes, you can turn your static designs into a realistic version of your website or
product.

Creating prototypes is important for many reasons. You can explore how new user
flows will work. Communicate interactions to your team. Test and get feedback from
your users. And pitch designs to stakeholders for buy-in.

In this guide, you'll learn

 Prototyping 101
 How to add prototype flows
 How to add interactions (instant, animated, smart animated)
 How to create a fixed position
 How to add overflow scrolling
 How to create interactive components
 How to present and share your prototype
👀 Follow along with our (free) Prototype Playground for Figma. Included is an example
of every prototype from this article (11 in total). Along with step-by-step instructions
on how to re-create all the interactions yourself.

Prototyping 101
First, let's go over some prototyping basics. Organize your designs and get familiar
with the most important prototyping features. This will protect your designs and
speed up your workflow.

Get organized
When you're ready to start prototyping, add a copy of every screen and component
needed to a new page. Arrange everything in a logical order with clear, identifiable
names. Using copies will allow you to use the same designs in many prototypes.
While also keeping the originals safe and organized.
Pro tip: Turn frequently used screens into main components to reduce maintenance.

UI Prep Design System

Access key features

Assess (almost) all prototype features in the right-hand panel under "Prototype".

A. Prototype panel

B. Add a new prototype flow

C. Add and configure interactions

D. Add and configure overflow scrolling

E. Configure prototype settings

F. Present prototype
UI Prep Prototype Playground

Add prototype flows

Each page in your Figma file can have one or many prototype flows. Each one
needs to have its own starting point and unique name. Select the first frame you wish
to appear in your flow and click the "Add" icon next to "Flow Starting Point". Once
added, rename the flow by clicking on the name input. Add a description by clicking
the "Edit" icon next to the flow name. To remove the starting point click the "Delete"
icon next to "Flow Starting Point"

UI Prep Prototype Playground

Add interactions
Interactions are the primary feature used when building a prototype. Use them to
show different behaviors, effects, and navigational patterns. They work by
connecting two layers, then determining how those layers will interact with each
other by adding a trigger, action, and animation. Interactions can be simple with
instate animations. Or they can be more complex with animated elements that move
or change properties.

Trigger: The event that causes a change (on tap/click, on drag, while hovering,
while pressing, key/gamepad, mouse enter, mouse leave, mouse down (click),
mouse up (release)).

Action: The change that is happening (navigate to, change to, open overlay, swap
overlay, close overlay, back, scroll to, open link).

Animation: The behavior of the change (instant, dissolve, smart animate, move in,
move out, push, slide in, slide out).

Connect layers
Add a connection between any two layers (e.g. frames, groups, shapes, text layers,
etc..). To add a connection, hover over or select the first layer and drag the blue
node that appears to the second layer. The "Interaction Details" menu will then
appear. The first layer will become a new flow starting point if has no other
connections.

Pro Tip: If navigating to a far away frame, select your first layer and click the "Add"
icon next to "Interactions". Once added, select the frame you wish to navigate to from
the dropdown menu.

UI Prep Prototype Playground

Instant interactions
Use "instant" animations to have the action take place with no movement or effect.
This is great for actions like navigating between pages or showing a modal/tooltip.
Example: navigate between pages
Tap a button to navigate to new page with an instant animation.

UI Prep Prototype Playground

UI Prep Prototype Playground

Example: show tooltip

While hovering over an icon, open overlay tooltip with an instant animation
UI Prep Prototype Playground

UI Prep Prototype Playground

Animated interactions
Use animations to add movement to your interactions (dissolve, move in, move out,
push, slide in, slide out). Select different easing curves and adjust the time to
customize the animation.
Figma animations

‍ hat are easing curves? Easing curves determine the speed during the
W
beginning, middle, and end of the animation. A linear animation will move at the
same speed the entire time. While an animation set to "ease in" will be slower in the
beginning, then speed up. Adding an easing curve makes the animation feel softer
and more realistic.

Figma easing curve

Example: auto-scroll on page

Click a button to scroll to a different section of the page with an animation. NOTE:
Increase the animation time from 300ms to 600ms for a softer feeling.
UI Prep Prototype Playground

UI Prep Prototype Playground

Example: open & close menu drawer

Tap an icon to open overlay menu with a move in animation. THEN tap an icon
to close overlay menu. NOTE: the "close overlay" action will automatically copy the
"open overlay" animation settings (e.g. move in → move out).
UI Prep Prototype Playground

UI Prep Prototype Playground

Smart animated interactions

Use smart animate to identity matching layers on different frames and animate the
difference between them. These differences can include a change in position, size,
colors, etc.. Figma will know which layers match based on their name and layer
order (e.g. "Container 01").
Pro tip: Check to see which layers match by hovering over them while in prototype
mode.

UI Prep Prototype Playground

Example: toggle switch ON/OFF

Click OFF switch to navigate to ON Switch's frame with smart
animation. THEN Click ON switch to navigate to OFF Switch's frame with smart
animation. NOTE: the differences being animated are the position of the circle (left
→ right), and the size of the blue background (small → large).

UI Prep Prototype Playground

UI Prep Prototype Playground

Example: delete email

Drag the email to navigate to a new frame with smart animation. THEN after a
delay, navigate to a new frame with smart animation. NOTE: the differences being
animated are the position of "Email 02" (in view → out of view), and the position of
the emails 03-12 (lower → higher).

Pro tip: Smart animate a layer leaving or entering a frame by placing it in view on one
frame, and out of view on the other. The out of view layer is still nested in the frame
but is hidden due to "clip contents" being on.

UI Prep Prototype Playground

UI Prep Prototype Playground

Fixed Position
Fix an element's position in your prototype so it will stay in the same location while
scrolling. This is helpful for elements that you wish to always be in view (e.g.
top/bottom navigation, FAB, CTA). Configure this setting in the Design Panel under
"Constraints".

Example: fixed top & bottom navigation

Select layer(s) you wish to fix and choose "Fix position when scrolling"
UI Prep Prototype Playground

UI Prep Prototype Playground

Add overflow scrolling

Overflow scrolling allows you to scroll through individual frames inside your
prototype. This is helpful when prototyping UI regions or components that have their
own scrolling behavior (e.g. lists, carousels, menus, tables). To use overflow
scrolling, you must have a frame (not group) with nested content "overflowing" past
the bounds. This content will then appear masked with "clipped content" turned on.

Example: carousel
Select frame with overflowing content and choose "Horizontal Scrolling"

UI Prep Prototype Playground

UI Prep Prototype Playground

Example: Menu
Select frame with overflowing content and choose "Vertical Scrolling"

UI Prep Prototype Playground

UI Prep Prototype Playground

Use interactive components

Add interactions between variants in a component set. Instances of those variants
will then follow their predetermined interactions in any prototype. This is particularly
helpful for common, stateful, components (e.g. toggles, buttons, inputs). Defining
interactions in advance makes prototyping faster and reduces the number of screens
needed. Not familiar with variants? Learn more about them in Figma Variants 101

Pro tip: Interactive components are still in beta. Sign up here to get access.
Example: interactive checkbox
Click the deselected icon to change to the selected icon with an instant animation.
THEN click the selected icon to change to the default icon with an instant
animation. NOTE: using interactive components allows the user to select any
combination of items, in any order, with no additional prototyping.

UI Prep Prototype Playground

UI Prep Prototype Playground

Example: interactive buttons

While hovering over the default button, change to the hover button with
an instant transition. THEN click the hover button to change to the selected button.
THEN after a delay on the selected button, change to the default button with
an instant transition.

UI Prep Prototype Playground

UI Prep Prototype Playground

Interactive games
Play with ..I mean.. practice with interactive components by using these interactive
games.

 Mindsweeper
 Sudoku
 Battleship Game

View prototype
Open the presentation tab to view and interact with your prototype. For a more
realistic feel, select different device mockups. Anyone with access to the prototype
can interact with it and leave comments for the team.

Adjust prototype settings

Open "Prototype settings" and select the device you would like your prototype to
appear in (e.g. Pixel 2, ipad pro 11, custom size). This setting will apply to every
prototype flow on your page. If designing for multiple devices, use multiple pages in
your Figma file.
Pro tip: When designing for mobile or tablet, ensure the width of your designs match
your device type (e.g. iPhone 11 = 375px width).

Present prototype
Select the "Present" icon next to your flow starting point or in the top toolbar to
present the prototype. If you have multiple flows on one page, toggle between them
in the sidebar. You can also add comments with at-mentions to take notes, ask
questions, and leave feedback for team members. Configure additional settings in
the "options" menu.
Pro tip: Use the keyboard shortcut "Z" to toggle between different settings in the
"options" menu.

UI Prep Prototype Playground

Share
Share the prototype by selecting "Share Prototype" in the presentation toolbar. To
only share the prototype, and not the design file, select "can view prototypes only" in
the first input.

Building high fidelity mockups:

 What is high-fidelity prototyping—and how
can it help?

Think of your favorite websites, wearables, mobile apps: most memorable

digital products start out as prototypes. Exceptional user experiences are
often refined through high-fidelity prototyping, when teams create
interactive mock-ups to test their final designs. But where do you begin—
and how do you know when your prototype is ready for prime time as a
finished product?

Read on to learn more about:

 What is high-fidelity prototyping, and how it works

 How your team can benefit from high-fidelity prototyping
 4 steps to make your own high-fidelity prototypes with Figma

What is a high-fidelity prototype?

A high-fidelity prototype is a polished simulation of your final product.
Visual design details and real content show the look and feel of the end
product. For testing, robust interactivity and functionality provide a more
realistic user experience.

How high-fidelity prototyping works

High-fidelity prototyping plays a key role in the later stages of the design
process, from usability testing to developer handoff. Design teams use hi-
fi prototypes to vet a digital product’s user flow and user interface or UI
design with their target audience. Designers also share high-fidelity
prototypes with key stakeholders to demonstrate key design features,
interactions, and workflows for input and approval.

Benefits of high-fidelity prototypes

You can refine design features and user flows with high-fidelity
prototyping. In the process, you'll also unlock these benefits:

 Get better user feedback. End users get immersed in a clickable,

interactive prototype. This experience yields deeper insights and
detailed feedback on usability and UX design.
 Gain stakeholder buy-in. Hi-fi prototypes help team members,
leadership, and investors visualize your design, so they can
approve it—and get fired up about the actual product.
 Avoid costly product design mistakes. High-fidelity prototypes
help teams validate the final product design, and avoid tricky fixes
during the development process.
 Speed product development. Developers use high-fi prototypes
as references for product features and functionality. These models
help devs build faster, with fewer product development iterations.

High-fidelity vs. low-fidelity prototypes: What’s the difference?

While high-fidelity prototypes closely resemble your final product, low-

fidelity prototypes do not. Low-fidelity prototypes range from rough paper
prototypes to basic digital wireframes. They don't include complex
interactions, animations, or transitions—but hi-fi prototypes do.

Designers create lo-fi prototypes in the early stages of the design process
to communicate and test high-level design concepts. Teams need higher
prototyping fidelity later, when they're ready to refine designs and solve
usability issues before development. Hi-fi prototypes offer the level of
detail stakeholders need to approve designs with confidence.

Build high-fidelity prototypes in 4 steps

It's true: creating high-fidelity prototypes can be time-consuming. But
Figma’s prototyping tool lets you add polish and functionality quickly—no
coding required. With the right tools, your team can bring UX designs to
life with hi-fi prototyping in just four steps.
Step 1: Research and plan.

What goals do you aim to achieve with your high-fidelity prototype? Use
UX research to hammer out your purpose and objectives.

Step 2: Define key functionality and interactions.

What functionality and user interactions will bring your hi-fi prototype to
life? Apply design thinking to identify key features for your testers and
stakeholders.

Step 3: Fill in your high-fidelity prototype.

Start with detailed mock-ups of a user flow. Add visual assets,

interactions, animations, and transitions from your design library.

Step 4: Test and refine your prototype.

Improve your designs with user testing. Show key stakeholders your high-
fidelity prototype to ensure the UX supports your business and brand. If
you don’t already have a brand system to build from, you can create your
brand design system with Figma.

Jumpstart your high-fidelity prototypes with Figma

Gather input for your high-fidelity prototype with a real-time brainstorming
session on FigJam’s online collaborative whiteboard . Then use Figma’s
intuitive interactive prototyping tool to:

 Choose UI elements and define interactions. Layer interactive

content with dynamic overlays.
 Apply conditional logic and other advanced prototyping features
for a realistic user experience.
 Bring in rich media such as animated GIFs and MP4 videos to
engage your users.

High-fidelity prototyping tips and tricks

Level up your prototyping game with Figma’s high-fidelity

prototyping challenge, and score 15 bonus pro tips. For more inspiration,
check out resources created by the Figma community, including
prototype examples, exercises, and UI kits to guide and inspire you.

DESGNING EFFICIENCY WITH TOOLS

3 High-Fidelity Prototyping Principles Designers Need to

Know

What is high-fidelity
prototyping?

UNIT 5

The statement of the problem is one of the first things that a colleague or
potential client will read. With the vastness of the information available at
one’s fingertips in the online9 world, your work may have just a few
seconds to draw in a reader to take a deeper look at your proposal before
moving on to the next option. It explains quickly to the reader, the
problem at hand, the need for research, and how you intend to do it.

A strong, clear description of the problem that drew you to your research
has to be straightforward, easy to read and, most important, relevant.
Why do you care about this problem? How can solving this problem
impact the world? The problem statement is your opportunity to explain
why you care and what you propose to do in the way of researching the
problem.

A problem statement is an explanation in research that describes

the issue that is in need of study. What problem is the research
attempting to address? Having a Problem Statement allows the reader to
quickly understand the purpose and intent of the research. The
importance of writing your research proposal cannot be stressed enough.
Check for more information on Writing a Scientific Research Project
Proposal.

It is expected to be brief and concise, and should not

include the findings of the research or detailed data. The average
length of a research statement is generally about one page. It is going to
define the problem, which can be thought of as a gap in the information
base. There may be several solutions to this gap or lack of information,
but that is not the concern of the problem statement. Its purpose is
to summarize the current information and where
a lack of knowledge may be presenting a problem that needs to
be investigated.

The purpose of the problem statement is to identify the issue that

is a concern and focus it in a way that allows it to be studied in a
systematic way. It defines the problem and proposes a way to research
a solution, or demonstrates why further information is needed in order for
a solution to become possible.

What is Included in a Problem Statement?

Besides identifying the gap of understanding or the weakness of
necessary data, it is important to explain the significance of this lack.

-How will your research contribute to the existing knowledge base in your
field of study?

-How is it significant?

-Why does it matter?

Not all problems have only one solution so demonstrating the need for
additional research can also be included in your problem statement. Once
you identify the problem and the need for a solution, or for further study,
then you can show how you intend to collect the needed data and present
it.

How to Write a Statement of Problem in Research

Proposal
It is helpful to begin with your goal. What do you see as the achievable
goal if the problem you outline is solved? How will the proposed research
theoretically change anything? What are the potential outcomes?

Then you can discuss how the problem prevents the ability to reach your
realistic and achievable solution. It is what stands in the way of changing
an issue for the better. Talk about the present state of affairs and how the
problem impacts a person’s life, for example.

It’s helpful at this point to generally layout the present knowledge and
understanding of the subject at hand, before then describing the gaps of
knowledge that are currently in need of study. Your problem statement is
a proposed solution to address one of these gaps.
A good problem statement will also layout the repercussions of leaving
the problem as it currently stands. What is the significance of not
addressing this problem? What are the possible future outcomes?

Example of Problem Statement in Research Proposal

If, for example, you intended to research the effect of vitamin D

supplementation on the immune system, you would begin with a
review of the current knowledge of vitamin D’s known function in relation
to the immune system and how a deficiency of it impacts a person’s
defenses.

You would describe the ideal environment in the body when there is a
sufficient level of vitamin D. Then, begin to identify the problems
associated with vitamin D deficiency and the difficulty of raising the level
through supplementation, along with the consequences of that deficiency.
Here you are beginning to identify the problem of a common deficiency
and the current difficulty of increasing the level of vitamin D in the blood.

At this stage, you may begin to identify the problem and narrow it down in
a way that is practical to a research project. Perhaps you are proposing a
novel way of introducing Vitamin D in a way that allows for better
absorption by the gut, or in a combination with another product that
increases its level in the blood.

Describe the way your research in this area will contribute to the
knowledge base on how to increase levels of vitamin D in a specific group
of subjects, perhaps menopausal women with breast cancer. The research
proposal is then described in practical terms.

How to write a problem statement in research?

Problem statements differ depending on the type and topic of research

and vary between a few sentences to a few paragraphs.

However, the problem statement should not drag on needlessly. Despite

the absence of a fixed format, a good research problem statement usually
consists of three main parts:

Context: This section explains the background for your research. It

identifies the problem and describes an ideal scenario that could exist in
the absence of the problem. It also includes any past attempts and
shortcomings at solving the problem.

Significance: This section defines how the problem prevents the ideal
scenario from being achieved, including its negative impacts on the
society or field of research. It should include who will be the most affected
by a solution to the problem, the relevance of the study that you are
proposing, and how it can contribute to the existing body of research.
Solution: This section describes the aim and objectives of your research,
and your solution to overcome the problem. Finally, it need not focus on
the perfect solution, but rather on addressing a realistic goal to move
closer to the ideal scenario.

Here is a cheat sheet to help you with formulating a good problem

statement.

1. Begin with a clear indication that the problem statement is going

to be discussed next. You can start with a generic sentence like, “The
problem that this study addresses…” This will inform your readers of what
to expect next.

2. Next, mention the consequences of not solving the problem. You

can touch upon who is or will be affected if the problem continues, and
how.

3. Conclude with indicating the type of research/information that is

needed to solve the problem. Be sure to reference authors who may have
suggested the necessity of such research.

This will then directly lead to your proposed research objective and
workplan and how that is expected to solve the problem i.e., close the
research gap

Identifying a problem statement:

The purpose of the problem statement is to identify the issue that is

a concern and focus it in a way that allows it to be studied in a
systematic way. It defines the problem and proposes a way to
research a solution, or demonstrates why further information is
needed in order for a solution to become possible.

What Is a Problem Statement: Definition, How-To and Example

WHAT IS A PROBLEM STATEMENT?

A problem statement is a concise description of the problem or issues a project

seeks to address. The problem statement identifies the current state, the
desired future state and any gaps between the two. A problem statement is an
important communication tool that can help ensure everyone working on a
project knows what the problem they need to address is and why the project is
important.
Importance of a problem statement
A problem statement is important to a process improvement project because it
helps clearly identify the goals of the project and outline the scope of a project.
It also helps guide the activities and decisions of the people who are working on
the project. The problem statement can help a business or organization gain
support and buy-in for a process improvement project.

What are the key elements of a problem

statement?
There are four key elements you should include when writing a problem
statement:

1. Ideal situation

The first thing your problem statement should describe is what the ideal
situation would be if there wasn't a problem you needed to address. This
section identifies the goals and scope of the project are. This section should
create a clear understanding of what the ideal environment will be once the
issue has been resolved.

2. Reality

The next section of your problem statement should describe what the current
reality is for your company or organization. This section will identify what the
problem is, state why it is a problem and identify who the problem is impacting.
It will also describe when and where the problem was identified.

3. Consequences

The next section of your problem statement should identify what the
consequences of the problem are. This section describes the effects of the
problem by describing how the people affected by the problem are being
impacted and quantifying how much the problem is impacting them. Common
consequences can include the loss of time, money, resources, competitive
advantage, productivity and more.

4. Proposal

The proposal section of a problem statement may contain several possible

solutions to the problem, but it is important to remember that it does not need
to identify a specific solution. The purpose of the proposal section should be to
guide the project team on how they can research, investigate and resolve the
problem.

How to write a problem statement

A good problem statement can be created by identifying and answering several
questions related to the problem. The process used to write a problem
statement should involve answering questions using a method commonly
known as 5W2H.

This process involves identifying what the problem is, why it is a problem, when
and where the problem was identified, who the problem impacts, how they are
impacted by the problem and how much of an impact the problem has. You can
use the following process to craft a problem statement that addresses the
following:

1. Identify the problem

Before you can begin writing your problem statement, you first need to identify
what the problem is.

2. Begin your statement with your ideal situation

Next, you can begin writing your problem statement by describing what the
ideal environment would look like if your problem didn't exist. This section
should try to describe what your company hopes to accomplish as a result of
the process improvement project.

3. Describe current gaps

Next, write the reality section of your problem statement. Your goal in this
section should be to clearly identify what the current environment looks like. In
this section, you should identify what the problem is, what is causing the
problem and why it is an issue. You should also describe when, where and how
you were able to identify the problem.

4. State the consequences of the problem

Next, write the consequences section of your problem statement. This section is
used to quantify and support the claim of what the problem is. You can use this
section to identify specific numbers such as the amount of time or revenue
being lost or the number of resources being wasted. It is important to include
concrete numbers that support your claims in this section.

5. Propose addressing the problem

Finally, end your statement with a proposal section. In this section, you should
try to identify how your company will make progress toward reaching your
goals and accomplishing your ideal environment. While you may choose to
identify several possible solutions in this section, it is more important to focus
on identifying how your company will find those solutions than it is to identify
the specific solution that will be used.

Problem statement example

Here is an example of a problem statement for a sales call center:

Ideal situation:
Ideally, our sales associates would be able to maximize their production by being
able to make more contacts with leads each day.

Reality:
Currently, our sales associates are unable to maximize the number of leads they are
contacting each day because they are spending too much time finding qualified
leads to call and inserting lead information into the system before making calls. This
is a problem because the time our sales associates are spending finding leads and
entering lead information into our system could be used to contact more qualified
leads and generate more sales. We identified this problem in our sales call center
while surveying to gather feedback from our sales associates about what limits their
ability to maximize their sales numbers.

Consequences:
Our sales associates currently spend about two hours per day finding qualified leads
and another two hours per day entering lead information into our system before
they begin making calls. This means our sales associates are only spending half of
their workday actually making calls to qualified leads.

Because our sales associates are not able to use their entire shift to make contact
with leads, their overall sales numbers are being impacted. Our company estimates
that our sales associates would be able to make at least double the number of sales
if they were able to spend their entire shift contacting qualified leads.

Proposal:
Our company seeks to resolve this issue by creating a process improvement team to
identify several potential solutions for how we can reduce the time our sales
associates spend not making contact with qualified leads.

User experience research, or UX research, is the process of gathering

insights about users' behaviors, needs, and pain points through
observation techniques and feedback methodologies. It’s a form of user
research that looks at how users interact with your product, helping bridge
the gaps between what you think users need, what users say they need—
and what they actually need.

The goal of UX research is to understand your users and gain context and
perspectives to help make informed decisions and build user-centered
products. It’s an essential part of designing, developing, and launching a
product that will be an instant hit—but it should also be used throughout the
product’s lifecycle post-launch to keep updated, and ensure new features
are relevant to your audience.

How do you choose the right UX research method?

Choosing the right research method depends on your goals. Some key
things to consider are:
 The feature/product you’re testing
 The type of data you’re looking for
 The design stage
 The time and resources you have available
What are Personas?
Personas are fictional characters, which you create based upon your
research in order to represent the different user types that might use your
service, product, site, or brand in a similar way. Creating personas helps
the designer to understand users’ needs, experiences, behaviors and
goals.

Create Effective Personas

Personas are deliverables in design thinking’s Define phase. As
they’re extremely helpful in ideation, they should
feature early in design processes. To create them, you:

1. Collect extensive data on target users.

2. Determine the qualities of and differences between
users.
3. Develop a hypothesis from the research, determining
the qualities of and differences between users.
4. Ensure stakeholders agree on the hypothesis about
the users.
5. Determine a number of personas – more than one per
project, but focus especially on one.
 6. Name and describe each persona in 1-2 pages,
including:

a. A picture.
b. User’s values, interests, education, lifestyle, needs,
attitudes, desires, limitations, goals and
behavior patterns.
c. Extra details about the persona (e.g., interests) –
anything to make him/her more real and relevant and
help build empathy. A written story is better than bullet
points.
7. Describe several situations/scenarios prompting the
persona to use your product – put him/her in contexts
with problems to overcome.
8. Include everyone involved in the project so they’ll
accept the persona or advise revisions.
9. Send them the persona to use in their work.
10. Ensure everyone develops scenarios – these
should expose the persona optimally to potential use cases.
11. Make continuous adjustments – revisit the persona;
add new features; add required new personas; discard
outdated personas.

How to Use Personas in Design Projects

When you bring personas into projects, you help prevent
stakeholders from designing for themselves. It also keeps
them from stretching generic users to fit designs.
Personas help in quick prototype testing, too. You’ll confirm a
persona works well when you ensure that “he/she”:

1. Stays in context – What specific points about his/her

situation can you map to how he/she can use your
product now?
2. Reflects a target user’s real behavior patterns,
attitudes, skillset, motivations and goals within the
product’s domain.
3. Has an end-goal – What does the user want to achieve?
What features would help him/her do that best?
4. Faces realistic, relevant scenarios—written from
the persona’s perspective—to envision how users would
find they’d use the product to attain a particular goal.
 5. Occupies a clear setting – a day-in-the-life approach that
shows what he/she encounters in what environment.
6. Has visible pain points – What’s the hardest/most
frustrating aspect of his/her situation/context?
7.

Bring the Persona closer to home with an Empathy Map.

How to Create UX Personas?

1. The first step you have to make before you create a persona is to gather the
data on your target audience. ...
2. The next step is the analysis of the data you've gathered. ...
3. Now it's time to make the groups you've made into personas. ...
4. Now it's time to introduce your user personas to your team

UX Design Ideation Process

  Brainstorming. This technique is one of the oldest methods used by teams to
generate as many ideas as possible, without evaluating or criticizing them. ...
 Brainwriting. ...
 Problem-solving. ...
 Provocation. ...
 User interviews and user research. ...
 Sketching and prototyping. ...
 Storyboarding.

There are a few requirements to create effective scenario based learning.

1. Step 1: Identify your target audience.
2. Step 2: Identify learning needs and objectives.
3. Step 3: Select a situation for the scenario.
4. Step 4: Select the suitable scenario structure.
5. Step 5: Design your scenario.
6. Infographics.
7. Conclusion.

What are the 3 types of scenarios?

3 Different Types
of Scenarios You
Can Design

Want to design a scenario for an e-learning course

but wondering where to start? Building a scenario
can be a daunting task because there are so many
different possibilities. Scenarios can contain a simple
linear path, branching conversations, or
multilayered, looping interactions. But with a little
planning, even complex scenarios are within your
reach.

Let’s take a look at each of these types of scenarios

and how to design them.
Building a Linear Scenario
A linear scenario is one where there’s a right and
wrong answer. To move forward, the learner has to
choose the correct answer. If they choose
incorrectly, they’re met with feedback and either
redirected along the correct path or progressed
forward automatically, like in the Upselling Practice
lesson of this Rise 360 example.

To design a linear scenario, start by mapping out

each decision-making point, one by one. For each
decision, you’ll need to come up with the possible
answers and feedback that will bring your learner to
the next decision. Repeat this process until you reach
the end of your scenario. Here’s what your map
might look like for a simple linear scenario:
Designing linear scenarios is a great way to dip your
toe into scenario-building and give your learners an
opportunity to apply concepts in a realistic situation
while ensuring everyone views all the content.
Building a Branching Scenario
Branching scenarios let learners work through
complex ideas by exploring how their choices can
lead to different outcomes. Here’s an example of
what a branching scenario looks like when mapped
out:

When designing a branching scenario, you need to

keep track of the different paths learners could take
depending on the decisions they make. You can have
decision tree branches for every response or only
branch at key points—it’s up to you!

Since they mimic the way things play out in real life,
branching scenarios are more realistic than linear
scenarios. They’re especially good for letting
learners practice interview and emergency response
situations.

Keep in mind that with branching scenarios, each

learner’s path through the scenario is different. This
personalizes the experience and gives learners a
chance to skip over information they already know
and focus on the things that interest them or that
they need to master.

Building a Looping Scenario

Another option is to build a looping scenario. A
looping scenario is made up of a mix of linear and
branching scenarios that, depending on the learner’s
choices, sometimes return to the initial decision
point. This gives the learner a chance to start over
and see where another path might take them.

When designing a looping scenario, begin by

designing linear or branching scenarios, as explained
above. Then, determine which choices loop back to
the original decision-making point. It could be at the
end of the scenario or even in the middle. Here’s an
example of what that might look like:
As you can see, a looping map is quite similar to a
branching map, but with a lot more paths and
interconnectivity between the various scenes. And
this is just the tip of the iceberg. You can have
dialogues and endings that can be reached only
through certain responses. Scenes that loop on
themselves, but don’t lead back to the initial
dialogue. Anyone who’s ever flipped through a
Choose-Your-Own-Adventure book will see the
potential for looping scenarios.

Just like with branching scenarios, you can’t

guarantee that learners will follow every path to its
conclusion. But that’s OK! Trust that learners will get
the information they need based on the decisions
they make.

Wrap-Up
Scenarios don’t have to be complex to be effective.
Linear scenarios are a great way to engage learners
and let them actively take part in discovering new
knowledge. Branching scenarios allow you to show
learners the best way to apply acquired knowledge
through trial and error. Looping scenarios really give
the reins to learners, letting them take control, apply
their knowledge, and discover new concepts through
exploration.

The ultimate guide to User Flow

Diagram

Andra Cimpan
·

Follow
Published in

Bootcamp

5 min read

May 22, 2022

244
1

User flow diagrams are indispensable in mastering user experience.

They allow you to understand how users interact with your app or
website, and the steps required to complete a task or achieve a goal
on your website. In this article, we’ll look at the critical role user flow
diagrams play in UX design, how to make a user flow diagram, and
the best practices you should keep in mind. This will help you create
a superior user experience for the user and meet their needs more
efficiently.

What is a User Flow Diagram?

A user flow diagram (also known as an interaction or task flow
diagram) is a step-by-step visual mapping process, outlining what a
user does to finish a task or complete a goal through your product or
experience. User flow diagrams are a tool used by the product and
UX teams to figure out the optimal ways of interacting with the app
after they define the user needs. To best understand these needs
and the experience you want your users to have, it’s important to
map and visualize them.

Why are they important?

A general rule that you should keep in mind is that the better you
facilitate the user moving from start to finish on a particular process,
the easier the product is to work with and the more likely that you
are to deliver an awesome user experience.
Because of this, product managers, UX designers, and other
product team members employ user flows. Here are some additional
reasons:

Promote user-centered design

The most important aspect of user flows is that they force the
product team to think through their product’s interface from the
user’s perspective.

Diagramming the user flow can help interpret the quality or

experience of the path a user chooses. The flow can also reveal
how many steps they chose to complete a task and what pathways
they decide to take when interacting with your product or service to
solve a pain point.

Doing this work upfront can lead to a more intuitive product that
delights customers.❤️

Communicate product goals and plans to stakeholders.

User flows create a visual illustration of the steps a user will take to
get things done in an app.

Having this visual walkthrough helps everyone understand what the

product should do, in what order it should present the user with
information, and why each feature or page belongs where it is.

Speed up development and reduce errors

When developers are working from a visual depiction of how the
user will complete tasks in the product, they are more likely to code
the product in the way the product team envisions. This reduces the
chances of rework and delays.

How to make a user flow diagram

When crafting your user flow diagram, discuss the following with
your team:

 What is the user trying to do? — Determine your objective

and your users’ objectives.
 What is the entry point into this flow? — Identify where your
users are coming from.
 What extra information will the user need to be successful?
— Identify what information your users need and when they
need it.
 What are the user’s hesitations or barriers to accomplishing
the task? — Identify the challenges and keep them in mind
when designing the full experience.

As a visual tool, the user flow shows the relationship between a

website or app’s functionality, potential actions a user could take,
and the outcome of what the user decides to do by using a standard
set of symbols that are universally understood. Let’s have a look at
the most common flowchart symbols used in UX design and what
they mean:
  Oval — start or endpoint

The oval symbolises the start or the end in a flowchart.

 Rectangle — process or action

The rectangle symbolize steps in the process. This is your go-to

symbol in any flowchart and by far the most commonly used.

 Parallelogram — input or output

The parallelogram symbolizes input/output of external data.

 Diamond — decision

The diamond symbolise decisions. This will typically split your

flowchart using arrows.
  Arrow — direction

The arrow symbol is used to represent a flow direction. This will be,
coupled with the rectangle, your go-to symbol.

A user flow helps us get a better understanding of the steps a user

takes through an entire service, app or a website. Let’s have a look
at a simple example — entering an eCommerce site to purchase
confirmation — and how a user flow diagram using the symbols
presented above could look like:

However, once the design team wireframes their product’s screens,

their user flow diagrams often substitute the rectangles for these
screens. This combination of a user flow and a wireframe is
sometimes referred to as a Screenflow in the design world.
Which tools should I use?
There are a multitude of tools to chose from — see a complete
list here.

My top recommendation would be Miro as it is incredibly easy to

use. Miro’s whiteboard tool is the perfect canvas to create and share
your diagram. Here is the link to the User Flow Template that you
can use to create your own.

User Flow Template | Miro

A user flow diagram (also known as an interaction or task flow diagram) is a
step-by-step visual mapping process…
[Link]

User flow diagram is a tool in your UX design process offers a lot in

return with very little effort. Hopefully you will use it in your next
design project.

A user flow is a chart or diagram showing the path a user will take in an application to
complete a task. Product teams build user flows to intuitive design products, present
 the correct information to users at the right time, and allow users to complete desired
tasks in as few steps as possible.

Information architecture:

At its core, UX design aims to create a digital product or service that

makes users' lives easier. Information architecture is vital in helping
companies achieve this goal by providing structure, consistency,
and an easy-to-navigate interface. Put simply, information
architecture makes good UX possible