lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

SUBJECT NAME: UI AND UX DESIGN

SUBJECT CODE: CCS370

REGULATION: 2021

YEAR: III

SEMESTER: VI

1
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

CCS370 UI AND UX DESIGN UNIT I FOUNDATIONS OF DESIGN

UI vs. UX Design - Core Stages of Design Thinking - Divergent and Convergent

Thinking - Brainstorming and Game storming - Observational Empathy UI vs.
UX Design:

What is UI?

UI stands for user interface.

It is the point of contact between humans and computers.
For example, screens, sounds, overall style, and responsiveness are all elements of UI.
A user interface involves the following four components:
1. Navigational elements. Navigational elements help users navigate an
interface. Example: slide bars, search fields, and back arrows.
2. Input controls. On-page elements that enable users to input information
are input controls.
Example: Buttons, checkboxes, and text fields
3. Informational components. Informational components are used to
communicate information to the user.
Example: A progress bar
4. Containers. Containers organize content into easily digestible sections.
Example: accordion menu

UI design UX design

Focuses on interaction design, the visual elements of a website or Focuses on

satisfying user intent and providing an application, and ensuring a clear navigation
path to access information on a navigation path is visually site or app. attractive and
effortless to use.

What is UI design?

User interface (UI) design is the process designers use to build interfaces in software
or computerized devices, focusing on looks or style. User interface design is
responsible for a product's appearance, interactivity, usability, behavior, and overall
feel.

2
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

3
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Types of UI design

Many different types of UI design exist. The table below compiles a few of the most
popular and well-known.

• Graphical User Interface (GUI): A graphical user interface allows users to

interact with a device through graphical icons.
Example: laptop’s desktop or home screen
• Additional types of UI design include
 Touch screen user interfaces are GUIs that use touch screen
technology rather than a mouse or stylus.
 Form-based user interfaces use text boxes, checkboxes, and other
informational components. They enable users to fill out electronic
forms.

Tips for excellent UI design

Simplicity, familiarity, and consistency are a few of the most important

principles for a UI designer to keep in mind. Consider the following UI design tips
from industry experts like Apple and Google.
• Format content to fit the screen of the intended device. Users should not need
to zoom or scroll horizontally to view the entirety of a page’s content.
• Ensure there is adequate contrast between the background and page elements
like text to increase legibility.
• Alignment doesn’t just apply to text. Buttons and images must also be aligned
to demonstrate relevance and relativity to users.
• High image resolution is essential for all image assets.
• Make sure your UI design is responsive. Whether users view the UI on a large
screen, small screen, in portrait mode, or landscape mode, they should be able
to read and maneuver it with ease.

Key principles of UI design

An easy way to recall the fundamental principles of UI design is to learn the four c’s:
• Control. The users should be in control of the interface.
• Consistency. Use common elements to make your UI predictable and easy to
navigate, even for novice users.
• Comfortability. Interacting with a product should be an effortless, comfortable
experience.

4
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Cognitive load. It’s critical to be mindful of bombarding users with content. Be
as clear and concise as possible.

5
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

UI Design Tools:
• Figma
• Adobe XD
• Sketch
• InDesign

Guidelines:
1. Make buttons and other common elements perform predictably
(including responses such as pinch-to-zoom) so users can unconsciously use
them everywhere.
2. Maintain high discoverability. Clearly label icons and include well-
indicated affordances: e.g., shadows for buttons.
3. Keep interfaces simple (with only elements that help serve users’
purposes) and create an “invisible” feel.
4. Respect the user’s eye and attention regarding layout. Focus on hierarchy
and readability:
a. Use proper alignment. Typically choose edge (over center)
alignment.
b. Draw attention to key features using:
i. Color, brightness and contrast. Avoid including colors or buttons
excessively.
ii. Text via font sizes, bold type/weighting, italics, capitals and distance
between letters. Users should pick up meanings just by scanning.
Guidelines:
5. Make buttons and other common elements perform predictably
(including responses such as pinch-to-zoom) so users can unconsciously use
them everywhere.
6. Maintain high discoverability. Clearly label icons and include well-
indicated affordances: e.g., shadows for buttons.
7. Keep interfaces simple (with only elements that help serve users’
purposes) and create an “invisible” feel.
8. Respect the user’s eye and attention regarding layout. Focus on hierarchy
and readability:
a. Use proper alignment. Typically choose edge (over center)
alignment.
b. Draw attention to key features using:

6
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

i. Color, brightness and contrast. Avoid including colors or buttons
excessively.
ii. Text via font sizes, bold type/weighting, italics, capitals and distance
between letters. Users should pick up meanings just by scanning.
9. Minimize the number of actions for performing tasks but focus on one
chief function per page. Guide users by indicating preferred actions.
10. Put controls near objects that users want to control. For example, a button
to submit a form should be near the form.
11. Keep users informed regarding system responses/actions with feedback.
12. Use appropriate UI design patterns to help guide users and reduce
burdens (e.g., pre-fill forms). Maintain brand consistency.
13. Always provide next steps which users can deduce naturally, whatever
their context.

CORE STAGES OF DESIGN THINKING PROCESS:

 Design thinking is a methodology which provides a solution-based approach

to solving problems.
 Design thinking is a non-linear, iterative process
 It is important to note the five stages of design thinking are not always
sequential. They do not have to follow a specific order, and they can often occur
in parallel or be repeated iteratively.

The five stages of design thinking are:

• Empathize: research your users' needs.
• Define: state your users' needs and problems.
• Ideate: challenge assumptions and create ideas.
• Prototype: start to create solutions.
• Test: try your solutions out.

Stage 1: Empathize—Research Your Users' Needs

7
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• In the first phase of design thinking you gain real insight into users and their
needs.
• Focuses on user-centric research. You want to gain an empathic
understanding of the problem you are trying to solve.

Stage 2: Define—State Your Users' Needs and Problems

• Define the problem statement in a human-centered manner.
• Organize the information you have gathered during the Empathize stage
• Analyze your observations to define the core problems.
• Defining the problem and problem statement must be done in a human-
centered manner.

Stage 3: Ideate—Challenge Assumptions and Create Ideas

• Identify innovative solutions to the problem statement you’ve created.

• Look at the problem from different perspectives and ideate innovative solutions
to your problem statement.
• There are hundreds of ideation techniques such as Brainstorm, Brainwrite,
Worst Possible Idea and SCAMPER.
• Brainstorm and Worst Possible Idea techniques are typically used at the start
of the ideation stage to stimulate free thinking and expand the problem space

Stage 4: Prototype—Start to Create Solutions

• Identify the best possible solution.

• The design team will now produce a number of inexpensive, scaled down
versions of the product (or specific features found within the product) to
investigate the key solutions generated in the ideation phase.
• These prototypes can be shared and tested within the team itself, in other
departments or on a small group of people outside the design team.
• This is an experimental phase, and the aim is to identify the best possible
solution for each of the problems identified during the first three stages.
• The solutions are implemented within the prototypes and, one by one, they are
investigated and then accepted, improved or rejected based on the users’
experiences.

CONVERGENT AND DIVERGENT THINKING:

 Divergence and convergence is a problem-solving method that emphasizes empathy,
experimentation, and iteration.

8
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

 It is a human-centered design approach that focuses on understanding people's
needs, behaviors, and motivations to design creative solutions that meet those
needs effectively.
 Coined by psychologist J.P. Guilford in the 1950. These cycles of thinking provide
the structure for this iterative design thinking process. Divergence and convergence
are like the inhale and exhale of the design thinking process.

Benefits of divergent and convergent thinking

• Increased creativity and innovation

• Better decision-making
• Human-centered design
• Enhanced problem-solving
• Improved collaboration

9
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Divergence vs convergence

• Divergence creates space and possibilities, while convergence brings focus and
direction.
• Designers move back and forth between these two processes throughout the
design thinking process, building on the insights and ideas generated during
each cycle to refine and improve the solution.
• Divergent and convergent phases are non-linear.

Divergence Thinking:
• Divergence is the process of exploring and generating a wide range of ideas
and possibilities without any judgment or criticism.
• Divergent thinking allows designers to expand the possibilities and consider
different
perspectives, angles, and dimensions of the problem

10
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Convergent Thinking:
• Convergent thinking refers to the process of selecting, evaluating, and refining
the most promising ideas from the divergent phase.
• It involves narrowing down and refining possibilities by selecting the best ideas
and combining them to create a coherent and effective solution.

How to apply divergent and convergent thinking

1. Diverge to ideate
• Generate a wide range of ideas without judgment or criticism in a
brainstorming session or other quick ideation exercise.
• Use this discovery period to identify the problem and encourage team
members to come up with many possible solutions.

Conducting a Brainstorm template

Use this template to hit the ground running with big ideas that will move
your design process forward.

11
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• The group can vote to select which captures the problem at hand, or the
facilitator can assign a question to each participant.
• Set aside some time for the group to brainstorm on their own, and then bring
everyone together to build upon and clarify the ideas.

2. Converge to evaluate the ideas

• Evaluate the ideas based on feasibility, viability, and desirability using
decision matrices, prioritization grids, or other evaluation tools.

• The goal in this convergent phase is to clearly define the problem, then
understand and map any assumptions behind the ideas, and clarify the
requirements for an effective solution.
• Evaluate the ideas the team has so far with the Critique template.

How to run a critique

1. Present the ideas and context from the brainstorming session

2. Invite feedback across three categories: what went well, what didn’t
go well, and what could be improved
3. Gather the feedback, organize it by theme, and create actionable next
steps within the same workspace
3. Diverge again to develop and prototype
 Based on the requirements, begin finding solutions that meet requirements and
address end-user pain points and concerns.
 Improve upon the selected ideas using prototyping and user testing, gathering
feedback from stakeholders to ensure that the final solution meets their needs and
preferences.

4. Converge again to further refine

The final divergent step involves refining the solution, testing it for viability,
and getting the buy-in and resources to implement it.

5. Implement

Implement the selected ideas and monitor their effectiveness, iterating the
process as needed to continue improving the customer experience.

12
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Tips to get the most out of divergent & convergent exercises

1. Use a variety of ideation techniques

2. Avoid premature judgment
3. Test early and often
4. Be open and adaptable
5. Use a visual tool to make collaboration easier

13
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Definition of brainstorming

• Brainstorming is a creative thinking technique for coming up with new ideas

and solving problems.
• Teams use this ideation method to encourage new ways of thinking and
collectively generate solutions.
• Brainstorming encourages free thinking and allows for all ideas to be voiced
without judgment, fostering an open and innovative environment.

• This process typically involves a group of people, although it can be done

individually as well.
• Brainstorming usually takes place in a group setting where people get
together to creatively solve problems and come up with ideas. However, it’s
also useful for individuals who need to explore novel solutions to a problem.
Sitting down by yourself and writing down solutions to potential problems is a
great way to brainstorm individually.

Purpose of brainstorming:

• The primary purpose of a brainstorming session is to generate and document

many ideas, no matter how “out there” they might seem.
• Through this lateral thinking process, inventive ideas are suggested, which
sparks creative solutions.
• By encouraging everyone to think more freely and not be afraid to share their
ideas, teams can build on each other’s thoughts to find the best possible solution
to a problem.

Benefits of brainstorming

• Encourages creativity

Brainstorming sessions are meant to be free of judgment. Everyone involved is

meant to feel safe and confident enough to speak their minds. There will be some good
and some bad ideas, but this doesn’t matter as long as the final outcome is one that can
solve the problem.

14
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Fosters collaboration and team building
Brainstorming is not only good for problem-solving. It also allows
employees and team members to understand how the people around them think. It
helps the team get to know each other’s strengths and weaknesses.

• Generates innovative, revolutionary ideas

Brainstorming is the perfect mix between a free-thinking, creative
environment and one that is governed by rules. No two people think alike. So,
combining the good parts of everyone’s answers will result in holistic and
revolutionary solutions.

• Establishes different perspectives

One of the major benefits of brainstorming is that it allows and encourages
all members of the session to freely propose ideas. This type of environment fosters
courage in people who may not usually offer their perspective on a problem.

• Introduces many ideas quickly

Brainstorming encourages teams to come up with many ideas in a relatively short period of
time.

Types of brainstorming techniques:

1. Reverse brainstorming
In a typical brainstorming session, the group is asked to consider solutions to a
problem. Reverse brainstorming is simply the opposite: teams are asked to ideate on
the problem instead of the solution. This type of brainstorming is done before the start
of an important project, as it helps teams anticipate any future obstacles that might
arise.

2. Random word brainstorming

One of the main goals of a brainstorming session is to come up with new ideas.
One of the best ways to do this is to say the first words that come to mind when a
specific topic or subject is mentioned. Random word brainstorming allows for exactly
that. The team is given a problem, and they need to shout out the first words that they
think of, regardless of what they are. These words are then written down and later put
into interesting combinations to see if they will lead to a usable solution. This
brainstorming method is extremely fast and usually very efficient at solving a defined
problem.

3. The 5 Whys Method

15
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Like the reverse brainstorming method, the 5 Whys method aims to look at the
root causes of a problem to stop that same issue from arising again. This method
attempts to curb the problem before it can reoccur by asking the question “why?” over
and over until it can no longer be answered. Once you reach this stage, you have
arrived at the root cause of the issue.

4. SCAMPER model
Developed by Bob Earle, an author of creativity books for kids, the SCAMPER
model was originally a game aimed at imagination development in adolescents. It has,
however, become popular in the corporate world as a means of improving and
encouraging creativity in team members when dealing with complex, defined
problems. Using this model, your team will view a problem through 7 filters:
substitute, combine, adapt, modify, put to another use, eliminate, and reverse.

5. Rapid ideation
Rapid ideation brainstorming is almost the exact same thinking model as
random word brainstorming. In this method, however, everyone writes down the
solutions they are thinking of instead of shouting them out. This gives participants a
bit more privacy with their immediate thoughts — possibly leading to even more
creative and revolutionary outcomes.

6. Starbursting
Once again, brainstorming can change based on the team’s perspective and each
session’s expected outcome. Starburst brainstorming focuses on getting the team to
ask questions instead of coming up with answers.

How to hold a brainstorming workshop:

1. Assign a facilitator
When done as a group, a brainstorming session needs to have boundaries. You
need to choose someone who will facilitate the session and provide guidelines for the
thinking exercises. This is so the session doesn’t get too scattered and stays on the
right track. The facilitator should pose questions and guide the group from start to
finish.

2. Establish context and ensure group understanding

A brainstorming session cannot be properly carried out without context. The

group must understand why they are meeting and what the end goal of the session is..

16
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

The brainstorming method that will be used should also be established and explained
at the outset.

3. Define an objective While brainstorming is often looked at as a form

of free-thinking creativity, it is best to try to stay within certain rules. It’s
essential that you define a clear objective and use the session to reach your
predetermined goal.

4. Set a time limit

Setting a defined time limit before the session starts is important to the success
of your brainstorming session. No doubt your team could come up with countless
ideas, but there has to be a limit on how long the session can run.

5. Decide on the brainstorming technique

The brainstorming technique that will be used must be decided on before the
session begins. The best way to do this is to look at the problem at hand. If you’re
looking to prevent obstacles from arising in the future, try the “5 Whys” technique. If
you’re looking to come up with new marketing ideas or get creative with workplace
conflicts, try the rapid ideation technique.

6. Set some ground rules

Brainstorming ground rules are essential to to the success of the session, as they keep
everyone focused on the topic at hand and ensure that no one goes off track.

7. Capture all ideas

The entire point of a brainstorming session is to come up with as many ideas as
possible, regardless of whether the standalone suggestion will lead to success. This
means that you need to use the right tools to document the ideas being suggested.

8. Discuss and vote on ideas

After all the ideas have been captured, it’s time to discuss them. The team needs
to be productive in choosing a creative idea that suits the problem, or they can try
combining a few ideas to come up with a holistic solution. To make decisions as a
group and come to an agreement, teams can use the dot voting method. This technique
reveals group priorities and helps everyone reach a consensus on the direction to take.

9. Turn ideas into action

Once the final idea has been chosen, it’s time to create a plan of action and a
deadline for the idea to be put in place.

17
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Tips for brainstorming activities
• Record all ideas
If you want to have a successful and productive brainstorming session, it’s
important that you capture every idea suggested, good and bad. An idea might
seem silly when first brought up, but it might become an invaluable idea as the
session moves on. Capture everything, and right at the end, work out which ideas
best suit the problem.
• Ensure that everyone’s ideas are heard
When brainstorming is done as a group activity, everyone needs to feel
comfortable and confident to propose ideas. The best way to make sure the
environment fosters these feelings is to make the session feel like a
conversation, not a presentation. Create a safe and open environment that gives
everyone equal opportunity to voice their opinions and ideas.

• Focus on quantity
People often like to say, "Focus on quality, not quantity," but it’s the opposite
when brainstorming. In a brainstorming session, you should focus on getting
as many ideas on the board as possible, even if they're only one-word ideas.
These can all be used to come to a holistic solution at the end of the session.

18
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Mix it up
Brainstorming should be a fun and creative endeavor. You shouldn’t be
too rigid — though some ground rules are important. If your team has weekly
brainstorming sessions, try new brainstorming techniques and activities each
time you meet. This will keep your team members on their toes and help make
them excited about the next meeting.

• Avoid criticism

There are no bad ideas in a brainstorming session. This is the attitude

that all team members must adopt when entering the session. No one should be
criticized for the ideas that they propose.

OBSERVATIONAL EMPATHY:
Empathy is defined as “the action of understanding, being aware of, being
sensitive to, and vicariously experiencing the feelings, thoughts, and experience of
another without having the feelings, thoughts, and experience fully communicated in
an objectively explicit manner.”

Designers need to build empathy for their users in order to take the right course
of action. It’s important to understand how the user feels when interacting with a
certain product or interface; does the layout of this website evoke feelings of
frustration? What emotions does the user go through when navigating this app?

Where does empathy fit into the Design Thinking process?

• Empathy is considered the starting point for any design project, and constitutes
phase one of the Design Thinking process.
• During empathize phase, the designer spends time getting to know the user and
understanding their needs, wants, and objectives.
• The empathize phase requires you to set aside your assumptions.
• The first step in empathizing with your users is to suspend your own view of the
world around you in order to truly see it through your users’ eyes. When it
comes to Design Thinking and human-centered design, it’s time to stop
guessing and start gathering real insights about the user!

What is empathic design?

19
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

One of the main objective of empathize stage is to identify user needs and
behaviors that are latent, or unarticulated. As a designer, it’s important to distinguish
between what people say they would do in a certain situation, and what they actually
do.

Empathic research and design is not concerned with facts about the user, such as their
age or location. Rather, it focuses on their feelings towards a product and their
motivations in certain situations. Why do they behave in a certain way? Why do they
prefer to do this instead of that? Why do they click here rather than there when
presented with a particular screen or page?

How to become a more empathic designer

• Practice empathy in your everyday life
• The power of facial expressions
• Assume a beginner’s mindset (Listen, don’t judge!)
• Pay attention to body language

Key empathy-building methods

1. Empathy interviews

One way to build empathy is by conducting empathy interviews. The key to an

effective empathy interview is to structure it as an open conversation; don’t try to steer
the session with a set list of questions. Remember, the goal is to uncover as much
insight as possible—not to confirm or negate a preconceived notion. Excellent tips on
interviewing for empathy: constantly asking “why?” ,asking non-binary questions,
encouraging storytelling, and paying attention to nonverbal cues.

2. Immersion and observation

It is also extremely useful to observe your users in action, be it in their natural

environment or immersed in a certain situation. Observing your users, either by
photographing or videoing them, helps to identify needs, motivations, or challenges
that they’re not aware of—and therefore not able to articulate.

There are several ways of observing your users.

• One option is to bring them in and observe them while they interact with
the product, or problem, you are trying to design for. You might video
them or record their screen as they navigate a website.

20
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Another option is to ask your users to keep their own photo or video
journal over a certain time period, or while completing certain tasks in
their everyday lives. The advantage of this is that your users aren’t so
aware of being watched and may therefore act more naturally.

3. Extreme users

In their quest to build empathy and truly understand the problem that their users face,
designers will often turn to extreme users. Extreme users help to reframe the problem
and uncover new insights: “Extreme users’ needs are somewhat amplified. They need
less or more of something to solve their problems. They often find workarounds to
existing problems, unlike average users.”

Engaging with extreme users can help you to identify problems and needs that so-
called mainstream users.

4. Constant curiosity: Ask what, how, and why?

Throughout the empathise phase, you should constantly be considering the what, how, and
why of your users’ behaviour. The what-how-why framework can help you translate your
(assumption-free) observations into more abstract user motivations. Divide your page into
three sections and break down what you’ve observed as follows:

• What? Refers to the details of what has happened: for example, the user took
the following actions when entering their payment details on an ecommerce
website.
• How? Here you will consider how the user has completed these actions. What
were their facial expressions? Were they exerting a lot of effort? Did they seem
at ease, frustrated, or confused?
• Why? Now it’s time to make some educated guesses about the user’s
motivations and emotions as they complete these tasks.

5. Empathy maps

Empathy maps are another great tool not only for getting to know your users,
but for sharing this knowledge across the wider team. An empathy map is “a
collaborative visualization used to articulate what we know about a particular type of
user.

Empathy mapping requires you to consider your users in relation to four different
quadrants:

21
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

1. Says: Contains direct quotes based on what the user has said, for example
during an empathy interview.
2. Thinks: Considers what the user might be thinking, but may not want to
explicitly reveal. For example: “Am I stupid for not being able to navigate this
website?”
3. Does: Looks at concrete actions the user takes, for example: refreshing a page,
clicking a button, comparing different options before making a purchase. 4.
Feels: Considers what emotions the user is experiencing at certain points. For
example: “Frustrated: Can’t find what they are looking for on the page.”

After the empathise phase, you’ll go on to define your problem statement based
on what you’ve learned about your users. This will then be followed by ideation,
prototyping, and testing

22
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

UNIT II FOUNDATIONS OF UI DESIGN

Visual and UI Principles - UI Elements and Patterns - Interaction

Behaviors and Principles – Branding - Style Guides

VISUAL AND UI PRINCIPLES:

Visual hierarchy is an optimal arrangement of screen elements, in such
a way that they appear to be balanced, organized, functional, and aesthetically
pleasing to the human eye.
There are 12 Visual Design Principles
1. Size and Scale 2. Color Contrast 3. Alignment 4. Emphasis 5. Balanced
Typography 6. Repetition 7. White/Negative Spacing 8. Proximity 9.
Movement 10. Proportion 11. Perspective 12. Reading Patterns 1. Size and
Scale
• Size and scale aid in balancing out elements based on their relevance and
importance.
• Maintain a fixed-size system for all elements.
• For example, large and bold text understood is important whereas small and
lightweight text is not too emphasized.
• For text define H1, H2 so on till H6 sizes to place in balance.
2. Color Contrast
• Color and Contrast is another principle used to make elements stand out.
• It is associated with the use of complementary color pairing. It makes the
design pop and grabs the user’s attention on a specific element on the
screen.
• To implement this in design, always put important information in bright
to make the design or information pop, to easily capture user attention.
• Warm colors will stand out against dark backgrounds, making them
appear closer than cool colors on a dark background.
• Whereas, cool colors stand out over a light background, making them
appear closer than warm colors on a light background. So use these colors,
in accordance with your color scheme.
3. Alignment
• This describes the symmetric distribution of elements in designs.
• Alignment helps create a structure in design and information.
• It mentions having balance and hierarchy in all types of screen elements such
as images, text, and icons.

23
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• With the help of alignment, users know where to look, where to read, and
how to interact. This can be seen in all designs whether websites or map
outlines.
4. Emphasis
There can be times when you as a designer want to focus on a slogan,
text paragraph, or image, at this time emphasis comes into the picture. This
helps deliver a clear message to the user about the context. Emphasis is both
comparative and relative, as when trying to put emphasis on any element one
stands out and the other settles down.
Emphasis can be achieved in a variety of ways, such as:
• Scale – By rescaling elements to make them appear larger and bigger as more
the size, the better it grabs the attention.
• Positioning – Placement of the element also comes under putting emphasis and
can be centered aligned, or peripheral
• Highlighting using color, patterns, or texture
• Use of font weights such as bold, semi bold, or even extra bold.
• Underlining the information
• Putting pieces of information in Capital letters or sometimes under inverted
commas. Using lines and arrows to grab attention
5. Balance Typography
• Text hierarchy is crucial to achieve as more than 80% of the website
or app have text content, including paragraph headings and image
captions.
• Balancing out the textual content is very important, this can be done
with the help of font weight, increasing heading font size, bold or
underlining important details, and adding color to the text.
• Proper text hierarchy makes the layout look more pleasing to the eye
and cleaner. It reduces the clutter on the read and enforces better
readability.
6. Repetition
• Repetition in design refers to employing the same elements repeatedly
throughout a piece of work, including colors, patterns, typefaces,
images, textures, and more.
• Repeating elements over and over again in the design creates better
consistency and ease for the user to know what to do and where to
find something.

24
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• This is majorly a good principle to use for motion graphics while
creating a motion video repeating hills and mountains continuously to
avoid any breaks in visuals.
• Also having consistent logos, icons, CTA, and colors throughout the
product also creates brand identity.
• Repetitive information also stays long in user memory, using a
repetitive app over a long period of time makes the muscle memory
strong and thus users are very attached to the app/website.
7. Negative Spacing
• Cluttered websites reduce the ability to scan and read information
effectively, whereas a dense website has information evenly spread with the
help of proper spacing between multiple screen elements. This spacing is
called or referred to as negative or white spacing.
• Effective use of white space, as a designer, lets the elements breathe while
experimenting with alignment, balance, contrast, and movement.
• Without the proper use of white or negative spacing, it makes the content
looks flooded, unorganized, and overwhelming to the user
8. Proximity
• To make the relevant elements appear to be a group, proximity principles
talk about adequate spacing between elements to help users visually
combine or separate them from each other.
• Elements that are near to each other are often grounded together as one part,
whereas a good amount of spacing between elements separates them from
each other.
• Elements that are considered as a group would also be assumed to be having
the same functionality, quality, and traits as each other.
9. Movement
• Movement refers to how a user or a reader scans through the content. How do
they move from one point to another?
• In user experience, the importance of movement gives a traceable path of how
users have scanned through the website or app while approaching a goal.
• It can be created in a design by using lines that trace paths between different
focal points. It helps users to move forward as well as come back if they are lost
in between the process.
10. Proportion
• Proportion in design talks about how 2 elements relate to each other even after
being different in size, color, and functionality.

25
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Visual designers may not always need to worry about an element’s exact size or
placement, but they may be much more deeply concerned with how that
element interacts with other parts within the design as a whole.
• There can be many sections, groups, chunks, and individual pieces of
information which might be fitting a screen but what is important to be
concerned about is how they are relating to each other such that they are pleasing
to the eye as well as understandable at the same time.
11. Perspective
This visual principle of design indicated the depth and how it was conveyed. It
is the process of designing while keeping space in mind, as it all depends on how
humans perceive space and understand it. There are different types of perspectives
through which humans look, perceive, and interpret information:

• One-point perspective – Having only one vanishing point falling opposite to

the viewer’s eye.
• Two-point perspective – Having two vanishing points, often used in
architectural designs
• Three-point perspective – Having three vanishing points, in horizontal and
vertical lines.
12. Reading Pattern
• There is always a pattern in how users scan and read any information.
• From numerous research, it is found that human is read from top to bottom and
based on cultural writing it can be right to left(like Hebrew and Urdu) or left to
right(like English).
• There are typically a few patterns like:
oZ-Shaped: Scan the website from the top left to the bottom right of the page.
Making a z shape while scanning through content.
oF-Shaped: When a user starts scanning data in F shape they start by
reading the top line from left to right and then going straight to the
bottom. Such as Google’s search result page.
oLayered Cake: When users only focus on the top heading and title while
leaving the rest of the content unread.
oSpotted: When the user focused on specific content scanning in a random
manner.
10 essential UI design principles
Effective user interface design is about removing as many obstacles,
bottlenecks, stumbling blocks, and potential causes of confusion as possible from the
user experience.

26
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

1. Keep the UI design simple

2. Predict and preempt
3. Put the user in the driving seat
4. Be methodical and consistent
5. Avoid unnecessary complexity
6. Provide clear signposts
7. Be tolerant of mistakes
8. Give relevant feedback
9. Prioritize functions
10. Design the UI for accessibility

27
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

UI ELEMENTS:

UI elements are the visual elements that people can see on a website or app
interface (including the buttons, menus, text fields, progress bars, and so on). They
enable users to interact smoothly with the website or mobile app and get what they
want from it. They are also essential tools for designers looking to create a unique
visual language and to ensure consistency across different products.
The UI elements are grouped into four categories:
• Input controls
• Navigational components
• Informational components
• Containers

 Input controls:
Input controls are a series of UI elements that enable users to input information
so that your website/app can react correctly and quickly to meet their needs. Many
basic UI components come under this category, such as buttons, text fields, images,
checkboxes, radius buttons, and drop-down lists. Some of the main input controls are:
1. Buttons:
A Button traditionally appears as a rectangular shape labeled with an icon,
text or both, and is typically used to handle user actions, like submitting, sending,
uploading, downloading, and so on.

2. Text fields
Text fields, also known as Input fields, are where users can enter text. This can
be a single or multiple lines. These are not limited to forms; any field that enables
people to input text or information comes under this heading, such as the commonly-
used "Search" field.

28
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

3. Images & icons
Images or icons are intuitive image components that can be used to enhance
explanations or demonstrations and make the site easier to use. As well has helping
users to understand and navigate the website/app better, they are a great way to
improve the entire visual appeal.
In some cases, they can be hyperlinked and used as action buttons.

4. Checkboxes
A checkbox is a basic UI component that allows users to make a binary choice
simply by checking or unchecking an option. Designers usually use a group of
checkboxes, grouped vertically or horizontally, to provide users with more options.
They are often a key feature of form or database design where they can

improve the user experience.

5. Radio buttons
Radio buttons are simple circular elements that provide users with multiple
options, a bit like checkboxes. However, radio buttons only allow users to select one
option at a time, while with checkboxes they can often select multiple options at once.

6. Lists & Drowndown lists

Like radio buttons, lists offer users different options and enable them to choose
one item at a time. Lists differ in that they do not have the circular buttons by the
options available; users simply click on the option itself. But it is still possible to add
icons or numbers to make the process clearer.

29
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Like a list box, a dropdown list is a common way of presenting a list. It is often
hidden, occupying only a single line of UI space before it is activated.

7. Toggles
Toggles are basic button components that enable users to turn something on or
off. They work just like an on-off switch. So they are often used to change website or
app settings where there are just two options, such as notifications, auto system updates,
and so on.

 Navigational components
Navigation components are a range of UI components that can make it easy to
navigate through a website or mobile app. There are many navigational components,
such as:
1. Navigation bars: A navigation bar, generally located at the top of the
screen, is a section of the website or app interface that helps users navigate and get to
the information they are looking for. It contains many navigational buttons, such as
Home, Contacts us, About, Profile, and so on.

2. Menus & Drop-down menus

Website menus are a series of linked items that help users navigate between
different pages and page sections. They are often placed at the top and can be divided

30
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

into different types, such as Hamburger Menu, Meatball Menu, Mega Menu, and
Kebab Menu, and so on.
To save screen space and improve UX, designers also use dropdown menus to
present different menu options. Users can click on or hover over a button or option to
open up the full menu and see all its items. Dropdown menus are best for websites with
a lot of menu options.

3. Sidebars
Sidebars present a list of navigational actions or options located on the left or
right side of a website or app page. They often allow users to show or hide items or
even hide the entire sidebar if they wish. So, they are perfect to make a minimalistic
website or mobile app.

4. Tab bars (for Android or iOS apps)

Tab bars are common on Android or iOS mobile apps. They often locate at the
bottom of a mobile app interface, allowing users to move back and forth quickly
between different sections of the app.

5. Accordion
The accordion is a navigational element that presents a list of navigational
items stacked vertically. This allows users to expand or collapse each item to check its

31
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

contents. It is an excellent way to present a large amount of navigational information
in a limited space.

6. Tree Menus
The Tree Menus are an advanced navigational component that displays all
navigational options in a tree structure. It is an intuitive way of presenting all related
options hierarchically. It is also another good option if you want to display large
amounts of information in a limited space.

7. Breadcrumbs:
A Breadcrumb provides users with a clickable trail of links to let them know
where they are within a website. Typically placed at the top of the page, it does a
great job of helping users see their current location and move between different
parts of the website.

8. Carousels
Carousels allow users to browse through a set of images, cards, or content in
limited webpage space. It is easy to click one of the images or cards to receive
more details from elsewhere. They can operate automatically or manually
according to individual requirements.
9. Search bars/fields
Search bars or fields allow users to search for pages, sections, or content by
entering key words or tags. These are used widely in UI design to create a more
pleasant browsing experience for users.

32
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

10. Tags
Tags are often used in Blogs or Social websites to help users find content in
the same category quickly. While being used with Search bars, they serve more like
keywords that can help users find the content they are looking for with a few simple
clicks.

 Informational components
Informational components are components that help share information with users,
including tooltips, progress bars, notifications, modal windows and alters, and many
more.
1. Tooltips
Tooltips provide users with hints to explain the name, use, or function of an
element. They appear when a user hovers the mouse over the element. Designers find
tooltips very useful for creating a more user-friendly product.

2. Progress bars
Progress bars are UI components used to show users how far along they are
in a process: for example, submitting, shipping, purchasing, or uploading, and so on.
They can also encourage users to carry on and complete all the steps to get to the
end.

33
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

3. Notifications
A notification is a message that indicates a change, update, or error in a task, project, or
team. It is intended to encourage the user to check out what's new as soon as possible. It is
often automatically sent to participants when a change occurs.

4. Loader
A loader is often an animated component that tells users that the
website/mobile app is processing action in the background and asks them to wait
patiently. To make them wait enjoyable, loaders can have creative designs in
different forms and colors. For example:

 Containers
Containers are UI components that can hold together a full set of components and
content that are related to each other so that you can use them as a whole.
1. Cards
Cards are typically rectangular or square module that contains different page
information, like buttons, texts, images and more, so that you can use them all as a
whole. These days, to create an intuitive yet clear layout and enhance UX

34
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

successfully, cards have become very popular and can be found nearly everywhere on
the web or app page.

2. Scroll boxes
Scroll boxes are UI elements used to create a scrollable content, enabling users
to view a large number of images, cards, or content in limited page space.

3. Forms
Forms are advanced components that can help collect user information, such as
shipping information, account information, registration information, contact
information, etc.

BRANDING
UI branding design is a set of assets and visual elements which make your
brand what it is, it could include logo, brand palette, typography, illustrations of a
specific style, animations & much more.

Logo
Logos are the backbone of a brand’s visual identity. Therefore when
designing a user interface, the logo should be one of the first things considered. It’s
standard for a logo to be placed somewhere in the header, as well as in the footer. As
a result, the logo is one of the first things a user sees when they load the webpage
and can instantly make the connection between the brand and interface.

35
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Colour
UI Designers will use a brand’s colour palette to pick out which colours to use
for backgrounds, text, buttons, and other UI elements. Colour plays a huge visual role
in both branding and UI design, so it’s important for colours to be consistently used
across print and digital interfaces.
Typography
UI designers will use any typefaces specified in the branding guidelines when
they come to inserting titles, subtitles, copy blocks and any other element of texts.
Branding guidelines specify which typefaces should be used for different textual
elements. Therefore this can be easily carried across by UI designers when designing.

Imagery
Brand guidelines tend to include specifics as to what style of imagery should
be used within branding. UI designers will use the imagery guidelines when looking
for stock imagery to place within their designs.
Alternatively, UI designers can be provided with standard imagery and
illustrations that fit within the brand guidelines – which they will then take and insert
into the UI designs.

STYLE GUIDES:
A UI style guide contains all the rules and guidelines for the design of a
product’s user interface. It includes everything from typography to iconography to
color palettes and beyond.

Why is a UI style guide important?

The product will have a consistent look and feel, which creates a more
professional appearance and gives users an intuitive experience.
Designers can easily work together on the same project, as they can refer to the
style guide for answers.
Consistency saves time and money in the long run, so designers don’t have to
reinvent the wheel every time they start a new project.
What are the risks of working without a UI style guide?
• Your product could lack consistency.

36
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• It will be harder for designers to work together, as they won’t have a
common reference point. This can lead to frustration and wasted time.
What should your style guide include?

A grid system:
A grid system is a set of rules governing the placement of elements on a page. It
helps to create a sense of order and hierarchy and makes it easier for designers to lay
out content in an easily understandable format. The grid system includes everything
from the width of the margins to the size of the gutters.
Spacings: this is the distance between elements on a page and includes everything from
the margins to the padding. Proper spacing is important for creating balance and
harmony in your design. Use smaller spacings for tweaking elements within
components and larger spacings for placing elements on the page.
Breakpoints: a breakpoint is a point at which the layout of a page changes to
accommodate different screen sizes. This is important for responsive design, as it
ensures the content will look good on all devices.
Typography: typography refers to all the rules for formatting and place type.
This includes everything from the typefaces and font sizes to line spacing and the
hierarchy of headings and subheadings.
Text values: text values are the way words appear in your design, such as putting
all titles in title case. Button CTAs might be in all caps, and body text might be in
sentence case.
Define your rules and stick to them!
Numerical values: numerical values are your rules for numbers. For example,
you might decide all prices should appear with two decimal places, or dates need to
be written in a certain format. Again, define your rules and stick to them.
Rules for buttons: buttons are one of the most important elements in any UI, as
they’re the primary way users interact with your product. As such, it’s important to have
strict rules for how you’ll design them. This includes everything from the color and
shape of the button to the size of the text and the spacing around it. You should also
avoid having multiple buttons on one page (keep analysis paralysis at bay!) and get user
feedback on their actions. No one likes clicking ‘pay now’ only for nothing to happen.
Cue panic!
Iconography: an iconography system contains all the rules for using icons. This
includes everything from the style of the icons to their color to their size.
Colour palette: a color palette is a set of complementary colors used in your
product. A palette helps to create a unified look and feel and makes it easier for
designers to choose colors that work well together.
Layout guidelines: these should contain all the rules for how content is laid
out on a page. This includes everything from the size and spacing of elements to the
use of white space.

37
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Imagery: imagery guidelines contain all the rules for how you use images, such
as the size and resolution of images and their placement on the page.
Logos: logo guidelines include everything from the shape and size of the logo
to its color and placement.

Accessibility: accessibility guidelines contain all the rules for how you make
your product usable for people with extra needs. This includes everything from the use
of alternative text for images to the use of easily readable fonts.

Rules for forms: form design rules include everything from labels and input
fields to the spacing between elements. It should also encompass error messages, visual
cues (such as a longer field for ‘other comments’), and label placement.

Rules for tables: guidelines for tables should include everything from
headers and footers to the shading of cells. You should also specify text alignment
within cells and whether or not to use borders.

Gestalt principles and the law of similarity: the law of similarity states that
similar elements look like they’re part of the same group or related in some way. You
can use this to your advantage by grouping related items together and ensuring the
items in each group are similar. Why is it important to include this in your style guide?
Because it will make your product easier to use and help people understand how to
navigate it.

How to make a UI style guide: best practice

Creating a UI design style guide is no easy feat. But with our best practice tips,
you’ll be well on your way to success. Here’s what you need to do:

1. Define the purpose of your style guide

The first step in creating a style guide is to define its purpose. What are you
trying to achieve with it? Do you want to create a unified look and feel for your
product? Do you want to ensure all your designers are using the same rules?
(Probably both.) Once you know what you want to achieve, you can start planning
how to get there.

2. Know your audience

Who will use your style guide? Is it just for your design team, or will it also be
other teams, such as marketing and product teams? Knowing your audience will help
you decide what to include in your style guide and how to structure it.

38
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

3. Gather existing assets

Before creating anything new, gather all your existing assets, such as product
logos, color palettes, and previous design guidelines. Having all of these in one place
will make it easier for you to create a new style guide consistent with what already
exists.

4. Decide on the structure of your style guide

To start putting together the actual style guide, decide on its structure. How
are you going to organize all the information? There’s no right or wrong answer
here, but try and think about the order in which designers work.
1. Create a visual identity section

The first section of your style guide should outline your product’s visual identity.
This is where you’ll define things like your logo, color palette, and typography.
Including these elements in your style guide will help to create a unified look and feel
for your product.

2. Define the user interface

The next section of your style guide should focus on the user interface. This is
where you’ll define things like your product’s layout, navigation, and buttons —
elements that shape the overall user experience.

3. Create a section for content

The final section of your style guide should cover content, including elements
like the tone of voice and writing style. Having all of these in one place will help to
ensure your product’s content is consistent and on-brand.

4. Make it easy to use

Once you’ve created your style guide, make sure it’s easy to use. Add items
like a table of contents and an index so people can easily find what they’re looking
for. And make sure to keep it up to date as your product evolves.

5. Get feedback and iterate

Finally, don’t forget to get feedback from your team and iterate on your style
guide. As your product grows and changes, so too will your style guide. Getting feedback
and making changes can ensure that it always stays relevant and up to date.

39
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

6. Use tools that are up to the job

Diagramming tools can be a big help when creating a UI design style guide.

With Cacoo, you can create high-quality diagrams that are easy to share and update.
And because Cacoo runs in the cloud, you can access your diagrams from anywhere
on any device. That means the second someone changes the guide, everyone knows
about it — which is exactly what you want when consistency is your goal.

40
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

UNIT III
FOUNDATIONS OF UX DESIGN

Introduction to User Experience - Why You Should Care about User Experience -
Understanding User Experience - Defining the UX Design Process and its Methodology
- Research in User Experience Design - Tools and Method used for Research - User
Needs and its Goals - Know about Business Goal

INTRODUCTION TO USER EXPERIENCE:

The user experience (UX) is what a user of a particular product experiences

when using that product. User experience (UX) design is the process of building
products that are easy and enjoyable for people to use. A UX designer’s job is thus
to create a product that provides the best possible user experience.

WHY YOU SHOULD CARE ABOUT USER EXPERIENCE

1. Time savings through UX

Saving users time and making more money in the process have always been
desires of for-profit companies. The time aspect has always been or will always be
important and can be optimized through UX. Time savings can be achieved, for
example, by improving and reducing process steps or on the basis of self-
explanatory interaction surfaces.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Examples:
 In e-commerce, the processing of orders
 Contactless payment
 Fingerprint login/payment
 QR code tickets

1. Effect of well-implemented UX:

 Employees can work through their processes faster
 Employee/customer satisfaction is increased
 The customer’s buying hurdles are removed
 Purchase transactions can be maximized
 Utilization of processes is increased by the optimizations
2. Increased competitiveness through UX
In order to stand out from the market on the basis of well thought-out UX,
visual design plays a major role in addition to the customer experience with the
product. Basically, it can be said that well thought UX works without a beautiful
UI.
3. Cost reduction through UX
Development costs can be reduced by having the support of a UX expert on
projects. Visual prototypes, which are used at the beginning of a project, can
address potential risks or raise questions early on through revisions. Costly
development misunderstandings, subsequent changes or serious architecture
problems that take several working days of development time can thus be avoided.
It can also replace the costly development of code- based prototypes, which are
usually discarded at the beginning of a project.
4. Project support / demonstration
Product presentations that are visually presented are perceived
comparatively differently by customers and considered more professional than
dull black-and-white slides about the theory, for example, of navigation patterns
within an app. As an example, before starting a project, in order to build trust with
the customer, mockups of the app or software in question can be used as a
supportive form of demonstration.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

UNDERSTANDING USER EXPERIENCE

User experience (UX) focuses on having a deep understanding of users,
what they need, what they value, their abilities, and also their limitations. It also
takes into account the business goals and objectives of the group managing the
project. UX best practices promote improving the quality of the user’s interaction
with and perceptions of your product and any related services.

Factors that Influence UX

At the core of UX is ensuring that users find value in what you are providing to
them.

In order for there to be a meaningful and valuable user experience, information

must be:
Useful: Your content should be original and fulfill a need
Usable: Site must be easy to use

Desirable: Image, identity, brand, and other design elements are used to evoke
emotion and appreciation

Findable: Content needs to be navigable and locatable onsite and offsite

Accessible: Content needs to be accessible to people with disabilities
Credible: Users must trust and believe what you tell them

Areas Related to Building the User Experience

UX is a growing field that is very much still being defined. Creating a

successful user- centered design encompasses the principles of human-computer
interaction (HCI) and goes further to include the following disciplines:

• Project Management focuses on planning and organizing a project and its

resources. This includes identifying and managing the lifecycle to be used,
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

applying it to the user- centered design process, formulating the project team,
and efficiently guiding the team through all phases until project completion.
• User Research focuses on understanding user behaviors, needs, and
motivations through observation techniques, task analysis, and other feedback
methodologies.
• Usability Evaluation focuses on how well users can learn and use a product to
achieve their goals. It also refers to how satisfied users are with that process.
• Information Architecture (IA) focuses on how information is organized,
structured, and presented to users.
• User Interface Design focuses on anticipating what users might need to do and
ensuring that the interface has elements that are easy to access, understand, and
use to facilitate those actions.
• Interaction Design (IxD) focuses on creating engaging interactive systems
with well thought out behaviors.
• Visual Design focuses on ensuring an aesthetically pleasing interface that is in
line with brand goals.
• Content Strategy focuses on writing useful content by planning the creation,
delivery and governance behind it.
• Accessibility focuses on how a disabled individual accesses or benefits from a
site, system or application. .
• Web Analytics focuses on the collection, reporting, and analysis of website
data.

DEFINING THE UX DESIGN PROCESS AND ITS METHODOLOGY:

User experience (UX) design is the process design teams use to create
products that provide meaningful and relevant experiences to users. UX design
involves the design of the

entire process of acquiring and integrating the product, including aspects of

branding, design, usability and function.

The UX design process:

The basic UX design process has five different steps:

 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

1. Research and understanding

User experience design begins with extensive UX research before any designs
are mocked up.

• User research: identify pain points, goals, blockers, and characteristics among
users, and draw up detailed user personas that inform design decisions to keep
the UX design process focused on users.
• Market research: understand t he mar ket and similar products avail able, what
those products share in terms of UX, and identify opportunities to differentiate
your product based on UX.
• Historical analysis: get a sense of the history of your product, and use previous
iterations to inform future design decisions, ensure mistakes aren’t repeated,
and continuously improve your product’s UX based on what you’ve learned.

2. Prototyping and wireframing:

After the research stage, a designer creates a prototype and wireframe of

your product, outlining how users will flow from one feature or element to the
next, and how the product will look visually.

The prototype is your minimum viable product (MVP): a version of your

product with enough features to allow your first users to test it and offer feedback.
The prototype generally doesn’t look like a finished product, but it provides a sense
of how the finished product will work.

Prototyping and wireframing—and then testing lets you get valuable user
feedback before you spend resources finalizing your product, potentially avoiding
a lot of work and time spent developing the wrong features and UX for your users.

3. Testing

Next, your product team will conduct user tests—like A/B tests, MVT, and split tests— to
identify existing or potential design issues that may cause friction for users.
Some user testing may include using product experience and behavior analytics tools like
heatmaps and session recordings and collecting user feedback that can help identify
blockers and pain points.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

4. Launch

Throughout the testing phase, you’ll refine your prototype based on results
and user feedback, make changes, and add final touches before launch.
Once your product is ready, launch is often done in stages. For example,
your UX team might release a beta version or ‘soft launch’, where a new design is
launched to a small group of users first, to get additional user feedback and usage
data before rolling it out to your whole user base.

5. Iteration

UX design is a constant, iterative process so more testing follows the

product’s launch.In the iteration stage, your team will continue to make updates
and improvements as needed, and closely monitor how those changes impact the
product experience.

A/B and multivariate testing are often part of this stage, so your team can
see the impact of product changes and compare multiple versions of the design to
see which creates the best user experience. Then the winning version is rolled out.

What is User Research?

• User research is all about discovering who your target audience is based on
a wide range of methods like ethnographic surveys and quantitative
research.
• It involves studying multiple interactions a user makes with your product
and utilizing this feedback for product improvement.
• User research is a practical approach to understanding customers’
behaviors, needs and pain points so you can create the best products for
them.

Benefits of User Research

1. User research helps you to build empathetic products that meet the core
needs of your target market.
2. It gives you a clearer idea of how users utilize your product in everyday life
to achieve their goals.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

3. User research helps you to cut down costs by limiting the need for costly
product iterations along the way. When you have a clear idea of who your
users are and what they want, you’ll spend less time building a product they
will love.
4. It helps you to nail product usability design. You’ll create something that
people will actually use because it addresses their pain points.
5. User research gives you a clear idea about the features you should prioritize
for your product. Many times, organizations have a long list of features they
want to incorporate into a product. With user research, you can streamline
this list and have only important features that improve the product’s
functionality.
6. User research provides a clear path to understanding users’ mental models,
that is, what they are already familiar with. With this insight, you can create
a design that meets their expectations without sacrificing your creativity.
7. It’s an effective way to spot unexpected differences between user groups in
your target market, based on their needs and goals. This is very helpful for
companies building products that cut across multiple market segments.
8. User research is an important part of design strategy. It helps you to create
functional designs that are valuable to users and easy to use.

User Research Methods

1. Observation

Observation is a data collection method where the researcher pays attention

to users to see how they naturally interact with your product. Observation helps
you to understand users’ pain points as they go about their normal routines in their
natural environments. The nature of the observation could be accomplished either
as a complete observer, an observer as a participant, a participant as an observer
or as a complete participant.

Advantages of Observation

1. It is the simplest method of data collection in research.

2. Observation results in more accurate data collection.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Disadvantages of Observation

1. It cannot be used in all user research contexts.

2. The observer’s personal bias can affect the validity of the research results.

2. Focus Groups

A focus group is made up of 6–10 participants from your research sample

who openly discusses a specific topic as part of research. During focus group
discussions, participants have the opportunity to share feedback and insights on a
particular topic.

The mediator sets the stage for the conversation and takes note of all the
views shared on the topic.

Pros

1. It helps you to obtain in-depth information from research participants.

2. It is a cost-effective data collection method.

Cons

1. The researcher has very little control over the outcome.

2. The group might not be a true representation of your target audience.
Contextual Interviews

Contextual interviews or inquiries merge observation methods with

traditional interview methods to understand the context in which a design will be
used. It allows the researcher to understand how people use a product in a specific
context. It’s a great way to see your product from the users’ perspectives.
Pros

3. It introduces a user-centered approach to design.

4. Contextual inquiries produce in-depth research data for organizations.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Cons

1. It is time-consuming.
2. It can be difficult to accurately interpret data from contextual interviews.

3. Usability Testing

Usability testing helps you to measure the range of your product and how
users can accomplish a variety of tasks with it. Usability tests are done repeatedly,
from the early developmental stages of the product until its release. Results from
these tests help you to build the best product for the market.

Pros

1. It helps you to rate your product’s performance in terms of its functionalities

for users.
2. Usability tests provide high-level contextual information for research.

Cons

1. Usability testing requires a lot of commitment from participants; that is, it

is time- consuming.
2. It is a complex method of data collection.

1. First Click Testing

First click testing measures the user-friendliness of a product to determine

its usability. It allows organizations to know how easy it is to complete a task on
their website or mobile application. As the name suggests, first click testing is all
about examining what users will click on first to complete an intended task.

Pros

• You can get real-time feedback from a large number of users in a short time.
• It helps you to discover any usability issues with your product.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Cons

1. You can’t test the whole website and website flow during first click testing.

2. Online Surveys

An online survey consists of a set of structured questions that participants

respond to as part of a research. Online surveys are administered through data
collection platforms like Formplus that allow you to receive and analyze data
efficiently. In user research, online surveys come in handy for every part of the
product development process.

Pros

1. Participants get real-time access to online surveys and can fill them at their
convenience.
2. Online surveys are fast and affordable.

Cons

1. High-level of survey response bias, especially when completing the survey

comes with incentives.
2. Data errors due to question non-responses.

User Research Best Practices

1. Know who your users are

You cannot build a product that people would want to use without
knowing who your target audience is and what they like. At this stage, it’s
best to leverage qualitative research methods like face-to-face interviews
and focus groups to learn about users’ preferences. You can also send out
surveys with close-ended and open- ended questions.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

2. Prioritise their needs

After collecting data from users, the next step is to organise this
information for useful insights. You should look out for preference patterns
that cut across multiple subgroups in your research sample. Your design
should address the primary needs you have highlighted from your research
data.

3. Be flexible

Building a user-friendly product means you need to be open to trying

out new ideas outside your comfort zone. Once you have enough data
backing pointing to a specific need, you should find a way to include a
product or design feature that addresses this need.

4. Conduct research at every stage of the process

User research isn’t something you just do once and that’s it. At every
stage of the process, you need to keep testing your product features to make
sure you’re on track. It’s also important to conserve some budget and
resources to perform research later in the project as well.
5. Always communicate

Make sure everyone on your product development team has access to the
user research data, plus a clear idea of what you’re trying to achieve. On Formplus,
you can use the teams and collaboration features to coordinate communication
with relevant stakeholders who are working on the product. There’s nothing like
too much communication so use all the channels you have to keep everyone in the
loop.

UX RESEARCHERS TOOLS:
UX researchers have access to many different solutions to conduct user
experience research and manage different stages of their workflow. For instance,
there are user research tools for conducting usability testing, surveys, interviews,
or more specialized tests, such as card sorting or tree testing.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

UX Research Features Tool

Maze Integrations with leading design platforms, remote testing, surveys, IA

testing, real-time reports, collaboration features, pre-built templates
Loop11 Online usability testing, prototype testing, benchmarking, A/B testing,
testing
Userlytics Usability testing, user experience studies, prototype
testing, live conversations, card sorting, tree testing
Lookback Remote user research in real-time, moderated and unmoderated testing,
collaborative dashboard, live note-taking
Userzoom Usability testing, interviews, surveys, intercept testing, click testing, tree
testing, card sorting, participant recruiting
Unmoderated research, remote user interviews, participant recruiting,
dscout automatic transcriptions, on-call observers, interactive timeline for taking
notes
User Participant recruitment, screener surveys, scheduling interviews, messaging
Interviews participants, automatic incentives, participation tracking
Ethnio Participant recruitment, central participant database, incentives, screeners,
intercepts, scheduling options

Ribbon Participant recruitment, screeners, automatic interview scheduling, incentive

management, moderated interviews
Optimal Workshop Card sorting, tree testing, first-click testing, IA testing, online surveys,
qualitative research, participant recruitment
UsabilityHub Remote user testing, first-click testing, design surveys, preference tests,
five-second tests, participant recruitment
kardSort Moderated, unmoderated and hybrid card sorting, pre and post-study
interviews, tool tips
Hotjar Heatmaps, screen recordings, unmoderated research, in-product feedback
widgets and follow-up surveys
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Tools for usability testing

UX research tools do a lot from recruiting participants and planning the
interviews to getting feedback, and sharing your findings, having a great tool stack
is important for running a great research practice.
Selecting the right UX research toolkit depends on where you are in the
research process, the research method you’ll be using, the size of your
organization, and the type of product you’re researching.
1. Maze
• Maze is a continuous product discovery platform that empowers product
teams to collect and consume user insights, continuously.
• Maze helps teams build the habit of continuous product discovery in a
platform that enables everyone to run great research.
• Maze integrates directly with Adobe XD, Figma, InVision, Marvel, and
Sketch, and allows you to import an existing prototype from the design tool
you use.
• Maze allows you to run surveys and collect user feedback early in the design
process, and also enables you to test your information architecture with
features such as Card Sorts and Tree Tests.
• Maze's reporting functionality automatically records and documents
completion rates, misclick rates, time spent, click heatmaps, and more.
• Maze also generates a usability test report instantly for each test, that you
can share with anyone with a link.

Key features: Integrations with leading design platforms, remote testing, surveys,
IA testing, real-time reports, question repository, collaboration features, pre-built
templates.

Loop11: Loop11 helps you conduct moderated and unmoderated usability testing on live
websites, prototypes, and competitors’ websites, among others.
• With Loop11, you can start testing at the wireframing and prototyping stage
to ensure your designs are headed in the right direction.
• Beyond usability testing, Loop11 can help user researchers conduct
competitive benchmarking, A/B testing, and IA testing.
Key features: Online usability testing, prototype testing, benchmarking, A/B
testing, IA testing

2. Userlytics
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Userlytics is a user testing platform that helps you conduct research at scale
by testing digital assets like websites, applications, mobile apps, prototypes,
etc.
• You can collect both qualitative and quantitative data and set up advanced
metrics and graphical reports.
• With Userlytics, you can run any combination of moderated or unmoderated
user experience studies, usability tests, card sorting, and tree testing using a
diversity of features.

Key features: Usability testing, user experience studies, prototype testing, live
conversations, card sorting, tree testing. Tools for user interviews
3. Lookback Lookback is a comprehensive user research tool that offers you the ability
to do live user interviews contextualized through a live recording of the user’s screen.
• Lookback helps you conduct moderated, unmoderated, and remote research
and includes a collaborative dashboard that lets you sync all your research
and customer feedback and share it with your team.
• Lookback sessions are recorded automatically, so you can rewatch them at
your convenience and create highlight clips to share with colleagues and
stakeholders. Key features: Remote user research in real-time, moderated
and unmoderated testing, collaborative dashboard, live note-taking

4. Userzoom
• Userzoom is a UX research platform for remote usability testing and
includes features such as participant recruiting, heatmap and analytics
recording, etc.
• You can use it to collect quantitative or qualitative feedback and create A/B
tests with mock-ups to get feedback from users before product development.
• With Userzoom, you can run unmoderated task-based studies with test
participants from all around the world on a website, prototype, wireframe,
or mock-up. Key features: Usability testing, interviews, surveys, intercept
testing, click testing, tree testing, card sorting, participant recruiting

5. dscout
• dscout is a remote qualitative research platform that helps you collect in-
context insights from the people who use your products.
• One component of the platform is dscout Live, which lets you run remote
user interviews and collect feedback from participants.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• You can also use dscout Diary to see people’s everyday product experience
as it happens either on video or in photos.
• dscout is also helpful because it streamlines the most time-consuming parts
of interviews with research-centric features such as participant scheduling,
automatic transcriptions, on-call observers, and an interactive timeline for
taking notes and clips.
Key features: Unmoderated research, remote user interviews, participant
recruiting, automatic transcriptions, on-call observers, interactive timeline for
taking notes

Tools for recruiting participants

6. User Interviews
• User Interviews is a well-known platform that helps you make better
product decisions with seamless access to quality participants.
• The platform is known for allowing you to build your own pool of
participants or access their panel of over 350,000 vetted research
participants who can be filtered by profession.
• User Interviews offers features like screener surveys, scheduling interviews,
and participation tracking for your existing users.
• The median turnaround time is 2 hours, though it can vary based on the
project. Key features: Participant recruitment, screener surveys, scheduling
interviews, messaging participants, automatic incentives, participation
tracking

7. Ethnio
• Another user research tool for selecting participants is Ethnio, which
enables you to create screeners for intercepting people on your website or
app so that you can find the right participants for user research.
• Ethnio provides various filters for screeners and automated scheduling
options that help streamline the process of getting in touch with users.
• Within the platform, Ethnio also includes a tool called Research Incentives,
a calculator that helps you reward your participants by instantly paying them
using different online services.
Key features: Participant recruitment, central participant database, incentives,
screeners, intercepts, scheduling options
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

8. Ribbon
• Ribbon is an all-in-one participant recruitment and screening tool that
allows you to find users, screen them, and automatically schedule user
interviews.
• They’re also currently working on features including interview transcripts
and participant incentives.
Key features: Participant recruitment, screeners, automatic interview scheduling,
incentive management, moderated interviews

9. Optimal Workshop
• Optimal Workshop offers a suite of testing tools to help you conduct
information architecture (IA) tests.
• For card sorting, you can use their OptimalSort tool to understand how
people think your content should be organized and categorized.
• Another component of Optimal Work is Treejack, which helps you conduct
unmoderated tree tests to identify if users are currently getting lost on your
site and where they expect to find key information.
Key features: Card sorting, tree testing, first-click testing, IA testing, online
surveys, qualitative research, participant recruitment

10. UsabilityHub
• UsabilityHub is a remote research platform that offers a range of testing
tools, including first click testing, design surveys, preference tests, and five-
second tests. These tests enable you to collect data and validate design
decisions.
• With UsabilityHub’s Panel, researchers can recruit test users from a pool of
participants based on criteria such as age, gender, education, and more to
get feedback from a relevant target audience.
Key features: Remote user testing, first-click testing, design surveys, preference
tests, five- second tests, participant recruitment

11. kardSort
• kardSort is an online card sorting tool which offer moderated, unmoderated,
and hybrid card sorting.
• kardSort operates in a simple drag-and-drop function which makes card
sorting easy for researchers and participants alike.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Working on all browsers, you can set up and run a card sorting session
incredibly quickly, and it’s ideal for asynchronous sessions due to its
simplicity and ability to add pre or post-study questions.
Key features: Moderated, unmoderated and hybrid card sorting, pre and post-
study interviews, tool tips

12. Hotjar
• Hotjar is a remote research tool which allows you to view real-time user
behavior via heatmaps and screen recordings.
• With a huge amount of data available, plus in-app surveys, Hotjar is a great
solution if you’re looking to focus on heatmapping as a research method and
want to really understand the nuance of user behavior.

Key features: Heatmaps, screen recordings, unmoderated research, in-product

feedback widgets and follow-up surveys

UNDERSTANDING USER NEEDS AND GOALS

To create a great user experience, it's essential to understand the needs and
goals of your users. This helps you design a product that meets their needs and
provides a positive user experience. By understanding your users, you can design
an intuitive, easy-to-use, and enjoyable product, increasing engagement and
customer satisfaction.

You can use several methods to understand your users' needs and goals. Here are
three common methods:
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• User Research: User research involves gathering information about your

users, such as their demographics, behaviors, and attitudes. You can conduct
user research through surveys, analytics, or user testing. User research helps
you understand your users and their needs, which can inform the design of
your product.

• User Interviews: User interviews involve asking your users questions about
their needs and goals and their experience using similar products. This helps
you gain insight into their thoughts and feelings about your product and
what they need from it. User interviews are a great way to understand your
users' perspectives and create a product that meets their needs.

• Usability Testing: Usability testing involves observing users interacting

with your product and identifying areas where the product can be improved.
This information is then used to iterate on the product's design and create a
better user experience. Usability testing is a valuable method for
understanding how users interact with your product and identifying areas
for improvement.

Importance of Personas in User-Centered Design

Personas are fictional representations of your users, and they help you keep
their needs and goals in mind throughout the design process. Personas can be based
on data from user research and user interviews. They help you make design
decisions, such as which features to include and how to structure the interface.

Personas are an important tool in user-centered design because they keep

the focus on the user and their needs, helping you create a product that meets their
needs and provides a great user experience.

User Research
User research is the process of gathering information about your users and their
needs to inform the design of your product. It helps you understand how users
interact with your product, their pain points, and what they need from it.
By conducting user research, you can create a product that meets the needs
of your users and provides a great user experience.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

User research types

There are two main user research types: quantitative and qualitative.

1. Quantitative Research: Quantitative research involves gathering

numerical data about your users, such as age, gender, and usage patterns.
This type of research is useful for identifying patterns and trends among
your users. It is often conducted through surveys or analytics.
2. Qualitative Research: Qualitative research involves gathering non-
numerical data about your users, such as their opinions, attitudes, and
behaviors. This type of research is useful for gaining deeper insights into
your users' needs and goals. It is often conducted through user
interviews or user testing.

There are several methods you can use to conduct user research. Here are three
common methods:
• Surveys: Surveys are popular for gathering quantitative data about your
users. They involve asking a series of questions to a large group of users.
Surveys can be conducted online or in person and are useful for gathering
information about user demographics, usage patterns, and satisfaction
levels.
• Analytics: Analytics involves gathering data about how users interact with
your product, such as how long they spend on certain pages or which
features they use most often. This type of research can be conducted using
tools like Google Analytics or Mixpanel.
• User Testing: User testing involves observing users as they interact with
your product and asking them questions about their experience. This type of
research can be conducted in-person or remotely and is useful for gaining
qualitative insights into how users interact with your product. User testing
can help you identify pain points and areas for improvement in your product
design.

User Interviews
User interviews are a method of qualitative user research involving one-on-
one conversations with users to gather information about their needs and goals.

User interviews can provide valuable insights into user behavior and
preferences and help you better understand how to design a product that meets
your users' needs.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Benefits of User Interviews

• They allow you to gather detailed information about your users' needs and
goals.
• They provide insight into how users currently interact with your product and
what pain points they experience.
• They can help you identify potential solutions to user problems and generate
new ideas for product features.
• They provide an opportunity to build rapport with your users and develop
empathy for their needs.

How to conduct usability testing

Here are four steps for conducting user interviews:

• Planning: Define the purpose of the interview and what you hope to learn
from it. Create a list of questions that will help you achieve your goals.
Consider factors like the length of the interview and the location where the
interview will take place.

• Recruiting Participants: Identify potential participants who match your

user persona. Reach out to them and ask if they would be willing to
participate in the interview. Please inform them about the interview and how
their data will be used.

• Conducting the Interview: Begin the interview by introducing yourself

and explaining the purpose of the interview. Ask open-ended questions that
allow the user to share their experiences and feelings. Listen carefully to
their responses and ask follow-up questions to gather more information.
Take notes during the interview to help you analyze the data later.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Analyzing the Data: Once you have completed the interviews, review your
notes and look for patterns and themes in the data. Use this information to
identify areas for improvement in your product design. Consider sharing
your findings with your team to help inform product decisions.

Usability Testing
Usability testing is a method of evaluating a product's usability by testing it
with real users. This involves observing users as they attempt to complete tasks
with the product and noting any areas where they experience difficulty or
confusion.
Usability testing can help you identify areas where your product design can be
improved and provide valuable feedback for future iterations.

Benefits of Usability Testing

• It allows you to observe how users interact with your product in a realistic
setting.
• It helps you identify areas where users experience difficulties or confusion,
which can be used to improve the product's design.
• It can provide valuable feedback that can inform future iterations of the
product.
• It can help you build rapport with your users and demonstrate your
commitment to their needs.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Steps for Conducting Usability Testing

Steps to user research

• Planning: Define the test's purpose and what you hope to learn from it.
Create a list of tasks that users will be asked to complete during the test.
Consider factors like the length of the test, the location where the test will
take place, and the equipment you will need.

• Recruiting Participants: Identify potential participants who match your

user persona. Reach out to them and ask if they would be willing to
participate in the test. Please inform them about the test and how their data
will be used.

• Conducting the Test: Begin the test by introducing yourself and explaining
the purpose of the test. Ask users to complete your defined tasks and observe
them as they work. Take notes on any areas where users experience
difficulty or confusion. Be sure to allow time for users to provide feedback
on their experience.

• Analyzing the Data: Once you have completed the tests, review your notes
and look for patterns and themes in the data. Use this information to identify
areas for improvement in your product design. Consider sharing your
findings with your team to help inform product decisions.

Personas
Personas are fictional characters representing different types of users who
might interact with your product. They are created based on user research and help
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

you better understand your target audience. Personas are typically created with a
name, photo, and brief description, including demographic information, goals,
behaviors, and pain points.

Benefits of Personas
• They provide a shared understanding of your target audience among team
members.
• They help you to design products that meet the needs of your target
audience.
• They help you identify the most important features and functionalities for
your users.
• They help you to prioritize design decisions and features based on user
needs and goals.
Steps for Creating Personas

• Conduct User Research: Begin by conducting user research to understand

your target audience. This may involve surveys, interviews, and usability
testing. Collect information on users' goals, behaviors, pain points, and
demographics.
• Identify Patterns and Insights: Once you have collected user data, review
it and look for patterns and insights. Identify common behaviors and goals
among your users.
• Create Fictional Personas: Based on the insights you have gained from
your user research, create fictional personas that represent different types of
users. Give each persona a name, photo, and brief description, including
demographic information, goals, behaviors, and pain points.
• Use Personas in Design Decisions: Once you have created personas, use
them to inform your design decisions. Consider how each persona might
interact with your product and what features and functionalities are most
important to them. Use personas to prioritize design decisions and features
based on user needs and goals.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

KNOW ABOUT BUSINESS GOALS

What are business goals?

• Business goals are the outcomes an organization aims to achieve.

• They can be broad and long term or specific and short term.
• Business leaders set goals in order to motivate teams, measure progress, and
improve performance.
• They are established so that employees may work toward a common goal.

Business Goals vs. Business Objectives

Business Goals Business Objectives

A business goal is a broad, long-term A business objective is a specific and
outcome an organization works toward. measurable task, project, or initiative.
Business goals refer to outcomes. Business objectives refer to actionable
tasks.
Business objectives lay out the ‘how’ in Business objectives are clear and
clear, doable steps that lead to the precise.
desired result.

Frameworks for Writing Business Goals

Goal-setting frameworks can help you get the most out of your business
goals. Common frameworks include SMART, OKR, MBO, BHAG, and KRA.
Here are the common frameworks for writing business goals with examples:

• SMART: SMART goals are specific, measurable, achievable, relevant, and

time- bound. This is probably the most popular method for setting goals.
Ensuring that your goals meet SMART goal criteria is a tried and true way
to increase your chances of success and make progress on even your
most ambitious goals. Example: We will increase the revenue from our
online store by 5 percent in three months by increasing our sign-up discount
from 25 to 30 percent.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• OKR: Another popular approach is to set OKRs, or objectives and key

results. In order to use OKRs, a team or individual selects an objective they
would like to work toward. Then they select key results, or standardized
measurements of success or progress.
Example Objective: We aim to increase the sales revenue of our online
store. Example Key Result: Make $200,000 in sales revenue from the
online store in June.

• MBO: MBO, or management by objectives, is a collaborative goal-setting

framework and management technique. When using MBO, managers work
with employees to create specific, agreed-upon objectives and develop a
plan to achieve them. This framework is excellent for ensuring that everyone
is aligned on their goals. Example MBO: This quarter, we aim to decrease
patient waiting times by 30 percent.

• BHAG: A BHAG, or a big hairy audacious goal, is an ambitious, possibly

unattainable goal. While the idea of setting a BHAG might run contrary to
a lot of advice about goal-setting, a BHAG can energize the team by giving
everyone a shared purpose. These are best for long-term, visionary
business goals.

Example: We want to be the leading digital music service provider globally by

2030.
• KRA: KRAs, or key result areas, refer to a short list of goals that an
individual,department, or organization can work toward. KRAs function
like a rubric for general progress and to help ensure that the team’s efforts
have an optimal impact on the overall health of the business.
Example: Increase high-quality sales leads per sales representative.

Use the table below to compare the pros and cons of each goal-setting framework
to help you decide which framework will be most useful for your business goals.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Framework Pros Cons

Manageable Inflexible and prescriptive
SMART Easy to measure Narrowly focused
(specific, success
measurable, Doesn’t measure growth
achievable, Good for focusing
relevant, time- attention Not optimal for long-term
bound) goal setting

Framework Pros Cons

Aligns teams on Inflexible and prescriptive
OKRs priorities Easy to set too many
(objectives Good for strategic objectives
and key planning
results) Good for focusing
attention
Encourages employee Requires extra paperwork
involvement Requires high managerial
skill
MBOs Helpful for Inflexible and prescriptive
(management performance reviews
by objectives) Encourages career
development
Broad in scope Not always achievable
BHAGs (big Highly motivating Doesn’t specify
hairy Encourages strategy
audacious innovation
goals)
KRAs (key Aligns teams on Doesn’t specify strategy
results areas) priorities
Easy to set too many areas
Good for focusing
attention
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Types of Business Goals

A business goal is any goal that helps move an organization toward a desired
result. There are many types of business goals, including process goals, development
goals, innovation goals, and profitability goals.

Here are some common types of business goals:

• Growth: A growth goal is a goal relating to the size and scope of the
company. A growth goal might involve increasing the number of
employees, adding new verticals, opening new stores or offices, or generally
expanding the impact or market share of a company.
• Process: A process goal, also called a day-to-day goal or an efficiency goal,
is a goal to improve the everyday effectiveness of a team or company. A
process goal might involve establishing or improving workflows or routines,
delegating responsibilities, or improving team skills.
• Problem-Solving: Problem-solving goals address a specific challenge.
Problem- solving goals might involve removing inefficiency, changing
policies to accommodate a new law or regulation, or reorienting after an
unsuccessful project or initiative.
• Development: A development goal, also called an educational goal, is a
goal to develop new skills or expertise, either for your team or for yourself.
For example, development goals might include developing a new training
module, learning a new coding language, or taking a continuing education
class in your field.
• Innovation: An innovation goal is a goal to create new or more reliable
products or services. Innovation goals might involve developing a new
mobile app, redesigning an existing product, or restructuring to a new
business model.
• Profitability: A profitability goal, also called a financial goal, is any goal
to improve the financial prospects of a company. Profitability goals might
involve increasing revenue, decreasing debt, or growing the company’s
shareholder value.
• Sustainability: A sustainability goal is a goal to either decrease your
company’s negative impact on the environment or actively improve the
environment through specific initiatives. For example, a sustainability goal
might be to decrease a company’s carbon footprint, reduce energy use, or
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

divest from environmentally irresponsible organizations and reinvest in

sustainable ones.
• Marketing: A marketing goal, also called a brand goal, is a goal to increase
a company’s influence and brand awareness in the market. A marketing goal
might be to boost engagement across social media platforms or generate
more higher-quality
leads.
• Customer Relations: A customer relations goal is a goal to improve
customer satisfaction with and trust in your product or services. A customer
relations goal might be to decrease customer service wait times, improve
customers’ self-reported satisfaction with your products or services, or
increase customer loyalty.
• Company Culture: A company culture goal, also called a social goal, is a
goal to improve the work environment of your company. A company culture
goal might be to improve employee benefits; improve diversity, equity, and
inclusion (DEI) across your organization; or create a greater sense of work-
life balance among employees.

What Are Business Goal Examples?

Business goal examples are real or hypothetical business goal statements. A

business goal example can use any goal-setting framework, such as SMART,
OKR, or KRA. Teams and individuals use these examples to guide them in the
goal-setting process.

What Are Short-Term Business Goals?

Short-term business goals are measurable objectives that can be completed

within hours, days, weeks, or months. Many short-term business goals are smaller
objectives that help a company make progress on a longer-term goal.

Examples:

• Increase Your Market Share: When companies increase their market

share, they increase the percentage of their target audience who chooses
their product or service over competitors. This is a good short-term goal for
companies that have long-term expansion goals.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

•Reduce Paper Waste: All businesses produce waste, but company leaders
can take actions to reduce or combat excessive waste. Reducing your
company’s paper waste is a good short-term goal for companies that have
long-term sustainability goals.
• Increase Social Media Engagement: High social media engagement is
essential for businesses that want to increase brand awareness or attract new
customers. This is a good short-term goal for companies with long-term
marketing or brand goals.
What Are Long-Term Business Goals?

A long-term business goal is an ambitious desired outcome

for your company that is broad in scope. Long-term business goals might
be harder to measure or achieve. They provide a shared direction and
motivation for team members.

Here are three sample long-term business goals:

• Increase Total Sales: A common growth profitability goal is to increase

sales. An up-and-coming software company might set a long-term goal of
increasing their product sales by 75 percent over two years.
• Increase Employee Retention: Companies with high employee retention
enjoy many benefits, such as decreased hiring costs, better brand reputation,
and a highly skilled workforce. A large corporation with an employee
retention rate of 80 percent might set a long-term goal of increasing that
retention rate to 90 percent within five years.
• Develop a New Technology: Most companies in the IT sphere rely on
innovation goals to stay competitive. A company might set a long-term goal
of creating an entirely new AI technology within 10 years.

Why You Need Business Goals

Every business needs to set clear goals in order to succeed. Business goals
provide direction, encourage focus, improve morale, and spur growth. We’ve
gathered some common benefits of goal-setting for your business.

Here are some benefits you can expect from setting business goals:
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• More Clarity: Business goals ensure that everyone is moving toward a

determined end point. Companies with clear business goals have teams that
agree on what is important and what everyone should be working toward.
• Increased Focus: Business goals encourage focus, which improves
performance and increases productivity.
• Faster Growth: Business goals help companies expand and thrive.
• Improved Morale: Everyone is happier when they are working toward a
tangible goal. Companies with clear business goals have employees that are
more motivated and fulfilled at work. Plus, measuring progress toward
specific goals makes it easier to notice and acknowledge everyone’s
successes.
• More Accountability: Having tangible goals means that everyone can see
whether or not their work is effective at making progress toward those goals.
• Better Decision-Making: Business goals help teams prioritize tasks and
make tough decisions
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

UNIT IV

WIREFRAMING, PROTOTYPING AND TESTING

Sketching Principles - Sketching Red Routes - Responsive Design – Wireframing

- Creating Wireflows - Building a Prototype - Building High-Fidelity Mockups -
Designing Efficiently with Tools - Interaction Patterns - Conducting Usability
Tests - Other Evaluative User Research Methods - Synthesizing Test Findings -
Prototype Iteration

SKETCHING PRINCIPLES

• User experience (UX) designers use UX sketching as a tool for the design
thinking process.
• It’s usually a step early on in the process.
• And it’s an essential skill and common practice that can help individuals or
teams.
• The practice of UX sketching brings creativity and teamwork to the table
and inspires motivation for the project at hand.
• It also creates more purposeful solutions and increases usability which
translates to higher engagement and retaining users

What is UX sketching?

UX Sketching is simply rough drawing by hand, commonly used for

generating, communicating and refining ideas. It can be for your own reference,
or to be shared with co- workers, team managers, or clients and stakeholders.

Sketches are:

• Quick: Don’t invest a long period producing them.

• Timely: Produce them when and as the need arises.
• Disposable: Rely on their usefulness to explore a concept and not on their
production costs.
• Plentiful: Produce sketches as a collection that explores different aspects of
interaction over time.
• Minimalist: Use sketches to clarify one concept at a time.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Types of UX sketches:

1. Rich pictures

Rich pictures depicted with a mixture of doodles, words and symbols.

Rich pictures help designers to analyze and get an overview of a complex
issue. The structure, processes, people and issues are depicted in a mixture
of doodles, words and symbols.

2. Storyboards

• Storyboards presented in frames to visualize use cases via Unsplash

• Sketching storyboards can be used to visualize the specific problem, a
situation of when the product is used, or the finalized solution.
• They are a sequence and flow of illustrations that can really play a big part
in storytelling and create compelling narratives for better impact.

3. Maps

Maps come in handy when you are trying to visualize a particular process,
hierarchy or timeline with different points. As a UX designer, these include
mindmaps, information architecture, site maps, user journey maps and empathy
maps.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

4. User interface (UI)

Some UX designers might work on the UI or work with UI designers to

visualize screen-to-screen interactions. While some designers might skip
sketching to work on wireframes or mockups, it is important for sketching to come
before these steps to not lose conceptual details and refinement. When sketching,
it’s important to explore different interface concepts. This can include quick notes
of envisioning the animation, symbols, icons and shapes to be used. This is not to
be confused with wireframing where the placement, sizing and order of elements
are refined and clear.

The differences between sketching, drawing and prototyping

Sketching, drawing and prototyping may seem like similar activities. Even
though they are similar and related, they are different processes and sequential,
where designers should move from sketching to drawing, then to prototyping.
Here are the differences.
When and why

It is common to do UX sketching in the ideation process to brainstorm,

propose and communicate ideas. It is also a way to test out ideas. Drawings are
done after the initial UX sketch. They are more refined from sketches, picking on
details such as colors and also stroke weight to present a particular style, emotion
and aesthetic. Prototypes are created as drafts of the final solution based on the
drawings created before.

Time and cost

Sketching is convenient, rapid, cost-efficient and fail fast. Drawing,

however, takes more time so it can be accurate. It also keeps you constraint on an
art board or canvas. Prototypes require a lot more investment and focus towards
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

the end product, with little flexibility for change as the foundations may be difficult
to alter.

Quality and detail

Sketching is more often of low quality, and it can be messy, with a little
amount of detail. Drawings would have more intricate details, with higher
accuracy and precision in the sizes or colors of different elements. In terms of
prototypes, they hold the highest amount of detail and accuracy, making sure
everything is pixel perfect. It is ready for the developers to create the solution in
code, and very much similar to the actual product.

Benefits of UX sketching:

• Generate ideas
UX sketching helps you and your team generate ideas by being able to
visualize the problem or idea. You can also use it for planning how the flow or
process will go, narrating the scenarios of the problem and brainstorming.

• Communicate ideas
UX sketching allows you and your team to align on ideas. Being able to
visualize the process can help get the designs right. It’s useful to document the
successes and failures so that others in the team can learn lessons from them, or as
a reference to come back to.

• Refine ideas
With UX sketching, you and your team can also validate your ideas and
make any improvements before you get to the details. It is a fast way of getting
feedback and evaluating the practicality of the solution.

• Fast iterations
UX sketching is done fast, cheaply and the idea is to fail fast. It’s not ideal
to keep iterating on one specific idea but rather to generate as many ideas as you
can. Failing fast makes sure you would not be overly committed to one idea and
generate the most ideas possible. That way once you pick the best ideas you won’t
wonder “what if” later on.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Requirements:

• People:
First off, gather up the people if you are working in a team! It’s a team
activity to brainstorm and generate better and more creative ideas. It’s also
more fun and keeps productivity high.

• Stationeries
The real basics are simply just pen and paper. You can also gather
different colored post-its and pens, markers, highlighters and anything else you
want to use to differentiate priorities or categories of what you are working on.

• Digital software
If you are working remotely, there are options for digital sketching like
Figjam by Figma, Invision Freehand, Jamboard, and AutoDraw, which utilizes
artificial intelligence technology that turns your rough sketches into drawings
fast.

Tips for UX sketching:

• Practice!
As with any other skill, the best piece of advice is to practice, and
keep practicing.

• Write clearly
It might get messy when you try to scribble something fast when UX
sketching. Nevertheless, your handwriting should be clear enough to be
legible for others and yourself.

• Avoid getting caught up with fine details

UX sketches are meant to be rough drawings and it’s meant to be
messy. It’s recommended to leave them at that and focus on the goal rather
than perfecting that star symbol you have drawn. Remember to go for
breadth and keep expanding your ideas instead of going too in-depth or they
will stick and limit your creativity.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Enhancing Sketches — Annotations, Arrows and Notes

Annotations, arrows and notes increase the communicative power of your

sketches.
• Annotations – These are names, labels and explanations located next
to different parts of a sketch to expand and clarify the meaning of any
element depicted. Tie annotations to different elements in your sketch
using arrows, braces, numbering and spatial proximity. Write your
annotations using a different color that contrasts with the sketch proper.
• Arrows – Apart from pointing to specific elements in a sketch, use
arrows to illustrate interaction flow, a sequence of events, movement
and direction.
• Notes – Any text, long or short, that provides additional insight into
your sketch is a note. Use notes to do the following:
• Provide detailed explanation of the action or sequence illustrated.
• Describe an idea derived from an illustration.
• List unresolved issues.
• Explore design elements not depicted in the sketch.
• Clarify the purpose of each element you present, especially non-static
ones. Keep a record of your thought process when you first
draw a sketch.

SKETCHING RED ROUTES:

The red route is one of the UX methods that help you to identify the most
essential user tasks that your team needs to focus on. This will provide you with
an incredible insight into what people want to do most within the product as well.

Within the red routes method, the tasks you need to focus on can be simply
identified by 2 criteria.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• “How many of your users carry out the task” and

• “How often your users carry out the task”.

The benefits of using the red routes method are,

• Red routes help us solve a common problem like “We’ve got so many
users, they want to do so many things, how can we possibly deal with
tons of need?” by designing for the most common use case.

• A second great thing about red routes is they produce actionable results.
It affects the feature within the product and focus on a few critical
functions that are needed by most of the user.

• Focusing on red routes helps us decide on the important decision based

on a user- centering mind and reduces the number of choices.

Identify Red Routes

Red routes are:

• Critical. Without these routes, your product would not deliver any
value.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• End-to-end tasks with multiple steps or actions, not single events.

For example, clicking a “Sign Up” button is an action, not a route.
However, user registration from beginning to end would be a route.
• Frequently utilized. They will often capture the use cases of 90%+ of
all users.

• Built for scale. They are high volume user journeys that funnel a
majority of your product traffic.

• Key value drivers. They drive your key business metrics.

• Objectively successful. You should be able to clearly define what

success looks like.

• Tied to critical product metrics. Your red routes directly impact your
bottom line and have a substantial impact on user experience.

Building a Red Route Matrix

Here are some examples of red route matrixes that you can build. The top
right is your most frequently and widely used feature, while the bottom left is
your least used and more narrowly tailored feature.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Benefits of Identifying Red Routes

• Identifying red routes helps your team prioritize user needs and
facilitate alignment amongst your stakeholders.
• It also helps avoid scope creep and the introduction of
extraneous/ancillary features.

RESPONSIVE DESIGN

What is Responsive Design?

Responsive design is an approach to web design in which the interface
adapts to the device's layout, facilitating usability, navigation and information
seeking. Responsiveness is possible thanks to media queries, allowing the design
to adjust automatically to the browser space to ensure content consistency across
devices, and design elements being sized in relative units (%).
With responsive design, you may:
• Reach a larger audience: nowadays, more users access the web through
mobile devices.
• Save time and development efforts since designers and developers only
focus on one design version.
• Improve SEO, as search engines reward mobile-friendly websites with
better search positions.
• Ensure brand and design consistency across devices, as there is no
chance to modify guidelines to fit different design boxes. Responsive
design has three core principles:
• Fluid Grid System o Grid systems are aids designers use to build,
design, arrange information and make consistent user experiences. In
interaction design, multi-column, hierarchical and modular are the most
widely-used types of grids.
o The principle of a grid is simple: every element occupies the same
percentage of space, however large or small the screen becomes, which
means that the components can be scaled up and down as the user
switches devices.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

In this image, you can see that the fixed version of the content has the
same width regardless of the device whereas in the fluid version the
content fills the available space depending on the device size.
• Fluid Images:
In responsive design, fluid images are images that scale to fit their
container, meaning that when the browser reaches a breakpoint, the image
will scale up or down to the current window size.

For non-photographic images, such as icons, you can use SVG files—
these file formats are lightweight, and you can scale them to any
resolution without losing quality.
• Media Queries and Breakpoints
Media queries are filters that detect the browsing device's dimensions
and make your design appear appropriate regardless of the screen size.
To aid media queries, you have breakpoints: these are the values
where the content of your website will be rearranged to provide the
user with the best possible experience.
Media queries and breakpoints go hand in hand, and both can be
defined in your CSS style sheets. For designers, a breakpoint is a
boundary where the design will change to accommodate the features to
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

the new size. Commonly, designers use three sizes when designing
responsive websites: 1024 & upwards, 1023-768, and 767-320 px.

Best Practices & Considerations for Responsive Design

With responsive design, you design for flexibility in every aspect—images,
text and layouts. So, you should:
• Assume a "mobile-first" mentality: Whether you start designing from
the smallest screen or the desktop version, assuming a mobile-first
mentality helps you practice the mobile-first approach, a design
principle with simplicity at its core. A mobile- first mentality means
prioritizing content, leaving complex graphs and images for the desktop
version, and creating fat-finger-friendly tap targets (30px minimum).
• Use Scalable Vector Graphics (SVGs). These are an XML-based file
format for 2D graphics, which supports interactivity and animations.
• Include three or more breakpoints (i.e., design for 3+ devices).
• Prioritize and hide content to suit users' contexts.
• Aim for minimalism.
• Apply design patterns to maximize ease of use for users in their contexts
and quicken their familiarity: e.g., the column drop pattern fits content
to many screen types.
• Aim for accessibility with font sizes/styles. Use contrast and
background effectively. Consider learning about typographic scales to
harmonize body copy
and headlines. As some users rely on screen readers, make all your text
"real" instead of text within images.
• Responsive design is robust and economical, but its "easy" nature is
deceptive.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

WIREFRAMING:

What is Wireframing?
• 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 a fundamental step in UX design.
• They're the blueprint for digital projects.
• These sketches provide a visual guide to the layout of a website or app.
• It shows where elements will go before detailed design work starts.
• They save time, reduce errors, and ensure a clear vision.
• Good Wireframes are Skeletons for Powerful Prototypes & Delightful
Designs

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.
Different platforms have specific wireframe sizes. These are:
• Smartphone screen: 1080 px x 1920 px
• 8” Tablet screen: 800 px x 1280 px
• 10” Tablet screen: 1200 px x 1920 px
• Desktop screen: 768 px x 1366 px To begin, you should:
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Focus on functionality, accessibility, layout and navigation to make a

design easier to use, produce and sell – Leave nice-to-have features out.
• Structure a hierarchy with a list of prioritized elements for each page –
Determine the information architecture early so you can categorize
information clearly.
• Divide the screen into large blocks for content.
• Fine-tune these blocks with details – links, placeholders for images, etc.
• Maintain a clean grid-oriented view of all content – Apply best practice
design principles to maximize ease of use.
•Use annotations to help others understand your wireframes faster.
• Put mobile first – When you start wireframing for the smallest screens,
you can achieve better consistency across devices.
• Keep your wireframes concise – Don’t worry about finer details such as
aesthetic appeal.
The Elements of a Wireframe
• The logo signifies brand identity. It usually sits at the top corner of a
page and anchors the brand's presence.
• Navigation helps users explore different parts of the site or app.
Commonly seen as a menu bar or sidebar, it directs users to primary
sections or features.
• Search fields allow users to find specific content or features. It's
especially useful for content-heavy sites.
• Text blocks on a wireframe represent the content placement. It can be
headlines, paragraphs, or bullet points.
• Buttons prompt users to take actions like "Submit," "Read More," or
"Buy Now."
• Image placeholders show where you will place your visuals. They help
in understanding the content-to-visual balance on a page.
• Videos mark the areas on the wireframe where multimedia content, such
as videos or animations, will appear.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Different Types of Wireframes

1. Low-fidelity Wireframes
Low-fidelity wireframes are the first you create. They provide the
basic visuals of the design, but lack scale, grid, or pixel accuracy. The
main aim is to strip away distractions. You’ll find simple images, block
shapes, and placeholder text in this wireframe. An example is sketching
an app layout on paper. This approach is beneficial for initial tests.
2. Mid-fidelity Wireframes
Among the three, mid-fidelity wireframes are the most prevalent.
They offer a clearer layout view, though they still omit visuals like
images or specific typography. But, components have more precision,
and features stand out.
Designers might use varied text weights. It helps distinguish between
titles and body text. They don't use colors, but different shades of gray
can indicate elemental importance. While suitable for early product
stages, designers usually craft these using digital tools like Miro or
Figma.
3. High-fidelity Wireframes:
High-fidelity wireframes are detailed. They provide pixel-specific
layout views. Unlike the low-fidelity version, which might use
placeholder text and symbols, these wireframes present actual images
and relevant content.
Their intricate detail makes them apt for exploring and recording
complex ideas. Think of detailed menu systems or dynamic maps. Designers
reserve high- fidelity wireframes for the design cycle's advanced stages. They
refine and finalize design concepts using these.

When to Use Wireframes?

Wireframes play a role throughout a project. They're essential for clarity,

feedback, planning, and testing. But they serve a specific purpose. Here are the
scenarios where creating wireframes can help.
Explore the initial idea: At the start of a project, wireframes help visualize
rough ideas. They bring abstract concepts to life.
Collect meaningful feedback: Before you get into the details of a design,
wireframes help you gather initial feedback. Stakeholders, members of the
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

design team, and potential users can provide valuable insights before you move
on to the next step.
Plan functionality: Wireframes map out where you will place functional
elements like buttons or interactive features. It helps you understand how to
create an interaction design for usability.
Structure content: Wireframes help plan where content will appear. For
instance, positioning text, images, or multimedia is easier.
Customer journey mapping: Wireframes are tools to plot user journeys. They
enable designers to envision how users will navigate a site or app.
Usability testing: Before final designs, wireframes can undergo usability tests.
It helps identify and rectify usability issues early.

Benefits of Digital Wireframing

• Precision: Digital tools offer accurate measurements. This ensures elements
align and match the intended design.
• Efficiency: Speed up the wireframing process. Features like copy, paste,
and templates save time.
• Collaboration: Many digital tools have built-in collaboration features.
Teams can review, comment, and iterate together in real time.
• Version control: Digital wireframing can help you track changes. Most
tools offer version history and allow designers to revert or compare versions.
• Easy sharing: You can share digital wireframes with a link. It eases the
process of gathering feedback.
• Interactivity: Some tools enable clickable wireframes. This simulates
user interactions by offering a dynamic preview.
• Scalability: Adjusting wireframe sizes for various devices is
straightforward. It ensures designs are responsive.
• Integration: Many tools integrate with other design software. This
streamlines the transition from wireframing to high-fidelity designs.
• Asset management: It’s easy to organize and store assets. Icons,
components, and UI elements remain at your fingertips.
• Professional presentation: Digital wireframes look polished. Presenting
them to stakeholders or clients gives a professional impression.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Wireframing tools and software

Wireframing tools help you map out the user experience, layout, and overall flow.
1. Figma
Figma is a top-tier, cloud-based design tool. It's a favorite among solo
designers and teams alike. Even free users benefit from its comprehensive feature
set.
FigJam, an online whiteboard, integrates with Figma, and you can use it
for brainstorming and user flow mapping. Best Features
• Generous free plan
• Online whiteboard companion (FigJam)
• Seamless team collaboration
• Vector-based pen tool
• Integrated team conversations

2. Mockflow
MockFlow is an online wireframe tool with real-time collaboration. Its
clean, intuitive interface makes wireframing simple with many UI packages. The
platform has design controls placed on the left, which maximizes the space for the
design. Beginners find it easy to use due to the precise placement of its diverse
elements.
The platform offers unique features, like organizational functionality. It allows
you to create separate spaces for each project. You can also export in various
formats, including Word and PowerPoint. Best Features
• Intuitive interface
• Multiple project management
• Diverse design elements
• Slack and Microsoft Teams integration
• AI image and text generators

3. Lucidchart
Lucidchart is a diagramming tool accessible via web browsers. It empowers
users to draw, do revisions, and distribute charts and diagrams collaboratively.
This platform is ideal for enhancing organizational structures, systems, and various
workflows. With a user-friendly interface, it's a top choice for those seeking visual
collaboration tools.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

The platform’s strength lies in promoting teamwork through real-time

collaboration, in-app chats, and extensive integration capabilities. Lucidchart
syncs with popular tools, including Microsoft Office and Google apps, and
connects with its virtual whiteboarding product, Lucidspark. Best Features
• Vast wireframe template library
• Drag-and-drop functionality
• Real-time collaboration
• In-app chat
• Automatic sync and save

4. Miro
Miro is a dynamic AI-powered virtual whiteboard platform. It fosters real-
time team collaboration with features like sticky notes, wireframe libraries, and
mind-mapping tools. With diverse integrations and templates, Miro provides a
holistic solution for brainstorming and design. The free version is generous, and
additional perks come with the team plan. Best Features
• Collaborate in real-time on whiteboard
• Extensive wireframe library
• Versatile mind-mapping tools Diverse built-in templates
• Seamless integration options (Slack, Dropbox, etc.)
• Realistic sticky notes for brainstorming

How to Create Wireframes: A Step-by-Step Guide

Step 1: Do Your UX Research

Before sketching, you need to have a good understanding of your audience and
business.
Start your UX research from the perspective of your target audience.
Utilizing tools like user personas or the jobs-to-be-done (JTBD) framework can
be invaluable here.

Step 2: Define Requirements and Prioritize Features

After you complete your UX research, the next step is narrowing down what
to build. At this stage, involve stakeholders or the product owner. They will help
translate broad user needs into specific features.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

This step is crucial for deciding what elements will make it to the wireframe.
Make a list of prioritized features to guide the design process. This ensures you
focus on what’s most important for users and the business.

Step 3: Map the User Flow

User flow is the blueprint of a user's journey on your platform. Taking an e-
commerce site as an example, a user's path might start from the homepage, leading
to a product search, then product selection, payment, and finally, order
confirmation.

Step 4: Sketch the Layout and Features

With the user research and project requirements in hand, sketch your
wireframe. Select an appropriate canvas size and start positioning elements. Piece
together a puzzle; you can shift components to achieve an intuitive, user-friendly
design.

Step 5: Review and Iterate

Now, share your wireframes. Gather input from stakeholders, including
business professionals and developers. Consider guerrilla usability tests, which
involve testing the wireframe with users to gather insights.
When you collect feedback, frame your questions to include broad insights
and specific details. If you have varied wireframe versions, let reviewers pick their
favorites.

Step 6: Build on It
Upon reaching a mutual agreement on the wireframe design, progress to the
next stages. Create detailed mockups and interactive prototypes and transform
them into minimum viable products. This progression helps refine the user
experience so that the final product is functional and user-centric.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

CREATING WIREFLOWS:

What is a Wireflow?

A wireflow is a visual representation of the screens and interactions a

user follows to complete specific tasks. It combines aspects of a basic
wireframe, task flow, and flowchart to advanced screen flows that depict
multiple navigation paths in one diagram.

A wireflow is a hybrid design document that combines wireframing with

flow diagramming. They are essentially wireframes showing user and system flow.

Simply adding arrows and annotations between wireframes on a single

canvas will indicate the paths a user may take while using your product. These
small changes to your wireframes will communicate the visual changes in the
interface while simultaneously describing state changes and sequences in the user
interaction.

Comparing wireframes with flow diagrams

Wireframes
Wireframes are good for representing static interfaces. Data and layout in an
interface commonly change as users interact with a product, however, so the single
static wireframe may not represent the complexity of those changes well.

The example below shows a page for a product on a shopping site.

This wireframe gives a good idea of what elements should appear and where
they should be laid out on product pages for a store. However, some of these
interface elements trigger actions.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Flow diagrams

Flow diagrams may be used for designing interactions.

There are several types of flow diagrams that are useful in designing software
products — task flows, user flows, and flowcharts. The lines between each of
these have become blurry, and we’ve seen the term user flow used interchangeably
with both task flows and flowcharts. This class of diagrams is great for showing
directional flow and/or decision-based logic.

Task flows

Task flows are useful for designing how a user will complete a task.

Task flows are usually shown as a linear sequence of steps, and can be designed at
a high level, or be very detailed, dividing a task into sub-tasks. They may be the
result of task analysis activities, which are designed to observe how users complete
tasks.

Task flows are also useful in planning the optimal paths for task completion,
particularly since they can be easily expressed in natural language. You might also
think of them as visual answers to user stories, because they’re written in a similar
way.

If your user story is: User would like a fast way to buy single pieces of apparel,
you might propose a task flow such as this:

While task flows are suited to predicting how the user completes a task, they
usually don’t explore deviations from those ideal paths.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Flowcharts

Flowcharts are good diagrams for indicating the path the user takes when
interacting with the system (the user task flow), decisions they make on that
journey, and the reactive back-end processes they may trigger.

The diagrams include starting and endpoints, decisions points, the directional flow
of the system, and the reaction of the system as it responds to the user’s input,
including how data is handled and transported.

Flowchart example

This type of flow diagramming is good for indicating the user/system flow more
thoroughly, showing the branching of paths at decision points and how data flows
through the system. While they’re good at representing this complexity within the
product, they do not show the design of the interface at different points. This is
where wireflows help to bridge the gap between wireframes and flowcharts.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Wireflows

Wireflows combine the benefits of wireframes and flow diagrams.

Wireflows visually show how parts of the interface change, as the user interacts
with the application. Additionally, annotations may be added to indicate such
factors as transmission of data within the system.
Wireflows can be thought of as simply being an extension of your
wireframing practice to add user flow information directly into your interface
design.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

How to approach wireflow creation

Product designers have been using hybrid methods for wireframing for a long time.
Most commonly, we see people breaking out of the single view to show what
happens to the dynamic portions of the view.

Another common wireflow practice we see repeatedly is in the design of mobile

applications. Because mobile viewports are small compared to desktop
applications and websites, it is common to reproduce entire key screens and show
state changes.

Here are 3 simple steps to think about when wireflowing:

1. Start with words

2. Define key screens
3. Connect screens
1. Start with words

A good way to start is to work with words to think through sequences. Often
times, we start from describing the need and problem in a user story. Then,
express a solution in words, or using a simple task flow.

2. Define key screens

Next we might start to think of key screens in the interface. A good way
to approach this is to think in terms of starting and ending points.

The goal is to identify screens where the interface changes its state, for instance
when data is dynamically updated during a process like checking out of a store.
You might see a form that progressively asks for more input, e.g. contact
information, shipping information, and billing information in one view. Each of
those would need design.

3. Connect screens

Next we might start to think of connecting the key screens. Draw arrows between
the boxes to define the space between the key screens and move the user forward
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

through their task. We might include decision points and show what happens in
different cases if the user chooses one option, and what happens if they choose
another.

An example

Let’s say we are designing a cat photo-sharing app and we want to design the sign-
up and first-time user experience. Let’s break this approach down:

1. Tasks: Sign Up and First Time Experience

• Sign Up: User signs up, setting a username, email and password.
• First Post: User's first task is to take their first picture right after sign-up
confirmation.
2. Key Screens:
• Unregistered starting page
• Sign Up Screens
• Sign Up Confirmation
• Sign In Screens
• First Post
• Feed (Confirmation)

3. Wireflow
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

BUILDING A PROTOTYPE:

What is a prototype?
• A prototype is a preliminary model of something from which later iterations
are developed or copied. It’s essentially a way to show design intent.
• In UX design, a prototype is usually some sort of simulation that shows
developers, stakeholders and other team members how users will interact
with the final product.
• A prototype is not wireframes or mockups.
• In UX Design, prototypes are expected to have some level of interactivity.
• Mockups and wireframes are considered static, non-interactive design
assets..
Purpose of prototyping:
Prototyping allows for testing before development for maximum efficiency
throughout the building process. Effective testing during the research phase will
save the product’s reputation. Plus, it’ll make the time and money spent on
developing the product much more efficient.
What is fidelity?
Fidelity refers to how precisely a prototype lines up with the final product.
The fidelity of a prototype might vary in its functionality, visual design or content.
Benefits of Prototyping
• We can overview the working system early in the process.
• It can be used to test each component of the finished product before it is
constructed.
• Results in higher user satisfaction
• Problems are detected before launch of the product.
• Reduces development time and cost.
• Missing functionality can be identified prior to the launch of the product.
Scope of considering new requirements

Types of Prototyping:

1. Low-fidelity prototyping:
 A product that is not autonomously interactive, has an incomplete
visual design or lacks content would be considered a low-fidelity or lo-
fi prototype.
 Lo-fi prototypes are an easy method to communicate a high-level
design concept tangibly.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

 Lo-fi prototypes are generally used for testing functionality rather than
visual design.
 Lo-fi prototypes are affordable, speedy and helpful for team
collaboration.
2. Medium-Fidelity Prototyping:
 Medium fidelity prototyping has limited functionality but clickable
areas which present the interactions and navigation possibilities of an
application.
 It is a more detailed and realistic prototype than Low-fidelity
prototyping.
3. High-fidelity prototyping:
• High-fidelity or hi-fi prototypes are essentially functional prototypes.
• They look and act as closely as possible to the final product.
• A hi-fi prototype is realistic, detailed, dynamic and functional.
• They look like a real app or website, have the same content that will
appear in the final design and are interactive.
• Once a team has tested, iterated and clarified their designs, they create
a hi-fi prototype.
• Generally, hi-fi prototypes are more expensive because they take more
time and work to develop.
• They’re great for usability testing with real users. They allow
designers to test very specific aspects of their design choices like
animated transitions, stages of the user’s journey.
How are prototypes made?
Prototypes can be made analog – on paper – or digitally. Digital prototypes
are typically made using wireframe software and prototyping tools like Figma,
Sketch, Framer or Adobe XD.
Paper prototype
Paper prototyping is when a digital product or interface is sketched out on
paper. This is a low-fidelity form of prototyping. Usually, designers create hand
drawings of the different screens they want to explore.
Linked wireframe prototype
To create a linked wireframe prototype, designers create digital mockups of
each part of an app or website and link them together. When users click on
something, they will be taken to another corresponding wireframe, mimicking how
the final product will work.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Digital prototype
Digital prototypes are high-fidelity mockups of an entire app. They can be
created with prototyping software.
Coded prototype
Coded prototypes are typically a hi-fi mockup of the proposed final product.
They are the closest thing you can get to the ready-to-launch design.

Prototyping: Steps from Concept to Reality:

Step 1 (Requirements analysis): A prototyping model begins with

requirement analysis. In this phase, the requirements of the system are defined in
detail and gives a brief idea of the system to the user.
Step 2 (Quickly Designing the Prototype): A rapid and straightforward
design of the entire product is made at this stage. It is not a complete design and
gives a brief idea of the system to the user.
Step 3 (Creating a Prototype): It is a small working model of the required
system. This should be very close if not exactly like the final product that is meant
to be developed.
Step 4 (Testing the Prototype): In this step to validate the design decisions
before mass production, real users will be needed try the product and identify
issues that might arise. It finds out any flaws and mistakes in the working model.
Comment and suggestion will be collected from the customer and then provided
to the developer.
Step 5 (Prototype refinement): Prototype will be refined according to the
feedback and suggestions in this stage. A final system is developed after receiving
all the suggestions and feedback.
Step 6 (Launching your test): Before launching the test, it’s important to
do a trial run with a colleague or friend to check if the set-up works as expected
or not.
Step 7 (Sharing the results): After receiving the responses it is time to
analyze the test results. It will help in improving the product and will give
direction to adjust the UI and UX, and iterate to get closer to the product launch.
Step 8(Implementation of the product and Wrap up): The final product
will be developed according to the final prototype model and this will be tested
thoroughly. After launching of the product, remember to conduct Live Website
Testing.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Best Practices for Prototyping:

• Define goals and criteria: Before starting prototyping and testing, make a
clear idea of what you want to achieve and what are the specifications
needed.
• Prototype only what is needed: Don’t put all the details in an attempt to build
the perfect prototype. Sometimes adding too many details can be act as a
negative asset in the Prototype.
• Only build the essential functions: It is not necessary to create a flawless
and comprehensive product. Start with the fundamental components, such
as menus, CTA buttons, and crucial links.
• Understand users and their needs: Use various methods, such as user
research, personas, scenarios, and user journeys, to gain insights into users’
behavior, preferences, and expectations. These insights will help to define
the main tasks and to organize them in a logical and meaningful way.
• Design for different devices and screen sizes: UI navigation should adapt to
different devices and screen sizes, such as desktops, tablets, and
smartphones. Use responsive design principles and techniques to ensure that
UI navigation is usable and accessible on different devices.
• Test and Iterate: Testing and iterating are the core activities of UI
prototyping. Check usability testing, analytics, and take feedback, how well
UI navigation works for users. Identify and fix any issues or problems that
users encounter, and improve the navigation and functions accordingly.

DESIGNING EFFICIENTLY WITH TOOLS:

1. ClickUp
ClickUp is a productivity platform designed to provide wall-to-wall
solutions for any teamor product roadmap. From daily tasks to complex projects,
ClickUp offers hundreds of features to help facilitate the various stages of the
design thinking process. Whether your team works asynchronously or in real-time,
you’ll have the context and tools needed to keep projects moving!
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

ClickUp best features

• Image, video, and PDF annotation tools to centralize feedback and expedite
approval processes
• Collaborative Whiteboards, Docs, and Mind Maps to develop ideas in real-
time alongside the team
• Flexible time tracking from any device, window, app, or task with the global
timer
• Over 15 project views, including Calendar, Board, and the unique Workload
view
• A vast Template Library for every use case, from creative
briefs, design briefs to customer journey maps
• Multiple assignees on tasks for total transparency into all progress
• Visual collaboration features available on every pricing plan ClickUp
limitations
• So many powerful collaboration tools can pose a learning curve
• Not all views are available in the mobile app—yet!
2. Hotjar Hotjar is a design thinking tool helping businesses gain a better understanding of
their customer’s behavior and preferences. It provides a suite of tools for user research
data and heatmaps to identify pain points, optimize user experiences, and drive
conversions. One of the key features of Hotjar is its ability to create visitor recordings,
which allows businesses to see exactly how users are interacting with their website or
application.
In addition to visitor recordings, Hotjar also offers a variety of other tools
for collecting feedback, including surveys, polls, and forms. This allows
businesses to gather insights directly from their users and get a better
understanding of their needs and preferences.

Hotjar best features

• Visitor recording and session replay
• Heatmaps to track user behavior on web pages
• Conversion funnel analysis to optimize sales funnels
• Feedback polls and surveys to gather user input
User behavior analysis and segmentation
Hotjar limitations
• Limited filtering capabilities on the free and lower-tier plans
• Custom charts are only available for teams on the Scale plan
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

3. Figma
Design consistency is a critical aspect of any successful design project, and
Figma makes it easier for teams with searchable assets and shareable styles. Figma
allows designers to create a centralized library of assets, including icons, logos,
and other design elements. Everyone can use the design-approved assets and
maintain a consistent look and feel across their designs!
Figma also comes with features to create and share styles for typography,
color, and other design elements. Designers can apply consistent styles across all
their designs, regardless of the designer working on them. These styles can be
updated in one place and automatically applied to all designs.
Figma best features
• Cloud-based design collaboration and sharing
• Component and style libraries for efficient design workflows
• Version history and file backup
• Team management tools and user permissions
• Integration with third-party tools like Slack and ClickUp
Figma limitations
• Limited offline functionality, as it is primarily a cloud-based tool
• Limited plugin library compared to other design thinking tools
• No mobile application
4. Make My Persona
MakeMyPersona is a design thinking tool developed by HubSpot to help
businesses create detailed buyer personas. Buyer personas are fictional
representations of an ideal customer and are essential for businesses to understand
their target audience better.
But the fact of the matter is MakeMyPersona allows businesses to create
detailed personas by answering a series of questions related to the customer’s
demographic, interests, goals, and pain points. The tool then generates a detailed
persona report that includes the customer’s name, age, job title, and more.

Make My Persona best features

• User persona templates for market research and user-centered design
• Customizable persona templates and questionnaires
• Collaboration tools for persona creation and the design thinking process
• Unlimited online personas to support user testing
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Make My Persona limitations

• Limited functionality beyond persona creation
• Limited customizability of persona templates compared to other persona
creation tools
• Lacks design project management features to support every design thinking
stage

5. Optimizely

Optimizely is a website optimization platform for businesses to test and

optimize their website content for maximum impact. The platform offers a suite of
tools for A/B testing, personalization, and analytics so businesses can make data-
driven decisions about their website content.
With Optimizely, businesses can test and optimize everything from
headlines and images to entire landing pages, and user flows. The platform is
cloud-based, making it accessible from anywhere with an internet connection.
Optimizely is a great tool for improving website performance and increasing
engagement and conversion rates!

Optimizely best features

• A/B testing and experimentation platform for website and app optimization
• Visual editor for creating and deploying experiments
• Personalization tools for tailored user experiences
• Experiment analytics and reporting for usability testing
• Integration with other analytics and marketing tools Optimizely limitations
• Limited functionality for non-technical users who may need to rely on
developers for more complex experiments
• Small library of integrations compared to other different design thinking
tools
• Expensive pricing model, making it less accessible for smaller businesses
6. SessionLab

Sessionlab is a web-based design thinking tool that provides a range of

features to plan, organize, and run effective meetings and workshops. The tool is
designed to help teams build innovative solutions and reduce the amount of time
producing events.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

One of the key features of Sessionlab is its extensive library of pre-designed

templates for different types of meetings and workshops. These templates include
agendas, exercises, and facilitation tools. These can be customized to meet the
specific needs of the event and team. Sessionlab also provides a range of tools for
managing participant feedback, capturing and sharing meeting notes, and
following up on action items.

SessionLab best features

•Facilitation and workshop planning tools for the design thinking process and
Agile methodologies
• Customizable agenda templates to create a user research platform
• Collaboration tools for team-based workshop planning
• Private templates on the paid plans
• Team activity overview
SessionLab limitations
• Limited customizability of agenda templates compared to other workshop
planning tools
• Limited functionality for project management beyond workshop planning
No offline functionality

7. Stormboard
Stormboard is a cloud-based collaboration and brainstorming tool helping
teams generate ideas and turn them into actionable plans. The tool is built to
collaborate in real- time, making it an ideal solution for remote teams working on
design thinking solutions.
Stormboard provides a range of features, including sticky notes, virtual
whiteboards, and drawing tools. The tool also offers a voting system, allowing
team members to vote on the best ideas, and a prioritization feature to help teams
identify the most important ideas to focus on.

Stormboard best features

• Digital brainstorming and collaboration tool for design thinking Real-
time collaboration and voting for remote teams Integration with other
project management tools
• Mobile app for on-the-go collaboration
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Security features for protecting data and ensuring privacy Stormboard

limitations
• Limited ability to customize templates or create custom workflows
• Limited functionality for project management beyond brainstorming and
ideation Steep learning curve for new users unfamiliar with digital
brainstorming tools
8. Miro
Miro is an online collaborative whiteboard platform offering a range of tools
to help teams collaborate effectively, including sticky notes, drawings, flowcharts,
and wireframes. Miro also integrates with other work tools, such as Slack, Jira,
and Google Drive, making it easy to share information and files across different
platforms.
Additionally, Miro offers templates to help teams get started quickly, making
it easy to create a customized workspace for each project. With its user-friendly
interface, robust feature set, and powerful integrations, Miro is a valuable tool for
any remote team looking to collaborate effectively.

Miro best features

• Sticky notes, images, mind maps, videos, and drawing capabilities
• Variety of templates and tools for brainstorming and wireframing
• Real-time collaboration and shared spaces for remote teams
• Integration with other project management tools and apps
• Ability to upload and share images, videos, and other files

Miro limitations
• Lacks functionality to build an in-depth knowledge hub
• Pricing is steep for smaller agencies
• Limited offline functionality

9. Mural
Mural is a digital workspace and design thinking tool for teams to ideate and
iterate their ideas. The platform is designed to support a range of design thinking
stages, including problem-solving, brainstorming, mapping, and visualization.
Mural provides a range of features and tools to help teams work together
effectively, regardless of their location.
Mural’s canvas templates provide teams with a structured way to approach
different design thinking stages, while its frameworks help teams to organize as
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

many ideas and identify patterns. Additionally, Mural provides a range of tools for
sketching, annotating, and commenting, making it easy for team members to
communicate and collaborate in real-time.

Mural best features

• Flexible permissions to create view-only, edit, and facilitator permissions
• Hundreds of pre-built templates for collaboration sessions
• Advanced integration features on the paid plans
• Extensive file support for whiteboards
• Infinite & resizable canvas options

Mural limitations
• Expensive pricing plans compared to other design thinking process tools
• Lacks the option to create interactive charts, tables, or reports
• No video chat feature

10. InVision
Wrapping up our best design thinking tools list is InVision—a digital
product design platform for designers, product managers, and other stakeholders
to create and collaborate on different types of projects. It offers a suite of tools that
simplify the design process, including prebuilt templates organized by categories
and role types.

InVision best features

• Whiteboard Importer feature to directly import Miro or Mural
whiteboards
• Unlimited public and private spaces on the free tier
• Interactive widgets and reactions
• Customizable smart workflows
• Task management features

InVision limitations
• Small integration library compared to other design thinking tools
• No feature to create a flowchart or sitemap for a prototype
• Lacks team management and workload capabilities
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

CONDUCTING USABILITY TESTING:

What is Usability Testing?

Usability testing is the practice of testing how easy a design is to use with a
group of representative users. It usually involves observing users as they attempt
to complete tasks and can be done for different types of designs. It is often
conducted repeatedly, from early development until a product’s release.

Usability Testing Leads to the Right Products

Through usability testing, you can find design flaws you might otherwise overlook.
Whenever you run a usability test, your chief objectives are to:
1) Determine whether testers can complete tasks successfully and
independently. 2) Assess their performance and mental state as they try to
complete tasks, to see how well your design works.
3) See how much users enjoy using it.
4) Identify problems and their severity.
5) Find solutions.
While usability tests can help you create the right products, they shouldn’t
be the only tool in your UX research toolbox. If you just focus on the evaluation
activity, you won’t improve the usability overall.

There are different methods for usability testing. Which one you choose
depends on your product and where you are in your design process.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Usability Testing is an Iterative Process:

To make usability testing work best, you should:

1) Plan
a. Define what you want to test. Ask yourself questions about your
design/product.
What aspect/s of it do you want to test? You can make a hypothesis from each
answer. With a clear hypothesis, you’ll have the exact aspect you want to test.
b. Decide how to conduct your test – e.g., remotely. Define the scope of
what to test
(e.g., navigation) and stick to it throughout the test. When you test aspects
individually, you’ll eventually build a broader view of how well your design works
overall.

2) Set user tasks

a. Prioritize the most important tasks to meet objectives (e.g., complete checkout),
no more than 5 per participant. Allow a 60-minute timeframe.
b. Clearly define tasks with realistic goals.
c. Create scenarios where users can try to use the design naturally. That means
you let them get to grips with it on their own rather than direct them with
instructions.

3) Recruit testers
Know who your users are as a target group. Use screening questionnaires
(e.g., Google Forms) to find suitable candidates. You can advertise and offer
incentives. You can also find contacts through community groups, etc. If you test
with only 5 users, you can still reveal 85% of core issues.

4) Facilitate/Moderate testing
Set up testing in a suitable environment. Observe and interview users.
Notice issues. See if users fail to see things, go in the wrong direction or
misinterpret rules. When you record usability sessions, you can more easily count
the number of times users become confused. Ask users to think aloud and tell
you how they feel as they go through the test. From this, you can check whether
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

your designer’s mental model is accurate: Does what you think users can do with
your design match what these test users show?

If you choose remote testing, you can moderate via Google Hangouts, etc., or use
unmoderated testing. You can use this software to carry out remote moderated and
unmoderated testing and have the benefit of tools such as heatmaps.

Keep usability tests smooth by following these guidelines.

1) Assess user behavior – Use these metrics:

Quantitative – time users take on a task, success and failure rates, effort
(how many clicks users take, instances of confusion, etc.)
Qualitative – users’ stress responses (facial reactions, body-language
changes, squinting, etc.), subjective satisfaction (which they give through a post-
test questionnaire) and perceived level of effort/difficulty

2) Create a test report – Review video footage and analyzed data. Clearly define
design issues and best practices. Involve the entire team.
Overall, you should test not your design’s functionality, but users’ experience of it.
Some users may be too polite to be entirely honest about problems. So, always
examine all data carefully.
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

OTHER EVALUATIVE USER RESEARCH METHODS:

What is evaluative research?
Evaluative research is a set of research practices aimed at assessing how
well the product meets its goals.
It takes place at all stages of the product development process, both in the
launch lead-up and afterward.
This kind of research is not limited to your own product. You can use it to
evaluate your rivals to find ways to get a competitive edge.

Why is conducting evaluation research important for product managers?

Ongoing evaluation research is essential for product success.
It allows PMs to identify ways to improve the product and the overall user
experience. It helps you validate your ideas and determine how likely your product
is to satisfy the needs of the target consumers.

Types of evaluation research methods:

There are a number of evaluation methods that you can leverage to assess
your product. The type of research method you choose will depend on the stage in
the development process and what exactly you’re trying to find out.
1. Formative evaluation research
Formative evaluation research happens at the beginning of the
evaluation process and sets the baseline for subsequent studies. In short, its
objective is to assess the needs of target users and the market before you start
working on any specific solutions.
2. Summative evaluation research
Summative evaluation research focuses on how successful the
outcomes are. This kind of research happens as soon as the project or program
is over. It assesses the value of the deliverables against the forecast results
and project objectives.
3. Outcome evaluation research
Outcome evaluation research measures the impact of the product on
the customer. In other words, it assesses if the product brings a positive
change to users’ lives.
4. Quantitative research
Quantitative research methods use numerical data and statistical
analysis. They’re great for establishing cause-effect relationships and
tracking trends, for example in customer satisfaction.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

5. Qualitative research
Qualitative research uses non-numerical data and focuses on gaining a
deeper understanding of user experience and their attitude toward the
product.

Best evaluative research data collection techniques

• User feedback surveys
User feedback surveys are the cornerstone of the evaluation research
methodology.
A/B testing
A/B tests are some of the most common ways of evaluating features, UI
elements, and onboarding flows. That’s because they’re fairly simple to design and
administer.

Usability testing

Usability testing helps you evaluate how easy it is for users to complete their tasks
in the product.
There is a range of techniques that you can leverage for usability testing:
• Guerilla testing is the easiest to set up. Just head over to a public place like
a coffee shop or a mall where your target users hang out. Take your
prototype with you and ask random users for their feedback.
• In the 5-second test, you allow the user to engage with a feature for 5
seconds and interview them about their impressions.
• First-click testing helps you assess how intuitive the product is and how
easy it is for the user to find and follow the happy path.
• In session replays you record and analyze what the users do in the app or
on the website.
• Eye-tracking uses webcams to record where users look on a webpage or
dashboard and presents it in a heatmap for ease of analysis.
As with all the qualitative and quantitative methods, it’s essential to select a
representative user sample for your usability testing. Relying exclusively on the
early adopters or power users can skew the outcomes.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Beta testing

Beta testing is another popular evaluation research technique. And there’s a good
reason for that.
By testing the product or feature prior to the launch with real users, you can gather
user feedback and validate your product-market fit.
Most importantly, you can identify and fix bugs that could otherwise damage your
reputation and the trust of the wider user population. And if you get it right, your
beta testers can spread the word about your product and build up the hype around
the launch.

Fake door testing

Fake door testing is a sneaky way of evaluating your ideas.

Usability evaluation questions

• How was your experience completing this task?
• What technical difficulties did you experience while completing the
task?
• How intuitive was the navigation?
• How would you prefer to do this action instead?
• Were there any unnecessary features?
• How easy was the task to complete?
• Were there any features missing? Product survey research questions
• Would you recommend the product to your colleagues/friends?
• How disappointed would you be if you could no longer use the
feature/product?
• How satisfied are you with the product/feature?
• What is the one thing you wish the product/feature could do that it
doesn’t already?
• What would make you cancel your subscription?
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

SYNTHESIZING TEST FINDINGS:

5 steps to properly synthesize your usability test findings:

You can run testing after you’ve done your initial sketches, after your basic
wireframes are done, after you add high fidelity content, or colours, or full UI
elements, etc.

Usability testing validates organically derived functionality and usefulness

or identifies confusion — any pass/fail is a judge of the design and use of the
product only, not the user.

Who should participate in your tests?

• The target audience — so make sure you qualify your participants first.
• And you can test with your non-target audience, but they’ll have to
“pretend” to be your target audience
• You shouldn’t use the same people for each round of testing, because they’ll
have seen your product so their feedback won’t be as genuine.

How many tests should you run? And at what stage should you run them?

At each stage through the design process that you want to test your product,
you should do so with 5 different people. With 5 people you’ll identify 80% of the
major issues, so there are diminishing returns after that.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

How to properly synthesize test results

Record your test sessions (and take detailed notes)

Before we talk about the steps of synthesis, it’s worth noting that you should
record your test sessions. Make sure to ask your test subjects if it’s ok to record
them and tell them what the recordings will be used for — likely just to provide
abstracted feedback that will shape your product going forward. No personal
information or auditory sound (or video) will be shared, transparency is important.

Step 1: Identify the findings from each test

Use sticky notes (or a spreadsheet) to extract quotes that speak to pain points
or general confusion (we’ll call these “findings”) encountered during each test.

Step 2: Group your findings into themes

Now put all of your findings about similar topics together, creating clusters
of findings. You may find that as you cluster your findings that sub-clusters
immerge, or that you may want to re-cluster them in a different way and name
them, we’ll call these “themes”.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Step 3: Consolidate finding and convert them into insights

Now that your themes are defined, you should see that the same pain points,
frustrations and confusion happen over and over again. Combine all findings that
are about a single thing into one and denote the issue (we’ll call this an “insight”).

Step 4: Identify the solutions for each insight

Now it’s time to start thinking about how to solve the problems that have
come to light. Review each insight and list possible solutions. In some cases, you
may not be able to visualize the fix and may need to go back to the drawing board.
Much like how you designed the original approach, you may need to sketch,
wireframe and test any new approaches depending on their complexity.

Step 5: Map out the solutions on a time vs value matrix

Of the solutions that are explored in step 4, you’ll likely be able to make
some assumptions on the perceived value of each one to the user (and the
business), and how much time each one will take to design (and build!). Some
solutions that involve going back to the drawing may turn out better, but they may
equally not yield an improvement. The simple truth is that you may not have time
to design the ideal solution for everything now — also, some things are just better
solved only after you have real users using your product. So, you need to decide
which solutions to attempt, and which to defer or ignore.

Anything that fell in the top right I focused on (fast and high value). If I had
time for items in the top left (fast, but low value) or bottom right (lengthy, but high
value), I’d choose to tackle them next. Anything in the bottom left was unlikely to
get tackled (lengthy, and minimal value)
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

PROTOTYPE ITERATION:

Iteration is the technique of testing and refining the prototypes based on user
feedback and evaluation. Iteration allows you to identify and solve problems,
improve usability, and enhance user satisfaction. Iteration can occur at any stage
of the design process, from the initial concept to the final product.

Why are UI/UX prototyping and iteration important?

• Prototyping and iteration are important for UI/UX design because they help
you to:

• Explore different ideas and solutions in a fast and cost-effective way.

• Prototyping allows you to experiment with various features, interactions,

layouts, and styles without investing too much time and money in
development.

• Prototyping also helps you to communicate your ideas more clearly to

stakeholders, developers, and users.

• Validate your assumptions and hypotheses with real users. Prototyping

enables you to test your designs with actual users in realistic scenarios and
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

contexts. This way, you can gather valuable feedback and insights on how
users perceive, understand, and use your product.
• Prototyping also helps you to measure the effectiveness of your designs in
terms of user goals, needs, preferences, and expectations.

• Improve your designs based on user feedback and evaluation. Iteration

allows you to incorporate user feedback into your designs and make changes
accordingly. Iteration also helps you to refine your designs by eliminating
unnecessary or confusing elements, adding missing or desired features,
enhancing usability and accessibility, and optimizing performance and
aesthetics.

How to create UI/UX prototypes and iterations?

There is no one-size-fits-all approach to creating UI/UX prototypes and

iterations. However, there are some general steps that you can follow:

• Define the problem and the goal. Before creating any prototype, you
should have a clear understanding of what problem you are trying to solve
and what goal you are trying to achieve with your design. This will help you
to focus on the most important aspects of the product and avoid unnecessary
distractions.

• Choose the appropriate level of fidelity. Depending on the purpose, scope,

and stage of the design process, you should choose the appropriate level of
fidelity for your prototypes. For example, low-fidelity prototypes are
suitable for exploring different concepts and ideas, while high-fidelity
prototypes are suitable for testing specific features and interactions.

• Select the appropriate tools and methods. There are various tools and
methods available for creating UI/UX prototypes, such as sketching,
wireframing, mockuping, prototyping software, HTML/CSS/JavaScript
coding, etc. You should select the tools and methods that best suit your
needs, skills, budget, and time constraints.

• Test the prototypes with users. Testing is an essential part of prototyping

and iteration. You should test your prototypes with real or representative
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

users in realistic or simulated environments. Testing can be done in various

ways, such as interviews, surveys, observations, usability tests, A/B tests,
etc. Testing should aim to collect both quantitative (e.g., metrics) and
qualitative (e.g., feedback) data from users.

• Analyze the results and iterate. After testing the prototypes with users,
you should analyze the results and identify the strengths and weaknesses of
your designs. You should also prioritize the issues that need to be addressed
and decide on the actions that need to be taken. Based on the analysis, you
should iterate your prototypes by making changes or creating new versions
until you reach a satisfactory solution.

5 Benefits of Iterative Design and Prototyping

There are five major benefits of iterative design and prototyping:
1. Greater Efficiency and Faster Time to Market
Iterative design and prototyping is typically more efficient than a traditional
design process because creating new designs and prototypes is fast and simple.
The initial design process only lasts a few days to a few weeks depending on the
complexity of the design. The goal is to get a working prototype of the design as
quickly as possible so that engineers can identify and fix potential mechanical
problems, material challenges, or other details that can’t be easily foreseen during
the design stage.
2. Lower Product Development Costs:
Iterative design and prototyping relies on cost-effective tools like CAD
software and rapid prototyping technology, such as 3D printers or CNC machines.
These tools make it easy to produce multiple prototypes at relatively little cost.
This is often more cost-effective than pooling most of your resources and labor
into a single prototype, especially if that prototype ultimately doesn’t meet your
end-users’ needs.
3. Thorough Product Testing:
One advantage of iterative design and prototyping that can’t be overlooked
is its impact on the quality of the products you create. This process relies on
thorough testing and feedback with every new iteration.
4. Fewer Redesigns:
A full redesign slows your product development process down significantly
and adds to the total cost of the project. Iterative design helps prevent this by
 lOMoAR cPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

encouraging designers and engineers to iron out serious flaws in the design as early
as possible.
5. More User-Friendly Products: Because end users are typically involved much earlier in
the process, you’re more likely to create an end product that they actually find useful.
Sometimes it’s quite difficult to know what end users’ pain points are, and if you overlook
these pain points, your product will be less effective.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

UNIT V RESEARCH, DESIGNING, IDEATING, & INFORMATION

ARCHITECTURE

Identifying and Writing Problem Statements - Identifying Appropriate Research

Methods - Creating Personas - Solution Ideation - Creating User Stories - Creating
Scenarios - Flow Diagrams - Flow Mapping - Information Architecture

IDENTIFYING AND WRITING PROBLEM STATEMENTS

Many great business ideas begin with a crucial problem that needed solving. One
of the best ways to properly diagnose and solve problems is to write a problem
statement. What is a problem statement(also known as a Point Of View (POV))?

Problem statements summarize a challenge you want to resolve, its causes, who
it impacts, and why that’s important. They often read like a concise overview managers
can share with stakeholders and their teams.

Why are problem statements important?

Problem statements help you share details about a challenge facing your team.
Instead of rushing to a solution, writing a problem statement enables you to reflect on
the challenge and plan your response.
The high-level perspective a problem statement offers lets teams focus on the
factors they need to change. Managers also use this top-down vantage to oversee their
teams as they work out solutions.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

When to use a problem statement?

Any time you face a challenge is an opportunity to write a problem statement.

You can write a problem statement to improve operations in different contexts. For
example, you might use a problem statement to:

• Refine project proposals: Managers write project proposals to solve user issues.
Problem statements inform these proposals, shaping their goals, plans, and
approaches.
• Develop your product offering: Many startups build their business model on
solving a long-standing problem. Problem statements help clarify a company’s
mission and core product design.
• Clarify the outcome of solving a problem: Problem statements point out the long-
term benefits of solving the issue, which can help you put the problem into context
for stakeholders and secure necessary resources.
• Collaborate with multiple teams: You can rally teams around a common goal if
you frame it as a shared problem. Collaboration ensures you examine the problem
and reach solutions from all possible angles.
• Improve the user experience: Problem statements can identify pain points and
ways to enhance a product. When teams act on problem statements, this can improve
UX. What are the elements of a problem statement?

You can break problem statements into a few core elements. While the format of a
problem statement is flexible, aim to include the following:
• Gap: the challenge, issue, or pain point you currently face
• Orientation: a description of when and where you found the problem and the trend
it creates or follows
• Impact: a measure of your problem’s consequences in cost, time, quality,
environment, or personal experience
• Importance: why this problem matters to your organization and customers
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

How to write a problem statement

Now that you understand the elements of a problem statement, you can write your own
in five key steps.

1. Identify the problem

Start by pointing out an issue and gathering data. Put yourself in the support or
production environment where the problem arises and try to experience it firsthand.
When gathering data, look for trends or overarching themes—they may help you find
the root cause of your problem later.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

After seeing the problem for yourself, interview others who know about it. Start
with employees who run into the problem or offer support for it. In some cases, they
may have a design brief with more information on the issue. Beyond that, customer
testimonials and stakeholder interviews can lay out the full scope of your problem.

2. Put the problem into context

Describe how the problem impacts customers and stakeholders. Avoid personal
bias and focus on developing a clear perspective. This approach helps prioritize the issue
and explain why you need to solve it. If customers can't reach the benefits of your
product because of an issue, that's a high-priority concern.

You can put a problem into context by asking:

• Does the problem lead to a reputational, financial, or logistical cost?

• Is the main issue a symptom of a greater challenge?
• Has your team already tried to solve this problem? Why didn’t past solutions work?
What do you and your team definitely know about the current problem?

3. Find the root cause

Ask yourself "why" questions about the problem to find its origin point. Your
initial assumptions about a problem might stand in the way, so as you learn more about
the issue, don’t be afraid to change how you look at it. You'll get closer to the root cause
as you reframe your understanding around these discoveries.

4. Describe your ideal outcome

Now that you understand the problem, think about your ideal outcome. Whether
you're solving a problem with your product or an internal process, remember to avoid
scenarios where you put a Band-Aid on the issue. Even if you can avoid specific
symptoms in the short term, letting a core problem go unsolved can lead to other
setbacks later.

5. Propose a solution and outline its benefits

Finally, your problem statement should include solutions to the problem.
Including more than one solution gives stakeholders and your team options for deciding
your approach. Note the benefits of each solution, highlighting why it stands a chance
of working or how it can save on time and costs.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

To ensure you arrive at the best solution, be sure to:

• Ask your team if the proposed solution matches their understanding of the problem.
• Consider more than one solution. Sometimes, you can choose between multiple
options or apply more than one solution at once.
• Include long-term financial, intangible, and operational benefits the solution
provides.
• Consider whether your solution has blind spots or causes changes that could lead to
more issues.
Problem statement examples
Now that you know how to write problem statements, here are some examples.

Example 1: Support ticket wait times

Suppose you’re a support manager at a midsize SaaS company. Ideally, you want to
respond to every support request within a few hours. However, your team can’t reach
turnaround times fast enough to meet customer expectations. Start by breaking down
the elements of your problem statement:

• Gap: Customers have long wait times for their support tickets to get a response.
• Orientation: This problem began in the last few months and has only worsened.
• Impact: Customers aren't happy with their quality of service, and your teams feel
burnt out from trying to keep up.
• Importance: Retaining customers with support is essential for sustaining your
business.

Now that we’ve laid out the details, we can format it as a problem statement:
1. Identify the problem: You have high support ticket turnaround times. Gather data by
tracking how the time has lengthened in the past few months and talking to customers
about inconsistencies in wait times.
2. Put it into context: Customers upset about their wait could switch to competitors. You
initially assumed it was seasonal demand rising, but wait times haven’t tapered off,
which could cause reputational and financial problems.
3. Find the root cause: You initially assumed demand had increased. Support tickets have
remained steady, but your AI support designed to solve minor problems has had fewer
tickets. This lack of AI support has your teams stretched thin.
4. Describe your ideal outcome: AI support should be able to handle more advanced
queries. This way, your service teams can focus solely on tickets too advanced for AI.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

5. Propose a solution: Choose between assigning devs to revamp your AI or investing in

a new solution to handle tickets. You can also consider reworking support agents'
workflows to focus more on direct customer contact.

IDENTIFYING APPROPRIATE RESEARCH METHODS

After defining your objectives and planning your research framework, it’s time
to choose the research technique that will best serve your project's goals and yield the
right insights

What are UX research methods?

A UX research method is a way of generating insights about your users, their
behavior, motivations, and needs. You can use methods like user interviews, surveys,
focus groups, card sorting, usability testing to identify user challenges and turn them
into opportunities to improve the user experience.

The most common types of user research Qualitative vs. quantitative

All research methods are either quantitative or qualitative. Qualitative research
focuses on capturing subjective insights into users' experiences. It aims to understand
the underlying reasons, motivations, and behaviors of individuals. Quantitative
research, on the other hand, involves collecting and analyzing numerical data to
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

identify patterns, trends, and significance. It aims to quantify user behaviors,

preferences, and attitudes, allowing for generalizations and statistical insights.

Qualitative research also typically involves a smaller sample size than quantitative
research (40 participants, as recommended).

Attitudinal vs. behavioral

Attitudinal research is about understanding users' attitudes, perceptions, and
beliefs. It delves into the 'why' behind user decisions and actions. It often involves
surveys or interviews where users are asked about their feelings, preferences, or
perceptions towards a product or service. It's subjective in nature, aiming to capture
people's emotions and opinions. Behavioral research is about what users do rather than
what they say they do or would do. This kind of research is often based on observation
methods like usability testing, eye- tracking, or heat maps to understand user behavior.

Generative vs. evaluative

Generative research is all about generating new ideas, concepts, and insights to
fuel the design process. You might run brainstorming sessions with groups of users,
card sorting, and co-design sessions to inspire creativity and guide the development of
user-centered solutions.
On the other hand, evaluative research focuses on assessing the usability,
effectiveness, and overall quality of existing designs or prototypes. Once you’ve
developed a prototype of your product, it's time to evaluate its strengths and weaknesses.

11 Best UX research methods and when to use them

There are various UX research techniques—each method serves a specific
purpose and can provide unique insights into user behaviors and preferences.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Research Description When to use Best for gathering

technique it
makes sense to them
Assess the findability Start of your Quantitative
Tree testing and design Behavioral
Evaluative
organization of or redesign
information as users process
navigate a stripped-
down
IA
Usability testing Users perform a set of All stages Qualitative
tasks in a controlled Behavioral
setting Evaluative
Five second testing Collect immediate During initial Attitudinal
Evaluative
impressions within a ideation and
short timeframe throughout
design
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Compare two versions Quantitative

A/B testing All stages
of a solution Evaluative

Evaluate the Qualitative

During initial
feasibility, appeal, Generative
Concept testing ideation, design,
and potential
success of a new and before
product launch

1. User interviews
User interviews are a qualitative research method that involves having open-ended
and guided discussions with users to gather in-depth insights about their experiences,
needs, motivations, and behaviors.
Typically, you would ask a few questions on a specific topic and analyze
participants' answers. The results you get will depend on how well you form and ask
questions, as well as follow up on participants’ answers.

• Start with a wide context: Make sure that your questions don’t start with your
product
• Ask questions that focus on the tasks that users are trying to complete
• Invest in analysis: Get transcripts done and share the findings with your team

2. Field studies Field studies are research activities that take place in the user’s
environment rather than in your lab or office. They’re a great method for uncovering
context, unknown motivations, or constraints that affect the user experience.
An advantage of field studies is observing people in their natural environment,
giving you a glimpse at the context in which your product is used. It’s useful to
understand the context in which users complete tasks, learn about their needs, and
collect in-depth user stories.

3. Focus groups A focus group is a qualitative research method that includes the study
of a group of people, their beliefs, and opinions. It’s typically used for market research
or gathering feedback on products and messaging. Focus groups can help you better
grasp:
• How users perceive your product
• What users believe are a product’s most important features
• What problems do users experience with the product
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• As with any qualitative research method, the quality of the data collected through
focus groups is only as robust as the preparation. So, it’s important to prepare a
UX research plan you can refer to during the discussion.

4. Diary studies
Diary studies involve asking users to track their usage and thoughts on your
product by keeping logs or diaries, taking photos, explaining their activities, and
highlighting things that stood out to them.
A diary study helps you tell the story of how products and services fit into
people’s daily lives, and the touch-points and channels they choose to complete their
tasks.
• Open, ‘freeform’ diary: Users have more freedom to record what and when
they like, but can also lead to missed opportunities to capture data users might
overlook
• Closed, ‘structured; diary: Users follow a stricter entry-logging process and
answer pre-set questions

5. Surveys
Although surveys are primarily used for quantitative research, they can also
provided qualitative data, depending on whether you use closed or open-ended
questions:
• Closed-ended questions come with a predefined set of answers to choose from
using formats like rating scales, rankings, or multiple choice. This results in
quantitative data.
• Open-ended questions are typically open-text questions where test participants give
their responses in a free-form style. This results in qualitative data.

6. Card sorting Card sorting is an important step in creating an intuitive information

architecture (IA) and user experience. It’s also a great technique to generate ideas,
naming conventions, or simply see how users understand topics.
In this UX research method, participants are presented with cards featuring
different topics or information, and tasked with grouping the cards into categories that
make sense to them.
There are three types of card sorting:
• Open card sorting: Participants organize topics into categories that make sense to
them and name those categories, thus generating new ideas and names
• Hybrid card sorting: Participants can sort cards into predefined categories, but also
have the option to create their own categories
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Closed card sorting: Participants are given predefined categories and asked to sort
the items into the available groups
You can run a card sorting session using physical index cards or digitally with a UX
research tool like Maze to simulate the drag-and-drop activity of dividing cards into
groups.
Running digital card sorting is ideal for any type of card sort, and moderated or
unmoderated sessions.

7. Tree testing
During tree testing a text-only version of the site is given to your participants,
who are asked to complete a series of tasks requiring them to locate items on the app or
website.
The data collected from a tree test helps you understand where users intuitively
navigate first, and is an effective way to assess the findability, labeling, and information
architecture of a product.
We recommend keeping these sessions short, ranging from 15 to 20 minutes, and
asking participants to complete no more than ten tasks. This helps ensure participants
remain focused and engaged, leading to more reliable and accurate data, and avoiding
fatigue.

9. Usability testing

Usability testing evaluates your product with people by getting them to complete
tasks while you observe and note their interactions (either during or after the test). The
goal of conducting usability testing is to understand if your design is intuitive and easy
to use. A sign of success is if users can easily accomplish their goals and complete tasks
with your product. There are various usability testing methods that you can use, such as
moderated vs. unmoderated or qualitative vs. quantitative—and selecting the right one
depends on your research goals, resources, and timeline.
Usability testing is usually performed with functional mid or hi-fi prototypes. If
you have a Figma, InVision, Sketch, or prototype ready, you can import it into a
platform like Maze and start testing your design with users immediately.

10. Five-second testing

In five-second testing, participants are (unsurprisingly) given five seconds to view an

image like a design or web page, and then they’re asked questions about the design to
gauge their first impressions.
According to data, 55% of visitors spend less than 15 seconds on a website, so
it’s essential to grab someone’s attention in the first few seconds of their visit. With a
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

five-second test, you can quickly determine what information users perceive and their
impressions during the first five seconds of viewing a design.

11. A/B testing

A/B testing, also known as split testing, compares two or more versions of a
webpage, interface, or feature to determine which performs better regarding
engagement, conversions, or other predefined metrics.
It involves randomly dividing users into different groups and giving each group
a different version of the design element being tested. For example, let's say the primary
call- to-action on the page is a button that says ‘buy now’.
You're considering making changes to its design to see if it can lead to higher
conversions, so you create two versions:
• Version A: The original design with the ‘buy now’ button positioned below the
product description—shown to group A
• Version B: A variation with the ‘buy now’ button now prominently displayed above
the product description—shown to group B

12. Concept testing

Concept testing is a type of research that evaluates the feasibility, appeal, and
potential success of a new product before you build it. It centers the user in the ideation
process, using UX research methods like A/B testing, surveys, and customer interviews.
There’s no one way to run a concept test—you can opt for concept testing surveys,
interviews, focus groups, or any other method that gets qualitative data on your concept.

Which is the best UX research type?

The best research type varies depending on your project; what your objectives
are, and what stage you’re in. Ultimately, the ideal type of research is one which
provides the insights required, using the available resources.
For example, if you're at the early ideation or product discovery stage, generative
research methods can help you generate new ideas, understand user needs, and explore
possibilities. As you move to the design and development phase, evaluative research
methods and quantitative data become crucial.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

CREATING PERSONAS
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.

Personas Are More Than “People”

Personas are distilled essences of real users. In user experience (UX) design, you
use personas to build empathy with target users and focus on their world. You should
always create personas from observations about real users, personas should never be
invented out of your assumptions about your users. Because you must map your users’
needs to your design’s functionality, you must first clearly define both the needs and
the users.

As designers, we shape personas iteratively. We divide users into manageable

groups and represent each with a typical embodiment – a persona. For instance, for an
app that helps students budget, “Amy” represents 18-year-old females who must adapt
to college life.
Through Amy, we see how our app helps these users in their day-to-day activities. We
imagine Amy has just started banking online, lives in shared housing and works
weekends.
Her goal is to save money. Her scenario: she stretches $70 to cover her week’s groceries.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

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”:
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

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?

SOLUTION IDEATION

What is Ideation?

Ideation is the process where you generate ideas and solutions through sessions such as
Sketching, Prototyping, Brainstorming, Brainwriting, Worst Possible Idea, and a wealth
of other ideation techniques. Ideation is also the third stage in the Design Thinking
process.
Ideation is often the most exciting stage in a Design Thinking project, because
during Ideation, the aim is to generate a large quantity of ideas that the team can then
filter and cut down into the best, most practical or most innovative ones in order to
inspire new and better design solutions and products.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Ideation Will Help You:

• Ask the right questions and innovate with a strong focus on your users, their
needs, and your insights about them.
• Step beyond the obvious solutions and therefore increase the innovation potential
of your solution.
• Bring together perspectives and strengths of your team members.
• Uncover unexpected areas of innovation.
• Create volume and variety in your innovation options.
• Get obvious solutions out of your heads, and drive your team beyond them.

How to Prepare Before You Start Ideating

An ideation process such as Brainstorming or Challenging Assumptions is no

different. Wandering into a Brainstorm without preparation is asking for trouble.

Even though Design Thinking is not a linear process, it is crucial to take into
account the first two stages or modes in Design Thinking before you start ideating. If
you neglect to take these two modes and their guidelines into account before an Ideation
session, you risk becoming lost. The Empathize and Define guidelines will help you
develop the sufficient background knowledge and set a clear goal for your ideation
sessions.

1st Mode: Empathize

Design Thinking’s first two modes or stages can help us prepare for the Ideation
session. The first part of the preparation is the Empathize mode, which is all about
researching and observing in field studies – and watching, engaging with and listening
to your users:
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

The Empathy mode will help you conduct relevant research and become an
instant- expert on the subject and gain invaluable empathy for the person you are
designing for.
2nd Mode: Define

The next stage, which you should to take into account when preparing an ideation
session, is the Define mode, which is all about making sense of the widespread
information you have gathered in the first mode.
Defining involves synthesizing and making sense of all the available information
you gathered during the Empathize mode, by discovering connections and patterns. You
will often want to use methods such as Affinity Diagrams, and Sharing Inspiring User
Stories and Personas. By the end of the Define mode, your goal is to construct a
meaningful and actionable problem statement, also known as a Point Of View (POV).

A good problem statement will allow you to ideate in a goal-oriented manner.

Your POV defines the RIGHT challenge to address in the ideation sessions. In the
ideation process, POV should be your guiding statement that focusses on your insights
about your users and their needs.

How do you define your Point Of View?

Step 1
• You define the type of person you are designing for – your user. For instance,
you can develop one or more personas, use affinity diagrams, empathy maps and
other methods, which help you understand and crystallize your research results
– observations, interviews, fieldwork, etc.

• You extract and synthesize your users’ most essential needs, which are the most
important to fulfill. Remember that needs should be verbs.
• You work to express insights you developed through the synthesis of information
that you gathered during your initial Empathize mode. The insight should
typically not simply be a reason for the need, but rather a synthesized statement
that you can leverage in your design solution.

Step 2

Write your definitions into a Point Of View template like this one:
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Step 3 – POV Madlib

You can articulate a POV by combining these three elements – user, need, and
insight – as an actionable problem statement that will drive the rest of your design work.
It’s surprisingly easy when you insert your findings in the POV Madlib below. You can
articulate your POV by inserting your information about your user, the needs and your
insights in the following sentence:

[User . . . (descriptive)] needs [Need . . . (verb)] because [Insight . . . (compelling)]

Example: An adult person who lives in the city… needs access to a shared car 1-4 times
for 10-60 minutes per week … because he would rather share a car with more people as
this is cheaper, more environmentally friendly, however it should still be easy for more
people to share.

Step 4 – Make Sure That Your Point Of View is One That:

• Provides a narrow focus.

• Frames the problem as a problem statement.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Inspires your team.

• Guides your innovation efforts.
• Informs criteria for evaluating competing ideas. Is sexy and captures people’s
attention.
• Is valid, insightful, actionable, unique, narrow, meaningful, and exciting.

3rd mode: Ideate

When you’ve developed your POV it’s time to start ideating. Begin with your
Point Of View or problem statement. Break that larger challenge up into smaller
actionable pieces.
Look for aspects of the statement to complete the sentence, “How might we…?”
“How Might We?” Questions Frame and Open Up Your Design Challenge

You start using your POV by reframing the POV into a question: Instead of
saying, we need to design X or Y, Design Thinking explores new ideas and solutions to
a specific design challenge. It’s time to start using the Ideation method that involves
asking, “How
Examples of How to Generate HMW Questions

When you’ve defined your design challenge in a POV, you can start opening up
for ideas to solve your design challenge. You can start using your POV by asking a
specific question starting with, “How Might We?” or “in-what-ways-might-we?”. For
example: How might we… design a driverless car, which is environmental friendly,
cheap and easy for more people to share?

You then break the POV into smaller and actionable pieces as follows:

1. You might start coming up with too narrow questions, such as: “HMW create a
taxi which does not need a chauffeur”.
2. Or you questions might become too broad: “HMW redesign transportation”.
3. “HMW design a car which has a digital code as a key which is safe to share
among a lot of varying users.”
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

1. Begin with your Point of View (POV) or problem statement. Start by rephrasing
and framing your Point Of View as several questions by adding “How might
we?” at the beginning.
2. Break that larger POV challenge up into smaller actionable and meaningful
questions. Five to ten How Might We questions for one POV is a good starting
point.
3. It is often helpful to brainstorm the HMW questions before the solutions
brainstorm.
4. Look at your How Might We questions and ask yourself if they allow for a
variety of solutions. If they don’t, broaden them. Your How Might We questions
should generate a number of possible answers and will become a launch pad for
your Ideation Sessions, such as Brainstorms.
5. If your How Might We questions are too broad, narrow them down. You should
aim for a narrow enough frame to let you know where to start your Brainstorm,
but at the same time you should also aim for enough breadth to give you room to
explore wild ideas.

Characteristics Required for Successful Ideation

• Adapting: Be able to switch how you see, understand, and extend thinking as
new input gets generated.
• Connecting: Be able to connect seemingly unrelated concepts, attributes or
themes in order to create new possibilities.
• Disrupting: Be able to overturn commonly held beliefs, assumptions or norms
in order to re-think conventional approaches.
• Flipping: Turn dead-ends or deadlocks into opportunities by flipping them over
or rapidly changing direction towards greater viability.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Dreaming and Imagining: Be able to visualize a new picture of reality by

turning abstract needs into tangible pictures or stories, thereby allowing the space
required for inventing bridges to that reality.
• Experimental: Be open and curious enough to explore possibilities and take
risks; be willing and eager to test out ideas and eager to venture into the
unknown.
• Recognize Patterns: Seek to spot common threads of meaning, and ways of
seeing, doing and behaving; be able to recognize attributes or shared values
across a spectrum of influence and input; and finally be able to utilize these
commonalities to build solutions.
• Curiosity: Be willing to ask uncomfortable, silly or even crazy questions. Be
willing to explore and experience, in order to understand and learn something
new and different.

CREATING USER STORIES

What are User Stories?

User stories are short statements about a feature, written from a user’s
perspective. A well-defined user story does not spell out the exact feature, but rather
what the user aims to achieve, to give agile teams the freedom to identify the best
possible way to implement the feature.

Ideally, the team should draft the stories in collaboration with all stakeholders,
and be informed by research. While there is no standard format for creating user stories,
teams commonly write them as single-line statements. Some teams may also include
design deliverables such as personas, storyboards or short movies and include details
about the users’ activities, thoughts and emotions.

User stories are commonly used in agile teams to facilitate planning. Each story
should be small enough to fit into one sprint. The most common format for framing the
story is:

“As a [user], I want [goal or action] so that [outcome or reason].”

 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

User stories are descriptions of features—not the feature requirements.

The User

While user stories are mostly written from the end users’ point of view, that’s
not always true. Teams can write them from the perspective of business stakeholders,
partners and even employees and team members.

The Goal / Action

User stories are problem- or goal-oriented and do not include specific solutions
or features. Instead, they aim to serve as a springboard for teams to ideate and arrive at
the most optimal solution to solve the problem for the user.

Example 1: An online gamer

“As an online gamer, I want to have a multiplayer option so that I can play online with
friends.”

Example 2: A design team lead

“As a design team lead, I want to organize assets, so I can keep track of multiple creative
projects.”
Example 3: An e-commerce shopper

“As an e-commerce shopper, I want to filter my searches so I can find products quickly.”

The Outcome
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

The best stories are ones that lead to measurable outcomes. Examples of good
outcomes are an X% increase in profile completion rates or an N% drop in payment
flow errors. Outcomes that are tied to users or business goals free up the team to think
about solutions to problems instead of churning out features for the sake of shipping
something.

When the team begins work on a user story, they need not always understand the
full scope of work since user stories are vague about what features the team should
implement. To ensure that all team members are on the same page about what the user
story should accomplish, product managers, designers and researchers often include
acceptance criteria— what conditions the feature should fulfill to consider it done.

Step 1: Outline acceptance criteria

The definition of done is the set of criteria that needs to be fulfilled for your user
story to be considered complete. Define the specific acceptance criteria and use it as a
checklist.

Step 2: Decide on user personas

Conduct extensive user research by creating surveys, hosting focus groups, and
reading user forums. Analyze your data and search for patterns to identify your key
personas.

Step 3: Create tasks

Break your story down into numerous tasks to make it more manageable. If it is
a complex requirement, you can also add subtasks. Include detailed descriptions, so your
team is aligned on what each task requires.

Step 4: Map stories

Use user story mapping to structure work in a large process. In this case, your
stories will take the form of ordered steps.

Step 5: Request feedback

Speak to users and potential customers to find out what they want. Ask them for their
opinions on existing products or if they have suggestions for new features. Incorporate
this feedback into your user story.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Benefits of user stories

• Simplified format: User stories are written in easy-to-understand language. This

eliminates confusion and makes it easier to grasp what the customer is looking
for.
• Increased flexibility: Because user stories don’t go into technical detail, they
can be molded to fit changing situations.
• Improved collaboration: When team members are aligned on one goal, they
can work better together and collaborate easily with other project stakeholders.

Disadvantages of user stories:

• Incomplete stories: Though the language is intended to be informal, sometimes

user stories are far too vague and exclude necessary details.
• Insufficient time: Writing a good story takes time. It requires extensive research
and regular communication with stakeholders, a fact that is sometimes
overlooked.
• Narrow vision: Because user stories focus on one single requirement, they can
be hard to scale, and teams can sometimes lose sight of the bigger picture (in this
case, an epic).

CREATING SCENARIOS
What are User Scenarios?

User scenarios are detailed descriptions of a user – typically a persona – that

describe realistic situations relevant to the design of a solution. By painting a “rich
picture” of a set of events, teams can appreciate user interactions in context, helping
them to understand the practical needs and behaviors of users.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

User scenarios help you understand the user and how they interact with the
product.

Designers need to understand their users if they want to make products that
people will use. By understanding them, you can help create solutions that help them
achieve their goals. And when users are able to achieve their goals, they will want to
use your product again – but for that, you need to truly understand the user.
One way to understand the people you’re designing for better is to map out and
create user scenarios. On a more practical side, a user scenario tends to include who
the user is and what their goal is at that moment. Generally, scenarios are concise and
represent a snapshotof the user experience.

There are different takes on user scenarios, with some designers going for more
task- focused scenarios while others prefer a more complete and detailed scenario. The
right fit for you will depend on how much you know about your users, and how you
prefer to organize all that information.

Some prefer short and sweet user scenarios that focus only one the user goal or
task. Others claim we can obtain even more benefits from a more complete scenario,
with additional information about users that adds value – like their main source of
income. Like many aspects of UX design, there’s plenty of wiggle room to make user
scenarios that fit well for your team and project.

The benefits of user scenarios

Like we mentioned before, the biggest plus of having user scenarios is that they
can give us quite a bit of insight into the user’s mind, needs and wants – but many
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

different research tools do that too. User scenarios are all about getting the context of
use right and tailoring the experience to the user’s needs and motivations.

How to write a user scenario?

Before you can actually write anything about the possible scenario, there’s a
fair amount of user research needed. You’ll want to have a clear definition of who your
users are by the time you start wondering when they’ll use your product or what they’d
do with it.
Most teams tend to have a clear user persona (or two) before they start creating user
scenarios, for example.

The process of writing user scenarios can be described as scenario

mapping. This means that in order to have a realistic user scenario, the design team has
to consider the possible goals and tasks, along with what that means for the user
experience. This process doesn’t have to be complex but it does require a lot of
consideration on possible scenarios and outcomes.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Here’s a few things you can find in user scenarios:

 Who the user is

 The situation that drives users to seek the product
 A specific task or goal the user has
 Information regarding user’s income and spending
 The path to completion of a task
 Points of friction or stress in daily life or in the user experience

User scenario example

1. Social Security platform user scenario

This is a long and detailed user scenario that includes much more information
than a user’s identifying trait and final goal. Depending on the project, this type of user
scenario can add a lot of value in setting the right environment and context of use for
the product.

“Mr. and Mrs. Macomb are retired school teachers who are now in their 70s.
Their Social Security checks are an important part of their income. They’ve just sold
their big house and moved to a small apartment. They know that one of the many chores
they need to do now is tell the Social Security Administration that they have moved.
They don’t know where the nearest Social Security office is and it’s getting harder for
them to do a lot of walking or driving.

If it is easy and safe enough, they would like to use the computer to notify
the Social Security Administration of their move. However, they are somewhat nervous
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

about doing a task like this by computer. They never used computers in their jobs.
However, their son, Steve, gave them a computer last year, set it up for them, and
showed them how to use email and go to websites. They have never been to the Social
Security Administration’s website, so they don’t know how it is organized. Also, they
are reluctant to give out personal information online, so they want to know how safe it
is to tell the agency about their new address this way.”
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Scenarios are a useful UX design artifact that can help you cultivate empathy
for your user and design the best solutions for them. They can be used to figure out
where to do usability testing and understand key tasks in a product.

When you map your scenarios intelligently to your users’ journey, you can
create a user experience that they’ll want to repeat. And in the end, that’s what it’s all
about.

FLOW DIAGRAMS

A User Flow Diagram is a visual representation of the path a user takes while
interacting with a product. The diagram maps out each and every step the user takes,
from the entry point to the final interaction. User flows help designers understand and
anticipate the cognitive patterns of users in order to create products that enable a state
of flow.
User flows, UX flows, or flowcharts, as they are sometimes called, are diagrams
that display the complete path a user takes when using a product. The user flow lays out
the user’s movement through the product, mapping out each and every step the user
takes—from entry point right through to the final interaction.
The flowchart begins with the consumer’s entry point on the product, like an
onboarding screen or homepage, and ends with the final action or outcome, like
purchasing a product or signing up for an account. Depicting this process allows
designers to evaluate and optimize the user experience and therefore increase client
conversion rates.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Each touchpoint on the user’s journey is represented by a node in the flow chart.
These nodes are characterized by shape, and each shape indicates a particular process.

For instance, a diamond means a decision is being made and is therefore followed by
“Yes” and “No” arrows. A rectangle indicates a task or action that needs to be taken,
like “Log in” or “Purchase”.

Why do we use user flows in UX design?

Now that we’ve established what UX flows are, we can look into why they are
so beneficial to the design process. Studying the user flow of a website or app can prove
useful whether you are designing a brand new product or revamping an old one.

User flows are extremely useful if you need to:

 Create an intuitive interface
 Evaluate existing interface
 Present your product to clients or colleagues

Types of user flow charts

UX flows can be used for all kinds of interface and web design, but certain types
of flowcharts are more valuable than others depending on what you are creating. Here
we describe a few of the user flow variations and when to use them.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

1. Task flows

Task flows focus on how users travel through the platform while performing a
specific task. They generally show only one path and don’t include multiple branches
or pathways like a traditional user flow might. These are best used when the task being
analyzed is accomplished similarly by all users. When using task flows, it is assumed
that all users will share a common starting point and have no variability in the way the
task is carried out.

2. Wire flows

Wireflows are a combination of wireframes and flowcharts. They utilize the

layout of individual screens as elements within the diagram.

Wireframes on their own help convey the layout and design on each individual
page, but lack the ability to communicate the page-to-page flow of heavily dynamic
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

interfaces. Wireflows add page context to UX flows, since what users see on each screen
greatly impacts their experience through the app or website.

Wireflows are especially great when creating mobile screens. The relatively small size
of the mobile screens are easily used to replace the more abstract shapes of flow charts.

3. User flows

User flows focus on the way your target audience will interact with the product.
They emphasize that all users might not perform tasks the same and may travel in
different paths.
They are typically attached to a specific persona and entry point. Therefore, when
using this type of flowchart, you may have many different scenarios that start at different
places. However, the main task or accomplishment is usually always the same.

Where do user flows fit into the UX design process?

UX flows are synthesized early, during the planning stages of your design—after
user research has been conducted. They form an important part of the foundation on
which your product is built, and can serve as a reference for other designers.

Once you have gathered your data from user testing, user flows help determine
how many screens are needed, what order they should appear in, and what components
need to be present. By the time you get to creating a user flow, your affinity diagrams
and empathy mapping as well as persona development have all been completed.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Flowcharts can also be made for existing interfaces to enhance the user’s experience or
clear up any trouble users are having with the interface.

FLOW MAPPING

Flow mapping is a visual representation technique used to illustrate the flow of

various elements, such as information, materials, or processes, within a system. It
provides a clear and easy-to-understand diagram of how these elements move or
progress through different stages or components. Flow mapping is widely used in
various fields, including business process management, user experience design, supply
chain management, and project planning.

How to create a flow map:

Creating a flow map is simple and can be done on paper or using workflow
management software and templates. The steps below explain how to create a process
map from scratch.

Step 1: Identify a problem or process to map

Step 2: List the activities involved
Document all the tasks required to complete the process. At this stage, the order
doesn’t matter. Make a list of all the activities involved, as well as who is responsible
for each.

Step 3: Write out the sequence of steps

Now that you’ve compiled a list of all the activities, the next step is to arrange
these activities in the proper sequence, until the full process is represented from
beginning to end. This is a good place to check if there are any gaps you may have
missed in the previous step.

Step 4: Draw a flowchart using flow mapping symbols

Select the appropriate mapping format and draw out the process, representing the
steps with process mapping symbols. There are around 30 standard symbols you can
use to represent different elements of a process, but we’ll cover the most common ones
in more detail later on in this article.

Step 5: Finalize and share the flow map

 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Once you’ve finished drawing your process map, review it with other
stakeholders involved in the process to make sure everyone understands it and agrees
with how the process is mapped. Make sure no steps have been left out and there are no
redundancies or ambiguities.

Step 6: Analyze the map to find areas of improvement

After you establish that the process map accurately describes the process workflow,
your completed process map now serves as a tool you can analyze to discover ways of
improving the process.

Why use a flow map?

Flow mapping allows you to solidify ideas and streamline processes by visually
communicating the steps needed to execute an idea.

Here are some ways that flow mapping can be useful for you and your team:

• Identify inefficiencies: Helps you identify bottlenecks, gaps, and other issues in
a process flow.
• Simplify ideas: Breaks down complex ideas into smaller steps.
• Increase comprehension: Promotes thorough understanding of a process.
• Plan for contingencies: Allows for contingencies and provides problem-solving
guidance.
• Delegate responsibilities: Coordinates responsibilities between various
individuals or entities.
• Create documentation: Provides documentation of the process.
• Communicate clearly: Simplifies communication through a user-friendly, visual
format.
• Make decisions faster: Enables faster decision making due to faster
communication.
• Assist employees: Improves employee performance and job satisfaction.
• Meet standards: Helps businesses comply with ISO 9000 and ISO 9001
standards.

Types of flow maps

Flow maps come in all shapes and sizes. They all serve the same purpose, but
certain types of process maps may be better suited for particular projects. Here are some
of the most common types of process maps.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Flowchart

The simplest form of a process map is a basic flowchart. The basic flowchart
uses process mapping symbols to illustrate the inputs and outputs of a process and the
steps included in completing the process.
Basic flowcharts can be used to plan new projects, improve communication between
team members, model and document processes, solve problems in a current process,
and analyze and manage workflows.

High-level process map

A high-level process map, also known as a top-down map or value chain map,
provides a high-level overview of a process. Steps are limited to the essentials of the
process and the map includes minimal detail.

High-level process maps can be used to define business processes and identify the key
steps involved. These process maps are also useful for discussing processes with
superiors or third parties who don’t need to know the specifics of the operation.

Detailed process map

In contrast with the high-level process map, a detailed process map provides all
the details of each step and includes sub processes. It documents decision points and the
inputs and outputs of each step. This process map provides the most thorough
understanding of the mapped process and is most effective in pinpointing areas of
inefficiency due to its high level of detail.

Swimlane map

A swimlane map, also known as a cross-functional or deployment flowchart,

delegates process activities into “swimlanes” to designate who is responsible for each
task.
The map is divided into channels for each stakeholder in the process and lists each
activity in the channel of the appropriate stakeholder. This type of process map
highlights the different roles involved in the process and the interaction between
stakeholders.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

Value stream map

A value stream map is a lean management tool that visualizes the process of
bringing a product or service to the customer. Value stream maps tend to be complex
and use a unique system of symbols to illustrate the flow of information and materials
necessary to the process.

SIPOC diagram

The acronym SIPOC stands for Suppliers, Inputs, Process, Outputs, Customers.
A SIPOC diagram is not so much a process map as a chart identifying the key elements
of the process, which may be created as a precursory step to crafting a detailed process
map.
As the acronym suggests, the SIPOC chart should feature five columns which
include the basic steps in the process, the outputs of the process, the customers, the
inputs of the process, and the suppliers of each input. In addition to preparing for a more
detailed process map, a SIPOC diagram is also useful for defining the scope of complex
processes.

Flow mapping symbols

Process mapping uses symbols from the Unified Modeling Language (UML) to
represent key elements on a process map, such as steps, decision points, inputs and
outputs, and participating team members.
Here are the most common process mapping symbols and their usage:

• Terminator: Ovals denote the beginning and end of the process.

• Process step: A rectangle represents an activity or task in the process.
• Flow: Arrows connect steps in the process and show directional flow.
• Decision: A diamond illustrates a point where a decision needs to be made,
usually with “yes” or “no” options branching from this point.
• Delay: A D-shaped symbol indicates a delay in the process.
• Document: A rectangle with a wavy bottom line represents a document or
information that people can read. Multiple documents are indicated by a symbol
resembling multiple stacked wavy rectangles.
• Data: A parallelogram represents data that is an input or output of a process step.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Manual input: A rectangle with a slanted top line indicates a step in which data
must be manually entered.
• Subprocess: A rectangle with double vertical lines indicates a subprocess which
is predefined elsewhere.

Process mapping techniques

You can customize process maps to match your needs and preferences, but there
are also general tips to keep in mind when process mapping to maximize effectiveness.
Here are a few process mapping best practices to apply as you get started:

Planning your process map:

• Establish the boundaries of the process so that only necessary information is

included. Set clear objectives for the process.
• Only map processes that have a defined, objective output.

Drafting your process map:

• Work backward from output to input.

• Keep subprocesses simple.
• Include all necessary details, no more and no less.
• Use standardized notation so everyone is on the same page.

Reviewing your process map:

• Get feedback from everyone involved in the process.

• Detail alternative routes to meeting a preferred condition where applicable.
• Map the process in its current state, not necessarily a perfect or idealized state,
and make improvements from there.

INFORMATION ARCHITECTURE

What is Information Architecture?

Information architecture (IA) is the discipline of making information findable

and understandable. It includes searching, browsing, categorizing and presenting
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

relevant and contextual information to help people understand their surroundings and
find what they’re looking for online and in the real world.

IA is used in physical spaces like museums or department stores, as well as in

websites and applications. For instance, in a natural history museum, you will find
fossils from the Jurassic period exhibited together, just as your favorite packet of chips
will always be in the snack aisle of your supermarket.

Information architecture operates from two perspectives:

 People perceive information, products and services as places made of language.

 These places or information environments can be arranged for optimal findability
and understandability.

Language in this instance means visual elements, labels, descriptions, menus, content.

Good information architecture is informed by all three areas, all of which are in
flux depending on the information environment.
8 Principles of information architecture
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

1. The principle of objects: Content should be treated as a living, breathing thing.

It has lifecycles, behaviors, and attributes.
2. The principle of choices: Less is more. Keep the number of choices to a
minimum.
3. The principle of disclosure: Show a preview of information that will help users
understand what kind of information is hidden if they dig deeper.
4. The principle of exemplars: Show examples of content when describing the
content of the categories.
5. The principle of front doors: Assume that at least 50% of users will use a different
entry point than the home page.
6. The principle of multiple classifications: Offer users several different
classification Schemes to browse the site’s content.
7. The principle of focused navigation: Keep navigation simple and never mix
different things.
8. The principle of growth: Assume that the content on the website will grow. Make
sure the website is scalable.

The IA of a website needs to address different user needs.

They distinguish 4 main types of needs as:
• Known-item seeking: Users will come to the website to search for something
desirable and known.
• Exploratory seeking: Users will come to the website looking for inspiration.
They’re looking for something desirable but not sure what exactly.
• Exhaustive research: Users are in a process of an extensive research. They want
to find as much information as possible.
• Re-finding: A user needs desired items again and are trying to find it.
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

What are the key processes for information architecture?

1. Define the company goals

In order to determine goals of creating IA you can ask yourself two questions:
why do you want to do it, and what do you want to achieve with it? Work with all key
stakeholders to determine that. You want them to feel involved and agree on the final
version.

2. Define the user’s goals

Who are the people that will be using the website? Follow UX practices:
conduct user interviews, create personas, create scenarios and answer the questions:

• What are these users going to do on the website?

• What are their goals?

3. Analyze competitors

Sometimes inventing hot water all over again is very unnecessary and can
actually hurt you. Go all out and make sure you know your competition.

Think about their information architecture.

• Where do they display information?

• Which information is common denominator?
• Is the website easy to navigate?
• What makes is good and what makes it bad?
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

4. Define content

If a website already has content, go through that first and decide what to keep
and what to get rid of. If the website is new, start from scratch. You need to have a clear
understanding of the content.
How to design the information architecture of your site Step 1: Group and label
the content
Once you have a list of all content, prioritize it and group. Use card-sorting
techniques to help you group the content.

Card sorting is a participatory design technique, which we use to determine how

users group different items into different categories. They are given cards with printed
terms, features, or concepts and are asked to sort them into groups.
In the end group names can be refined into a menu and sitemap.

Step 2: Define navigation and create site map

Before you can create sitemap and navigation, your IA needs to be

defined. The navigation is most of the times just the tip of the iceberg.

Information architecture isn’t really visible to the visitors, but it presents a

backbone of the website, and can be visually presented in spreadsheets and different
types of diagrams and is then called a sitemap.

To create a sitemap, you need to have content, which is grouped and labeled, and
then presented in a diagram.

Once that is done, you can create navigation – collection of UI elements that are
connected in a meaningful way. Those can be anything from global navigation – menu,
to local navigation, breadcrumbs, filters, footer…

Step 3: User testing

Test early and test often.

There are a couple of ways how to test to see if the information architecture
works. The Nielsen Norman Group suggest four different types of testing, depending
on the design phase and goals:
 lOMoARcPSD| 36510616

CCS370 UI AND UX DESIGN NOTES

• Tree testing
• Closed card sorting
• Click testing
• Usability testing

The test is used to determine how and why users use a website (or a product). It
is one of the qualitative testing techniques.

What tools do information architects use?

1. Pen and paper

Pen and paper is all too often underused, although it’s very cheap, simple to use,
and effective.

2. Realtimeboard.com
Cheap and easy to use, Realtime Board is my daily go-to tool. You can use it to
create charts, agile boards, customer journeys, personas, empathy blueprints, mind
maps, organizational charts and more. It’s focus is in supporting collaboration and
offers good integration with Slack, Jira, Google drive, Dropbox…

3. Lucidchart.com
Lucid chart is a flowchart maker and online diagram software. They offer
different sorts of charts and diagrams, and support creation of mind maps, and
wireframes. Their price for a single user is pretty low and the enterprise prices are not
bad at all. It’s definitely a good competitor to the Real-time Board.

4. Xmind.net
Xmind is a mind mapping web software is the only one in the selection that
doesn’t offer a subscription, but a one-time purchase option, which could be a good
choice in the time of subscriptions. They offer mind mapping, business charts, and
brainstorming support. With your purchase you also get free templates, clip arts, a useful
presentation mode, and more.

5. Coggle.it
Simplest of all 5, except for the pen and paper, Coggle’s collaborative mind maps web
app is definitely a good choice if you need to get lots of people involved, and collaborate
to create useful diagrams.