DEPARTMENT OF CSE (CS)

UI and UX Design Unit-1

UNIT I FOUNDATIONS OF DESIGN
UI vs. UX Design - Core Stages of Design Thinking - Divergent and Convergent
Thinking - Brainstorming and Game storming - Observational Empathy
1.1 INTRODUCTION:

UI/UX design is crucial for creating products that are not only visually appealing but also easy
to use. Good UI (User Interface) design focuses on the look and layout of a product, while UX
(User Experience) design ensures that the product is user-friendly and meets the needs of the
users. Together, UI and UX design play a vital role in the success of websites, apps, and other
digital products. In this article, we will discuss the importance of UI/UX design and how it is
crucial for the success of any website or application.

What is UI Design?
User interface is referred to all the visual or graphic elements a user interacts with in a
platform. UI design or User Interface design is the process of creating the visual interfaces for
a software application. There are lots of businesses where a designer will play both parts, but
there are also lots of designers who specialize in UI design. UI designers help users to navigate
an interface by using visual cues.

What is UX Design?

User experience refers to the overall experience of a customer or a user using a product,
platform or service. Especially in terms of how simplistic and pleasing it is to use. UX design
or User Experience design is the process of creating the experiences or the interactions that a
user has with a product. The basic principle of UX design is to keep the needs of the user prior
and improve the interaction of the user and the product keeping this in mind.

Why UI/UX Design is Important?

Since we have now discussed what UI/UX design actually is, to extend those points, here are
few points on the importance on UI/UX development and why it is crucial for the success of a
website or an application:

• For getting business insights: This is done through user research. While researching
about the customers need provides us a lot of insights on how to design the website or
application.

• A bad interface can break user's trust: It really becomes difficult to make a user buy
a product/service from your website or application if the interface of your website or
application itself is full of bugs. Even a single bug in the interface can break the users
fragile trust and they might end up buying nothing irrespective of how good your digital
product/service is.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
• User retention: Retaining the user is crucial for any company or startup since it leads
to the user spending more time hence more money on the website or application. Key
to User retention is a good user interface coupled with great user experience. This hooks
the user with the product/service and makes the user retain on the website or the
application.

• Creating a loyal customer base: For creating a loyal customer base, user experience
comes into play. The whole idea of UX design is to create an application structure that
provides the best experience to the users.

• Data-Driven decision making: Researching about the customers gives valuable

insights about the product/service and what things should be improved. This data driven
decision making helps the overall business to become user friendly and grow faster.

• Understanding and using human psychology: Understanding and using the human
psychology we can create more engaging digital products, websites or applications for
the users which in turn helps our business. This helps us as a UI/UX designer to create
a visual amalgamation of objects where we have a set pattern for what object the user
should focus on and what elements to focus less on.

• Saves resources in longer run: By investing in UI/UX design, a business or startup

can invest in the longer term. Instead of getting the UI changed every time a new feature
is added, its better to have a UI/UX team/person that researches and comes up with the
features required, design, interface etc.

• Communicating your mission: Irrespective of what help marketing provides, users

have to come to your website/app to buy your digital product/service or know about it.
Here good copywriting along with great UI can create a lasting impression in the mind
of the user. This helps the business get connected with its customers.

• Scaling of product as well as business: Mobile applications is better known for

targeting more customers and getting more eyeballs to your digital product/service. The
mobile approach UI/UX design can help you scale the application to a greater number
of people.

Some more points on importance of UI/UX design that are worth mentioning:
• UI/UX as a USP (unique selling proposition) for the website or application.
• A Better experience and interface for the users.
• Creating a community around your product.
• Branding your website or application hence improving your brand as a business or
startup.
• Bringing more users.
• Boosting up the sales.
• Converting first time customers to loyal users.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
• Ease of navigation for the website or application.
• Retaining the users.
• Better and more informed decisions on features and functionality of product you offer.
• Increasing the LTV (life time value) of a user.
Components of UI/UX Design

1. User Research

The first step in UI/UX design is user research. Designers gather detailed information about
users, their needs, and their behaviours. They analyse this data to find trends and patterns, using
tools to organize and understand the information. The goal is to create clear reports and
presentations that communicate these insights to the team.
2. Wireframing

The second part is wireframing. Wireframes are detailed sketches that show the structure of the
design, like a blueprint for a house. They illustrate how the product will function and outline
its main elements. Wireframes help designers plan the layout and features before creating the
final design.

3. Prototyping

The third part is prototyping. Prototypes are interactive models that let designers test and refine
their ideas. They help designers see how the product will work in real life and make adjustments
as needed.

4. Visual Design

The fourth part is visual design. After creating prototypes, designers work on the visual aspects
of the product. They design the user interface, create visual elements, and make the product
look appealing and easy to use.

5. Testing

The fifth part is testing. Once the visual design is complete, designers test the product to find
any issues. They make necessary adjustments based on feedback to improve the user
experience.

By focusing on these parts—user research, wireframing, prototyping, visual design, and

testing—UI/UX designers can create effective, user-friendly, and visually appealing digital
products.

Which is more important among UI and UX design?

It is really tough to choose between which one is more important - UI design or UX design.
For that let's compare both the jobs on various parameters.
*****
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
1.1 UI vs UX Design: (Differences with important Features)

S.NO Features UX Design UI Design

1 Job Description UX design or User Experience UI design or User
design is the process of creating Interface design is the
the experiences or the process of creating the
interactions that a user has with visual interfaces for a
a product. software application.
2 Work UX designer starts with user The UI designer takes on
research. This is done by from UX designer and
understanding customers, creates the clear visual
concepting, workshopping and representation of all of
trying different ideas to come these concepts and
up with different concepts and visually lays these ideas
solve the user problems and down so a user can see
find ways to improve the user's what they need to do in
experience an application.
3 Responsibilities 1. User Research 1. Typography
2. Information 2. Colors
Architecture 3. Styles
4. Branding
3. Interaction Design
5. Spacing
4. Wireframing and 6. Boldness
Prototyping 7. Number of items
5. Collaborating 8. Icons and Images
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
Importance of UI Design:

User Interface (UI) design plays an important role in the success of a website or a digital
product for the following reasons:

• User Experience: A well designed UI can make customers to navigate easily and
complete their tasks which leads to positive user experience.
• Engagement: A good UI can make users stay on the platform or make them visit more
often.
• Branding: UI communicates the product's personality and features to the users, so
visually appealing UI can make brands recognizable by the users.

• Efficiency: A well designed UI can reduce time and efforts which increases user
efficiency which leads to user satisfaction.

Importance of UX Design
• Increased engagement: A well-designed UX can increase user engagement with the
product which leads users to user it frequently.
• Improved Usability: UX design focuses on creating products that are easy to use and
navigate which can improve user satisfaction.

• Better brand perception: A positive user experience is very important to improve the
user's perception of the brand.

• Competitive Advantage: A better User Experience can differentiate can differentiate

a product or a website from its competitors.

• Reduced development cost: A user cantered design approach can help to identify
issues during the development process. Which can reduce the costs of fixing those
errors later on.

Principles of User Interface and User Experience (UI/UX) Design

While designing User interfaces (UI) and User Experience (UX) one must keep in mind the
following Principles:

• Simplicity: Simplicity is one of the most important principles of Ui. The design should
be easy to use and navigate, requiring minimal effort.

• User-centred Design: The UI should be designed in such a way that focuses user's
needs and preferences first. It should be easily accessible by all users including users
with disabilities.
• Visibility: The UI should provide a clear and visible interface highlighting the
important tasks need to performed by the user.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
• Consistency: Consistency is necessary for a good UI design. Consistent design
elements like colors, typography and layout helps users to navigate properly also
enhances the brand's authority.

• Feedback: Feedback is a very important component of good UI design as it helps users

understand the result of actions performed by them in form of visual, sound effect or
animations. One example for feedback in UI design is the message user gets on
successfully submitting a form.

• Clarity: Clarity is a fundamental principle of UX design. It helps users to complete

their goals. The clarity of a web-page or a digital product should be considered more
important than a visually appealing design.
• Accessibility: Accessibility is a very important principle of UX design which ensures
the services or website is usable by everyone including those with disabilities. text-to-
speech and keyboard navigation are examples of accessibility.

• Improved Usability: UX design focuses on easy to use and navigate which can
improve user satisfaction and loyalty.

• Efficiency: Efficiency is also critical principle of UX design. The design should be

optimized for speed and performance in such a way that users can reach their goals
quickly and easily.

• Delight: A well designed UX should invoke positive user emotions, making users more
likely to engage with the website or digital product.

Key Points to Remember While Using UI/UX Design Principles

Usefulness:

• Identify user needs and problems.

• Ensure your design addresses these needs effectively.
• Prioritize features that provide the most value to users.
Desirability:

• Use appealing visuals and interactive elements.

• Focus on creating a pleasant and engaging user experience.
• Balance aesthetics with functionality.
Accessibility:

• Design for all users, including those with disabilities.

• Use readable fonts and sufficient color contrast.
• Ensure your design works with assistive technologies.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
Credibility:

• Provide clear and accurate information.

• Use professional and high-quality visuals.
• Build trust through transparency and reliability.
Findability:

• Organize content logically and clearly.

• Implement effective navigation and search functions.
• Make important information easy to locate.
Usability:

• Design intuitive and straightforward interfaces.

• Provide clear instructions and feedback.
• Conduct user testing to identify and fix usability issues.
Value-Impact:

• Focus on delivering real value to users.

• Make tasks easier or more enjoyable.
• Ensure the benefits of your design are clear and significant.
DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1

*****
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
1.2 Core Stages of Design Thinking

Stage 1: Empathize—Research Your Users' Needs

✓ The first stage of the design thinking process focuses on user-centric research.
✓ You want to gain an empathic understanding of the problem you are trying to solve.
✓ Consult experts to find out more about the area of concern and conduct observations to
engage and empathize with your users.
✓ You may also want to immerse yourself in your users’ physical environment to gain a
deeper, personal understanding of the issues involved—as well as their experiences
and motivations.
✓ Empathy is crucial to problem-solving and a human-centred design process as it allows
design thinkers to set aside their own assumptions about the world and gain real insight
into users and their needs.
✓ The main aim of the Empathize stage is to develop the best possible understanding of
your users, their needs and the problems that underlie the development of the product
or service you want to create.

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

✓ In the Define stage, you will organize the information you have gathered during the
Empathize stage.
✓ You’ll analyze your observations to define the core problems you and your team have
identified up to this point.
✓ For example, you should not define the problem as your own wish or need of the
company: “We need to increase our food-product market share among young teenage
girls by 5%.”
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
✓ The Define stage will help the design team collect great ideas to establish features,
functions and other elements to solve the problem at hand—or, at the very least, allow
real users to resolve issues themselves with minimal difficulty.

Stage 3: Ideate—Challenge Assumptions and Create Ideas

✓ During the third stage of the design thinking process, designers are ready to generate
ideas.
✓ You’ve grown to understand your users and their needs in the Empathize stage, and
you’ve analyzed your observations in the Define stage to create a user-centric problem
statement.
✓ With this solid background, you and your team members can start to look at the problem
from different perspectives and ideate innovative solutions to your problem statement.

Stage 4: Prototype—Start to Create Solutions

✓ 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.
✓ By the end of the Prototype stage, the design team will have a better idea of the
product’s limitations and the problems it faces.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
✓ They’ll also have a clearer view of how real users would behave, think and feel when
they interact with the end product.

Stage 5: Test—Try Your Solutions Out

✓ Designers or evaluators rigorously test the complete product using the best solutions
identified in the Prototype stage.
✓ This is the final stage of the five-stage model; however, in an iterative process such as
design thinking, the results generated are often used to redefine one or more further
problems.
✓ This increased level of understanding may help you investigate the conditions of use
and how people think, behave and feel towards the product, and even lead you to loop
back to a previous stage in the design thinking process.
✓ The ultimate goal is to get as deep an understanding of the product and its users as
possible.

We’ve outlined a direct and linear design thinking process here, in which one stage seemingly
leads to the next with a logical conclusion at user testing. However, in practice, the process is
carried out in a more flexible and non-linear fashion. For example, different groups within
the design team may conduct more than one stage concurrently, or designers may collect
information and prototype throughout each stage of the project to bring their ideas to life and
visualize the problem solutions as they go. What’s more, results from the Test stage may reveal
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
new insights about users which lead to another brainstorming session (Ideate) or the
development of new prototypes (Prototype).

The design thinking process should not be seen as a concrete and inflexible approach to design;
the component stages identified should serve as a guide to the activities you carry out. The
stages might be switched, conducted concurrently or repeated several times to gain the most
informative insights about your users, expand the solution space and hone in on innovative
solutions.

This is one of the main benefits of the five-stage model. Knowledge acquired in the latter
stages of the process can inform repeats of earlier stages. Information is continually used to
inform the understanding of the problem and solution spaces and to redefine the problem itself.
This creates a perpetual loop in which the designers continue to gain new insights, develop new
ways to view the product (or service) and its possible uses and develop a far more profound
understanding of their real users and the problems they face.

*****
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
1.3 Divergent and Convergent Thinking
Divergent and convergent thinking are both methods of thinking that are so deeply integrated
into what we do, we often don’t stop to think about the theories behind them. We often rail
against tired concepts in our industry like “think outside the box,” yet we still try to capture
what that phrase meant before it became a cliché. It’s good to go back to the basics once in a
while.

What is divergent thinking?

Divergent thinking is taking a challenge and attempting to identify all the possible drivers of
that challenge, then listing all of the ways those drivers can be addressed.

Divergent thinking typically happens in open, free-flowing, spontaneous environments where

multiple creative ideas can be shared and considered. Typically, this means that everyone
involved in this type of thinking will look for unexpected combinations and connections
between remote associations. Divergent thinking sparks creativity specifically because of its
spontaneous, non-linear nature.

In practice, divergent thinking is often associated with brainstorming or free writing—but it’s
more than that. You need to do a small amount of analysis so that you don’t put too many tools
in your Swiss army knife, but you shouldn’t hamstring yourself with too many constraints,
either.

Divergent thinking techniques

As mentioned above, there are many different techniques you can use to stimulate creativity
and divergent thinking. It’s important to find the ones that work best for you—everyone is
different and it’s okay to try something, realize it doesn’t work, and move onto another
technique. As a user experience company, we utilize many divergent thinking techniques:
• Freewriting: this technique is helpful when you need to focus on one topic. Choose an
allotted amount of time and start writing, don’t worry about revising or proofreading
just let the thoughts spill onto the page (or screen). This technique allows a lot of
thought generation without blockers that you can come back to, restructure, and
organize.

• Brainstorming: this common group-problem solving technique involves contribution

of ideas from multiple people and discussion around the ideas provided. Encouraging
all to participate and not be afraid of right or wrong answers can help improve the
session and divergent thinking.

• Nominal Group Technique: this is a form of structured brainstorming that starts with
individuals silently generating ideas, then moves through sharing and discussion of
those ideas. The silent generation of ideas ensures everyone in the room has an equal
voice, rather than just the most gregarious.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
• Keeping a journal: a great technique that allows you to record whatever spontaneous
thought comes to your mind. Writing down thoughts when they happen allows you to
revisit them later. Our designers enjoy journaling, check out how one of our experience
designers used a work journal.

• Scenario role play: a technique that involves providing a prompt that users put
themselves into and act out the scenario using their imagination and putting themselves
into the shoes of the characters (users of a product).

• Mind mapping: This visual technique involves turning brainstormed ideas into a
visual map that shows the relations of the brainstorming. A common type of mapping
our researchers enjoy—affinity mapping, allows topics to be synthesized and organized
to work through later.

Divergent thinking examples

One great example of divergent thinking in action is in the early days of Twitter. Twitter took
a Minimum Viable Product (MVP) approach to their application. They created an online service
without a clear practical application or market, launched it to see how people would use it, then
refined Twitter to highlight those uses. This doesn’t mean that launching something and then
figuring out what the market is for it is a bullet-proof strategy. In Twitter’s case, it worked. In
most cases, it doesn’t. You just don’t hear about the failures.

At Think Company, we employ creativity and divergent thinking throughout our project work.
In the initial stages of a project, the team will use divergent techniques to explore concepts with
stakeholders and potential target audience members. In the midst of a project, our software
engineers may use the same techniques to tackle technology challenges with designers. When
projects wrap up, retrospectives always start with open-ended, exploratory sessions on what
worked, what could be improved, and what worked so well that we need to operationalize it
for future projects.

What is convergent thinking?

Convergent thinking, on the other hand, is known as the practice of selecting the optimal
solution from a finite set of ideas collected from different sources in order to solve a discrete
challenge quickly and efficiently.
Convergent thinking is best practiced at times when you need an answer, and you believe you
have access to the data and information you need to guide a decision or solution. Convergent
thinking typically calls for speed, accuracy, and knowledge on a subject, so it’s best used when
the team has access to experts and relevant data. The team will analyze and bring that
information together into an educated decision.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
Convergent thinking techniques

So how do you get started? There are many convergent techniques that can be used and below
are a few that our teams use regularly:

• Grouping: In order to understand information that comes from a divergent thinking

exercise we need to group together similar ideas and hypotheses. This is when mapping
comes into play. We like to use tools like FigJam and Miro (or if you’re in person, a
good old whiteboard and post-its) to start organizing similar ideas into categories. This
helps us take a large amount of data or ideas and narrow them down to a more succinct
data reference.

• Prioritizing: From there, it’s important to decide which concepts are crucial and which
can come a little later on (if at all). When thinking about our product design mapping,
that might mean we prioritize features around mobile experience if the application is
primarily mobile, and we place any desktop capabilities a little lower on the priority
list.

• Dot-voting: This technique allows each participant to join in a prioritization activity

regardless of their participation style or preferences. Individuals are given a set number
of dots and apply them to the choices in a list.

• Filtering: Importantly, we can’t do it all. Applying filtering convergent techniques

allows us to eliminate ideas or concepts that we won’t take action on (maybe because
of time, lift, or importance). Ultimately, we can’t review copious amounts of data or
complete every feature that comes to the table, filtering helps us remove those
unreachable ideas and focus where we need to.
Convergent thinking examples

There are many examples of convergent thinking that demonstrate the necessity of this
technique, including in our own industry. We’re often asked questions by clients that have one,
clear answer—and we know that because our team has spent years accumulating user
experience design and technology knowledge on specific types of problems, goals, and
decisions. Also, as an evidence-based company, gathering user and customer feedback often
helps point us to very clear design solutions.
Consider, also, that scene in Apollo 13 where the astronauts are trying to generate enough
power to get the capsule back to Earth. The chief orders his team to make the capsule simulator
“cold and dark,” and create “the exact same conditions they’ve got”—right down to the
readings on all of the instrument panels. One of his engineers says “I need a flashlight,” and
the response is, “That’s not what they have up there. Don’t give me anything they don’t have
on board.” The challenge is discrete and the solutions are limited to the constraints of a hard
reality.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
What is the difference between divergent and convergent thinking?

Convergent and divergent thinking are both modes of thinking, but lie on the opposite end of
the spectrum from one another. Divergent thinking is rooted in creativity; it is spontaneous and
non-linear—looking at all sorts of possible solutions. Whereas convergent thinking is rooted
in structure; it is all about efficiency and is linear—looking for the best possible solution.

A common practice for problem solving is to use a combination of both. Start with a divergent
brainstorming session to generate as many ideas as possible. Move into a mapping exercise to
group and prioritize the initiatives that came from the brainstorm.

Divergent vs. convergent thinking problem-solving example

Here’s an example of the same problem framed for divergent and convergent thinking:

• Divergent thinking: My company laptop is malfunctioning. I need my laptop to

complete a project by the end of tomorrow. I work remotely and IT can’t ship a
replacement until after the deadline. What can I do to make sure my project is completed
by the deadline?

• Convergent thinking: My company laptop is malfunctioning. I need my laptop to

complete a project by the end of tomorrow. I work remotely and IT can’t ship a
replacement until after the deadline. Name three people who have the context and skills
to finish the project so I can contact them to check availability.

The problem is the same, but the questions change slightly. The convergent example is focused
on exploring options for delegating the work, whereas the divergent example doesn’t rule out
options like fixing the laptop locally or using another device to get by until a new one is
shipped.

Both examples will produce valuable results. The convergent example may be driven by other
issues. Perhaps I’m only authorized to login to accounts on my secured work laptop. The
divergent example may take more time to investigate, but you may save the cost and resources
it takes to get a brand new laptop shipped. In thinking through both you may discover an option
that is completely different from what the user has asked you to do. As designers, we need to
use both methods of thinking to best serve our clients.

*****
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
1.4 Brain storming:

✓ Brainstorming is a creative problem-solving technique where individuals or groups

generate a multitude of ideas to address a specific issue or challenge.
✓ This method encourages open thinking and the free flow of ideas, promoting innovative
solutions and collaboration.
✓ Brainstorming sessions can be highly effective in various settings, from business
meetings to classroom activities, as they help unlock creativity and allow participants
to explore different perspectives.
✓ Brainstorming is a method used to solve problems and generate innovative ideas
through creative thinking.
✓ This technique involves bringing together individuals or groups to generate a wide
range of solutions or new concepts that can help a brand or project stand out. By
encouraging open and unrestricted thinking, brainstorming creates an environment
where new and creative ideas can emerge and be explored.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
✓ During a brainstorming session, participants are encouraged to think freely and
propose any idea that comes to mind, without fear of criticism or judgment.
✓ This approach helps in uncovering unique solutions that might not be immediately
obvious.
✓ Typically, brainstorming is conducted in a team setting to leverage the diverse
perspectives rand ideas of different participants. However, it can also be effectively
done by an individual.
Impotence of Brainstorming

1. Creates Unique Identity:

Brainstorming helps brands develop a distinct identity that sets them apart from competitors,
giving them a competitive advantage.

2. Effective Problem-Solving:

When a problem is too challenging for an individual, a team can combine their unique
perspectives to find the best solution.

3. Encourages Diverse Approaches:

The flexibility of brainstorming allows for various approaches and ideas, leading to innovative
and unique solutions.

4. Enhances Team Collaboration:

Fosters teamwork and collective thinking, improving overall team dynamics and productivity.

5. Promotes Innovation:

Encourages out-of-the-box thinking, driving fresh and creative ideas that can propel the brand
forward.

6. Improves Decision Making:

By considering multiple viewpoints, brainstorming helps in making more informed and well-
rounded decisions.

7. Boosts Engagement:

Engages team members by valuing their input and ideas, leading to higher morale and
motivation.

8. Increases Efficiency:
Rapid idea generation during brainstorming sessions saves time and accelerates the problem-
solving process.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1

How to Use Brainstorming?

To run a successful brainstorming session, follow these steps:

Step 1. Prepare

• Clearly define the problem or topic you're brainstorming about.

• If applicable, gather a diverse group of participants to enhance the variety of ideas.
• Set a comfortable environment to encourage free thinking.

Step 2. Generate Ideas

• Encourage open and unrestricted sharing of ideas, emphasizing quantity over quality.
• Use techniques like free association, mind mapping, or listing to facilitate idea
generation.
• Ensure all ideas are recorded visibly for everyone involved to see.

Step 3. Review and Select

• After generating a wide range of ideas, review them to identify the most promising
ones.
• Evaluate these based on criteria like feasibility, impact, and resources required.
• Develop an action plan for implementing the selected ideas.

Types of Brainstorming Techniques

Here is some important brainstorming techniques commonly used to generate creative

solutions:

1. Random Brainstorming
This method involves using ideas that come up first when the problem is presented. These are
spontaneous thoughts that occur without much deliberation. The first words or ideas that come
to mind can sometimes lead to unique combinations and optimal solutions.

2. Reverse Brainstorming

In this method, the focus is on the end goal rather than the problem itself. The team considers
the outcome and tries to predict future possibilities. This helps identify potential problems and
outcomes, allowing the team to avoid specific obstacles and improve the overall process.
3. Rapid Ideation Brainstorming
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
Here, everyone in the team writes down their first thoughts privately. Unlike random
brainstorming, where ideas are spoken aloud, this method ensures that each member has
the privacy to jot down their thoughts, leading to more unique and creative solutions. This can
provide multiple perspectives on the problem.

4. SCAMPER Brainstorming

SCAMPER stands for Substitute, Combine, Adapt, Modify, Put to another use, Eliminate,
and Reverse. This technique involves looking at a problem from various angles to generate a
variety of ideas. Each idea is tested and refined through a series of questions, resulting in a
well-rounded solution.

5. Star bursting Brainstorming

In this technique, team members ask questions instead of presenting ideas. This helps in
identifying potential issues and exploring different perspectives. By breaking down the
problem into multiple questions, it provides a step-by-step solution and a thorough
understanding of the problem.
Benefits of Brainstorming

Brainstorming offers numerous advantages, making it a valuable tool for problem-solving and
idea generation. Here are some key benefits:
• Different Perspectives: Brainstorming sessions allow team members to provide
various viewpoints on a problem. Using different brainstorming techniques can bring
in innovative ideas and help the team look at the problem from multiple angles.

• Increases Creativity: Encouraging open and unrestricted idea generation helps bring
out creativity in team members. With no predetermined process to follow, each
participant can create unique approaches to the problem, fostering a highly creative
environment.

• Team Collaboration: Brainstorming promotes collaboration among team members.

Working together on a problem helps reveal each member's strengths and weaknesses,
improving teamwork and understanding of each other's thinking processes for future
sessions.

• Enhanced Problem-Solving: By combining different ideas and approaches,

brainstorming leads to more effective problem-solving. The collaborative effort results
in well-rounded solutions that might not be achievable individually.

• Boosts Engagement: Brainstorming engages team members by valuing their input

and ideas. This leads to higher morale, motivation, and a sense of ownership over the
project's outcomes.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
• Encourages Risk-Taking: In a brainstorming session, participants feel free to suggest
bold and unconventional ideas without fear of criticism. This openness encourages risk-
taking and exploration of novel solutions.

• Accelerates Decision Making: By quickly generating a wide range of ideas,

brainstorming speeds up the decision-making process. Teams can evaluate and select
the best ideas efficiently, saving time in the long run.

• Improves Communication: Brainstorming sessions facilitate better communication

among team members. Sharing ideas and discussing potential solutions enhances
overall communication skills and fosters a collaborative work environment.

How to conduct UX brainstorming sessions effectively: tips and methods that work

Brainstorming can be a bit nervous and tiring, especially for those designers who've just started
their careers or are just naturally a bit shy to participate in active discussions. If you are a leader
of a UX design team, it's your job to make the session effective and productive while allowing
each participant to contribute to the common cause and voice out their ideas even if they're not
yet confident in their professional skills. So, what steps can you take to conduct a UX
brainstorming session successively?

1. Define the problem

Any UX brainstorming session should start with defining the target problem or goal which
participants are going to generate ideas for. Brainstorming about “everything and anything at
once” is just a waste of time. The more clearly the problem is defined, the easier it will be for
the participants to generate ideas both in terms of quality and quantity. It's also important to
make sure the participants don’t deviate from the topic, gently guiding the discussion in the
right direction.

2. Define session’s duration

Brainstorming sessions shouldn’t last too long, as the process of generating ideas can be very
exhausting, so it’s necessary to set a time limit and stick to it. An average UX brainstorming
should last for about 30-40 minutes. If the problem is too complex, you can increase the time
up to an hour. If, after an hour, the group still hasn't come up with the solution to a problem,
it’s much more effective to conduct several additional brainstorming sessions in the following
days rather than prolong a single one to a point when the participants feel exhausted and drained
out of any ideas.

3. Encourage speaking one by one

When brainstorming, it’s easy to start a hullabaloo, when everyone wants to share their ideas
at once. That’s why moderating sessions is very important. Allow one speaker at a time, make
sure everyone has their turn to showcase their thoughts while others listen attentively - only by
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
listening to each other and taking each other's ideas into account is it possible to get effective
results and find a common solution at the end of a session.
4. Prohibit any judgment

Brainstorming is not a process that involves deep thinking and evaluating the quality of ideas.
On the contrary, it’s an activity where people are expected to shoot off anything that comes to
their mind without any contemplation - including weird, non-viable, crazy or funny ideas. Do
not let anyone show any judgment towards the ideas of others, even if it’s rational (like
“There’s not enough budget for that”). The thing is, sometimes the best solutions are carved
out of the weirdest ideas, and if being judged, some people can close in and refrain from voicing
their thoughts that could have ended up being very important for the final result.
5. Encourage visual representation

Visual representation plays a huge role in UX, that’s why it’s great to encourage participants
of UX brainstorming sessions to present their ideas not only in words, but also in a visual form.
This can include sketches, diagrams, tables and any other ways that can help share one’s ideas
more clearly.

6. Add on each other’s ideas

Saying that no one should interrupt each other when brainstorming doesn’t mean participants
should only listen quietly without having a discussion. On the contrary, effective brainstorming
sessions involve adding on each other’s ideas, making them more expanded and detailed. Thus
a minor or under-thought idea can be turned into something really effective and valuable with
the help of teamwork and collective thinking.

7. Challenge each other

When brainstorming, it's easy to get stuck in discussing the same idea all over again, especially
towards the end of a session, when people run out of creative thoughts. That's why it's worthy
to challenge each other by asking some specific questions that can provoke useful ideas. For
example, you can offer your group to imagine what they would change in the product if it had
to be designed for a different country or for a different target audience. Even though this might
seem a bit unnecessary or even useless, the truth is, thinking outside the frames of a given
problem can be very beneficial in terms of finding interesting and effective solutions that
otherwise wouldn't have been thought about.

8. Document every idea

Another important tip is to document every idea that has been voiced during the session (no
matter of its quality). Don’t rely on the memory - the amount of ideas shared at brainstorming
sessions are nearly impossible to keep in mind. Run a list with short notes about every idea,
even the ones that seem completely worthless - some of them may become useful later on at
the following stages of a UX development process.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
9. Present the results afterwards

The last, but not least tip for effective brainstorming is to let the participants know how the
previous session has helped to make the product better. Brainstorming sessions can be tiring
and chaotic, and not so rarely you can meet an opinion that it's just a useless waste of time. To
prove that wrong, it's important to show your group that their participation in the sessions
doesn't go in vain and that some of their ideas make it to the actual realization. This can be
done by sending out e-mails with the representation of things that were implemented or
changed in the product you're working on with the help of brainstorming.

To make brainstorming sessions more effective, you can use some special techniques. Here are
a few worth trying:
• Brainwriting

Brainwriting implies writing the ideas down. This method can be applied if some participants
find it hard to share their thoughts verbally, or if there is not enough time to have a full-fledged
discussion. You can ask team members to write their thoughts on paper one by one, passing the
sheet onto other members and thus creating a list of ideas that can be discussed afterwards.
Another way is to ask each subsequent member to build on the ideas of the previous one, which
will lead to evolving one idea into a whole collaborative solution.

• “Thinking hats” technique

“Thinking hats” is a brainstorming method that was invented in the late 80’s. It implies each
participant to wear a different “hat” (not necessarily a real one), which includes: logical,
optimistic, pessimistic, emotional, creative and managing hats. Depending on the “hat” you
wear, you should focus on its theme and base your creative ideas around it. “Logical hat”
implies thinking on the factual data about the product/problem, “optimistic” - on the best case
outcomes, “pessimistic” - on the worst case scenarios, “emotional” - on the emotions it
provokes in users, “creative” - on the creative ideas to make it stand out, “managing” - on the
management issues of the process. Thus every participant focuses on a specific problem which
helps structure the brainstorming process.
• The 5 “Whys”

This method implies asking the “why” question until reaching a point when the further
discussion is impossible to have. Its goal is to dig as deep into a problem as possible to identify
its root and find the best possible solution.

• SCAMPER technique
SCAMPER technique was invented in the 1950's and implies discussing the following topics:
Substitution (can any elements in the product be substituted with the other ones?),
Combination (can any elements be combined?),
Adaptation (should any elements be adapted for something or someone?),
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
Modification (should any elements be modified to make the product better?),
Putting to other uses (can the product serve other uses apart from its primary goal?),
Elimination (are there any excess elements that can be removed?),
Rearrangement (can any elements be rearranged to improve the product?).
This technique can help brainstorming session participants stay focused on particular problems
and generate ideas specifically for the SCAMPER topics without getting distracted on issues
that might be irrelevant for the given session.
• SWOT method

SWOT is another mnemonic technique that stands for:

Strength (defining the strong sides of the product that work well and don’t need to be changed),
Weakness (discussing weak points of the product, what needs to be improved and why),
Opportunities (discussing the goal of improvements, what can be achieved by optimizing the
product),
Threats (discussing risks around the product, including the risks faced by the direct competitors
of the product).
It’s better to conduct SWOT analysis in a written form, dividing the paper into four sections
and writing your thoughts in each one. After that participants can exchange their sheets and
discuss each other’s thoughts, coming to common conclusions.
• Mind mapping

Mind mapping is an effective method for situations when it’s necessary to find a solution to
one specific problem. To create a mind map you need a whiteboard or a large sheet of paper.
Sketch the problem at the center and then let participants sketch their solutions around it, thus
creating a so-called “map”. Encourage participants to make detailed sketches in order to
envision the solutions to the fullest, as well as build on the ideas of others instead of only
creating their own. This method helps to combine all the solutions in one place, evaluate them,
compare with each other and choose the best one.

*****

1.5 GAME STORMING

Game storming is exploration of business challenges through the application of gaming

(games). Game storming will help organizations to:

● Overcome conflict and increase engagement with team-oriented games

● Improve collaboration and communication with visual-thinking techniques
● Generate better ideas, insights, strategies and more of them – faster than ever before
● Produce better products and services for your end users
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
Overall, game storming can encourage a shift in how work is done from a process centric model
that’s about predictability and consistency to a game-centric model that recognizes the
complexity and unpredictability of a digital world.

About Game

There is no absolute singular definition for a ‘game’; however, all games share these similar
characteristics:

● Game space:

To enter into a game is to enter another kind of space where the rules of ordinary life are
temporarily suspended and replaced with the rules of the game. In effect, a game creates an
alternative world, a model world. To enter a game space, the players must agree to abide by
the rules of that space, and they must enter willingly.

● Boundaries:

A game has boundaries in time and space. There is a time when a game begins when the players
enter the game space and a time when they leave the game space, ending the game.

● Rules for interaction:

Within the game space, players agree to abide by rules that define the way the game world
operates. The game rules define the constraints of the game space.

● Artifacts:

Most games employ physical artifacts; objects that hold information about the game, either
intrinsically or by virtue of their position. Artifacts can be used to track progress and to
maintain a picture of the game’s current state.

● Goal:

Players must have a way to know when the game is over; an end state that they are all striving
to attain, that is understood and agreed to by all players.

Stages of a Game

Every game is a world which evolves in stages:

1. Imagine the world,
2. create the world,
3. open the world,
4. explore the world, and
5. close the world.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
1. Imagine the world

Before the game can begin you must imagine a possible world; a temporary space,
within which players can explore any set of ideas or possibilities.

2. Create the world

A game world is formed by giving it boundaries, rules, and artifacts. Boundaries are
the spatial and temporal boundaries of the world; its beginning and end, and its edges.
Rules are the laws that govern the world; artifacts are the things that populate the world.

3. Open the world

A game world can only be entered by agreement among the players. To agree, they
must understand the game’s boundaries, rules, artifacts; what they represent, how they
operate, and so on.

4. Explore the world

Goals are the animating force that drives exploration; they provide a necessary tension
between the initial condition of the world and some desired state. Once players have
entered the world they try to realize their goals within the constraints of the game
world’s system.

5. Close the world

A game is finished when the game’s goals have been met. Goals are markers to
ceremonially close the game space. The true point of the game is the play itself, the
exploration of an imaginary space, and the insights that come from that exploration.

The Mechanics of Game storming in UX Design

 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
1. Opening (divergent thinking): In this stage, the facilitator initiates the process. It’s
important here to set the context and define the problem. It's about opening up the minds of the
participants—and encouraging them to explore diverse ideas and perspectives in the problem
space as well.

2. Exploring (emergent thinking): Now, the participants delve deeper into the problem space.
They explore various facets of the problem—and work to generate a whole multitude of
potential solutions. This stage consists of free-flowing ideas, vigorous discussions and creative
experimentation.

3. Closing (convergent thinking): It’s the final stage. The participants evaluate the generated
ideas, refine them and converge on the most promising solutions. It involves critical analysis,
decision-making and consensus-building.

Real-life Examples of Game storming

Numerous well-known brands have employed game storming to drive innovation and enhance
their UX design process.

For instance, Hubspot and Wordstream are two prominent brands that have leveraged
gamestorming to nurture a culture of innovation and creativity in their UX design teams.
They’ve used game storming techniques like “Poster Session,” “Make a World” and “Show
Me the Money” to stimulate creative thinking, encourage collaboration and drive user-centric
innovation.

Tips for Effective Game storming

To extract the maximum benefit from gamestorming, try some tips:

1. Define clear objectives: Before the start of a gamestorming session, it’s really important to
define the objectives and clearly so. What problem is the group trying to solve? What’s the end
goal? When the group has clear objectives, it gives the session direction and focus.

2. Nurture a safe and open environment: The facilitator should encourage participants to
express their ideas freely—and without fear of judgment or criticism. It’s vital to foster a good
atmosphere here—one of openness, respect and mutual support.

3. Encourage participation: Make sure everybody participates. Encourage quiet members to

speak up and put their ideas out there—it’s how UX designers work, and it’s what innovations
require. So, it’s vital for everyone involved to appreciate contributions and respect differing
viewpoints—at all times. So, the facilitator has got to guide the process, stimulate discussion
and make sure that everyone hears everyone else's voice. Nobody should dominate the
discussion or impose their ideas.

4. Be flexible: Be open to changes and adaptations. If a game’s not working as expected, be

ready to tweak it or switch to a different game. Among other traits, the nature of designers’
jobs means they’ve got to stay fluid, overcome bias and observe pain points—mindfully.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
5. Keep it fun and engaging: Keep the energy levels high and maintain a playful atmosphere.
Remember, the essence of gamestorming is to make problem-solving fun and engaging—and
that’s part of its magic. It’s a unique form of brainstorming session. So, use interesting games,
incorporate humor and make sure a lively and energetic atmosphere is all around.

6. Iterate and reflect: After each gamestorming session, reflect on what worked—and what
didn't. Iterate on your gamestorming process based on these reflections. The iterative process
is a vital ingredient, since it helps design teams work their way towards truly human-centered
design. That will translate to more positive results when designers engage in user testing.

Core Game Storming Skills

There are three core skills to Game storming:

● Asking Questions
● Creating Artifacts and Meaningful Spaces
● Employing Visual Language (Sketching)

1. Asking Questions

Perhaps nothing is more important to exploration and discovery than the art of asking good
questions. Questions are fire-starters: they ignite people’s passions and energy; they create
heat; and they illuminate things that were previously obscure.

2. Creating Artifacts and Meaningful Spaces

Artifacts are some type of physical medium such as sticky notes or index cards which allow
teams to break any complex topic into small, moveable pieces of knowledge (often called
knowledge atoms). Having these knowledge atoms allow teams to quickly and easily explore
all kinds of relationships between and among these atoms.

Teams can apply the concept of meaningful, organized spaces to knowledge atoms such as
what you would find on a board game, a tennis court, or a golf course. Defining meaningful
spaces allow the position of knowledge atoms to have precise meaning that is dependent on
their position.

3. Employing Visual Language

In school we are taught to learn to be successful are reading, writing, and arithmetic. In an
industrial world, where every worker functioned as a standardized cog this made sense. But
today’s challenges aren’t standard. There is another language that’s equally powerful. It’s
called visual language, and it’s the language teams can use to make ideas visual and explicit.
You don’t need to be a designer to be able to visualize ideas. You just need the visual alphabet.
It’s made up of 12 shapes called glyphs.

*****
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
1.6 Observational Empathy

What is an Empathic Approach to Design Thinking?

The emphatic approach in design thinking means an approach that is centred on gaining a deep
and meaningful understanding of people. Who is going to use your website? It means removing
your assumptions and trying to understand the experiences of users, their needs, wants,
motivations as well as goals. Key things you need to do for designing an empathic approach
are

• You should be open to understanding others without using your views or concerns on
things.
• You should value other's perspectives and keep their needs above your own.
• Should be a good communicator and a listener.
• To understand. What people are saying? And emotions behind their words.
• Have good observation skills. You should be good at observing, what people want.
• Show genuine interest. In the needs. And concerns of the people you are designing for

How to Create an Empathic Design?

1. User Research:

You should regularly research the users of your product or service. This will help you to gather
insights about their lives, behaviours, and preferences. This can be done through methods such
as taking small interviews, observations, surveys and studies.

2. Empathy Building:
Empathy building is a process in which you understand the problems. Thinking about emotions
of your users behind them. To empathize users and their perspectives. Empathy building
involves listening to the users actively. With a non judgmental attitude. In this way you can
build a special connection with them. You can ask them about there needs, problems,
requirements. And tell them what you are doing to fix them as soon as possible. You should
provide them good advices etc. You should work in way that you do not know anything and
you are open to learning from users.
3. Design Synthesis:

It is a process in which the design is prepared. Keeping in mind the data we gather from the
user research. In this we use empathy building exercises like using patterns, animations themes
which match with the users likes. In this process we will put the information we gathered into
actionable design process.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
4. Prototyping and Testing:

It is a process in which we have created a prototype and sent it to some testers for gathering
their feedback. In this, the prototypes are sent to the real users. So that they can validate their
insights, assumptions. This is an iterative process. Which will help in effectively address users
needs, preferences and designing an Empathic Design.

Consider Important Things:

• Accessibility considerations: Ensure that your website is accessible to all the users.
Whether they belong to any ethnicity, they speak any language or with the people of
any disabilities. This shows empathy towards people of different abilities.

• Responsive design: Make sure that the design should be usable across various devices,
whether it's desktop, mobile or tablet. A responsive design which adapts to different
device of users ensures, Empathy in context of using.

• Emotional design: You should use incorporate elements that evoke positive emotions,
which can be done through colors, images, typography and animations.

• Performance optimization: Ensure our website loads quickly as possible and

performs well. It will give a good impression impression on users because users
appreciate a fast and smooth loading experience and it reflects that you understand the
value of their time and patience.

• Ethical consideration: Be mindful of the privacy and the data security of users
respecting the data of users will show your empathy about concerns of their personal
information.
How to be an Empathetic Observer?

• The first thing to emphasize deeply is to put aside our egos. Because the main goal
behind empathy in design thinking is to understand and experience the feelings of
others. But most of us try to impose our views on others. So we should abandon our
ego and try to understand others perspective. Recognizing the empathy means
understanding and connecting to others emotions.
• The next important thing for enhancing our ability to emphasize is humility. We should
elevate the values of others and thoughts of others above ourselves In order to open up
to their experiences. Empathy involves seeing the world's with others eyes, not just with
our eyes.

• Becoming a good listener is also an important part for empathy observer. Here listening
does not mean only listening but they it means understanding the non-verbal
communication like we can pay attention to their emotions, body language without any
judgement and acknowledge their thoughts.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
• Body language is also important as it conveys more than words. You can offer silence
and ask questions. Which will help people to express themselves fully and you can
increase your observational skills.

• For more empathy focus on small details which includes observing behavoirs, subtile
cues, nonverbal expressions and the environment. They provide very valuable insights
about the experiences and thoughts of people. Empathic observation requires very keen
awareness about the context and close reading. Genuine empathy means getting to
understand others, so you should show compassion and concern to others.

• Understand their needs, desires and motivations to understand their perspective, be

curious to ask questions, explore and seek information to understand deeply. In this
way, you can discover truly what matters to people.

Understanding the Body Language

1. Everyone have unique habits:

You should observe and pay attention to how the people behave in different situations. You can
understand their gestures, expressions, posture because it tell a lot about them.

2. Recognize cultural differences:

Body language isn't universal because because people from different cultures may express their
emotions in different ways , Gestures. So first is first step is to familiarize yourself with the
cultural norms. To understand and to avoid misinterpretation.
3. Attention to expressions:

Facial expressions conveys the emotions of person universally. For example, a smile may
indicate happiness or approval. Frown face means disapproval or unhappiness, raised eyebrows
and slight smile means thrust and confidence. Open arms suggest openness means the person
is open to communicate, and not uncomfortable. While the closed arms indicate defensiveness.

Also the habits such as tapping fingers, foot shaking or hair twirling shows nervousness.
Upright posture means confidence and slouching may indicate disinterest or fatigue

4. Pay attention to proximity:

Here proximity means The distance when you're talking to someone in their personal space
with someone, respect the boundaries. Because invading personal space can cause discomfort
to anyone. Closer proximity indicates familiarity while. More proximity indicates
defensiveness or discomfort or respect.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
5. Ask questions:

Maybe you may not understand things exactly. So don't hesitate, to ask people about their
feelings or intentions. Real curiosity about getting to know people helps in better
understanding.

How to Gain an Empathic Understanding of People?

• Be curious: You should approach interactions with others with genuine interest and
curiosity. You can ask questions too. Learn about others. And don't pre assume anything
or that someone feel in the same way that you do.

• Instead of focusing on differences, find common things and similarities: Because

shared experiences helps in creating empathy. You should understand that everyone
experiences emotions may be the context varies.

• Try to put yourself in their positions: In this way you can understand their challenges,
competitions, motivations and feelings more effectively. You should question the
assumptions and actively seek to understand beyond the stereotypes and be aware of
your biases and preconceptions.

• When someone shares their emotions, feelings, listen carefully: Summarize what
you hear and understand to acknowledge their emotional shift. Engage in activities to
• promote your understanding and compassion. Like you can participate as volunteer for
community service and support that resonate with you
What is empathetic design?

Empathetic design, also known as empathy-driven design, is a user-centered approach that

goes beyond simply knowing what users need to do or see with a product but delves into
understanding how they feel when interacting with it.

Empathetic design thinkers conduct enough research to experience the user’s emotions. Then,
use that understanding to create products and services that resonate profoundly.

Benefits of incorporating empathy in the design process

There are numerous advantages of infusing empathy into your design process, but let’s explore
three key benefits:

• Understand user pain points and motivations: By actively listening to feedback,

conducting user interviews, and observing user behaviors, you can identify the
challenges and frustrations users face. This insight allows you to create solutions that
directly address their needs, enhancing overall user satisfaction.
• Identify experience gaps and reduce friction: One of the strategies for empathetic
design is mapping out the entire user journey and trying to understand how users move
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
from one key interaction to the other (more on that shortly). This process lets you
pinpoint areas where users might encounter difficulties or where their experience falls
short of expectations. By addressing these gaps, you can streamline the user journey,
reduce friction, and create a more seamless and enjoyable experience.

• Innovate new designs based on user expectations: When you immerse yourself in the
user’s context, it becomes easy to foresee evolving trends, preferences, and emerging
user needs. This foresight enables you to create innovative designs that meet current
demands and position your product for long-term success.

How to conduct user research to incorporate empathy into your design project

Product teams are not mind readers (that would have been cool!). And, no matter how much
you love your product or enjoy the design process, the truth remains: you’re not your user.

So, your best chance at developing empathy is to conduct in-depth research, immersing
yourself into the user’s world and trying to picture yourself in their context. This section shows
you tips and tools to employ.
Conduct empathy interviews

Empathy interviews are one-on-one interactions with users to gather qualitative insights about
their experiences, preferences, and challenges.
Use open-ended questions when conducting user interviews (you can have the sessions over
Zoom). Actively listen to users without judgment, using prompts like “Tell me more” and “How
does that make you feel?”

An effective empathy interview is unstructured or semi-structured and goes beyond the

exchange of words. As your users express themselves, pay attention to nonverbal cues like
facial expressions and body language. After the call, go over the recordings and pick details
you might have missed.

The best way to get users to agree to your interviews is by offering them something in exchange
for their time. Think of any valuable reward—a gift card, special access to premium features,
or anything else they’ll love.
Surveys help you conduct research with speed and scale.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1

Invite
users to an interview.

A good practice when conducting feedback surveys is to combine quantitative and qualitative
research questions. The former lets you gather quick data, while the latter digs deeper into the
user’s problem and motivation.

Example: When researching to develop new features, you could trigger a quick quantitative
question asking users what upcoming features they’ll love to see the most (provide options).
Then, follow up with a qualitative survey asking them to expand on the reason for their choice.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1

Build fully customized feedback surveys and start applying empathy in your UX design.

Track power user behavior

Observing how experienced and highly engaged users interact with your product reveals what
they value, their common paths, and potential friction points. After gathering this information,
you’ll have a good direction on what to focus on in your UX designs.

For instance, if you notice power users use a specific feature each time they visit your app but
seem to struggle with the navigation, that’s a sign to prioritize it in your UX design process.
Wondering how to observe power user behavior? First, identify and segment your most loyal
and engaged user groups, then deploy funnel analysis to track how they interact with your tool.
 DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1

Build empathy maps based on your research findings

An empathy map synthesizes data gathered from user research into a concise, easily
digestible format, showing user thoughts, feelings, actions, and pain points.
DEPARTMENT OF CSE (CS)
UI and UX Design Unit-1
 UI and UX Design Unit II

UNIT-II FOUNDATIONS OF UI DESIGN

Visual and UI Principles - UI Elements and Patterns - Interaction Behaviours and Principles –
Branding - Style Guides.

2.1 VISUAL AND UI PRINCIPLES

User interface (UI) design is all about creating interfaces that users can interact with. It is the
process where designers use to build device interfaces with an eye-pleasing outlook and style.
UI Designers aim to craft interfaces that users find easy and satisfying to use.
In today’s digital world, we interact with screens almost every hour—whether we’re browsing
websites, ordering food, booking a ride, or streaming videos.
But have you ever wondered what makes an app or website feel easy, attractive, or even
enjoyable to use?
That’s where UI Visual Design comes in.
UI Visual Design is the part of user interface design that focuses on the look, feel, and emotional
impact of a digital product. It involves everything you see on a screen colours, fonts, icons,
images, spacing, and layout all arranged in a way that is not just beautiful, but purposeful.

Here are 5 key visual design principles that impact UX:

1. Scale: The relative size of elements in a design. It helps create emphasis, guide attention,
and add visual interest.
2. Visual Hierarchy: The arrangement of elements to establish a clear order of importance. It
guides users through content and makes information easier to understand.
3. Balance: Distributing visual weight evenly in a design to achieve stability. It ensures that no
single element overpowers others, leading to a harmonious composition.
4. Contrast: Differences in colour, size, or other attributes that create distinction between
elements. Contrast enhances readability and draws attention to essential information.
5. Gestalt Principles: The idea that our brains perceive elements as a whole rather than
individual parts. It emphasizes how elements are organized to form a unified and coherent
design.
 UI and UX Design Unit II

1. Scale
Scale in visual design involves using relative size to communicate importance and rank within
a composition. Important elements are made larger than less significant ones, making them
more noticeable. A visually appealing design typically uses up to three different sizes to create
variety and establish a visual hierarchy.
By emphasizing essential elements through size, users can easily understand and interact with
the design. By using scale appropriately, you can control how people view your composition
and ensure that they absorb your message correctly.

In the British Museum poster, the title "THE BRITISH MUSEUM®" is the largest element,
grabbing immediate attention. Medium-sized images and subheadings guide the viewer through
key content. Smaller text is used for descriptions and buttons like "Book Now". This variation
in size creates a clear visual hierarchy and helps users easily understand what to focus on.
 UI and UX Design Unit II

2.Visual Hierarchy
Visual hierarchy is about guiding the user's eye to focus on important elements first. It's
achieved by using various design cues like size, color, spacing, and placement. A good layout
with clear visual hierarchy makes it easy for users to understand the content and its
importance. You can use different font sizes, bright colors for important items, and muted
colors for less important ones to create a clear hierarchy.

In a food delivery app, large food images grab attention first, followed by bold dish
names and smaller text for details. This size variation guides users smoothly through the
content.

3. Balance

Balance in visual design refers to the distribution of visual elements such that the
composition feels stable and aesthetically pleasing.
There are three types of balance:
i) Symmetrical
ii) Asymmetrical
iii) Radial
i) Symmetrical Balance
With symmetrical balance, the visual weight is distributed evenly. You can draw a straight
line through the middle of the design in any direction and the visual balance would be
evenly distributed. This makes the composition appear stable and creates a more orderly
look.
 UI and UX Design Unit II

ii) Asymmetrical Balance

Visual balance doesn’t mean that every element has to be distributed with perfect
symmetry. Balance can be achieved through asymmetry as well. You can think of it like
the seesaw you might have played on when you were young, or as a beam balance scale.
You can have different weights on each side, but can remain balanced by how the heavier
and lighter elements are positioned and stacked. Visual weight is balanced using different
elements (size, color, texture).
iii) Radial
Radial balance occurs when elements are arranged around a central point, radiating
outward in a circular pattern. Balance can be attained through placing objects, colors, or
textures at equal distances from the center.
4.Contrast

Contrast is a powerful visual design principle that involves highlighting the differences
between elements to make them stand out and be easily noticed. It helps users quickly
differentiate content and navigate a layout effectively. It involves placing visually
dissimilar things together to show that they belong in different categories or serve distinct
purposes.

For example, using bright colors like red to signify deletion in a UI design makes the
element stand out from the rest, emphasizing its unique function. Contrast helps users
quickly identify and understand important information, making the design more effective
and user- friendly
 UI and UX Design Unit II

5. Gestalt Principles

Gestalt principles are a set of ideas from psychology that explain how humans make sense of
complex images. Instead of seeing individual parts, our minds automatically organize them
into a whole. This means we tend to perceive the complete picture rather than separate
elements.
These principles include similarity, continuation, closure, proximity, common region,
figure/ground, and symmetry and order. One important principle for UX is proximity, which
means that items visually close together are seen as belonging to the same group. These
principles help designers create visuals that are easy for users to understand and navigate.

The gestalt principle of closure is illustrated beautifully in the World Wildlife Fund’s panda
logo. The brain completes the white shapes, even though they’re not well defined.

UI PRINCIPLES
UI principles are guidelines that help create user interfaces that are visually clear, easy to
interact with, and user-friendly. These principles focus on making interfaces that are intuitive
and accessible.
1. Clarity and Simplicity
Clarity and simplicity are fundamental principles of UI design, focusing on creating interfaces
that are easy to understand and use. Clarity ensures users can quickly grasp the purpose and
functionality of elements, while simplicity minimizes distractions and cognitive load. This
combination leads to a more intuitive and enjoyable user experience.
 UI and UX Design Unit II

2. Consistency
Consistency in user interface design helps to develop confidence among consumers and
guarantees that they are aware of how to interact with the product regardless of the page or
area they are currently on. Maintain uniformity in terms of design elements, colours, and
typography across the entire interface.

3. User control
User control is a fundamental principle in UI design that emphasizes giving users the power
to make decisions, control their actions, and interact with the interface on their own terms.
It ensures that users are not forced into fixed workflows or irreversible steps but are instead
allowed to navigate, modify, and manage their tasks freely and confidently.

Key Aspects of User Control

1. Undo/Redo Functionality
Users should be able to reverse actions easily (e.g., "Undo typing" in Gmail or Ctrl+Z in most
apps).

2. Clear Exit Point

Provide ways to cancel or back out of a process (e.g., a visible 'Cancel' or 'Back' button)

3. Customizability
Allow users to change settings, layouts, or workflows to suit their preferences.

4. Avoid Lock-ins
Don't trap users into steps without options to skip or return (e.g., forced onboarding with no
'Skip')

4.Accessibility

Accessibility in UI design refers to creating interfaces that are usable by people of all abilities,
including those with physical, visual, auditory, cognitive, or neurological impairments. It
ensures that everyone, regardless of disability, can perceive, understand, navigate, and interact
with digital products.
 UI and UX Design Unit II

A screen reader interface (e.g., NVDA or VoiceOver) reading out the alt text of an image. Helps
blind users understand content through audio feedback.

High Colour Contrast Improves text readability for users with low vision or color blindness.

5.Visual Hierarchy

Visual hierarchy in UI design is the principle of arranging elements to guide users' attention
and communicate the relative importance of information. It uses visual cues like size, color,
contrast, and spacing to influence how users perceive and interact with the interface, ensuring
they focus on the most crucial elements first.

In practical UI design, hierarchy helps distinguish between primary and secondary actions.
For instance, on a form, the "Submit" button might be bold and coloured, while the
"Cancel" button is Faded/Plain
 UI and UX Design Unit II

6.Flexibilty

Flexible UI design is about creating interfaces that can adapt to users of all experience levels,
needs, and contexts. It ensures that a product remains usable and efficient across different
devices, screen sizes, and platforms. Flexibility empowers users to personalize their experience
such as adjusting themes, layouts, or input methods —according to their preferences and
comfort.

A well-designed flexible interface can gracefully accommodate varying amounts of content or

additional functionalities without compromising usability or visual appeal. This adaptability
makes the system more inclusive and future-ready, catering to both novice and expert users
alike.

Here’s a high-quality example illustrating flexible (responsive) UI design in action—it shows

how a layout with a header, sidebar, and main content panels seamlessly adjusts between a
tablet view (left) and a desktop view (right).

7.Error Prevention and Recovery

Error prevention and recovery focus on designing user interfaces that reduce the likelihood of
user mistakes and provide clear, supportive solutions when errors do happen. When errors do
occur, the system should help users identify, understand, and correct them easily. Designers
can implement error prevention strategies to minimize user frustration and enhance satisfaction

i) Remind To Prevent: Use alerts judiciously to prevent errors, but only when users
face potential loss or missed opportunities. For example, a low battery alert prevents
unexpected shutdowns.
 UI and UX Design Unit II

ii) Confirming Actions: When dealing with potentially destructive actions or

significant changes, add a layer of confirmation.

iii) Undo/Redo Options: Providing users with undo and redo functionality allows them
to safely explore and interact with the interface without fear of making irreversible
mistakes.

8.Feedback

Feedback in UI design refers to providing users with immediate and clear responses to their
actions. It reassures users that the system is working and their input has been recognized.

Types of feedback
Visual feedback
Visual feedback uses changes in colour, shape, animation, or position to show the user that an
action has been acknowledged. For example, when a user clicks a button, it may change color
or show a loading spinner to indicate that the system is processing the request.
 UI and UX Design Unit II

Auditory Feedback

Auditory feedback provides sound cues to inform users that an action has been completed or
an error has occurred. Common examples include notification chimes, error beeps, or
confirmation tones, especially useful in mobile apps and assistive technologies.

Haptic Feedback
Haptic feedback uses physical sensations like vibration or pressure to acknowledge user input,
mostly on touch devices. For instance, smartphones vibrate slightly when a user long-presses
an icon
 UI and UX Design Unit II

Textual feedback
Textual feedback delivers written messages or labels to explain the result of an action or guide
the user. Examples include success messages like “Upload complete” or error prompts like
“Invalid email format

2.2 UI ELEMENTS AND PATTERNS

UI ELEMENTS

UI Elements are the building blocks used in designing the interface of an app or website.
They help users interact with the system easily and intuitively.

Button

A UI element that will execute a certain action (e.g., submit a form, start a process) when
clicked or tapped by users. They often have labels indicating the action they will perform,
such as “Submit,” “Cancel,” or “OK.”
 UI and UX Design Unit II

Text Fields:

A field that allows users to enter text, numbers, or other types of input. Textboxes are the
basic building blocks of forms. Use placeholder text to guide input

Checkboxes
Checkboxes are like little boxes that you can tick or un-tick to make a choice from a list
of options.

Radio Buttons

Radio buttons are like small circles or dots that you can select, but you can only choose one
option from a group of choices.
 UI and UX Design Unit II

Icons:
A small graphic that represents an action, object, or concept. Designers use icons as visual
shortcuts that communicate meaning quickly and improve the visual aesthetics of the interface.
 UI and UX Design Unit II

Dropdown Menus
A Dropdown Menu (or drop-down list) is a UI element that displays a list of options only when
the user interacts with it — typically by clicking or tapping on a button or a label.

Combo boxes

A Combo Box (short for Combination Box) is a UI element that combines a text input field and
a dropdown list. It allows the user to either:

1. Select an item from the dropdown list, or

2. Type a custom value manually.
 UI and UX Design Unit II

Sliders
Sliders are like bars or scales that you can slide left or right to adjust settings or choose a value.

Tooltips
Tooltips are like small pop-up boxes that show extra information when you hover your mouse
over something.

Tabs
Tabs are like labeled sections that you can click on to switch between different parts of a
website or app.

Businesses offering various plans or packages can effectively utilize pricing tabs to display the
features and costs associated with each option. This layout empowers users to compare offerings
and make informed decisions.
 UI and UX Design Unit II

Cards
Cards are like little containers that hold information, like a picture, a title, and a short
description, neatly displayed together.

Confirmation dialogues
Confirmation dialogues are responsible for collecting user consent for a particular action. For
example, collecting user consent for a delete action
 UI and UX Design Unit II

Date pickers
A date picker allows users to pick a date and/or time. By using a native date picker from the
platform, a consistent date value is submitted to the system.

UI PATTERNS

User interface (UI) design patterns are reusable/recurring components which designers use to
solve common problems in user interface design. Think of them as best practices or templates
that solve specific design challenges — such as how to display data, navigate an app, or guide
user input.

Why Use UI Patterns?

• Promote consistency across screens or products.

• Make interfaces more intuitive and predictable for users.
• Save time by reusing tested design solutions.
• Enhance user experience through familiarity.

Common UI Design Patterns

Primary Action

This UI pattern allows you to create prominent and easily distinguishable buttons that guide
users to take the most important actions within an interface. These actions are typically the
 UI and UX Design Unit II

main tasks or goals that users need to accomplish — for example, “send,” “sign in,” or
“subscribe.

Breadcrumbs

Breadcrumbs are a navigation aid in user interfaces that help users understand their current
location in the hierarchy of a website or app and easily navigate back to previous levels.

Lazy Registration

Lazy Registration is a UI/UX pattern where users are allowed to explore or use part of an app
or website before registering or signing up. Registration is delayed until it becomes absolutely
necessary
 UI and UX Design Unit II

The user has:

• Added an item to the cart

• Not signed in yet (see top right: “Hello, sign in”).

Primary action “Proceed to Buy” is available without forcing login upfront.

Amazon allows full exploration and shopping before requiring registration at checkout — a
classic Lazy Registration pattern.

Forgiving Format
Forgiving Format in UI design means designing input fields and forms to accept a wide variety
of user input formats, instead of rejecting them for strict formatting rules. The system should
understand and process common user variations gracefully.
Example: When entering a credit card number, the form might automatically format the
number into groups of four digits, helping the user enter it correctly.

Minimize or Avoid Optional Information Fields

It means asking the user to fill in only the most essential fields, especially during onboarding,
checkout, or registration. Optional fields should be reduced, hidden, or clearly marked to
prevent cognitive overload.

Name* and Mobile number* are clearly marked as required using an asterisk. Email (optional)
is explicitly labeled, so users know it’s not mandatory.
 UI and UX Design Unit II

Progressive Disclosure
Progressive Disclosure is where only the necessary or primary information is shown upfront,
and additional details/options are revealed as needed — helping users stay focused without
feeling overwhelmed. Designers can implement this UI design pattern using expandable
sections or "show more" buttons.

Hover controls
Hover controls are UI elements that only appear when a user hovers their mouse over a specific
area or item. This technique helps keep the interface clean and uncluttered, while still offering
quick access to secondary actions.

In this example, when the user hovers over the “USA” language selector, a dropdown list with
more countries (France, Germany, India, Japan, etc.) appears. This interaction was triggered by
a hover action, not a click.
 UI and UX Design Unit II

Step left
“Steps Left” refers to showing users how many steps remain in a multi-step process. This helps
users understand: Where they are in the process, how many steps are left, what to expect next.

Subscription Plans
Subscription Plans offer users an options menu where they can compare service tiers (e.g., Free,
Basic, Premium) and choose to sign up at specific pricing levels. These plans typically include
Sign-Up or Subscribe buttons for quick access.
 UI and UX Design Unit II

Leaderboard
This UI pattern is commonly used in games and social media platforms. It displays rankings of
top players based on specific criteria, such as success in a game (points, levels, etc.)
Leaderboard patterns in UI increase user engagement

Cards
Cards are rectangular or rounded containers that group related information together into a single
unit. They're a modular, flexible way to organize content and actions.
 UI and UX Design Unit II

2.3 INTERACTION BEHAVIORS AND PRINCIPLES:

Interaction behaviors describe how users behave when they interact with a digital interface (like
a website or app). These behaviors include a wide range of interactions like clicking buttons,
swiping screens, scrolling through content, hovering over elements, typing into fields, or
navigating menus.

Interaction design principles are a set of guidelines and best practices that inform how digital
interfaces should be designed to support natural, efficient, and user-friendly interactions. These
principles aim to make systems more intuitive, usable, and satisfying by aligning with the
mental models and expectations of users.

+Why Interaction Behaviors Matter?

Interaction behaviors define how users engage with a digital product, including what they click,
tap, scroll, hover, drag, or input. Understanding and designing for these behaviors is crucial for
delivering intuitive and satisfying user experiences. Let’s break down the significance in detail:

1. Define the User’s Journey

Interaction behaviors help designers understand how users move through the app or
website. It shows what steps users take from the beginning (like opening the app) to the
end (like completing a purchase).

2. Determine the Flow and Usability of an App/Site

Good interaction behaviors make the app simple to use and navigate. They help users
know what to do next, without getting confused or stuck. It improves the flow of tasks,
like filling out a form or making a payment.

3. Help in Creating Predictable and Smooth Experiences

Predictability in interaction builds trust and confidence, while smooth behaviors make
interfaces feel natural and enjoyable. Reduces errors by allowing users to anticipate
outcomes (e.g., knowing clicking a button will trigger a specific action).
 UI and UX Design Unit II

Stages of the Interaction Design Process:

The Interaction Design process has 5 stages: discovering user needs, analysing them, designing
a potential solution, prototyping it and then implementing and deploying it.

The 10 most important interaction design principles are-

1. UX: Match user experience and expectations
2. Consistent design: Maintain consistency throughout the application
3. Functionality: Follow functional minimalism
4. Cognition: Reduce cognitive loads/mental pressure to understand the application
5. Engagement: Design interactively such that it keeps the user engaged.
6. User control: Allow the user to control, trust, and explore
7. Perceivability: Invite interactions through intuitions and interactive media
8. Learnability: Make user interactions easy to learn and remember
9. Error handling: Take care to prevent errors, if they occur make sure to detect and
recover them.
10. Affordability: Simulate actions by taking inspiration from usual and physical world
interactions.
 UI and UX Design Unit II

2.4 BRANDING
Branding in UI/UX refers to the visual and emotional identity of a product, service, or
organization as experienced through its interface. It's how users perceive and recognize the
product, and it plays a vital role in building trust, loyalty, and differentiation in a crowded
market.
Branding includes the logo, color scheme, typography, icons, layout styles, imagery, and even
the voice and tone of microcopy. These elements work together to deliver a cohesive and
recognizable experience that aligns with the brand’s values, mission, and personality.

Why is Branding important?

• It creates a first impression.

• It helps users recognize and remember your product.
• It makes your design stand out from competitors.
• It builds emotional connections and loyalty with users.
• It ensures a consistent user experience across platforms.

Core Elements of Branding

i) Logo

It’s been claimed that 75% of people recognize a brand by its logo first. A logo is the
face of the brand. It creates the first impression and helps users instantly associate the
product/interface with the brand. In digital products, the logo acts as a symbol of trust,
recognition, and consistency.

The Nike logo, commonly known as the "Swoosh", is one of the most recognizable
logos in the world. The Swoosh represents motion and speed, aligning perfectly with
Nike’s core values: performance, athleticism, and innovation.
 UI and UX Design Unit II

ii) Color

Color is one of the first things users notice in any interface. It directly affects user
perception and emotion, making it a powerful branding too. Each color carries
psychological meaning—blue conveys trust, red shows energy, green represents health,
and so on. A consistent color palette helps users instantly identify a brand and creates
emotional connections.

In above example, Yellow brings cheerfulness, friendliness, and energy, grabbing attention with
warmth. Mc Donald’s uses yellow to create a happy, welcoming atmosphere that appeals to all
ages.

iii) Typography

UI designers follow the branding guidelines when choosing fonts. These guidelines tell them
which typefaces to use for titles, subtitles, body text, and other content. These rules define not
only the font family, but also details like font size, weight (e.g., bold or light), style (e.g., italic,
uppercase), line height, and spacing. By sticking to these rules, designers keep the app or
website looking consistent and professional.
 UI and UX Design Unit II

Zara uses a mix of serif and sans-serif fonts to balance luxury style and digital readability. The
logo and body text use serif fonts for elegance, while headings use bold sans-serifs to stand out.
This typography supports Zara’s image as both fashionable and functional.

iv) Imagery

Imagery in Branding and UI/UX Design refers to the use of photos, illustrations, icons, and
graphics that help visually communicate a brand’s identity and message. These visual elements
are essential in telling the brand’s story, evoking emotions, and creating a strong visual
connection with users and guide users through an interface more smoothly.

Airbnb uses real, high-quality photographs of homes, local neighborhoods, and happy travelers
to create a warm, inviting, and trustworthy atmosphere. The images often include natural
lighting, candid moments, and authentic experiences, making users feel like they are already
part of the journey.
 UI and UX Design Unit II

V) Voice and Tone

Voice and tone refer to the way a brand communicates with its audience through words — not
just what is said, but how it's said. Voice is the consistent personality of the brand — whether
it's friendly, professional, quirky, or bold — and it stays the same across all platforms. Tone, on
the other hand, can change depending on the context, such as being more casual in a welcome
message and more serious in an error alert.

Different brands use voice and tone in unique ways to shape user experience. For example,
Mailchimp uses a friendly and humorous tone—like saying "Great minds think alike..." when
a username is taken. This makes the process feel light and human. In contrast, Google uses a
neutral, professional tone—such as "Couldn't find your Google Account"—to keep things clear
and efficient. Both messages serve the same purpose, but the tone changes how users feel during
the interaction.

The Stages of Branding in UI Design

1. Brand Strategy
This is the planning stage where you define the brand’s identity.
What it includes:

• Brand values (what the brand believes in)

• Target audience (who it is for)
• USP (Unique Selling Proposition – what makes it different)
 UI and UX Design Unit II

2. Visual Identity Design

Here, the visual look of the brand is created. It Includes: Logo, Color palette, Typography
(fonts), Icons & imagery. The Goal is to design elements that match the brand’s personality
and appeal to users.

3.UI Design Integration

In this stage, the brand’s visual identity is applied to the user interface by using the chosen
colors, fonts, and logo styles in buttons, menus, headings, and layouts.

4. Brand Guidelines
Document the brand guidelines that outline how the visual elements should be used in the
UI design. It includes Logo usage rules, Colour codes and combinations, Font usage, Do’s
and Don’ts. These guidelines ensure consistency across different designers and projects.

5. User Testing

Test the UI design with real users to ensure that the branding elements resonate with the
target audience and provide a positive user experience.

2.5 STYLE GUIDES

A Style Guide in UI design is a documented set of standards and guidelines that define how the
user interface of a product should look and feel. It ensures visual consistency, improves brand
identity, and helps different designers and developers work in harmony across a project.

Key elements of a UI Style Guide:

1. Typography – Specifies font families, sizes, weights (like bold, regular), and where to
use them (titles, body text, etc.).
2. Color Palette – Lists primary, secondary, accent, and background colors, along with
their codes (hex or RGB).
3. Buttons & Components – Defines styles for buttons, input fields, cards, alerts, etc.,
including their states (hover, active, disabled).
4. Icons – Shows which icons to use and their sizes, styles, and meanings.
5. Spacing & Layout – Rules for padding, margins, grid systems, and alignment.
 UI and UX Design Unit II

6. Imagery – Guidelines for images, illustrations, or logos (like size, placement, and tone).
7. Branding Elements – Includes logo usage, tone of voice, and other brand-specific
visuals.

Why it’s important:

• Makes the design consistent across screens and platforms.
• Speeds up the design and development process.
• Ensures brand identity is maintained.
• Helps new team members get on board quickly.

The stages of creating style guides are:

1. Doing research about the brand and target audience.

2. Creating the visual elements like colors and icons for the design.
3. Making a library of reusable components like buttons and cards.
4. Writing down all the design rules and guidelines in a document.
5. Testing the design with real users and making improvements.
6. Integrating the style guide into the design and development process.

By using style guides, UI designers can create a user-friendly and cohesive interface
that represents the brand well and gives a positive user experience.

Best UI Style Guide Generators

The following are the best tools/software that you can use to generate UI style guides.
1. Mockplus

Mockplus is an online design platform that allows users and designers to gather and
manage UI style guides, components, and design systems. It integrates your design
workflow and offers a complete set of features that allows users to design, prototype,
collaborate, comment, and discuss.
 UI and UX Design Unit II

2. Fabricator

Fabricator is an online tool for building UI style guides and design systems from their UI toolkit
code. It also allows you to organize your design system, such as the components, structures,
elements, and more, the way you want.

3. Aigis

Aigis is a Node.js package, a casual-to-use style guide generator that lets you auto-generate a
UI style guide from any text file. It is compatible with many text file formats such as .css, .scss,
.md,. styl, etc.

Difference between UI Style Guides and Design systems

UI style guides are set rules with a complete list of user interface design’s do’s and don’ts.
Unfortunately, it is often easily confused with the term “design system,” different design
guidelines designers use. If you don’t know what design system means, here’s a definition.
A design system is a complete list of design principles, standards, and documentation that
guides designers and developers to design consistent products and increase sales. It is an all-
encompassing design document that contains design style guides, design patterns, technical
specifications, and component libraries to improve product and brand consistency.
A style guide is an element of a design system that lists out rules regarding the brand and visual
style of products. The critical difference between a UI style guide and a design system is that
the former focuses on the product’s overall aesthetics. At the same time, the latter specifies how
different design components within the design aesthetics look and function.
 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 Goals

3.1 INTRODUCTION TO USER EXPERIENCE:

What is user experience?

The user experience (UX) is what a user of a particular product experiences when using that
product. User experience encompasses all aspects of the end-user's interaction with the
company, its services, and its products.

Requirements of user experience:

 The first requirement for an user experience is to meet the exact needs of the customer,
without fuss or bother.
 Simplicity and elegance that produce products that are a joy to own, a joy to use.
 In order to achieve high-quality user experience in a company's offerings there must be
a seamless merging of the services of multiple disciplines, including engineering,
marketing, graphical and industrial design, and interface design. 

Difference between user experience and customer experience:

User experience encompasses all aspects of the end-user's interaction with the company, its
services, and its products.
The term customer experience (CX) has been used to describe the totality of the interactions
that a user has with an organization over time.

.
Levels of user experience:

The 7 factors that influence user experience

User Experience (UX) is critical to the success or failure of a product in the market. There are
7 factors that describe user experience, according to Peter Morville a pioneer in the UX field

Useful
If a product isn’t useful to someone why would you want to bring it to market? If it has no
purpose, it is unlikely to be able to compete for attention alongside a market full of purposeful
and useful products.
Usable
Usability is concerned with enabling users to effectively and efficiently achieve their end
objective with a product
Findable
Findable refers to the idea that the product must be easy to find and in the instance of digital
and information products; the content within them must be easy to find too.
Credible
Credibility relates to the ability of the user to trust in the product that you’ve provided. Not
just that it does the job that it is supposed to do but that it will last for a reasonable amount of
time and that the information provided with it is accurate and fit-for-purpose.
Desirable
Desirability is conveyed in design through branding, image, identity, aesthetics and emotional
design. The more desirable a product is – the more likely it is that the user who has it will brag
about it and create desire in other users.
Accessible
Accessibility is about providing an experience which can be accessed by users of a full range
of abilities – this includes those who are disabled in some respect such as hearing loss, impaired
vision, motion impaired or learning impaired.
Valuable
the product must deliver value. It must deliver value to the business which creates it and to the
user who buys or uses it. Without value it is likely that any initial success of a product will
eventually be undermined.

The Five Main Ingredients of UX

 Psychology
 Usability
 Design
 Copywriting
 Analysis
1. Psychology
A user’s mind is complex. You should know; you have one, (I assume). UXers work with
subjective thoughts and feelings a lot; they can make or break your results. And the designer
must ignore their own psychology sometimes, too, and that’s hard!
Ask yourself:
 What is the user’s motivation to be here in the first place?
 How does this make them feel?
 How much work does the user have to do to get what they want?
 What habits are created if they do this over and over?
 What do they expect when they click this?
2. Usability
If user psychology is mostly subconscious, usability is mostly conscious. You know when
something is confusing. There are cases where it is more fun if something is hard—like a
game—but for everything else, we want it to be so easy.

Ask yourself:

 Could you get the job done with less input from the user?
 Are there any user mistakes you could prevent? (Hint: Yes, there are.)
 Are you being clear and direct, or is this a little too clever?
 Is it easy to find (good), hard to miss (better), or subconsciously expected (best)?
 Are you working with the user’s assumptions or against them?
.
3. Design
As the UX designer, your definition of ―design‖ will be much less artistic than a lot of
designers. Whether you ―like it‖ is irrelevant. In UX, design is how it works, and it’s
something you can prove; it’s not a matter of style.

Ask yourself:
 Do users think it looks good? Do they trust it immediately?
 Does it communicate the purpose and function without words?
 Does it represent the brand? Does it all feel like the same site?
 Does the design lead the user’s eyes to the right places? How do you know?
4. Copywriting
There is a huge difference between writing brand copy (text) and writing UX copy. Brand copy
supports the image and values of the company. UX copy gets shit done as directly and simply
as possible.

Ask yourself:

 Does it sound confident and tell the user what to do?

 Does it motivate the user to complete their goal? Is that what we want?
 Is the biggest text the most important text? Why not?
 Does it inform the user or does it assume that they already understand?
5. Analysis
In my opinion, most designers’ weak spot is analysis. But we can fix that! Analysis is the main
thing that separates UX from other types of design, and it makes you extremely valuable. It
literally pays to be good at it.
So, ask yourself:

 Are you using data to prove that you are right, or to learn the truth?
 Are you looking for subjective opinions or objective facts?
 Have you collected information that can give you those types of answers?
 Do you know why users do that, or are you interpreting their behavior?
 Are you looking at absolute numbers, or relative improvements?

What Is User Experience (UX) Design?

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.

.
UX Design—A Formal Definition
The International Organization for Standardization (ISO) defines user experience as:
―A person's perceptions and responses that result from the use or anticipated use of a product,
system or service.‖
We can break this definition into two parts:
 A person’s perceptions and responses.
 The use of a product, system or service.

In user experience, designers do not have much control over a person’s perceptions and
responses—the first part of the definition. For example, they cannot control how someone
feels, moves their fingers or controls their eyes as they use a product. However, designers can
control how the product, system or service behaves and looks—the second part of the
definition.

The simplest way to think about user experience design is as a verb and a noun. A UX designer
designs (verb)—ideates, plans, changes—the things that affect the user experience (noun)—
perceptions and responses to a system or service.

UX Designers Consider the Who, Why, What, and How of Product Use

The Why involves the users’ motivations for adopting a product, whether they relate to a task
they wish to perform with it or to values and views that users associate with the ownership and
use of the product. The What addresses the things people can do with a product—its
functionality. Finally, the How relates to the design of functionality in an accessible and
aesthetically pleasant way

UX Design is User-Centered
User-centered design is an iterative process where you take an understanding of the users and
their context as a starting point for all design and development.
Why is UX design important?
UX design is important because it focuses on fulfilling user needs. This ultimately benefits
businesses as it improves brand reputation and loyalty. A good user experience provides a
competitive edge and reduces the risk of product failure
What does a UX designer do?
 A UX designer’s role in a project depends on the team size and project type. In small
projects and teams, you can expect to conduct several tasks, including user research,
creating user flows, wireframes, and prototypes, conducting usability tests, producing
visual elements such as icons, and even defining the brand identity.
 In larger organizations and complex products, you may have more specialist roles such
as researcher, interface designer and UX writer.

UX designers tend to be concerned with, as you can see from the image below, 3 primary
factors: the look of a product, the feel of that product and the usability of that product.

 The look of a product is all about creating a product that has visual appeal and which,
in particular, harmonizes with a user’s values and captures the spirit of what they expect
in that product
 The feel, which is really about developing products that are ―a joy to use‖. That is,
whether you’re interacting with them or reacting to them
 Usability is the cornerstone of user experience. If a product isn’t usable, the experience
of using it can never be good
Skills for UX designer

 Leadership
 communication
 project management
 presenting

What Do Graphic Design and UX Design Have in Common?

.
Emotional Design
Graphic design is about emotional communication through typography, color and images; serif
fonts and dark, duller colors evoke seriousness, while san-serif fonts and bright colors tend to
bring out a sense of joy or excitement.
Graphic designers are hence very often emotional designers who elicit specific reactions in a
user. UX design is also concerned with shaping the emotions of the user
Creative thinking
Graphic designers and UX designers are both equally skilled at creative thinking. For graphic
designers, creating visuals that adhere to conventions. UX designers have to create products
that solve users’ problems
Prototyping
Graphic designers often create mockups and wireframes of their designs prior to delivering a
finished design.
UX designers create mockups and prototypes too, but these tend to be less focused on the
―look‖ of the product and more on the ―feel‖ of it.

The Differences between Graphic Design and UX Design

User-focused vs pixel-focused
Graphic designers tend to pursue pixel perfection in their designs. Ensuring that texts have
perfect kerning and colors conform to brand guidelines. UX designers, however, are primarily
focused on users. They study the interface between users and the product, finding ways to
ensure that the product answers to the user’s key needs

Iterative problem solving

UX design is very much an iterative problem solving process, and it can be very different
from what you’re used to doing as a graphic designer.

Multi-disciplinary vs specialized
Graphic design is a specialized discipline, and there is a certain level of craftsmanship and set
of specialized skills (such as typography and color theory) required to produce great visuals.
UX design, on the other hand, is much more multi-disciplinary and involves many schools of
knowledge. UX designers have to constantly learn about human psychology, interaction
design, information architecture and user research techniques

What are the Five Elements of UX Design?

The 5 elements that we’ve selected that need to be examined in a UX context are:
 Usefulness of the Website
 Adherence to Functionality
 Usability
 Influence
 Visual Design
Usefulness of the Website

The most fundamental question asked of each website by its users; ―How is this useful to
me?‖
One of the reasons that we define our users before we develop a website is because we need to
be able to show usefulness to an audience. By defining an audience clearly, the developer of
the cars and maintenance site can safely ignore people like me when considering their user
experience

Adherence to Functionality
Adherence to functionality means – ―does it work?‖. Dead links, for example, are a case of
broken functionality. Failure for a site to display properly on a particular screen or in a
particular browser is a case of broken functionality. It stands to reason that a user’s experience
will be less than perfect if they find that your website is a buggy mess that doesn’t deliver on
the promise of that site

Usability
Some people tend to see usability as the whole of UX design. Usability is a part of UX design.
Usability is quite simply a measure of how simple it is for a user to learn the site and how easy
it is to use the site in the long-term.

Influence
Most websites are designed to serve a commercial purpose. To sell products, services,
subscriptions, etc. A critical component of user experience is the ability to influence your
users to do what you want them to do. The key metric of influence is usually the conversion rate.

Visual Design
Different audiences react differently to different elements of design. Visual design plays a
critical role in the user experience and once again, the users will know what they respond to
and what they don’t respond to.
3.2 WHY YOU SHOULD CARE ABOUT USER EXPERIENCE:

• UX tries to fulfil the user’s needs and builds a better customer satisfaction–conversion–
retention journey.
•UX aims to provide positive experiences to the user that keeps them loyal to the product or
brand.
•UX defines customer journeys on your product and establishes a two-way relationship
between the maker and the user.
•UX reduces costs for development/bug fixing/marketing and so on.
•UX provides improved return on investment (ROI)
•Sometimes the product doesn’t need to be innovative. It simply takes the usual idea and
represents it differently. The user-focused design makes the product stand out.
•UX helps provide intuitive experience, coherence & continuity and platform-specific designs.
•Providing a good user experience foundation for your product or service ensures that people
use your products because they genuinely enjoy using them, not just because it gets the job
done
•It also helps to reduce development-waste. Research has shown that companies who invest in
UX reduce development cycles by 33 to 50%.
•People are willing to pay up to 25% more for a reliable product or service
Increased Customer Satisfaction
A good UI/UX is therefore essential if you want a website that is easy to navigate and that
customers will look forward to buying products or services from.
Establishing Brand Name
When people want to know more about a brand, they look up its website. What they see in the
first few seconds is crucial as that marks the first impression they ever have of your brand. So
it is important to help develop a good first impression with a website that is aesthetically
pleasing, interactive, and not only simply opens with one click.
Encourages Conversions
Given the increase in competition in every type of industry, many websites are selling similar
products. One way to make sure that visitors of your site turn into customers is by giving
them a great experience on your website.
Conserves Time and Money
If you spend on an effective UI/UX design, there is very little chance that your customers will
discover any trouble or difficulty using your product. A flawless product will not require
frequent updates and thus, help you in saving time and money.

10 Reasons Why UX is Vital to Success

1. Efficiency and Productivity:
•A good user experience (UX) ensures that users can navigate, find what they need, and
accomplish their goals quickly and efficiently.
•This is achieved through a combination of user research, usability testing, and design thinking.
•A UX designer will work to understand the needs and behaviors of users, create user- centered
interfaces that are easy to use and navigate, and continuously test and refine the design to
improve the overall experience.
2. Loyalty and Retention:
•When users find a website or application easy and enjoyable to use, they are more likely to
return to it.
•UX design not only improves the usability and accessibility of a digital product but also
focuses on the emotional design aspect, which helps create positive emotions and feelings for
users when they interact with the product.
3. Accessibility:
•Accessibility is important not only from a user’s point of view, but it also has legal and
ethical considerations.
•Accessibility in digital products refers to the ability of a website or application to be easily
used by people with disabilities, such as visual, auditory, motor, and cognitive impairments.
•It ensures that everyone, regardless of their abilities, has equal access to the information and
functionality of the digital product.
4. Increase user engagement:
•When users find a website or application easy and enjoyable to use, they are more likely to
spend more time on it, which can lead to improved conversion rates, sales, and other key
metrics.
•User engagement is a measure of how much time users spend interacting with a website or
application, how many pages they view, and how frequently they return.
•When users are engaged, they are more likely to make a purchase, sign up for a service, or
take other actions that drive business goals.
•A good UX also helps increase user retention and loyalty, which will lead to more repeat
customers and more word-of-mouth advertising, ultimately driving success.

5. Brand reputation and trust:

•Positive word-of-mouth advertising is one of the most powerful forms of marketing and can
have a significant impact on a brand’s reputation.
•A well-designed digital product with an intuitive flow can help create a positive user
experience, which can lead to more positive word-of-mouth advertising.
6. Boost search engine optimization (SEO):
•Search engines, such as Google, favour websites and applications that provide a positive user
experience, as they want to provide their users with the best possible results.
•A well-designed digital product that is easy to navigate, has a clean and organized structure,
and can help improve the website’s or application’s ranking in search engine results pages
(SERPs).
•A good UX can also lead to increased user engagement, which can help improve the website’s
or application’s SEO by lowering the bounce rate, increasing the average time on site, and
increasing the number of pages viewed per session.
7. Decreases the need for customer service and support:
•When a website or application is well-designed, it is easier for users to find what they are
looking for and complete their tasks quickly and efficiently.
•This can result in a lower rate of frustration and confusion among users, which can lead to
fewer errors and less need for customer service and support.
•The correlation between a decrease in customer support calls and higher renewals suggests
that a well-designed product with a good UX has fewer issues and overall satisfaction with the
end user.
 8. Stay Competitive:
•Competition is fierce, and businesses must find ways to differentiate themselves from their
competitors.
•A good UX can help a business by providing a positive and memorable experience to users.
In today’s digital age, people have come to expect a seamless and enjoyable experience when
using websites and applications, and a positive UX can help meet those expectations
9. Improved conversion rates and sales:
•When a website or application is well-designed, it is easier for users to find what they are
looking for, complete their tasks quickly and efficiently, and ultimately make a purchase or
take the desired action.
•A positive UX can also increase user engagement, leading to more time spent on the website
or application, which can further improve conversion rates and sales.
10. Reduced development and maintenance costs:
•By designing a website or application that is intuitive, straightforward, and easy to use,
businesses can minimize the need for ongoing technical support and maintenance.
•A well-designed digital product can reduce frustration and errors from users, which decreases
the need for customer service and support, freeing up resources that can be used to develop
and maintain the product.

3.3 UNDERSTANDING USER EXPERIENCE:

•The user experience is product (or service) specific. It is the experience that a user (or
customer) has when they interact with that product.
•We can measure the results of the user experience to some extent too.
•We can look at satisfaction reports, the level of customer care enquiries following an
interaction, the time it takes to get something done with our product, etc.
Why UX Matters
Good UX:
- Increases user satisfaction.
- Builds brand loyalty.
- Reduces user frustration.
- Improves conversion rates (sales, sign-ups, downloads).
- Reduces support costs (because things are easier to use).
Example: Amazon’s 1-click purchase drastically improved UX by making checkout instant
— and their sales skyrocketed.
Elements of UX
UX design is made of multiple layers. One popular model is Jesse James Garrett’s 5 Planes of
 UX:
Plane Focus Example
1. Strategy Plane Goals of business & Why does the product exist? What
needs of users problems does it solve?
2. Scope Plane Features & functional What features should the app have?
requirements (e.g., payment gateway, search bar)
3. Structure Plane Information How will the content be organized?
architecture & How will users move between pages?
interaction design
4. Skeleton Plane Wireframes, layout, Where will the buttons, menus, and
interface design images be placed?
5. Surface Plane Visual design & final Colors, typography, images, branding
look

4. Key Factors Influencing UX

1. Usability → Is it easy to use?
2. Accessibility → Can everyone, including people with disabilities, use it?
3. Performance → Is it fast and responsive?
4. Content Quality → Is the information accurate, useful, and well-structured?
5. Visual Appeal → Does the design create trust and interest?
6. Consistency → Does it follow familiar patterns so users don’t have to relearn?
5. The UX Design Process
A standard UX workflow usually includes:
1. User Research – Understand your audience through surveys, interviews, analytics.
2. Define Requirements – Based on research, decide what to build.
3. Information Architecture – Organize and structure content logically.
4. Wireframing & Prototyping – Create low/high-fidelity designs for testing.
5. Usability Testing – Get feedback from real users.
6. Implementation – Work with developers to build it.
7. Iterate & Improve – Continuously refine based on feedback.
6. UX vs UI
UX (User Experience) = How it works & feels.
UI (User Interface) = How it looks.
Example: A coffee machine:
- UX = How easy it is to select your coffee and get it in the right size & temperature.
- UI = The buttons, labels, display screen, and lights.
7. Real-Life Examples of UX
- Google Search → Fast, minimal interface, relevant results → Great UX.
- ATM Machines → Simple menus and quick responses = good UX;
overly complicated ones = bad UX.
- Netflix → Personalized recommendations + easy navigation → keeps users hooked.
8. Common UX Mistakes
- Cluttered design (too much information at once).
- Tiny clickable areas or confusing buttons.
- Slow loading speed.
- Poor mobile optimization.
- Not considering accessibility.
✅ In short: UX is about creating products people love to use by focusing on ease, efficiency, and
emotional satisfaction.
3.4 DEFINING THE UX DESIGN PROCESS AND ITS METHODOLOGY:

There isn’t any standard UX design process. However, most teams tend to follow a variation
of the 5-step design thinking process. UX design is a highly collaborative and iterative process.
Designers plug back their findings from research and testing to improve the end user's
experience.
What is a UX Design Process?
A UX design process is an iterative step-by-step methodology UX design teams use to
complete projects. It is derivative from a design thinking process. As in design thinking
process, UX designers spend time empathizing with the user, learning about the business,
context, defining problem scope.

UX Design Process vs. Design Thinking Process

The design thinking process is a five-step process for developing user-centered solutions to
human problems. A UX design process is a multi-stage, end-to-end methodology that
incorporates design thinking for delivering UX projects.
Importance of a UX Design Process
Here are some reasons why companies standardize a UX design process:
Ensures projects meet quality and consistency standards
 Ensures designers design solutions without bias and assumptions
 Enables designers to test and iterate on many ideas to find the best solution
 Promotes collaboration between teams and departments
 Reduces the risk of rework by following set protocols
 Allows stakeholders to track a project’s progress
 Identifies hidden risks and opportunities
Steps of UX Design Process

A typical UX design process has 8 UX design process steps, from defining the product’s goal
to design handoff and making sure everything works as intended

Step 1: Define project & scope

The first step of a UX design process defines the project’s goal and scope with team members
and stakeholders from multiple departments–usually consisting of representatives from:

Business – explains business requirements and goals for the project.

Design – communicate what they need to do prior to design and manage expectations.
Product – shares context, help plan the timeline and resources needed for design.
Technical – define feasibility and technical constraints of a UX design.

Step 2: Run research

Next, designers research the problem to find possible solutions. During the research phase, UX
designers conduct several types of research, including:
User research: Studies the target user to understand who they are, what they need, and what
context they operate; the outcome of this research are user personas, journey maps, and so on.
Market research: Analyzes the market to determine market segmentation and product
differentiation.
Competitive research: A competitive analysis to understand how competitors solve similar
problems and identify opportunities.
Product research: Analyzing insights and analytics from an existing product to understand
user behavior.
Step 3: Create rough draft of a solution
With a clear understanding of their users, market, and competitive landscape, designers can
create a rough draft of what a solution would look like, which is often referred to as
the ideation phase. Designers use paper and pen during early ideation to iterate on many ideas
fast.
Some of these low-fidelity techniques include:

 Sketching: Hand-drawn sketches of user interfaces

 Paper prototyping: Paper versions of a prototype
 Wireframing: Digital versions of paper prototypes featuring basic lines and shapes
 Low-fidelity prototypes: Digital prototypes using wireframes to test user
flows and information architecture 
The team might also use a design sprint to solve a specific problem fast.
Step 4: Design high-fidelity mockups and prototypes
Next, the UI design team converts wireframes into mockups to build high-fidelity prototypes
that look and function like the final product. If the company has a design system, designers
will use the UI component library to build interactive prototypes.
Step 5: Conduct usability testing
The primary purpose of high-fidelity prototypes is usability testing. UX designers test these
prototypes with real users to:

 Validate ideas
 Identify usability issues
 Test accessibility
Steps 2 to 5 are iterable. Using test results, designers return to stage two or three to iterate on
ideas until they find a solution that meets desirability, viability, and feasibility criteria.
Step 6: Perform design Handoff
The second to last stage of the UX design process is the design handoff, where the design team
hands over prototypes and documentation to the development team to start the engineering
process.
Step 7: Launch your product
The final stage of the UX design process is a launch and a clear inspection of the new release.
It’s time to ensure that the new release meets the project’s business goals, user experience, and
accessibility requirements.
User Experience (UX) Process and Methodology
 User Research
 Design
 Wireframing
 Prototype
 Testing
 Implementation and Launch

1. Always start with User Research

If you ask an experienced UX researcher what is the best UX for your website, product or
service, most likely you will not get an answer. A UX researcher should always be mindful of
the differences in opinions and perceptions toward a good user experience.
2. Start Designing with User Inputs
Users may think of the appearance of a website or product when we talk about design. They
will describe it as pretty or not pretty.
Personas
Persona is a fictional character created to describe a specific end user. Example persona is a
frequent backpacker with name, age, job details, education, location, income level, family
members and friends, familiarity with technology, hobbies, goals, characters etc explained
and elaborated in details.
Example Persona: Alex, a 24 yo backpacker
During a meeting, you can say ―Alex would not like this feature‖ and everyone will
immediately know that you are referring to a young backpacker instead of a elderly.
User Journey Map
A user journey map is an illustration of the interaction between a user with a company, product
or service at every stage of engagement from researching, making the decision, purchasing to
post-purchase. It includes the personas, time frame, and actions for each stage, touch points
and sales channels, emotions, and experience.

Storyboards
A storyboard is a comic strip used to capture a user’s interaction with a product or service. It
allows researchers and stakeholders alike to visualize and brainstorm.

3. Wireframing
If you haven’t employed wireframing as part of your process, you should probably start doing
so. A wireframe is a visual guide with the framework of your product. It allows you to define
the information architecture, navigation design, and interface design.

4. Prototype
A prototype is the version 1.0 of your website or product. It resembles the closet version of
your final outcome.
A prototype allows the UX researchers to examine and identify any flaws, errors or
inconsistencies in overall design and experience before it is converted to the actual version by
the development team.
5. Testing
With prototypes, user testing can be conducted with users to validate the design flow and user
experience. In some e-commerce companies, testing usually makes up a big bulk of daily
routine of UX researchers. It allows them to continuously improve the product.
6. Implementation and Launch
After user testing, the validated prototype can finally be converted into actual product for UAT
Testing before an official launch.

3.5 RESEARCH IN USER EXPERIENCE DESIGN:

What is UX Research?
 UX (user experience) research is the systematic study of target users and their
requirements, to add realistic contexts and insights to design processes.
 UX researchers adopt various methods to uncover problems and design opportunities
UX Research is about Finding Insights to Guide Successful Designs
 When UX research is done , it is able to give users the best solutions—because it can
discover exactly what they need.
 The UX research can be applied at any stage of the design process.
 UX researchers often begin with qualitative measures, to determine users’ motivations
and needs. They might use quantitative measures to test their results.
 To do UX research well, a structured approach is taken when data is gathered from
users.
 It’s vital to use methods that
1) are right for the purpose of your research and
2) Will give you the clearest information. Then, interpret the findings so it can build
valuable insights into the design

What is the UX research process?

Every research project will vary. However, there are some common steps in conducting
research, no matter which method or tool you decide to use:

 Define the research question

 Select the appropriate research method
 Recruit participants
 Conduct the research
 Analyze the data
 Present the findings
Why is UX research important?
 User research is very important in designing products people will want and use. It
helps us avoid designing based on what we think instead of what users actually want.
 UX research helps designers understand their users’ needs, behaviors, attitudes and
how they interact with a product or service.
Subsets of UX research
We can divide UX research into two subsets:
Qualitative research – Using methods such as interviews and ethnographic field studies, you
work to get an in-depth understanding of why users do what they do (e.g., why they missed a
call to action, why they feel how they do about a website).
Quantitative research – Using more-structured methods (e.g., surveys, analytics), you gather
measurable data about what users do and test assumptions you drew from qualitative research.
With this data, you can discover patterns among a large user group.

.
We can additionally divide UX research into two approaches:
Attitudinal – you listen to what users say—e.g., in interviews.
Behavioral – you see what users do through observational studies.

Use UX Research Methods throughout Development

.
15 Guiding Principles for UX Researchers
1. Mix It Up
2. It’s Easier To Find ―You Got it Wrong‖
3. You Can’t Standardize Sample Sizes For All Your Research
4. Testing With Just One User is Not Pointless
5. Increase Sample Sizes for Better Accuracy
6. Randomizing Can Overcome Research Design Flaws
7. Research Results Belong to No-One
8. Scale Ratings In Questions Aren’t That Important
9. Participants Need to Reflect Personas
10. What They Say vs. What They Do
11. Keep Growing Your Toolkit
12. Usability – A Polite Fiction?
13. Keep Reports Short
14. Be Aware that Observers Observe Differently
15. Cults of Personality Suck

3.6 Tools and Method used for Research

Tools used for Research

 The Choice of tools depends on your research question, how you're researching, the
size of your organization, and your project. For instance:

 Survey tools such as Typeform and Google Forms.

 Card sorting tools such as Maze and UXtweak.

 Heatmap tools such as HotJar and CrazyEgg

 Usability testing (through first-click testing and tree-testing) tools such as Optimal
Workshop and Loop 11

 Diagramming applications such as Miro and Whimsical to analyze qualitative data

through affinity diagramming.

 Spreadsheet tools such as Google Sheets and Microsoft Excel for quantitative data analysis

 Interface design and prototyping tools like Figma, Adobe XD, Sketch and Marvel to
conduct usability testing.

 Presentation tools such as Keynote, Google Slides and Microsoft PowerPoint.

Method used for Research

Use UX Research Methods throughout Development

Discover
 The discovery stage is when you try to illuminate what you don’t know and better
understand what people need.
 Good things to do during discovery:
 Conduct field studies and interview users: Go where the users are, watch, ask, and listen.
Observe people in context interacting with the system or solving the problems you’re
trying to provide solutions for.
 Run diary studies to understand your users’ information needs and behaviors.
 Interview stakeholders to gather and understand business requirements and constraints.
Explore
 Exploration methods are for understanding the problem space and design scope and
addressing user needs appropriately.
 Compare features against competitors.
 Do design reviews.
 Use research to build user personas and write user stories.

Test
 Testing and validation methods are for checking designs during development and
beyond, to make sure systems work well for the people who use them.
 Do qualitative usability testing. Test early and often with a diverse range of people,
alone and in groups. Conduct an accessibility evaluation to ensure universal access.
 Ask people to self-report their interactions and any interesting incidents while using
the system over time, for example with diary studies.
Listen
 Listen throughout the research and design cycle to help understand existing problems
and to look for new issues. Analyze gathered data and monitor incoming information
for patterns and trends.
 Survey customers and prospective users.
 Monitor analytics and metrics to discover trends and anomalies and to gauge your
progress.
 Analyze search queries: What do people look for and what do they call it? Search logs
are often overlooked, but they contain important information.
20 UX Methods in Brief

1. Usability testing (aka usability-lab studies): Participants are brought into a lab, one- on-
one with a researcher, and given a set of scenarios that lead to tasks and usage of specific
interest within a product or service.
2. Field studies: Researchers study participants in their own environment (work or home),
where they would most likely encounter the product or service being used in the most
realistic or natural environment.
3. Contextual inquiry: Researchers and participants collaborate together in the
participants own environment to inquire about and observe the nature of the tasks and
work at hand. This method is very similar to a field study and was developed to
study complex systems and in-depth processes.
4. Participatory design: Participants are given design elements or creative materials in
order to construct their ideal experience in a concrete way that expresses what matters to them most and why.
5. Focus groups: Groups of 3–12 participants are led through a discussion about a set of
topics, giving verbal and written feedback through discussion and exercises.
6. Interviews: a researcher meets with participants one-on-one to discuss in depth what
the participant thinks about the topic in question.
7. Eyetracking: an eyetracking device is configured to precisely measure where
participants look as they perform tasks or interact naturally with websites, applications,
physical products, or environments.
8. Usability benchmarking: tightly scripted usability studies are performed with larger
numbers of participants, using precise and predetermined measures of performance,
usually with the goal of tracking usability improvements of a product over time or
comparing with competitors.
9. Remote moderated testing: Usability studies are conducted remotely, with the use of
tools such as video conferencing, screen-sharing software, and remote-control
capabilities.
10. Unmoderated testing: An automated method that can be used in both quantitative and
qualitative studies and that uses a specialized research tool to capture participant
behaviors and attitudes, usually by giving participants goals or scenarios to accomplish
with a site, app, or prototype. The tool can record a video stream of each user session,
and can gather usability metrics such as success rate, task time, and perceived ease of
use.
11. Concept testing: A researcher shares an approximation of a product or service that
captures the key essence (the value proposition) of a new concept or product in order to
determine if it meets the needs of the target audience. It can be done one-on-one or with
larger numbers of participants, and either in person or online.
12. Diary studies: Participants are using a mechanism (e.g., paper or digital diary, camera,
smartphone app) to record and describe aspects of their lives that are relevant to a
product or service or simply core to the target audience. Diary studies are typically
longitudinal and can be done only for data that is easily recorded by participants.
13. Customer feedback: Open-ended and/or close-ended information is provided by a self-
selected sample of users, often through a feedback link, button, form, or email.
14. Desirability studies: Participants are offered different visual-design alternatives and are
expected to associate each alternative with a set of attributes selected from a closed list.
These studies can be both qualitative and quantitative.
15. Card sorting: A quantitative or qualitative method that asks users to organize items into
groups and assign categories to each group. This method helps create or refine the
information architecture of a site by exposing users’ mental models.
16. Tree testing: A quantitative method of testing an information architecture to determine
how easy it is to find items in the hierarchy. This method can be conducted on an existing
information architecture to benchmark it and then again, after the information architecture is improved
with card sorting, to demonstrate improvement.
17. Analytics: Analyzing data collected from user behavior like clicks, form filling, and
other recorded interactions. It requires the site or application to be instrumented properly
in advance.
18. Clickstream analytics: A particular type of analytics that involves analyzing the
sequence of pages that users visit as they use a site or software application.
19. A/B testing (aka multivariate testing, live testing, or bucket testing): A method of
scientifically testing different designs on a site by randomly assigning groups of users
to interact with each of the different designs and measuring the effect of these
assignments on user behavior.
 20. Surveys: A quantitative measure of attitudes through a series of questions, typically
more closed-ended than open-ended. A survey that is triggered during the use of a site
or application is an intercept survey, often triggered by user behavior. More typically,
participants are recruited from an email message or reached through some other channel
such as social media.

7 Great, Tried and Tested UX Research Techniques

Technique Number 1 – Card Sorting

Card sorting was originally a technique used in psychological research long before UX
research was a ―thing‖. It’s a simple concept, you write words or phrases on cards, then you
ask the user to categorize them. You might also ask them to label the categories. It’s a great
way to determine whether your Information Architecture (IA) is heading in the right direction
or to examine IA for new products.

Why is card sorting a good technique?

 It’s a very cheap form of research – particularly face-to-face, online tools may be
more expensive.
 It’s a very easy technique for users to understand and for clients to understand too.
 It’s a very easy method to get user input (or even to get user validation) for ideas
early on in a UX project.
Technique Number 2 – The Expert Review
Expert reviews involve a single ―expert‖ walking through a product via the User Interface
(UI) and looking for issues with the design, accessibility, and usability of the product.
There’s no fixed process to follow and the expert review can vary from professional-to-
professional as well from product-to-product. The more expertise the reviewer has in
usability and UX design – the more valuable their input (in most cases).
Why is an Expert Review a Good Technique?
 It’s quick, easy and cheap. This is doubly so when you compare it to more formal
usability testing methods.
 It only takes a single professional to conduct an expert review.



 It is a great way to inform further UX research and caution should be used in taking
an expert review at face value without further user testing.

Technique Number 3 – Eye Movement Tracking

It can be really useful to know where your users are looking when they’re using your
system. It helps with UI design and it helps with knowing how to prioritize certain kinds of
content. This technique was developed for academic research and has been used extensively
in medical research and has now become popular and cost-effective enough to be deployed by
the UX team too.

Why is Eye Movement Tracking a Good Technique?

 Now that technology is advanced enough, eye movement tracking systems are no
longer bulky and invasive and they do not interfere with the results of usability tests.
 The technology is reasonably affordable now. It won’t suit every project budget but it
often won’t break the bank either.
Technique Number 4 – Field Studies
This is actually a number of techniques under a broad heading. It’s all about going out and
observing users ―in the wild‖ so that behaviour can be measured in the context where a
product will actually be used. It includes; ethnographic research, interviews and observations,
plus contextual enquiry.

Why are Field Studies a Good Technique?

 There’s no stronger form of research than observing users behaving as they will when

they use your product. Researchers love these techniques and are often passionate
about persuading their clients to take them on board.
 When conducted well, the outputs of field studies provide the deepest insights into
user issues and how they might be solved.
Technique Number 5 – Usability Testing
A firm favourite that has a long and prestigious history in UX research. Usability testing is
the observation of users trying to carry out tasks with a product. They can focus on a single
process or be much more wide ranging.

Why is Usability Testing a Good Technique?

 Usability tests produce specific results that lead to specific action. Better still, it’s very
hard for people to contradict decisions based on these tests; it’s nearly impossible to
refute evidence of user behaviour.
 You can bring clients into usability testing easily as observers. This increases their
enthusiasm for such testing and shows clearly why such testing adds value.

Technique Number 6 – Remote Usability Testing

This is usability testing but without the need to drag users into your laboratory environment.
It was once complex and expensive but technology has moved on and now it’s fairly simple
to set up and reasonable value for money too.
Why is Remote Usability Testing a Good Technique?
 It often saves time and money when compared to lab testing and it allows for a wider
range of participants when you don’t have to get them in the lab.
 It is closer to field testing in some respects in that the tests are conducted in the user’s
environment and not an artificial lab environment. This delivers better results in many
cases than a lab environment.
Technique Number 7 – User Personas
User personas are a fictional representation of the ideal user. They focus on the goals of the
user, the characteristics that they have and the attitudes that they display. They also examine
what the user expects from the product.
User personas are created from other forms of user research and thus offer an in-depth real-
life vivid portrait that is easy for the whole team to keep in mind when designing products.
User personas have a name and a backstory. They inspire the imagination and keep focus on
the user.
Why are User Personas a Good Technique?
 They are a step above the old user profile and give a more in depth and specific look at
a user.
 They are easy for people to relate to and become part of the team as they are constantly
spoken about during a project.

3.7 USER NEEDS AND ITS GOALS

 Designers must consider the types of needs they are targeting with their products so as
to grab the customer's/user's attention and accentuate the positive aspects of both owning
and using them.

 An understanding of how users think and how they behave in response to sensory
information is essential to design

Maslow's Hierarchy of Needs

Abraham Maslow has provided one of the most prominent accounts of human motivation
with the 'Hierarchy of Needs', representing his most well-known contribution to psychology.
The Levels of Maslow's Hierarchy of Needs

 The most basic human needs are shown at the bottom of the hierarchy, and these are the
physiological drives that ensure survival, including the need for air, food, water, and
sleep

Physiological Needs – The most basic needs of all are those that are needed to sustain us as

individuals and as a species. They include food, drink, shelter, breathing, and sleep.

Safety Needs – The next level of needs to be met are those that offer us some guarantee of
being able to satisfy our physiological needs in the long-term. These include fiscal and personal
security, health, protection from the elements, etc.

Social Needs – The human animal is a social one and there is a deep-seated requirement for
company in life. Social needs include friends, lovers, intimacy, families, communities,
relationships and a sense of belonging.

Esteem Needs – Basic social needs become more complex for people and there is a need for
our efforts to be recognized by others. Esteem needs may be fulfilled by social status,
achievements, mastery, prestige, etc.

Self-Actualized Needs – The final, top layer of the hierarchy is associated with our ability to
grow as an individual. These needs include peace, contentment, self-growth, maximum
experiences, etc.
 The Hierarchy of Needs in Design Terms

The Design Hierarchy from Bottom to Top

 As with Maslow’s hierarchy it is essential for a design to meet the lowest need on the
pyramid before progressing to meet further needs.

 Functionality – for a design to meet any need it must work and it must meet the basic
needs of the user. However, if this is all it does; it may well be seen as having little value
if any to the user in the short to long-term.

 Reliability – the next step is for your design to function in a reliable manner and present
a consistent experience. This may increase the user’s perception of the value of your
product from a purely functional one but it does not add large amounts of value either.

 Usability – then a design should be simple to use and relatively forgiving of user error.
When you meet this need the product is likely to be considered of middling value by the
user.




 Proficiency – a design which helps a user to do more or achieve more is one which is
likely to be desired as a high-level of value and fulfil user needs more effectively.

 Creativity – the final step in the design pyramid is to create products which fulfil all
other needs and are beautiful not just in form but also in interaction and function. This
is where the highest user value is placed

Flow Design Processes - Focusing on the Users' Needs:

 To create great user experiences – designers must focus on the user’s needs and that
means developing an understanding of how to create the best task flow for that user.
 The better you facilitate the user moving from start to finish on a particular process –
the easier the product is to work with and the more likely that you are to deliver an
awesome user experience.
 UX designers are concerned with user flows.

Example User flow:

A retail website might include:
 User wants to buy a new product
 User wants to research alternative products
 User wants to return a product
By mapping out all the possible objectives and comparing them to business objectives – it
becomes easy to create user flows. Flows are simply the process steps from the user arriving
on a website to completing their task or tasks.
User Goals and How They Influence Information Design Decisions
 Understanding user goals and using this understanding to influence design decisions is
essential
 It involves understanding the information users need for performing their tasks and
how they want to feel as they undertake them.
User Goals in Each Step of the Design Process
Taking user goals into account will impact decisions along all steps of designing an
information visualisation.

 Define the problem.

 Define the data to be represented.
 Define the dimensions required to represent the data.
 Define the structures of the data.
 Define the interaction required from the visualisation.
Step 1 – The Main Step of Defining the Problem
When designing information visualisations, understanding the information people need to
perform their tasks is the starting point. It requires some user research

Steps 2 to 5 – The Remaining Steps of Designing the Information

Once you understand the user needs and the context in which they will be using the information
design, you can proceed to step 2 and start selecting the data necessary for providing them with
the insights they need.

Determine the right dimensions and structures so as to translate this data into relevant
information. That is what you do in steps 3 and 4.

Finally, in step 5, you need to define the interaction required from the visualisation.
3.8 KNOW ABOUT BUSINESS GOALS:

 UX/UI is a bridge between business and clients. Its purpose is to help the business
achieve its goals.
 UX/UI helps your business grow by creating a memorable and recognizable brand,
expanding your audience, increasing conversion rates, improving user retention and
loyalty, and helping you collect and analyze data.
1. Imbalance toward users
User goals are important, but they are secondary. Without achieving the goals of your users,
you cannot achieve the goals of your company. Designers typically put all effort into satisfying
users, inadvertently putting business goals on the backburner. It’s no surprise that designers
are often called ―users’ advocates.‖
2. Imbalance toward business
This is the other extreme. When a businessman has a good grasp of what UX/UI is capable of,
he is often tempted to use this knowledge unethically. User interactions with the product morph
into data collection, manipulative product pushing, and fostering a dependency that is closer
to drug addiction than to healthy business practices. The users are exploited as an audience that
disseminates certain information. This approach is typical of the companies that value their
business above all else.
3. Perfect balance
Data collection, advertising on social media platforms, or creating engaging products is a
common practice. No business can avoid them. But to establish effective interaction, business
goals and user goals need to be balanced.
Client-oriented design is considered the optimum solution for small companies, up-and-
coming startups, consumer goods, or novel and unusual products.
Business-oriented design, in its turn, does not imply that the company only cares about profits.
It’s design that works toward the brand’s image, making it more respectable and trustworthy
in the eyes of both partners and clients.
4. Data collection
To solve any problem, you need input data. Digital products often turn out to be ineffective
just because their creators were not provided all the necessary information by their clients.
Here are some common reasons for that:
 The client only has a vague vision of his business prospects and has no clearly
established goals and strategies.
 The client does not know what marketing data are required to design a digital product.
 The client fails to provide complete information and sets arbitrary requirements with no
basis in marketing research.
 The client provides only a minimum of information because he is hesitant to share it.
 USP is the central bridge support
 UX/UI needs another, central support. The unique selling proposition is between the
business and the clients. This is what the user comes for. On the one hand, the USP
characterizes your business, and on the other, it affects the consumer.
5. Action goals
 If a goal does not encourage action, then it’s either poorly defined or not a goal at all. A
goal must excite the imagination and galvanize into action.
 This applies to both business goals and user goals.
 If everything is done right, then every time the user accomplishes their goals, the
business wins as well
 Action goals:
 have a motivational core;
 imply a solution to problems;
 are emotionally exciting.
6. Maintaining the supports
In reality, maintaining all business supports equally is hard. The balance can shift from time
to time. You have to be aware which support needs attending to at the moment.

How to accomplish business goals and user goals

 Set business goals and user goals.
 Make these goals clear to project designers.
 Remember the ―perfect bridge‖ and all its supports. Devote as much work to the
company’s image as to the product and user interests.
 Maintain a balance between business goals, user goals, and product goals so that the
bridge does not become crooked at any point.
 Work with designers who understand the importance of all goals and are willing to
seek a compromise solution.

• User experience (UX) design is often seen as a balancing act between satisfying user needs
and meeting business objectives.
• Designers must navigate the tension between these two priorities to create successful digital
products.
• Designing for user needs is critical to creating products that are user-friendly and meet the
expectations of the intended audience.

• UX designers must understand the users they are designing for, including their needs, goals, and
pain points.
• This understanding enables designers to create products that are intuitive and easy to use,
resulting in a positive user experience.

How to balance user needs and business goals

It is essential for designers to find a balance that satisfies both user needs.
• One way to do this is to involve stakeholders from both sides early in the design process. By
doing so, designers can ensure that the business goals are aligned with user needs and that the
product they create is valuable to the company and the user.
• Another way to balance user needs and business goals is to prioritize the most critical user
needs and business objectives. Designers should identify the core needs of their target audience
and focus on designing a product that meets those needs while contributing to the business’s
objectives.
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

UNIT-IV WIREFRAMING, PROTOTYPING AND TESTING

SKETCHING PRINCIPLES:

UI or UX sketches are important to get the basic concept of your design before adding other
technical details. These UI/UX sketch techniques could assist you before, during, and after
the sketching process. A well-planned UI/UX sketching will give a clear direction in the
design concept and save you time from fixing many errors back and forth.

1: Define goals & target audience

Define the user’s problem, the UI/UX sketch goals, and research your target audience.
What do you need to sketch to reach your goals? This will create a rough structure in your
mind on the flow of your sketch that could ease the sketching process.
2: Set time frame

Sometimes, it is easy to get distracted or overwhelmed with too many ideas at one time. Set
a time frame that you are comfortable with for you to jot down ideas and reflect on the
ideas. This way, you can limit yourselves from over thinking and limit your ideas to good
quality ideas over quantity.
3: Brainstorming

Get the juice out of your brain! Create a mind map or any form of brainstorming method that
you prefer by using the goals and time frame as guidelines. What should you sketch first?
What are the arrangements of the content going to be like? Will each of your sketch
components be relevant to solve the user’s problem or will the components add more issues
towards the user?

P a g e 1 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

At this stage, you can add or remove your ideas as you please before you start to sketch. This
will save some time of keeping erasing or correcting back and forth. Ideally, you can share
your ideas with someone else to get more feedback.

4:Scribble
Start scribbling your ideas! Sketching should be as simple as possible without in-depth
detailing. The idea of scribbling is to explain the functionality of your UI/UX design. Write
down or label your sketch for a clearer view of the flow of your design. What would the user
see first, where will their eyes be attracted to next, and will the organization of the design
emphasize their understanding of your design.

Scribble what you see that inspires you. Ideas often occur when we least expect them. While
watching tv, hanging out with friends, or spending time with nature. Bring your notebook
along and scribble the ideas anytime you are inspired by something to improvise your design
concept.
5: Use arrows

Re-guide your mind to understand your design by using arrows. Arrows help to highlight
the flow of your design from one element to one element. It emphasizes your understanding
of your design and the logic behind your concept. This is a good practice to prevent
forgetfulness and frustration the day after you complete your UI/UX sketch. It also helps
when you want to explain your design to others.
When in doubt, follow the arrows.

6: Photograph samples

Capture the features of the world through photograph samples. Other than scribbling, you
can use your phone or camera to capture the attractive elements on the go and transfer the
idea onto your sketch.

P a g e 2 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

7: Types of Stationeries

Use stationeries that will support your understanding of your sketch. The use of stationery
emphasizes the different elements of your design. Some examples are black pens with
different thicknesses, UI Stencil, sketchbook, folder, and paper tray.

Keep your UI/UX sketch as organized as possible. Put it in place and for an easier reference,
keep the sketch paper in sequence or number the paper.

8: Sketch in layers

Sketching in layers allows you to outline your design step-by-step and add on other details
later. Get the grasp of your ideas on your first few layers, if you are not happy with the layers,
you can erase and start again. Once you are confident in building the consistent momentum
of sketching, you can adjust the thickness from time to time, and increase the hue of your
instrument accordingly.

9: Add content accordingly

Similar to adjusting sketch layers, add the content of your design accordingly. The first
complete sketch might be lacking (usually is lacking) some content. Put your sketch aside
and revisit the sketch with fresh eyes and mind. Review the organization, the elements, and
the direction of your design.

10: Record fail and successful attempts

The record of failed attempts would be helpful so that you would not repeat the same mistake
again. Write down or understand the reasons those ideas are not working. This will help you
to find a better solution for your design.

P a g e 3 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

SKETCHING RED ROUTES:

Red routes are the critical tasks that deliver the most value to your users. These routes are the
foundational user journeys that make your product valuable and typically capture 90% or more
of your user’s actions.

Origin of the Red Route

Introduced in London in 1991, red routes are major roads on which vehicles are not permitted to
stop. Their goal is to allow high traffic volumes to flow freely without obstruction. Typically, red
routes are marked with red lines on the sides of the road.

When applied to design, these red routes are the critical and frequent paths that users take to
complete their tasks.

Identify Red Routes

• 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

A great exercise is to think about the applications that you use daily and think about your habitual
and repetitive tasks. Could these tasks be optimized? Would you still use the app if more friction
was introduced to these tasks? Here are some red route examples from more common apps:

• Uber
• Rider Red Route: Requesting a ride
• Rider Normal Route: Adding a payment method
• Driver Red Route: Accepting a ride
• Driver Normal Route: Changing profile settings

P a g e 4 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

• Airbnb
• Guest Red Route: Booking a room
• Guest Normal Route: Leaving a review
• Host Red Route: Managing reservations
• Host Normal Route: Updating listing pictures
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.

P a g e 5 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

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.
• Most importantly, it helps your team build and optimize product features that deliver the
most value to your customers and drive your key metrics.
• "Red Routes" typically refer to major roads in urban areas where stopping,
parking, and loading restrictions are strictly enforced to maintain traffic flow. Here
are some key points you might want to consider when sketching notes about Red
Routes:

Definition: Red Routes are major roads designated by a red line along the edge of the pavement.
They are meant to ensure constant traffic flow by prohibiting activities that could hinder it, such
as parking, stopping, or loading.

✓ Traffic Flow: The primary goal of Red Routes is to keep traffic moving smoothly and
efficiently, especially during peak hours. This helps reduce congestion and travel times.
✓ Restrictions: Note the types of activities that are restricted on Red Routes:
✓ No parking: Vehicles cannot be parked on the road, even temporarily.
✓ No stopping: Vehicles cannot come to a halt, except in emergencies or at designated areas
like bus stops.
P a g e 6 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

✓ No loading/unloading: Commercial activities like deliveries are restricted to specific

times and areas.
✓ Clear Signage: Red Routes are often marked with clear signage indicating the restrictions.
Look for signs with the red route symbol and associated regulations.
✓ Enforcement: Red Routes are typically rigorously enforced to maintain their
effectiveness. Local authorities use CCTV cameras, traffic wardens, and automated
systems to monitor and issue fines for violations.
✓ Exceptions: Some Red Routes might have specific exceptions, such as allowing
loading/unloading during certain hours or granting permits to certain vehicles (e.g.,
emergency services).
Benefits:

✓ Reduced congestion: By preventing activities that disrupt traffic flow, Red Routes help
keep the roads clear.
✓ Improved air quality: Reduced idling and smoother traffic flow can lead to lower
emissions.
✓ Faster travel times: Vehicles can move more quickly along these routes without frequent
stops.
✓ Impact on Businesses: While Red Routes prioritize traffic flow, they can pose challenges
to businesses that rely on deliveries or curb-side services. Finding a balance between
traffic management and supporting local commerce is important.
✓ Public Transport: Red Routes often include dedicated lanes for buses or trams, which
further enhances public transport reliability.
✓ Urban Planning: Red Routes are part of broader urban planning strategies to create more
efficient transportation networks. They might complement initiatives like pedestrian
zones, cycling lanes, and public spaces.
✓ Community Awareness: Local authorities often engage in public awareness campaigns to
educate drivers about Red Routes, their benefits, and the consequences of violations.
✓ Technology and Future Developments: As technology advances, automated systems for
monitoring and enforcement might become more sophisticated, helping ensure
compliance and safety.
✓ Remember to organize your notes in a clear and concise manner, using bullet points,
headings, or diagrams to visually represent the information. These points should give you
a good foundation for understanding and explaining the concept of Red Routes.

P a g e 7 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

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 (%).

✓ Responsive design has significant benefits, and it's a default for web design to support
device switching.
✓ 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.

Why Responsive Design is so Popular:

In the early 2010s, designers had to address a historical phenomenon. More users were starting
to access web material on handheld devices than on desktops. There were two main design
approaches to deal with designing across devices:

Designers could craft several versions of a design optimized for different devices and make each
have fixed dimensions (adaptive design approach).

They could work on a single, flexible design that would stretch or shrink to fit the screen
(responsive design approach).

Organizations and designers found the benefits of responsive design hard to ignore. Rather than
work with absolute units (e.g., pixels) on separate versions, designers focused on just one design
and let it flow like a liquid to fill all "containers."

Understanding the Language of Responsive Design

Responsive design has three core principles:

Fluid Grid System

P a g e 8 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

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.

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.

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 the new size. Commonly, designers use three sizes when designing responsive
websites: 1024 & upwards, 1023-768, and 767-320 px.

In this image, you can see how the placement of the columns is rearranged depending on the
screen real estate available. The content is displayed in one column in the smartphone, two on
the tablet and three on the desktop.

Media queries work best with a "mobile first" approach where you define what you want on
mobile and then scale up from there. You’ll need to test content to see where breakpoints occur
and plan them. Eventually, you may find you can predict breakpoints based on a device's screen
resolution.

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,

P a g e 9 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

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. Check your visual hierarchy and use
progressive disclosure and navigation drawers to give users needed items first. Keep nonessential
items (nice-to-haves) secondary.

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. You can still run
into difficulties if you use it without caution. For example, it can restrict your control over the
design's screen sizes; consequently, if you do not set media queries upfront, the elements could
shift independently. Also, it is typical to run into issues with advertisement formats, especially
on mobile devices.

Still, responsive design aids great UX since, by default, it requires uniformity, seamlessness, and
simplicity in your design efforts. It is SEO-friendly, and the multiple CMS and frameworks, such
as WordPress and Bootstrap, make it very cheap to implement.

RESPONSIVE DESIGN:

Responsive design is an approach to web design that aims to make websites and applications
adapt to different screen sizes and devices. The goal is to ensure that the content and layout of a
website look and function well on various devices, including desktops, laptops, tablets, and
smartphones.

P a g e 10 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Key Concepts:

Fluid Grids: Using relative units like percentages instead of fixed units like pixels for layout
elements. This allows the layout to adapt smoothly to different screen sizes.

Flexible Images: Images that can scale and adjust according to the screen size without losing
quality or breaking the layout. This can be achieved using CSS properties like max-width: 100%;.

Media Queries: CSS rules that apply different styles based on the screen size or device
characteristics. Media queries enable you to create breakpoints where the design changes to
accommodate different screens.

Viewport Meta Tag: A meta tag in the HTML head that controls how the website is displayed on
mobile devices. It helps ensure that the site's content fits within the viewport.

Best Practices:

Mobile-First Design: Start designing for the smallest screens first and then progressively enhance
the design for larger screens. This approach ensures that the core content is prioritized and
essential for all devices.

Use Media Queries: Implement breakpoints in your CSS to target specific screen sizes and adjust
the layout and styling accordingly. Common breakpoints include small (e.g., smartphones),
medium (e.g., tablets), and large (e.g., desktops).

Relative Units: Use relative units like percentages, ems, and rems instead of fixed units to create
a more flexible layout that adapts to various screen sizes.

Test on Real Devices: Test your responsive design on actual devices to ensure that it works as
expected. Emulators and browser developer tools can help, but real-world testing is crucial.

Optimize Images: Use modern image formats like WebP, and consider using responsive image
techniques like the srcset attribute to serve different image sizes based on the device's capabilities.

Prioritize Content: Focus on delivering the most critical content first, especially on mobile
devices where screen space is limited. Use progressive disclosure to present additional
information as needed.

Touch-Friendly Design: Design with touch interactions in mind, such as ensuring tap targets are
appropriately sized and spaced to accommodate fingers.

P a g e 11 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Performance Optimization: Minimize the use of large files, unnecessary scripts, and heavy CSS.
Aim for fast loading times on all devices.

Tools and Frameworks:

CSS Frameworks: Bootstrap, Foundation, and Bulma offer responsive grid systems and pre-
designed components to streamline responsive design.

CSS Grid and Flexbox: CSS Grid and Flexbox are layout models that make it easier to create
complex and responsive layouts without relying heavily on media queries.

Viewport Units: CSS provides units like vw (viewport width) and vh (viewport height), which
can be useful for creating responsive typography and spacing.

Responsive Testing Tools: Browser developer tools, as well as online tools like Browser Stack
and Cross Browser Testing, can help you test your design across various devices and browsers.

Remember that responsive design is an ongoing process. As new devices and screen sizes
emerge, it's important to stay updated and adapt your designs accordingly.

WIREFRAMING:

Wire framing is a visual representation of the layout and structure of a website, application, or
user interface. It is a crucial step in the design process that helps to outline the basic elements,
functionality, and content placement of a digital product before diving into detailed design and
development.

Key Concepts:

Simplicity: Wireframes are typically low-fidelity sketches that focus on the core layout and
functionality, avoiding intricate visual details.

Hierarchy: Wireframes establish the hierarchy of elements, such as headings, content blocks,
buttons, and navigation, to guide users through the interface.

Functionality: Wireframes indicate the interactions and behaviors of different UI elements,

providing a sense of how the user will navigate and interact with the product.

Content Placement: Wireframes define where different types of content will be positioned on the
screen, aiding in content organization and user flow.

P a g e 12 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Feedback: Wireframes facilitate early-stage feedback from stakeholders, clients, and team
members before moving on to more detailed design and development.

Types of Wireframes:

Low-Fidelity Wireframes: Simple sketches that focus on the overall structure and layout. They
are quick to create and ideal for brainstorming and initial discussions.

Mid-Fidelity Wireframes: More detailed than low-fidelity wireframes, these include basic design
elements and give a clearer sense of the interface's look and feel.

High-Fidelity Wireframes: These wireframes closely resemble the final design, incorporating
finer details such as typography, colors, and imagery. They provide a comprehensive view of the
product's visual and interactive aspects.

Best Practices:

Start with a Plan: Clearly define the purpose, goals, and user needs of the project before diving
into wireframing.

Focus on Functionality: Prioritize demonstrating how different components and interactions will
work over visual aesthetics.

Keep it Simple: Avoid excessive detailing and decorative elements. The goal is to communicate
the layout and functionality efficiently.

Use Consistent Elements: Adhere to UI conventions and patterns to make the wireframes more
intuitive for users.

Label Elements: Provide labels for buttons, fields, and other interactive elements to convey their
purpose and functionality.

Iterate and Refine: Wireframes are a work in progress. Gather feedback, iterate, and refine them
before moving on to the design and development stages.

Consider User Flows: Incorporate user flows and navigation paths to ensure a coherent and user-
friendly experience.

Collaborate: Involve stakeholders, designers, developers, and users in the wireframing process
to ensure a well-rounded perspective.

P a g e 13 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Tools for Wireframing:

Pen and Paper: Quick and easy for brainstorming and initial concepts.

Digital Tools: Software like Adobe XD, Sketch, Figma, Balsamiq, and Axure RP offer
specialized tools for creating digital wireframes.

Prototyping Tools: Some wireframing tools also provide prototyping features, allowing you to
create interactive mockups.

Remember that wireframing is a crucial step in the design process that helps clarify the project's
scope, functionality, and user experience. It's an essential tool for effective communication
between design teams, stakeholders, and developers.

What are wireframes all about? The designs you received are called wireframes (sometimes
called wires, mockups, or mocks). A wireframe is a schematic, a blueprint, useful to help you
and your programmers and designers think and communicate about the structure of the software
or website you're building.

Not dissimilar to an architectural blueprint, a wireframe is a two-dimensional skeletal outline of

a webpage or app. Wireframes provide a clear overview of the page structure, layout, information
architecture, user flow, functionality, and intended behaviors. As a wireframe usually represents
the initial product concept, styling, color, and graphics are kept to a minimum.

Wireframes can be drawn by hand or created digitally, depending on how much detail is required.

Wireframing is a practice most commonly used by UX designers. This process allows all
stakeholders to agree on where the information will be placed before the developers build the
interface out with code.

CREATING WIREFLOWS:

Wireflows, also known as wireframe flows or schematic flows, are a design documentation
technique that combines elements of wireframes and flowcharts. They help designers and
stakeholders visualize the user interactions, screen transitions, and user flows within a digital
product or application. Wireflows are especially useful for demonstrating how different
screens/screenshots are connected and how users navigate through the various parts of the
interface.

P a g e 14 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

To create effective wireflows notes, follow these steps:

1. Identify User Flows: Determine the key user flows or scenarios that you want to
document. These could be tasks, actions, or processes that users will perform within your
application.
2. Gather Content: Collect all the relevant wireframes, sketches, or mockups that represent
the screens involved in each user flow. Ensure that you have a clear understanding of the
sequence of screens and the interactions between them.
3. Tools: You can use specialized design tools like Sketch, Figma, Adobe XD, or even basic
tools like PowerPoint, Keynote, or paper and pen to create wireflows.
4. Start with Screens: Arrange the wireframes or sketches of the screens in the order they
appear in the user flow. Each wireframe should represent a distinct screen or interface
state.
5. Connect Screens: Use arrows, lines, or connectors to indicate the flow of the user journey
between screens. Clearly label these connectors with short descriptions that explain what
triggers the transition (e.g., "Click on 'Next'", "Swipe left", etc.).
6. Annotations and Notes: Add annotations and notes near each screen or connector to
explain the purpose of the screen and any specific interactions, features, or user actions
associated with it.
7. Include Decision Points: If your user flow involves decision points (e.g., "If the user is
already logged in, skip to screen X"), clearly indicate these in your wireflows.
8. Error Handling: Include screens or branches that show how the system responds to errors
or unexpected user actions. This could include error messages, validation alerts, and
recovery paths.
9. Feedback and Review: Share your wireflows with other team members, stakeholders, or
users to gather feedback and make improvements. Make sure the flow makes sense and
is easy to follow.
10. Keep It Clear and Simple: While documenting user flows, remember that the goal is
clarity. Keep the design simple and easy to understand. Avoid clutter and unnecessary
detail.
11. Versioning: As the design evolves, it's common to have multiple versions of wireflows.
Make sure to clearly label and date each version to keep track of changes.
12. Accessibility Considerations: If applicable, make sure your wireflows account for
accessibility features and considerations in your user flows.
13. Interactive Prototypes: If possible, you can use tools that allow you to create interactive
prototypes from your wireflows. This can provide a more immersive understanding of
the user flow.

P a g e 15 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Wire flow creation process:

Describe the need and problem in a user story. For example, user signup — setting the username,
email, and password .

Identify the key screens in the interface. ...

Connect the screens with arrows in the order users would move forward.

Task flows, user flows, and flowcharts — these terms describe diagrams designers use to
document user interactions and show directional flow and decision-based logic. What
differentiates task flows from flowcharts is the level of detail and processes they include, and the
term "user flow" is often used interchangeably with both task flows and flowcharts.

However, product designers have been using hybrid methods for wireframing for a long time.
We're talking about wireflows — a series of wireframes connected to document a user flow. The
type of diagram you want to use for a specific user flow depends on the type of app you are
designing — specifically, how many unique pages it has or if the page's content dynamically
changes based on user interaction.

BUILDING A PROTOTYPE:

5 ways to improve your prototyping workflow

1.Use master components to speed up prototype connections:

Let's say you're designing a screen with some sort of persistent navigation, like a tab bar.
You have to link each menu item to a specific frame (like linking the 'home' button back to
the home frame). If that menu is repeated across multiple screens, as tab bars often are, the
tedious task of linking can take way longer than it should.

THERE'S A BETTER WAY. Early in your process, turn your hamburger menu into a
component. Once you've done that, link each menu item of that master component to the
appropriate frame. Moving forward, any time you create an instance of the hamburger

P a g e 16 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

component, all the connections will automatically propagate! No more beating your head
against a wall with busy work.

One caveat: This doesn't work if you're dragging an instance of a component from a team
library. Because the master component is located in a different file than yours, out of the
gate, you won't be be able to leverage the previously mentioned tip.

Instead, create a new master component with the instance from your library inside it. Figma
allows you to deep select down into the nested layers within each component, so you can
still link multiple menu items from the instance without it detaching from the master. I often
place some of these repeated components off to the side, outside my mockups, as a
convenient place to access them and maintain the linked connections to different screens.

Link to Figma file

2. Use components for scrolling content

When you're designing longer scrolling screens with fixed elements, such as status bars,
headers or footers, you can simply drag the bottom of the frame down to accommodate the
extra content. If the content exceeds the height of the viewport for the device you selected,
Figma will automatically scroll the frame when in prototype mode. Handy, right?

But there are times when you want to see what's visible in the viewport by default (i.e. before
the user scrolls). That gives you a sense of what content is initially cut off when users first
navigate to that prototype frame. Devices with different viewport sizes will segment the
content in different places. To make it easy to peruse these different views, use a component.

To see what content is initially visible in a scrollable frame:

1) Turn your scrolling content into a component.2) Make sure you've set up constraints for
all of the elements inside.3) Ensure "clip content" is checked in the properties panel (this
should be enabled by default).4) Flip to prototyping mode and enable the scrolling direction
you want by configuring the "Overflow Behavior."5) Place an instance of this component
within your designs and resize them to fit.

Now you can get an idea of what is in view for each device size and manage all of your
scrolling content centrally with a single component.

Link to Figma file

P a g e 17 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

3. Timed delays and overlays to simulate interactions

With prototypes, instant interactions can feel abrupt for the end user. You may want to add
elements of realism, like simulating loading screens or adding a short delay.

One light-touch way you can use to do this is through the after delay trigger, where an
interaction takes place after a set duration. Timed delays are especially useful when paired
with overlays, as you can see in the simple form example below.

Users expect the form to take them to a confirmation page, but if that happens too abruptly
they may feel disoriented. By using overlays, with manual positioning and the swap overlay
feature, we can create a simple button interaction in tandem with timed delays. The user
then experiences a submit interaction, brief loading sequence and success message before
the confirmation page appears.

4. A table of contents:

Prototypes in Figma are currently limited to single pages. This allows you to have separate
prototypes in a single document, all with their own unique URLs that you can share with
people when they want to view them. But sometimes, you just want to share one link to
people that lets them see multiple design options.

To do this in Figma, create a table of contents frame as your prototype starting screen. Then,
link each list item in the TOC to a different user flow. From the back-end Figma will
interpret all of this as one prototype, but end users will experience them as different
prototypes with a selection between them at the start. Note: All your user flows must be on
the same page for this to work.

5. Using Observation Mode

Do you know about Observation Mode in Figma? It lets you follow along with another
person's screen while they present something or riff. You can click your collaborator's avatar
in the top right corner of the editor to see everything they're seeing in a design file.

Observation Mode ALSO works with prototypes. You can click your collaborator's avatar
to know where they are in the prototype and what they're doing. This is great for remote user
tests when you want to study how a user is interacting with your design. It's also a great way
to get everyone to follow along when presenting your work in a meeting.

P a g e 18 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Get started with prototyping

I hope some of these tips will help you accelerate your prototyping process. All of the
examples in this post can be found in this starter file. As always, feel free to share your tips,
questions and and experiences in our online community on Spectrum.

If you are looking for more info on getting started with prototyping check out Getting Started
with Prototyping in our Help Center.
Absolutely, building a prototype for user interface (UI) and user experience (UX) is a crucial step
in designing digital products, such as websites or mobile apps. It allows you to visualize and test
the interaction and flow of the user interface before committing to full development. Here are
some notes to consider when building a UI/UX prototype:

1. Define Goals and User Needs:

Clearly understand the goals of your digital product and the needs of your target users. What
problems are you solving, and how will your product address them?

2. Choose the Right Tools:

Select prototyping tools that match your project's complexity and your team's skills. There are
various tools available, from low-fidelity wireframing tools to high-fidelity interactive
prototyping tools.

3. Low-Fidelity Wireframes:

Start with low-fidelity wireframes to outline the basic layout, structure, and content placement.
Focus on the overall information hierarchy and user flow.

4. Information Architecture:

Organize the content in a logical and intuitive manner. Consider how users will navigate through
the interface and find the information they need.

5. Visual Design:

Once your wireframes are in place, work on the visual design. Define color schemes, typography,
icons, and other visual elements that align with your brand and appeal to your target audience.

6. Interactive Elements:

Build interactions into your prototype to demonstrate how users will interact with various
elements. This can include buttons, menus, forms, and more.
P a g e 19 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

7. High-Fidelity Prototyping:

As your design becomes more refined, create high-fidelity prototypes that closely resemble the
final product's look and feel.

8. User Flow and Navigation:

Test different user flows to ensure that the navigation is intuitive and users can easily achieve
their goals.

9. Gestures and Animations:

If your digital product involves touch interactions (e.g., mobile apps), incorporate gestures and
animations to mimic the real user experience.

10. Test on Real Devices:

- Test your prototype on actual devices to ensure that it functions properly across various screen
sizes and orientations.

11. User Testing:

- Conduct usability testing with real users. Observe how they interact with your prototype and
gather feedback to identify pain points and areas for improvement.

12. Iterate and Refine:

- Use the feedback from user testing to iterate and refine your prototype. Don't hesitate to make
changes based on user insights.

13. Responsive Design:

- Ensure your prototype is responsive, meaning it adapts gracefully to different screen sizes and
devices.

14. Accessibility Considerations:

- Design your prototype with accessibility in mind, ensuring that all users, including those with
disabilities, can interact with it effectively.

15. Collaboration:

P a g e 20 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

- Collaborate with team members, including designers, developers, and stakeholders, throughout
the prototyping process to gather diverse perspectives and insights.

16. Presenting to Stakeholders:

- When presenting your UI/UX prototype to stakeholders or clients, clearly explain the design
choices and user flows to convey the intended user experience.

Remember that a UI/UX prototype is a dynamic tool to iterate and refine your design, allowing
you to identify and address potential issues before moving into development. It's an essential step
to create a user-centered and effective digital product.

BUILDING HIGH:

Creating a high-quality User Interface (UI) and User Experience (UX) involves a combination
of design principles, user-centric thinking, and attention to detail. Here are some essential notes
to consider when building a UI/UX:

User Interface (UI) Design:

Consistency: Maintain a consistent design throughout the application or website. This includes
using the same fonts, colors, icons, and spacing across all screens.

Typography: Choose readable fonts and maintain proper hierarchy for headings, subheadings,
and body text. Ensure appropriate line spacing and line lengths for comfortable reading.

Color Palette: Select a harmonious color palette that resonates with your brand and creates a
pleasant visual experience. Use colors consistently for different UI elements.

Whitespace: Use ample white space around elements to reduce visual clutter and enhance
readability. Proper spacing improves the overall aesthetics.

Hierarchy: Organize content using visual hierarchy. Use different font sizes, colors, and spacing
to highlight important information and guide users through the content.

Navigation: Design a clear and intuitive navigation system. Utilize menus, breadcrumbs, and
navigation bars to help users find their way around the application easily.

P a g e 21 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Buttons and Call-to-Actions (CTAs): Make buttons and CTAs stand out by using contrasting
colors, distinct shapes, and clear labels. Ensure they're placed where users naturally expect them.

Icons: Use meaningful icons to enhance user understanding. Avoid overloading the UI with
icons, and ensure they're universally recognizable.

Responsive Design: Create designs that adapt seamlessly to different screen sizes and devices,
ensuring a consistent experience across platforms.

Feedback: Provide visual feedback for user actions, such as button presses or form submissions.
Feedback helps users understand that their interactions are being recognized.

User Experience (UX) Design:

User-Centered Design: Keep the user at the center of your design decisions. Understand their
needs, preferences, and pain points to create a solution that addresses their problems.

User Research: Conduct user research to gather insights about your target audience. Use
techniques like surveys, interviews, and usability testing to refine your design.

Wireframing and Prototyping: Create wireframes and prototypes to visualize the user journey
and interactions before diving into the final design. This helps in identifying potential issues early
on.

Information Architecture: Organize content in a logical and hierarchical manner. Use categories,
labels, and filters to help users find information quickly.

Accessibility: Ensure your design is accessible to users with disabilities. Follow accessibility
guidelines to make your UI usable by everyone.

Loading Times: Optimize loading times to provide a seamless experience. Minimize unnecessary
animations and heavy graphics that might slow down the application.

User Flows: Map out user flows to understand how users will navigate through your application.
Identify potential pain points and streamline the process.

Feedback Loops: Incorporate feedback mechanisms, such as error messages, success

notifications, and progress indicators, to keep users informed about their actions.

Testing and Iteration: Continuously test your designs with real users and gather feedback. Use
this feedback to refine and iterate on your UI/UX.
P a g e 22 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Emotional Design: Consider the emotional impact of your design. Use visuals, colors, and
interactions to evoke positive emotions and create a memorable experience.

Remember that UI and UX are closely interconnected, and a successful product requires a
balance between both aspects. By following these notes and focusing on user needs, you can
create a UI/UX that delights users and provides a valuable experience.

FIDELITY MOCKUPS:

Certainly, I can help you with that! Creating Fidelity Mockups involves designing user interfaces
with a high level of detail, while UX notes refer to annotations and explanations that provide
context and guidance for understanding the design. Here's a breakdown of both aspects:

1. Fidelity Mockups:

Fidelity refers to the level of detail and realism in your mockup design. There are two main types
of fidelity: low-fidelity and high-fidelity.

Low-Fidelity Mockups: These are rough sketches or wireframes that provide a basic layout of
the user interface without focusing on visual details. They are great for conceptualizing and
iterating on ideas without investing too much time in aesthetics.

High-Fidelity Mockups: These mockups are much more detailed and polished. They include the
visual elements like colors, typography, images, and more, which closely resemble the final
product. High-fidelity mockups are useful for presenting a near-realistic representation of the
user interface and can be a crucial step before moving into the actual development phase.

2. UX Notes:

UX notes are annotations or explanations added to the mockup to provide context, guidance, and
rationale for the design decisions made. They help communicate your design intentions to
stakeholders, developers, and other team members.

Here are some things to consider including in your UX notes:

Functionality Explanation: Describe the purpose of each element and its intended functionality.
This helps others understand how the user interacts with different parts of the interface.

User Flow Clarification: Explain the sequence of actions users will take to achieve a specific
goal. This could involve detailing the steps involved and any potential decision points.

P a g e 23 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Interactions and Animations: If your design includes interactive elements or animations, explain
how they work and what purpose they serve. This can help developers implement these features
accurately.

User Persona Consideration: Mention if any design choices were made with specific user
personas in mind. This showcases that you've considered the user's needs and preferences.

Color and Typography Rationale: If you've chosen specific colors, fonts, or visual styles, provide
reasoning for these choices. This helps maintain design consistency and aligns the design with
the brand or product guidelines.

Responsive Design Notes: If your design is responsive, explain how the interface adapts to
different screen sizes and orientations.

Accessibility Considerations: Note any design decisions made to enhance accessibility, such as
color contrast, text size, and keyboard navigation.

User Feedback Incorporation: If you've iterated the design based on user feedback or usability
testing, mention these changes and how they improve the user experience.

In summary, Fidelity Mockups with detailed visual elements and UX notes with clear
explanations and rationale work together to communicate your design effectively to various
stakeholders, ensuring a smoother development process and a better user experience.

DESIGNING EFFICIENTLY WITH TOOLS:

Designing efficiently with tools involves using User Interface (UI) and User Experience (UX)
principles to create intuitive, visually appealing, and functional digital products. Here are some
notes on how to achieve this:

1. Understand the Basics:

UI: Focuses on the aesthetics and presentation of the product, including layout, colors,
typography, and visual elements.

UX: Encompasses the overall experience users have with the product, involving usability,
accessibility, and the emotional response it elicits.

2. User-Centered Design:

P a g e 24 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Put the user at the center of your design decisions. Understand their needs, preferences, and
pain points through user research.

Create user personas to represent target audience segments, helping you design with specific
users in mind.

3. Wireframing and Prototyping:

Begin with low-fidelity wireframes to outline the layout and structure of your design. This
helps you quickly iterate through different ideas.

Move on to high-fidelity prototypes to visualize the final design. Prototypes allow for
interactive testing and feedback before development.

4. Consistency and Patterns:

Maintain consistency in design elements such as colors, typography, icons, and buttons. This
creates a unified and coherent experience.

Utilize design patterns that users are familiar with, such as navigation bars, search bars, and
action buttons. Consistent patterns enhance usability.

5. Visual Hierarchy:

Establish a clear visual hierarchy by prioritizing important elements using size, color, and
contrast.

Guide users' attention through the use of focal points and the "F" or "Z" reading patterns
commonly followed by users.

6. Typography and Readability:

Choose readable fonts and font sizes. Typography affects the overall readability and aesthetics
of your design.

Use font weights and styles to differentiate content hierarchy. Headings, subheadings, and body
text should have distinct styles.

7. Color Scheme and Accessibility:

Select a color scheme that aligns with your brand and enhances readability. Consider color
psychology to evoke desired emotions.

P a g e 25 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Ensure your color choices meet accessibility standards, with sufficient contrast between text
and background for all users.

8. Navigation and Information Architecture:

Design intuitive navigation that allows users to easily find information and move between
sections.

Organize content using a clear information architecture, such as using categories, tabs, and
hierarchies.

9. Feedback and Interactivity:

Provide immediate feedback for user actions, like button clicks or form submissions, to ensure
users understand their interactions.

Incorporate interactive elements, such as hover effects and animations, to engage users and
make the experience more dynamic.

10. Mobile Responsiveness:

Design for various screen sizes and devices. A responsive design adapts to different resolutions
and orientations.

Test your design on multiple devices to ensure a consistent and enjoyable experience across
platforms.

11. User Testing and Iteration:

Conduct usability testing with real users to identify pain points and areas for improvement.

Use feedback to iterate on your design, refining and enhancing it to better meet user needs.

12. Collaboration Tools:

Use collaboration tools such as Figma, Adobe XD, or Sketch to work seamlessly with team
members on the same design project.

Version control and commenting features help streamline the design process.

13. Accessibility Considerations:

Design with accessibility in mind, ensuring your product is usable by people with disabilities.
Follow WCAG guidelines for web content.
P a g e 26 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

14. Performance Optimization:

Optimize your design assets (images, videos, etc.) for web or app performance. Faster loading
times enhance the user experience.

15. Continuous Learning:

Stay updated with the latest UI/UX trends, technologies, and best practices to continuously
improve your design skills.

Remember, the ultimate goal is to create a design that not only looks good but also provides a
seamless and enjoyable experience for your users. Effective UI and UX design can greatly
contribute to the success of your digital products.

INTERACTION PATTERNS:

Interaction patterns refer to the recurring ways people communicate and engage with each other
in various settings, including in-person, online, or through technology-mediated channels.
These patterns are essential for understanding and effectively navigating social interactions,
whether they occur in personal, professional, or social contexts. Here are some key interaction
patterns and notes about each:

Face-to-Face Interaction:

In-person conversations.

Non-verbal cues like body language, facial expressions, and tone play a significant role.

Immediate feedback and real-time communication.

Written Communication:

Includes emails, letters, memos, and text messages.

Allows for more thoughtful and deliberate communication.

Can be asynchronous (not real-time), providing time for reflection.

Phone and Voice Communication:

Real-time audio conversations.

P a g e 27 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Tone of voice and intonation convey emotions and meaning.

Often used for quick information exchange.

Video Calls:

Combines elements of both face-to-face and voice communication.

Enables visual cues and body language.

Widely used for remote work and virtual meetings.

Social Media Interactions:

Includes platforms like Facebook, Twitter, Instagram, and LinkedIn.

Allows for public or private communication.

Supports sharing text, images, videos, and links.

Engages a wide audience and can go viral.

Messaging Apps:

Platforms like WhatsApp, Messenger, and Slack.

Supports one-on-one and group chats.

Often used for quick, informal communication.

Online Forums and Communities:

Platforms like Reddit, Quora, and specialized forums.

Users discuss topics of interest in threads.

Valuable for seeking and sharing information and opinions.

Email Etiquette:

Use a clear subject line.

Maintain a professional tone.

Be concise and to the point.

P a g e 28 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Use proper salutations and signatures.

Active Listening:

Paying full attention to the speaker.

Asking clarifying questions.

Providing feedback to demonstrate understanding.

Avoiding interrupting.

Conflict Resolution:

Addressing disagreements and disputes.

Using effective communication to find common ground.

Active listening, empathy, and compromise are key skills.

Networking:

Building professional relationships.

Exchanging information and contacts.

Requires effective communication and interpersonal skills.

Group Dynamics:

How individuals interact within a group.

Roles, leadership, and communication patterns play a role.

Group decision-making and consensus-building.

Online Dating:

A specific interaction pattern for seeking romantic or personal connections.

Profiles, messaging, and arranging meetups are common steps.

Customer Service Interactions:

Companies interacting with customers.

P a g e 29 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Handling inquiries, complaints, and feedback effectively.

Non-Verbal Communication:

Includes gestures, posture, eye contact, and facial expressions.

Often conveys emotions, intentions, and attitudes.

Cultural Sensitivity:

Recognizing and respecting cultural differences in communication.

Avoiding stereotypes and bias.

Digital Etiquette:

Following online etiquette, such as avoiding trolling and cyberbullying.

Respecting privacy and consent in digital interactions.

Understanding these interaction patterns and practicing effective communication skills is

essential for building positive relationships, resolving conflicts, and succeeding in various
personal and professional contexts. Different situations may require different communication
strategies, so being adaptable and empathetic in your interactions is also crucial.

CONDUCTING USABILITY TESTS:

Conducting usability tests is a crucial step in the user-centered design process. Usability tests
help evaluate the usability, effectiveness, and user-friendliness of a product or system by
observing real users as they interact with it. Here are some key notes and steps to conduct
usability tests effectively:

1. Define Objectives:

Clearly define the goals and objectives of the usability test. What specific aspects of the product
are you evaluating? What questions do you want to answer?

2. Identify User Profiles:

Determine the target audience or user personas who will participate in the tests. Select
participants who represent your typical users.

P a g e 30 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

3. Recruit Participants:

Recruit a diverse group of participants who match the user profiles you've identified. Typically,
5-10 participants are sufficient for uncovering most usability issues.

4. Create Test Scenarios:

Develop realistic and relevant tasks or scenarios that users will perform during the test. These
tasks should align with the objectives and user goals.

5. Prepare the Testing Environment:

Set up a quiet and comfortable testing space with all necessary equipment, including the
product being tested, recording devices, and any prototypes or mockups.

6. Develop a Test Plan:

Create a detailed test plan that outlines the test schedule, roles of the facilitator and note-taker,
and the script or set of instructions for each test session.

7. Conduct Pilot Tests:

Before the main usability tests, conduct pilot tests with colleagues or a small group of
participants to identify and address any issues with the test setup or script.

8. Conduct Usability Tests:

During each test session, ask participants to complete the assigned tasks while thinking aloud.
Encourage them to express their thoughts, feelings, and difficulties as they interact with the
product.

9. Observe and Take Notes:

Have a facilitator observe the participant's actions and responses while a note-taker records
observations, issues, and insights. Record both qualitative and quantitative data.

10. Analyze Data:

- After all tests are completed, analyze the data to identify common usability problems, pain
points, and patterns of user behavior. Quantify usability issues by severity.

11. Report Findings:

P a g e 31 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

- Create a usability test report summarizing the findings, including a list of identified issues,
their severity, and recommendations for improvement.

12. Iterate and Improve:

- Use the findings from usability tests to make informed design changes or updates. Iterative
testing and refinement are key components of the usability testing process.

13. Share Results:

- Share the usability test results and recommendations with the design and development teams,
stakeholders, and anyone involved in the product's development.

14. Repeat Testing:

- Usability testing is not a one-time activity. Conduct tests at different stages of product
development to ensure continuous improvement.

15. Consider Remote Usability Testing:

- In addition to in-person testing, consider remote usability testing, especially when testing with
geographically diverse users. Remote testing can be conducted using various online tools and
platforms.

16. Maintain User Privacy and Informed Consent:

- Respect user privacy, obtain informed consent, and ensure that participants' data is handled
securely and anonymously.

Usability testing is a valuable tool for identifying and addressing usability issues, improving
user satisfaction, and ultimately creating more user-friendly products and systems. It should be
integrated into the design and development process to ensure that user needs and preferences
are central to the final product.

OTHER EVALUATIVE USER RESEARCH METHODS:

Evaluative user research methods are used to assess and evaluate the usability, effectiveness,
and overall user experience of a product or system. These methods help identify issues and
gather feedback from users to inform design improvements. Here are some key notes on other
evaluative user research methods:

P a g e 32 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Heuristic Evaluation:

Involves experts (usability professionals) who review a product's interface against a set of
usability heuristics or principles.

Identifies potential usability problems based on recognized best practices.

Offers a quick and relatively cost-effective way to uncover usability issues.

Cognitive Walkthrough:

Evaluators simulate the steps a user would take to accomplish specific tasks.

Focuses on assessing the ease of learning and efficiency of task completion.

Identifies potential cognitive barriers and usability problems in the user interface.

Accessibility Testing:

Evaluates how accessible a product is to users with disabilities, including those with visual,
hearing, motor, or cognitive impairments.

Ensures compliance with accessibility standards and regulations like WCAG (Web Content
Accessibility Guidelines).

Expert Review:

Involves usability experts conducting a comprehensive evaluation of a product.

May use a combination of methods, including heuristic evaluation, cognitive walkthroughs,

and usability guidelines.

Provides valuable insights into usability issues.

A/B Testing:

Compares two or more variations of a product (e.g., different designs, features, or content) with
real users to determine which performs better.

Measures quantitative data such as conversion rates, click-through rates, and user engagement.

Useful for making data-driven design decisions.

P a g e 33 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Eye Tracking Studies:

Uses eye-tracking technology to monitor where users are looking on a screen and for how long.

Provides insights into visual attention, user scanning patterns, and areas of interest within a
user interface.

Clickstream Analysis:

Analyzes user interactions by tracking the sequence of clicks, page views, and interactions
within a digital product.

Helps identify user navigation patterns and areas of interest.

System Usability Scale (SUS):

A standardized questionnaire that measures the perceived usability of a product.

Consists of a set of Likert-scale questions, and the scores are used to gauge overall usability
and identify areas for improvement.

Post-Task Questionnaires:

Administered after users complete specific tasks in a usability test.

Gather qualitative and quantitative feedback on the user's experience and perceived usability
of the task.

Customer Satisfaction Surveys:

Collect feedback from users about their overall satisfaction with a product or service.

Helps measure user loyalty and identify areas where improvements are needed.

Usability Benchmarking:

Compares a product's usability metrics against industry benchmarks or competitors' products.

Provides context for evaluating usability performance.

Remote Usability Testing:

P a g e 34 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Conducts usability tests with participants located remotely, often using screen-sharing and
video conferencing tools.

Allows for testing with geographically diverse users.

Tree Testing:

Evaluates the effectiveness of a website's information architecture and navigation structure.

Participants attempt to find specific pieces of information by navigating a tree-like structure.

Card Sorting:

Helps determine the organization and labeling of content on a website or in an application.

Participants group content items into categories and suggest labels for those categories.

Surveys and Questionnaires:

Collect quantitative and qualitative feedback from users about their experiences, preferences,
and needs.

Useful for gathering large amounts of data from a broad user base.

Field Studies and Contextual Inquiry:

Researchers observe users in their natural environment to understand how they use a product
or system in real-life situations.

Provides valuable insights into user behavior and needs.

When conducting evaluative user research, it's essential to select the method or combination of
methods that best align with your research objectives and the stage of product development.
Additionally, involving users early and throughout the design process is crucial for creating
user-centric products and experiences.

SYNTHESIZING TEST FINDINGS:

Synthesizing test findings is a crucial task, especially in fields like healthcare, software
development, product testing, and many others. The goal is to compile and summarize the key
observations, results, and insights from various tests or experiments into a concise and
informative document. Here's a step-by-step guide on how to effectively synthesize test
findings notes:

P a g e 35 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Understand the Purpose:

Begin by understanding the purpose and objectives of the tests. What questions or problems
were you trying to address, and what outcomes were expected?

Collect Raw Data:

Gather all the raw data, including test results, measurements, observations, and any other
relevant information. Ensure that your data is accurate, organized, and well-documented.

Organize the Information:

Create a clear and logical structure for your findings notes. Common sections may include:

Introduction: Provide context and the purpose of the tests.

Methodology: Describe the test setup and procedures followed.

Results: Present the data, findings, and observations.

Discussion: Analyze the results, draw conclusions, and address any unexpected findings.

Recommendations: Offer suggestions or actions based on the findings.

Conclusion: Summarize the key takeaways.

Summarize Key Findings:

In the "Results" section, highlight the most important findings and trends. Use tables, charts,
and graphs to visually represent the data when appropriate.

Provide Context:

Explain the significance of the findings in the "Discussion" section. Compare the results to the
initial objectives and expectations. If there were any deviations from the expected outcomes,
discuss possible reasons.

Recommendations and Actionable Insights:

In the "Recommendations" section, suggest actions or decisions based on the findings. These
recommendations should be actionable and tailored to the specific context.

P a g e 36 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

Be Objective:

Ensure that your findings are presented objectively, without bias or personal opinions. Stick to
the facts and use a neutral tone.

Use Clear and Concise Language:

Write in a clear and concise manner, avoiding unnecessary jargon or technical language. Use
plain language whenever possible to ensure your findings are accessible to a wider audience.

Cite Sources:

If you refer to external sources, make sure to properly cite them. This adds credibility to your
findings and allows others to verify your information.

Proofread and Edit:

Carefully review your findings notes for grammar, spelling, and formatting errors. A well-
polished document is more likely to be taken seriously.

Peer Review:

If possible, have colleagues or subject matter experts review your findings notes. They can
provide valuable feedback and ensure accuracy.

Finalize and Distribute:

Once your findings notes are complete and reviewed, finalize the document and distribute it to
relevant stakeholders or team members.

Remember that the quality of your synthesized findings notes can greatly influence decision-
making processes, so it's essential to invest time and effort in creating a clear and informative
document.

PROTOTYPE ITERATION:

Creating prototype iteration is an essential part of the UI (User Interface) and UX (User
Experience) design process. These notes help designers and teams keep track of changes,
P a g e 37 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

improvements, and user feedback throughout the iterative design cycle. Here's a template and
some guidance on how to structure and document your prototype iteration notes effectively:

Prototype Iteration Notes

Project Name:

[Enter the name or description of your project.]

Date:

[Enter the date of the iteration.]

Iteration Number:

[Specify the iteration number, e.g., 1st, 2nd, 3rd, etc.]

Prototype Version:

[Specify the version of the prototype you are working on.]

Design Goals:

[Outline the primary objectives for this iteration. What do you aim to achieve with this round
of design changes?]

Changes Made:

[Document all the changes and updates made to the prototype. Include details such as
page/screen names, components modified, added, or removed, and any design elements that
were altered.]

Page/Screen Name 1:

[List the changes made, e.g., "Increased button size to improve clickability."]

Page/Screen Name 2:

[List the changes made, e.g., "Revised color scheme to enhance visual hierarchy."]

User Feedback:

[Include any user feedback collected during usability testing or user interviews. Summarize
key insights, pain points, and suggestions.]

P a g e 38 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

User 1 Feedback:

[Summarize the feedback and note any action items, e.g., "User found it confusing to navigate
to the settings page; consider adding a direct link on the home screen."]

User 2 Feedback:

[Summarize the feedback and note any action items, e.g., "User suggested including tooltips
for icons to clarify their meaning."]

Observations:

[Document any additional observations or insights gained during the design iteration. These
could be based on your own evaluation or discussions within the design team.]

[Note any usability issues or positive aspects that were identified during the iteration.]

Next Steps:

[Outline the plan for the next design iteration. What changes or improvements will you focus
on in the upcoming iteration?]

[List specific tasks or design elements that need further refinement, e.g., "Refine the
onboarding flow to make it more intuitive."]

[Mention any additional research or testing that should be conducted before the next iteration.]

Action Items:

[Create a list of actionable tasks that need to be completed before the next iteration. Assign
responsibilities and due dates where applicable.]

[Task 1: Assign [Designer Name] to update the login screen with new graphics by [Due Date].]

[Task 2: Conduct a usability test with [Number] participants to gather feedback on the new
navigation menu by [Due Date].]

Attachments:

[Include links or references to relevant design files, screenshots, or user testing videos that
support the documentation.]

P a g e 39 | 40
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CS3V13 UI & UX Design Unit_4

By maintaining thorough prototype iteration, you can effectively track the evolution of your
design, address user feedback, and ensure a user-friendly and visually appealing final product.
Regularly revisiting these notes and iterating on your designs based on feedback and
observations is crucial for creating a successful UI and UX.

P a g e 40 | 40
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

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

5.1 Identifying and Writing Problem Statements

What is a problem statement?

• A problem statement is a clear, concise description of the issue or challenge that needs
to be addressed.
• A problem statement is a springboard for further exploration
• It defines the gap between the current situation and the desired outcome
• Pin-pointing where UX designers should focus their efforts as they move from
discovery to ideation and solution-finding.
What is a Good Problem Statement vs Bad One?

• Good Problem Statement: “Users are abandoning the checkout process because it’s
too complex, resulting in lost sales.”

• Bad Problem Statement: “We need a better website.”

A good problem statement is clear, specific, and focused on the user’s challenge. It
directly identifies the problem, its impact on users, and why solving it is important. It
should guide the design process and align with business goals.

A bad problem statement is vague, lacks focus, and doesn’t address a clear user need
or business outcome.

P a g e 1 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Why Do We Need Problem Statements in UX?

We need problem statements in UX design because they provide a clear and focused
definition of the user’s challenges. They help:

1. Align the team: Ensures everyone on the project understands the core issue being
addressed.
2. Guide the design process: Keeps the team focused on solving the right problem.
3. Support decision-making: Helps prioritize design solutions and features that directly
address user needs.
4. Measure success: Establishes a clear outcome to evaluate whether the solution solves
the problem effectively.

When should you write a problem statement?

• Before conducting user research. Perhaps you’ve observed a particular issue with
your product or been made aware of a bottleneck through customer or internal
stakeholder feedback. You might write a problem statement and use it as the basis for
further user research and exploration of the problem space.
• After conducting user research. Once you’ve conducted thorough user research, you
might write a problem statement to summarise and pin-point the main user problem you
identified. This will then inform the ideation and solution-finding stage.

How to write a problem statement

• Identify the people who experience, and are impacted by, the problem. This might
be end users and customers, target users you’re trying to win over, and/or internal
company stakeholders.

• Articulate the problem as clearly and concisely as you can. What exactly is the
problem and where does it occur? Aim to keep your problem statement brief and
focused while providing enough context.

• Explain the impact of the problem. How does the problem impact the user groups
concerned? What undesirable consequences does it result in? If possible (and where
relevant), explain how the problem affects both the direct user and the organisation/the
business.
P a g e 2 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

• Who is impacted by the problem?
• What is the problem they are facing?
• Where does this problem come up?
• When does the problem occur? In what situation?
• Why does the problem arise?
• Why does the problem matter?

What is the Structure of a Problem Statement?

The structure of a problem statement typically includes:

1. Current Situation: Describes the current state or context where the problem occurs.

2. Problem: Clearly identifies the specific issue or challenge users face.

3. Impact: Explains the consequences of the problem for users and the business.
4. Goal/Desired Outcome: Defines what success looks like and what the ideal outcome
would be after solving the problem.

How to Write a Problem Statement?

Step 1: Identify the Problem

The first step is to clearly define the issue that users are facing. Be specific about what’s
preventing users from achieving their goals. This can come from various sources, such
as user research, usability testing, or feedback. Focus on what frustrates users and
where they encounter obstacles in completing tasks.
Example: “Users are abandoning the product discovery process because the search
function is not returning relevant results.”
Here, you’ve zeroed in on a specific problem—irrelevant search results. Avoid general
or vague descriptions like “The search function needs improvement.”
Step 2: Explain the Impact

Next, describe how the problem is affecting users. How does this issue create
frustration, inefficiency, or lost opportunities for the users? Explain the emotional or
practical toll the problem takes on them. This helps illustrate the severity of the
problem.
Example: “As a result, users are spending excessive time filtering through unrelated
products, causing frustration and a drop in conversion rates.”
Explaining the problem’s impact on both users and the business highlights why the
issue is important to resolve.

P a g e 3 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Step 3: Contextualize the Business Goal

Align the problem with the company’s goals or broader business objectives. It’s
important to show why solving this problem is critical for both the user experience and
the business. Whether it’s increasing conversions, reducing churn, or
improving engagement, tying the problem to a tangible business metric strengthens its
importance.
Example: “Improving the relevance of search results could reduce abandonment rates
and drive-up sales, aligning with our business objective to boost product discovery
efficiency.”
This part of the statement highlights the potential business benefits of solving the
problem, showing that it’s not just a user issue but also affects the company’s success.
Step 4: Keep it Concise and Actionable

A good problem statement is focused and concise, avoiding unnecessary details or

jargon. Aim for a short, clear statement that captures the essence of the problem. You
want it to be easy for everyone—designers, developers, and stakeholders—to
understand. Don’t overload it with too much information. The purpose is to lay out the
problem in a way that sets the stage for ideation and solution-finding.
Example: “Users are abandoning the checkout process because it requires too many
steps, leading to lost sales.”
This statement is concise, specific, and actionable, giving a clear problem that the team
can work to solve.
Best Examples:

Apple
• Bad: “Our operating system needs improvement.”
• Good: “Users find it difficult to navigate privacy settings on iOS, leading to confusion
about data-sharing permissions.”
Spotify

• Bad: “We need better playlists.”

• Good: “Users struggle to discover new music aligned with their preferences, resulting
in lower engagement with personalized playlists.”
Amazon

• Bad: “The checkout process is too slow.”

• Good: “Customers are abandoning their carts during checkout due to a lengthy and
complex payment process, causing lost sales.”

P a g e 4 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Tips on Writing Problem Statements

1. Be Specific: Instead of vague goals like “We need a better website,” specify the actual
issue. For example, identify a user pain point: “Users struggle to find product details,
leading to high drop-off rates.”
2. Focus on the User: Center the statement around the user’s challenges, not just the
company’s goals.
3. Clarify the Impact: Highlight the consequences of the problem for users and the
business.
4. Add Context: Include details from user research to support the problem statement.

*****
P a g e 5 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

5.2 Identifying Appropriate Research Methods:

UX research plan

1. Define the problem statement

2. Identify your objectives
3. Choose the right research method
4. Recruit participants
5. Prepare the brief
6. Establish the timeline
7. State how you’ll present your findings

P a g e 6 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

11 Best UX research methods

P a g e 7 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

P a g e 8 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

1. When to conduct user interviews

This method is typically used at the start and end of your project. At the start of a project, you
can establish a strong understanding of your target users, their perspectives, and the context
in which they’ll interact with your product.

2. When to conduct field studies

This method can be used at all stages of your project—two key times you may want to conduct
field studies are:

• As part of the discovery and exploration stage to define direction and understand the
context around when and how users interact with the product

• During usability testing, once you have a prototype, to evaluate the effectiveness of
the solution or validate design assumptions in real-world contexts
3. When to conduct focus groups

It’s easier to use this research technique when you're still formulating your concept, product,
or service—to explore user preferences, gather initial reactions, and generate ideas. This is
because, in the early stages, you have flexibility and can make significant changes without
incurring high costs.

4. Diary studies

• 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
Remember to determine the trigger: a signal that lets the participants know when they should
log their feedback. Tanya breaks these triggers down into the following:
• Interval-contingent trigger: Participants fill out the diary at specific intervals such as
one entry per day, or one entry per week
• Signal-contingent trigger: You tell the participant when to make an entry and how you
would prefer them to communicate it to you as well as your preferred type of
communication
• Event-contingent trigger: The participant makes an entry whenever a defined event
occurs
P a g e 9 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

When to conduct diary studies

Diary studies are often valuable when you need to deeply understand users' behaviors, routines,
and pain points in real-life contexts. This could be when you're:

• Conceptualizing a new product or feature: Gain insights into user habits, needs, and
frustrations to inspire your design

• Trying to enhance an existing product: Identify areas where users are having
difficulties or where there are opportunities for better user engagement

5. When to conduct surveys

• Conceptualization phase to gather preliminary data, and identify patterns, trends, or

potential user segments
• Post-launch or during iterative design cycles to gather feedback on user
satisfaction, feature usage, or suggestions for improvements

6.When to conduct card sorting

Card sorting isn’t limited to a single stage of design or development—it can be employed
anytime you need to explore how users categorize or perceive information. For example, you
may want to use card sorting if you need to:

✓ Understand how users perceive ideas

✓ Evaluate and prioritize potential solutions
✓ Generate name ideas and understand naming conventions
✓ Learn how users expect navigation to work

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

• Closed card sorting: Participants are given predefined categories and asked to sort the
items into the available groups

P a g e 10 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

7. Tree testing

When to conduct tree testing

Tree testing is often done at an early stage in the design or redesign process. That’s because
it’s more cost-effective to address errors at the start of a project—rather than making changes
later in the development process or after launch.

However, it can be helpful to employ tree testing as a method when adding new features,
particularly alongside card sorting.

8. Usability testing

When to conduct usability testing

• Before you start designing

• Once you have a wireframe or prototype

• Prior to the launch of the product

• At regular intervals after launch

P a g e 11 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

.

9. Five-second testing

When to conduct five-second testing

Five-second testing is typically conducted in the early stages of the design process, specifically
during initial concept testing or prototype development. This way, you can evaluate your
design's initial impact and make early refinements or adjustments to ensure its effectiveness,
before putting design to development.

10. A/B testing

• 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

When to conduct A/B testing

A/B testing can be used at all stages of the design and development process—whenever you
want to collect direct, quantitative data and confirm a suspicion, or settle a design debate. This
iterative testing approach allows you to continually improve your website's performance and
user experience based on data-driven insights.

11. Concept testing

When to conduct concept testing

Concept testing helps gauge your audience’s interest, understanding, and likelihood-to-
purchase, before committing time and resources to a concept. However, it can also be useful
further down the product development line—such as when defining marketing messaging or
just before launching.

*****

P a g e 12 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

5.3 Creating Personas

✓ Personas are fictional, research-backed representations of the people designers aim to
delight with their products, services, and experiences.
✓ They are based on real user needs, behaviours, and motivations. In user experience
(UX) design, personas promote empathy, align teams, and give focus to design and
development processes.
✓ “Personas represent the needs and behaviours of a subset of users your product aims to
delight.”

Steps to Creating Personas:

Step 1: Research your users

Strong personas are based on reliable data from a variety of sources, not hunches or
assumptions. Here’s how to gather the insights you need:

How to research existing users

If you have existing users, you’ve already got valuable data to inform your personas. Here's
how to tap into it:

• Interview users. Use focus groups, online surveys, or schedule one-on-one

conversations to ask your users what they like about your brand and why they use your
product or service. Aim to speak with at least 10–20 people to spot trends and gain
deeper insights into their backgrounds, personalities, and interests.

• Run a survey. If you’re working with a broad user base, run an online survey. Offer
incentives like discounts or store credit to encourage honest feedback.
• Talk to your sales and support teams. Your customer-facing teams hear it all—the
frustrations, pain points, and the wins. They can provide real-world insights into your
audience’s needs and traits.

• Review online analytics. Tools like Google Analytics help you understand the
demographics and behavior of your site visitors. Track their customer journey across
devices.

• Let email subscribers self-segment. Forbes recommends letting users select their
interests and indicate their preferences when completing your marketing permission
signup form.

P a g e 13 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

How to apply market research

If you’re launching your first digital product and don't have users yet, market research can
inform your personas. Here’s how to gather reliable data:

• A/B testing. See which options your target audience prefers by testing multiple options
at once.
• Focus groups. Organize discussions with potential users to gather detailed data about
their preferences.
• Interviews. Dive deep with interviews to discover motivations, pain points, and goals.
• Surveys. Cast a wider net with online or physical surveys to gather more insights.
• Web scraping. Analyze information from relevant websites to discover patterns and
potential audience behavior.

Step 2: Identify audience segments

Once you’ve gathered your initial research, it’s time to spot patterns. The goal is to group users
with similar characteristics into a few distinct categories. For example, if you’re working on a
meditation app, your audience might break down like this:
• High-performing professionals
• Holistic health enthusiasts
• Stay-at-home parents

While all these users love your product, their needs and habits might be totally different. These
differentiated groups give you the basis for three distinct personas, each reflecting a different
type of user.
To make sense of large amounts of data, use brainstorming templates or mind maps. FigJam
templates help you organize and label trends, leave notes, and host online meetings to share
insights and inspiration.

Step 3: Gather background on your personas

Your research will uncover key details about each persona, giving you a clearer sense of who
this person is and why they’re drawn to your product. With just a few data points, you can start
shaping their story.

For example, let's take “High-Performance Jamie,” a power user of your meditation app. Here’s
what Jamie's persona might look like:

P a g e 14 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

• Demographic: 42 years old, married with two kids, affluent ZIP code
• Education: Master’s degree
• Professional background: 3 years as a C-suite executive experience
• Average income: $125,000 per year
• Personality traits: Driven, focused, analytical
• Behavioral attributes: Wakes up early and uses LinkedIn
• Pain points: High stress levels at work
• Frustrations: Dislikes inefficiency, unhealthy habits, and working late
• Motivations: High performer who views meditation as essential

Step 4: Start filling in a persona template

Use FigJam’s persona template to gather key data, traits, and user info to share with
stakeholders. To expand your persona with more visuals, try creating a mood board. This
helps stakeholders quickly understand who your users are, how to engage them, and how to
design experiences that meet and exceed their expectations.

P a g e 15 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Step 5: Write a brief bio for your personas

A short bio can make your personas feel more relatable, helping your team empathize with
users and anticipate their needs and behaviors.

Here’s an example based on High-Performance Jamie:

Jaime works at home but is always on the go. Some days, Jamie's only downtime is while
driving to appointments, schools, and stores. That's when Jamie listens to health and
wellness podcasts. To manage stress at work and to reset before family time, Jamie
meditates using an app.

Jamie stays active with Pilates, shops at Trader Joe’s, streams her favorite shows on Hulu,
and comments on friends' Instagram posts. Jamie is most likely to download apps promoted
on Instagram, Hulu, or on health and wellness podcasts.

Once your personas take shape, invite your team to add detail to the FigJam persona
template. As your team gets to know your personas, they’ll be better equipped to design
workflows and make informed decisions that align with your users’ needs.

User persona examples

Different types of user personas can help you match your audience’s needs more effectively.
By building a persona that accurately reflects your users, your team can make more
informed decisions. Remember to update your personas regularly to keep them aligned with
your audience's evolving needs.

P a g e 16 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Types of Personas:

Goal-directed personas

A goal-directed persona is ideal when you're focusing on your user’s main intent. These
personas highlight what users are trying to achieve and the obstacles they face along the way.

Example: For a student persona, their goal might be finding a solution that offers immediate
savings. Meanwhile, a business professional’s goal could be a solution that saves them
money over time.

Role-based personas

Role-based personas focus on a user's role or position. The targeted individual could be a
small business owner or the head of marketing for a large corporation. These personas
emphasize the responsibilities, decision-making power, and tasks related to their position.

Example: A marketing executive persona might highlight decision-making power and budget
access, while a sales manager persona could emphasize relationship-building for long-term
success.

Engaging personas

An engaging persona brings your audience to life by including more personal details like
backstories, personality traits, and individual motivations. While fictional, these personas
help your team connect with the audience on a deeper level, offering clarity when making
user-centric decisions.

Example: Your persona, Molly, is a 22-year-old college student. Her motivations drive her to
purchase decisions focused on more affordable, future-forward solutions.

Common persona challenges and how to overcome them

Creating user personas can be challenging, but with the right strategies, you can overcome the
most common obstacles. Whether it’s getting your team on the same page or keeping your
personas current, here are some helpful tips to tackle the challenges:

• Align your team on personas. Host collaborative workshops to gather everyone’s

viewpoints and align on your persona strategy.

• Avoid customer stereotyping. Make decisions based on data, not guesswork, and
encourage empathy exercises with your team.

• Decide how many personas to create. Identify user segments and base the number
of personas on solid data..

P a g e 17 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

• Pinpoint your target audience. Conduct user research and interviews to refine your
understanding of your audience.

• Keep personas fresh and updated. Update your persona regularly to reflect shifts in
user behavior, goals, and motivations.

• Collect ample data. Use different data collection methods, including surveys, focus
groups, and interviews.

• Manage resource or budget constraints. Prioritize the most critical personas that
best align with your business's key objectives.

*****

5.4 Ideation Solution:

Definition:

✓ Ideation is the process of generating ideas to find the best one to base a product or
service on.
✓ It focuses on creating a seamless user experience and user interface through research
and analysis while ensuring the product is easy to navigate and intuitive.
✓ It involves iteration to refine ideas and effective collaboration to ensure that the end
result aligns well with business goals and objectives.
✓ Ideation is also the third step in the design thinking process which embraces creativity
and encourages innovation.
✓ Different techniques such as mind mapping and crazy eight can be used for ideation.
Why is Ideation Important in UI UX Design?
✓ Ideation in UI UX design is important as it addresses user needs, and helps identify the
solution to complex problems, creating a seamless user experience as well as a better
user interface.
✓ It also encourages innovation and drives progress in the product or service and is one
of the most crucial step within design thinking.

Main Steps in Ideation Solution Process:

Here’s a walkthrough of the steps involved in the ideation process:

1. Defining a problem – The first step in the ideation process is understanding the
challenge. This ensures the right solution can be developed.

P a g e 18 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

2. Gathering resources – After defining the problem, one must gather relevant resources
such as data based on feedback and suggestions from users.

3. Selecting ideation techniques – Next comes the ideation process, which is based on
real-world insights. You can select the appropriate ideation technique from multiple
methods such as brainstorming, mind mapping, sketching, etc.

4. Prototype testing – Once a few ideas are selected, prototyping helps visualize them.
Prototype testing ensures that the best solutions can be implemented while avoiding
costly mistakes in the final product.

Preparation for effective ideation Process:

a) Understanding the problem space

✓ Before the sparks of creativity ignite, it’s essential to lay a solid foundation.
✓ The first step in effective ideation is to delve deep into the problem space.
✓ Understanding the unique opportunities, limits, and issues that the design project faces
will help us make sure that our ideas are both creative and functional.
✓ It’s equally important to identify any technical, time, budget, or resource limitations
that may impact the design process because then, you can make informed decisions and
better allocate resources.
✓ A deep understanding of user needs, clear project goals, and a realistic assessment of
constraints make all the difference in the outcome of the solution offered.

b) Gathering the right roles

✓ A successful ideation session hinges on the diversity of perspectives.
✓ Bringing together individuals from various disciplines fosters a rich tapestry of ideas.
✓ A well-rounded team typically includes UX designers, product managers, engineers,
marketers, and subject matter experts.
✓ Each role brings a unique lens to the problem, leading to more creative and innovative
solutions.

P a g e 19 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

c) Setting the stage for creativity

✓ To unleash the full potential of creativity, it’s essential to create an environment that
inspires and facilitates idea generation.
✓ This involves carefully designing both physical and digital spaces.
✓ In today’s interconnected world, digital tools play a vital role in facilitating ideation.

Facilitating effective ideation sessions:

A skilled facilitator is essential to guide a UX ideation session toward success. Effective

facilitation involves setting clear goals, establishing ground rules, and actively managing time.
Additionally, a good facilitator will encourage participation from all members, listen
attentively, and summarize key points to keep the group aligned.

P a g e 20 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Basic ideation techniques for UX design:

1.Brainstorming

Brainstorming is a combination of informal problem solving and lateral thinking. It is also a

common part of efficient UI design practices.The technique intends for participants to come up
with eccentric ideas. Some of these thoughts and ideas are crafted into original and creative
solutions to problems, whereas help to spark additional ideas.

2.Mind mapping

Consider the following tips to get the most out of mind mapping:

✓ Define a clear central idea or problem statement: This will serve as the foundation
of your mind map.
✓ Use concise keywords: Keep your branches focused and easy to understand.
✓ Incorporate visual elements: Use images, icons, or colors to make your mind map
more engaging.
✓ Iterate and refine: Don’t be afraid to adjust your mind map as new ideas emerge.
✓ Utilize digital mind mapping tools: Share and collaborate with your team effectively.

3.Sketchings and Crazy 8s

✓ Sketching and Crazy 8s are rapid ideation techniques that encourage quick, free-
flowing thinking.
✓ Crazy 8s, a specific sketching technique, involves creating eight small sketches in eight
minutes.
✓ This time constraint forces designers like yourself to think quickly and generate a large
number of ideas.
✓ Because they enable you to avoid self-criticism and consider a multitude of options,
sketching and Crazy 8s are crucial tools for producing varied and creative solutions.

4. Brainwriting

The idea behind this UX ideation technique is to reduce the anxiety and pressure that comes
with brainstorming. With less tension, ideas can flow more freely.

✓ You have quiet people in your group who are easily intimidated

✓ Your time is limited and you need ideas fast

✓ You don’t have an experienced moderator

P a g e 21 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

5. Scamper method

If you systematically apply SCAMPER to an existing product or service, you can actually
generate a wide range of innovative ideas. This technique is particularly useful for overcoming
creative blocks and sparking new thinking. Just follow the acronym and you won’t be
disappointed.

It stands for:

✓ Substitute: Replace a component or element with something else.

✓ Combine: Merge two or more existing ideas or concepts.

✓ Adapt: Modify or adjust an idea to fit a new context or purpose.

✓ Modify: Change the form, color, or material of an element.

✓ Put to another use: Find new applications for an existing idea.

✓ Eliminate: Remove unnecessary elements or features.

✓ Reverse: Turn an idea upside down or inside out.

6. Role playing
Role-playing is a fun and proactive way to step into the shoes of your users to gain clarity on
their needs, motivations, and frustrations. This technique can be used to simulate different
user personas to:

✓ Identify edge cases: Find those unusual situations that might not be obvious at first.

✓ Uncover usability issues: Spot potential problems users might encounter.

✓ Develop user-centered solutions: Create solutions that truly meet user needs.
P a g e 22 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

7. Storyboarding

✓ Storyboarding is a nonlinear brainstorming technique that involves developing a visual

story related to a problem.
✓ It helps participants explore the problem in-depth and come up with potential solutions
by bringing the narrative to life.

8. Collaborative sketching

✓ Collaborative sketching involves a group of people working together to create sketches

and diagrams.
✓ This technique encourages the sharing of ideas, the building upon each other’s thoughts,
and the development of innovative solutions.
✓ A group of designers can work together to generate a wide range of ideas, sketch visual
representations of user flows, wireframes, and mockups.

9. Worst Possible Idea

✓ One of the main objectives of this UX ideation technique is to relieve anxiety and
tension. It’s much easier to say “Hey no that’s not bad enough” than the opposite.
✓ Even a silly idea can spark some amazing creativity, giving a boring meeting a much-
needed energy boost. You never know, looking at the worst possible idea could lead you
to the best one!
10. Dot voting
✓ Dot voting is an easy but powerful technique for prioritizing ideas.
✓ Each team member is given a set number of dots, which they use to vote on their favorite
ideas.
✓ The idea that accumulates the most dots emerges as the top priority!

You can use this UX ideation method for:

• Quickly narrowing down a large number of ideas

• Ensuring a democratic and transparent decision-making process
• Focusing on the most promising ideas

11. Provocation

✓ Provocation involves thinking up radical and unrealistic ideas to force the mind to think
outside of the box and explore potential design solutions.
✓ With this UX ideation technique, participants are encouraged to consider new realities
to extreme degrees.

P a g e 23 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Problem
Cars run out of gas after only a few hundred miles

Provocations
Po, Invent a car that tows a gas station behind it
Po, Invent a car that runs on air
Po, Make everything that the car has to drive to closer
12. Challenge assumptions

Challenging Assumptions may involve any of the followings techniques, according to Fast
Fedora:

✓ Redefining words in assumptions

✓ Examining qualifiers (words that turn statements and assumptions into over-
generalizations such as “never” and “always”)
✓ Testing negative statements to ensure the re-stated assumption still makes sense
✓ Cross-validating assumptions

13. Prototype

✓ When you create prototypes, you’re basically sketching/building out ideas before
moving on to the final stages of the design process.
✓ The first step is usually a paper prototype, design in its simplest form. From there,
we have a wireframe and work our way to a prototype.
✓ The great thing about including prototypes in your ideation technique is that they
keep things visual.
✓ When your team can envision your idea, it’s much easier to get behind it, or give it
some constructive criticism.

14. Gamestorming

✓ Gamestorming is a set of ideation methods that help participants break down barriers,
overcome conflicts, improve communication skills and generate new ideas and
strategies. Examples of gamestorming include 6-8-5 sketching, Fishbowl and Cover
Story.
✓ Gamifying processes doesn’t stop at UX ideation, gamification is making its way
into all areas of the design process in order to help users feel like they’re making
progress.
✓ To get started with your own gamestorming UX ideation technique, grab some colored
markers, some paper and post-it notes and get to innovation.

P a g e 24 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Advanced ideation methods:

1. Design studio method

Diverse teams get together to brainstorm, hone, and assess ideas using the Design Studio
Method, a collaborative workshop methodology. This approach is particularly useful for
complicated design problems because it encourages creativity, critical thinking, and teamwork
through a systematic process of individual ideation, group sharing, and critical feedback.

2. Mindful observation

One effective method for learning in-depth details about user motivations and behaviour is
mindful observation. You can find unmet requirements, problems, and areas for development
by watching consumers in their natural settings.
This technique can be used with additional research techniques like surveys and interviews for
a more thorough grasp of the user experience.

3. Six thinking hats

The Six Thinking Hats is a problem-solving technique developed by Edward de Bono that
encourages a more balanced and comprehensive approach to decision-making.

Just as it sounds like to you, by adopting different “thinking hats,” individuals can explore an
idea from various perspectives, including:

• White hat: Focus on facts and figures

• Red hat: Explore emotions and feelings
• Black hat: Identify potential risks and challenges
• Yellow hat: Focus on positive aspects and benefits
• Green hat: Generate creative and innovative ideas
• Blue hat: Organize and summarize the discussion

P a g e 25 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

4. Reverse brainstorming

Reverse brainstorming is a fun and effective way to think outside the box. Reverse
brainstorming is a creative problem-solving technique that involves identifying the root causes
of a problem by asking “How can we cause this problem?”

Once you identify the root causes, you can then develop solutions to prevent or mitigate these
causes. This approach can lead you to come up with more innovative and unconventional
solutions.

5. Analogous inspiration

Analogous inspiration is another advanced UX ideation method that involves drawing insights
from unrelated fields.
This uses the solutions to problems in other fields to help you gain a fresh perspective. This
method is particularly useful for breaking through those pesky creative blocks and coming up
with never-seen-before ideas.
Methods for idea evaluation:

Once a diverse range of ideas has been generated, evaluating their potential and prioritizing the
most promising ones is crucial. A common framework for evaluating ideas is to consider their
feasibility, desirability, and viability.

Prioritization frameworks

Various frameworks can be employed in the UX ideation method to help you prioritize ideas.
Two popular ones are the MoSCoW method and the RICE scoring method. Let’s take a closer
look at each of them.

P a g e 26 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

The MoSCoW method categorizes ideas into four groups: Must-have, Should-have, Could-
have, and Won’t-have. This framework helps teams prioritize ideas based on their criticality
and feasibility.

Must-have features are essential for the product’s success and must be included. Should-have
features are important but not strictly necessary. Could-have features are desirable but not
essential, and Won’t-have features are not considered feasible or valuable at this time.
On the other hand, the RICE scoring method prioritizes ideas based on four factors: Reach,
Impact, Confidence, and Effort.

Reach refers to the number of people affected by the idea. Impact measures the potential
positive or negative effect of the idea. Confidence reflects the team’s belief in the idea’s
success, and effort refers to the resources required to implement the idea.

Teams can determine a RICE score for each idea and rank them in order of importance by
giving each factor a score.

*****

P a g e 27 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

5.5 Creating User Stories:
What is a User Story?

 A user story is a brief, informal description of a feature or functionality from the

perspective of the end user.
 It is a cornerstone of agile methodologies and serves as a placeholder for a conversation
about requirements and solutions.
 User stories are designed to be simple, concise, and focused on the user's needs rather
than the technical aspects of implementation.

Characteristics of a Good User Story:

• User-Centric: Focuses on the needs and goals of the user.

• Concise: Communicates the essence of the requirement in a few sentences.
• Testable: Provides criteria that can be used to verify that the story has been successfully
implemented.
• Value-Oriented: Demonstrates the value or benefit to the user or the business.

Steps to Write a User Story:

Creating an effective user story involves several key steps. Here is a detailed guide to help you
craft user stories that align with your product goals and user needs.

1. Identify the User

Start by defining who the user is. This could be a specific type of customer, a stakeholder, or
even an internal user. Understanding your user is crucial for writing a relevant user story.

Example
• User: As an online shopper

2. Define the User's Goal or Need

Articulate what the user wants to achieve or what problem they are facing. This should be
framed in terms of the user's needs rather than the technical implementation.

Example:
• Goal: I want to be able to save items to a wishlist.

3. Describe the Benefit

Explain why this goal or need is important to the user. This provides context and helps
stakeholders understand the value of the user story.
P a g e 28 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Example:
• Benefit: ...so that I can easily find and purchase items later without having to search for
them again
4. Use the Standard User Story Format

The most common format for writing user stories is:

As a [type of user], I want [a specific goal] so that [benefit].
Using this format ensures that each user story captures the user’s perspective and the value they
will gain.
Example
• User Story: As an online shopper, I want to be able to save items to a wishlist so that I
can easily find and purchase them later.
5. Define Acceptance Criteria

Acceptance criteria specify what needs to be true for the user story to be considered complete.
These criteria should be clear, concise, and testable. They ensure that the user story meets the
required functionality and quality standards.

Acceptance Criteria:

• Users can add items to a wishlist from the product page.

• Users can view their wishlist from the main navigation menu.
• Users can remove items from the wishlist.
• Wishlist items persist between sessions.

6. Prioritize the User Story

Determine the priority of the user story in relation to other stories and tasks. This helps the
development team understand which stories to work on first based on their value and urgency.

Example:
• Priority: High Enhances user experience and potential sales.

7. Review and Refine

Discuss the user story with stakeholders, including users, developers, and designers, to ensure
it accurately captures the requirements. Refine the story based on feedback to make sure it is
clear and actionable.

Example:
• Review: Conduct a review meeting to discuss the user story, adjust acceptance criteria
if needed, and ensure alignment with business goals.

P a g e 29 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Real-Life Example: Amazon Wishlist Feature

To illustrate the process of writing user stories, let’s examine a real-life example: the Wishlist
feature on Amazon.

User Story Example for Amazon:

• User Story: As an Amazon shopper, I want to be able to save items to a Wishlist so that
I can easily find and purchase them later.
Acceptance Criteria:
• Users can add items to a Wishlist from the product page.
• Users can view their Wishlist from their account dashboard.
• Users can organize their Wishlist into multiple lists (e.g., "Gifts," "Home Decor").
• Wishlist items persist across sessions and devices.
• Users receive notifications when items on their Wishlist go on sale.
Implementation Context:
Amazon’s Wishlist feature allows users to keep track of products they are interested in. This
feature enhances the user experience by providing a personalized and convenient way to
manage shopping preferences. By prioritizing this user story, Amazon aligns with its goal of
increasing user engagement and driving sales.
Conclusion:
Writing effective user stories is an essential skill for product managers and agile teams. By
focusing on the user’s perspective, defining clear goals, and specifying acceptance criteria, you
ensure that the development team delivers valuable and relevant features. The example of
Amazon's wishlist feature demonstrates how user stories can drive product development that
enhances user experience and aligns with business objectives. Following the steps outlined in
this guide will help you create user stories that drive successful product development and meet
user needs more effectively.
*****

5.6 Creating Scenarios:

What is a user scenario?

 User scenarios are a way that we have to understand what users want, how they feel
and what they want from the product.
 It’s all about helping the design team put themselves in the user’s shoes, encouraging
empathy.
 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 snapshot of the user experience.

P a g e 30 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

The benefits of user scenarios:

✓ “scenarios explicitly capture what users would likely experience as they proceed toward
using an ideal solution.
✓ ” They are about tracing user’s steps in order to complete a task and validating aspects
of the design we might have otherwise overlooked.
Types of user case scenarios:
1. Goal-oriented scenarios
✓ Goal-oriented scenarios are narratives that outline a specific objective or desired
outcome for a user.
✓ These scenarios focus on the user’s motivations, challenges, and the steps they take to
achieve their goal.
✓ They are often used to better understand user behavior and improve product
functionality.
Imagine you’re designing a new fitness app. A goal-oriented scenario might focus on a user
who wants to lose weight and get in shape for a marathon.

This scenario would delve into the user’s motivation, such as improving their health and feeling
more confident, their specific goals, for example, running a 5K in three months, losing 20
pounds, plus any obstacles they might face, such as lack of time, or injuries.

P a g e 31 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

2. Activity-based scenario
✓ Activity-based scenarios are narratives that focus on specific actions or activities that
users perform within a given context.
✓ Understanding these common user activities helps designers ensure that the app’s
interface and features are intuitive and efficient, which makes it easy for users to
accomplish their tasks.

Take the same fitness app for example. An activity-based scenario might focus on a user’s daily
routine. This scenario would outline specific tasks the user performs, such as tracking their
workouts, logging their food intake, and checking their progress. Error scenarios

Now, consider a scenario where a user accidentally deletes their workout history. This is an
error scenario that highlights a potential pain point. Designers can use this scenario to identify
ways to prevent accidental deletions, such as implementing a confirmation prompt or providing
a backup feature.

3. Edge case scenarios

✓ Edge-case scenarios, on the other hand, are situations that fall outside of the normal
range of expected inputs or behaviors.
✓ They are often unexpected or rare occurrences that can test the limits of a system or
process.
✓ An edge-case scenario might involve a user who tries to log a workout that is unusually
long or intense.
✓ This is an uncommon situation that could potentially cause the app to crash or display
incorrect data.
✓ When designers consider these edge cases, they can ensure that the app is robust and
can handle a wide range of user inputs, even under extreme circumstances.

P a g e 32 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Why user scenarios matter? :

Key components of a user scenario:

User persona

A key component of your user scenarios would be to define the user persona. A user persona is
a fictional representation of a target user based on real data and research.

Consider demographics, goals, motivations, and behavior to help you create one. Then, gather
data through surveys, interviews, analytics, and market research. Remember to focus on the
user and empathize with them!

User goal

Once you’ve defined your user persona, you need to identify their goals. What do they hope to
achieve by using your app? Are they trying to lose weight, build muscle, improve their
cardiovascular health, or simply reduce stress? Understanding the user’s goals will help you
prioritize features and content that directly address their needs and motivations.
Context

The context in which the user is performing the task is also crucial. Consider factors such as
the time of day, location, and device being used.

P a g e 33 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Understanding the context helps ensure that features and functionalities are relevant to the
user’s needs and situation. For example, a fitness app might prioritize features like GPS
tracking and heart rate monitoring for a user running in the park, but these features might be
less relevant for a user who is browsing products online at home.

Designing for the context can also improve the usability of a product and can help ensure the
accessibility of a product to users with different needs and abilities. Learn more about this in
our accessibility testing blog post.

Actions
The actions a user takes to achieve their goal are the steps they follow within your app. By
outlining these steps, you can identify potential pain points or areas where the user might get
stuck.

For example, a user might struggle to find their workout history or have difficulty entering their
heart rate data. Identifying these challenges will help you improve the app’s usability and make
it easier for users to navigate.

Outcome

The outcome of the interaction is the end result of the user’s journey within your app. What do
they hope to achieve? Do they want to feel healthier, more energized, or simply satisfied with
their progress?
Understanding the desired outcome will help you measure the success of your app and make
necessary adjustments to ensure it meets user expectations.

Creating a user scenario step-by-step

Step 1: identify your users

Before you can craft compelling user scenarios, it’s essential to have a deep understanding of
your target audience.

This involves creating detailed profiles of your ideal users, which are the previously discussed
user personas.

• User personas: Create detailed profiles of your ideal users based on research. Include
demographics, psychographics, behaviors, motivations, and pain points.

• Segmentation: Group users based on similarities in needs, behaviors, and motivations.

This helps tailor scenarios to specific segments, which improves targeted marketing,
product development, and enhances customer satisfaction.
P a g e 34 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Step 2: define the context

To create realistic and relevant user scenarios, it’s essential to consider the context in which
users interact with your product or service.

This includes the environment and pain points users might encounter. These insights will help
you tailor your scenarios to address real-world needs and improve the user experience.

• Environment: Understand the physical, digital, and social context where the user
interaction occurs. Consider factors like device, location, time of day, and cultural
influences.

• Pain points: Identify the challenges, frustrations, or problems users face in their current
context. These will inform the scenario’s focus.

Step 3: focus on user goals

User goals are the driving force behind their interactions with your product or service. Clearly
defining these goals ensures that your scenarios are focused and relevant.

For example, if your product is a fitness app designed to help users achieve weight loss goals,
your user scenarios should focus on users who are trying to lose weight.

• Clear goals: Define what the user wants to achieve with the interaction. Goals should
be specific, measurable, achievable, relevant, and time-bound (SMART).

P a g e 35 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

• Alignment: Ensure user goals align with the product’s overall objectives. This ensures
the scenario contributes to the product’s success.

Step 4: map out the steps

Once you’ve defined your user’s goals, it’s time to visualize their journey through your product
or service. This involves mapping out the steps they’ll take to achieve their objectives. Keep
the following in mind:

• Sequence: Detail the step-by-step actions the user will take to achieve their goal.
Consider different paths the user might follow.

• Alternative paths: Include scenarios for unexpected situations, errors, or alternative

choices the user might make.

• Error scenarios: Address potential issues or roadblocks the user might encounter and
how they might resolve them.

*****

5.7 Flow Diagrams - Flow Mapping:

What is a UX flowchart?

✓ A UX flowchart is a simple map that shows the steps a user takes on your website or
app.
✓ It’s like a guide that helps you see how people move through your product to reach their
goal.
✓ This helps you see where things might go wrong so you can make the experience better.
✓ You can make flowcharts with pen and paper or use design tools.
P a g e 36 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Symbols to design a UX flowchart

✓ Just like a map, a flowchart uses symbols to show each step in the user’s journey.
✓ These symbols make it easy to understand what’s happening at every point.
✓ Let’s break down some of the key elements you’ll need to design a clear UX flowchart.
Start point: this is where the user’s journey starts. It could be when they open your app, land
on your homepage, or click a link. In most flowcharts, the start point is shown as a simple oval
shape. It’s like the first step on their path.

Actions: actions are what the user does, like clicking a button, filling out a form, or selecting
a menu option. These are usually shown as rectangles. Each action moves the user closer to
their goal.

Decision points: these symbols are like forks in the road. They represent moments where the
user has to make a choice, such as “Yes” or “No,” “Accept” or “Decline.” We use diamonds to
show these decision points, making it clear that the user can take different paths.

Arrows: arrows are the connectors that guide users from one step to another. They show the
flow of actions and decisions, helping everyone understand how each part of the journey is
linked.
End point: this is where the user’s journey wraps up. It could be completing a purchase,
signing up, or simply reaching a confirmation screen. Like the start point, the end point is often
shown as an oval. It signals the goal has been reached.

P a g e 37 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Design the perfect user flow with these UX flowchart design tips:

#1 UX flowchart design: get to know your users

Designing an efficient UX flowchart begins with the user. Who’s going to use the system? Start
by conducting user research and designing user personas, as this will help you define your
target audience and their needs.

#2 UX flowchart design: respect component standards

There are lots of ways to create your flowchart – pen and paper, using digital flowchart tools
like Lucidchart, and even a wireframe tool such as Justinmind. However, one of the main
benefits of creating a digital flowchart (as opposed to a paper one) is that there are loads of
free UI kits and resources available online to help speed up the process. However, flowchart
newbies may want to get their rough ideas out on paper before transferring them to the screen.

#3 UX flowchart design: stick to your design principles

According to IDF, design principles help reduce the thinking process by eliminating confusion,
improving the user experience.The same principles you follow when designing an interface can
and should be applied when designing a UX flowchart. Here are our top three must-apply UI
design principles:

P a g e 38 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

#4 Use your UX flowchart for better communication

Bringing a product to life is a matter that requires different types of professionals. UI designers,
information architects, programmers and developers – everyone has a part to play in the UX
game. And getting everyone on the same page is tough, as each one will need different types
of information in order to reach different goals within the product development.

Think of UI designers. Their main concern is the user and how they can create something that
fits the user like their favorite sweater – focusing on user’s needs, wants and preferences. But
how does that help developers? Developers need to have a different overview of the product in
order to understand the inner workings of the system – which touches navigation, system
interactions and reactions, etc.
Tools to create a UX flowchart

There are plenty out there, and each has its own set of features to make designing user flows
easier. Here’s a list to get you started.

1. Justinmind

✓ It’s a versatile user flow tool that makes creating user flows a breeze.

P a g e 39 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

✓ With its built-in UI kits and drag-and-drop features, you can design detailed flowcharts
quickly.
2. Lucidchart

✓ Lucidchart is another great option.

✓ It’s a web-based tool packed with templates and flowchart symbols to help you map
out user paths.
3. Miro

For those who like a more flexible, digital whiteboard experience, Miro is a good pick. It’s
simple to use and allows for free-form flowchart creation. You can easily add sticky notes,
shapes, and connectors to build out your user flows visually.

4. Sketch

If you’re a Sketch user, you can make use of plugins to design UX flowcharts. Although Sketch
is designed for creating wireframes and mockups, with the right plugins, you can add flowchart
elements to your design with ease.

5. FlowMapp

FlowMapp is designed specifically for creating UX flowcharts. It has an intuitive interface that
lets you build flowcharts and sitemaps easily. Its focus on UX design makes it a go-to tool for
mapping out detailed user journeys.

6. Draw.io
For a free and simple tool, Draw.io is a solid option. It’s web-based and provides a variety of
shapes and connectors to create detailed flowcharts. It might not have all the bells and whistles,
but it gets the job done.

7. OmniGraffle

OmniGraffle is great for more detailed and technical flowcharts. It offers powerful features for
creating complex diagrams, perfect for when you need more control over your design elements.

8. Figma

Figma isn’t just for UI design, it’s also a handy tool for creating UX flowcharts. With its drag-
and-drop elements and plenty of community-made plugins, you can build clean and interactive
user flows right within the design tool you’re already using.

9. Microsoft Visio

P a g e 40 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Microsoft Visio is a classic for creating diagrams and flowcharts. It’s packed with templates,
shapes, and symbols to help you build detailed user flows. If you’re already using Microsoft
Office tools, Visio integrates seamlessly, making collaboration with your team easier.

10. Cacoo

Cacoo is another web-based tool that makes building flowcharts super easy.. It comes with a
wide range of templates, and its drag-and-drop interface is perfect for creating user flows. Plus,
you can collaborate with your team in real-time, adding comments and edits as you go.

******

5.8 Information Architecture:

What is information architecture?

Information architecture can be surprisingly difficult to define. This is in part because while
other subjects such as content writing can be narrowed to a specific job title – the writer – the
field of IA stretches across many professions. In truth, everyone involved in product
development applies information architecture methodologies at some point – be it in
a wireframe or in a mind map.

P a g e 41 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

Is Information architecture the same as UX?

No. There is a strong connection between the two, but while UX involves a great deal of
Information architecture the two aren’t exactly the same thing.

UX is much broader, and includes several aspects of the user’s experience that IA never touches
– such as making sure the interface is pleasant, and responds to certain psychological needs of
the user. In contrast, information architecture is much more focused on the user’s goals and
cognitive effort usage.

Eight principles of information architecture:

1.The principle of objects

This principle regards how you see your content. Brown says that instead of looking at your
content as something stiff and inanimate, like an object, you try and see it as a living thing –
with its own lifecycle, behaviors and characteristics.

2.The principle of choices

Here’s the thing about giving your users lots of choices: the more choices we can make, the
more cognitive power it takes for us to actually make that call. It can even cause anxiety.

3.The principle of disclosure

This principle deals with the fact that people can only process new information in a certain
way. What we mean by this is that people don’t deal well with unexpected, or unwanted
information – this is a concept called progressive disclosure.

4.The principle of exemplars

This principle refers to the psychology of how humans categorize things. Ultimately, we are
able to categorize concepts by creating a list of examples that help us group different concepts
together, no matter the criteria behind this grouping.
P a g e 42 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

5.The principle of front doors

This can have surprising consequences on your webpage design, but less so on mobile app
design – the idea that your website has several doors that users can come through. This leads
Brown to make two main recommendations regarding your information architecture:

6.The principle of multiple classification

This is important to your design and IA, because you need to account for this in your search
system. This is a fine line to walk, because it comes with a catch: the more ways to find
information you give users, the more likely it is that they become overwhelmed or distracted.

7.The principle of focused navigation

Remember that IA is all about separating things according to their correct category, so the user
knows exactly where he is and where to find the desired information – not creating a web of
links that connect every little piece of information to the homepage.

8.The principle of growth

This is a rule that anyone working with content should bear in mind: the amount of content in
your product is likely to grow over time.

Understanding users and context before architecting information:

Before diving into information architecture, it’s crucial to understand the who and the where:
the users and the context in which they’ll interact with the information. Here’s a breakdown
of the three key concepts:

P a g e 43 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

User research: unveiling the "who"

✓ It’s all about uncovering the who, what, and why behind your target audience.
✓ For broader data collection, surveys cast a wider net, reaching a larger sample size
through online questionnaires.
✓ These research surveys can provide valuable quantitative data on user preferences and
behaviors.
User needs: Identifying the "why"

✓ Uncovering user needs is the cornerstone of user-centered information architecture.

✓ Through user research, you can delve into the core reasons why users interact with your
information.
✓ This research focuses on three key areas: user goals, user behaviors, and pain points.
Context of use: Considering the "where"

✓ Information architecture (IA) is the art and science of organizing information in a way
that’s easy for users to find, understand, and navigate.
✓ It’s the foundation for a great user experience (UX).

Design information architecture step by step:

1. Content Inventory and Audit: Unveiling your information assets

Before building your information architecture, it’s crucial to understand your existing content.
Here’s a two-step approach to take stock:
Content inventory

• Gather All Content: This is a comprehensive sweep of everything you offer. It includes
website pages, articles, documents, videos, images, and any other information users can
access. Don’t forget downloadable content like white papers or case studies.
• List and Categorize: Create a master list of all content items. Include details like title,
format (text, video, etc.), creation date, and a brief description of the content’s purpose.
• Use Spreadsheets or CMS: Organize your inventory for easy access and manipulation.
Spreadsheets can be helpful for smaller projects, while Content Management Systems
(CMS) offer robust features for managing and publishing large volumes of content.

Content audit

• Evaluate quality: Assess the accuracy, completeness, and timeliness of your content.
Does it meet current industry standards and best practices? For example, are your
articles well-researched and factually correct? Are your videos high-quality and up-to-
date?
P a g e 44 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

• Check relevance: Is the content relevant to your target audience and their needs?
Would they find it valuable? Analyze user behavior data to see which content pieces
resonate and which ones fall flat.

• Identify redundancy: Are there duplicate pieces of content that can be merged,
consolidated, or removed? Streamlining your content reduces confusion for users and
prevents them from encountering outdated information.
• Analyze performance: Look at metrics like user engagement (time spent on page,
number of scrolls) and bounce rates (percentage of users who leave a page immediately)
to identify underperforming content. Content with low engagement or high bounce rates
might need revision or removal.

2. Structuring Information: Building a clear hierarchy

Once you know what content you have, it’s time to organize it in a way that’s intuitive for
users. Here’s where hierarchy comes in:

• Start with main categories: Identify the broad categories that encompass all your
content. These categories should be clear, concise, and easily understood by your target
audience. For example, an e-commerce website might have main categories like
“Products,” “About Us,” and “Support.”

• Refine with subcategories: Break down main categories into smaller, more specific
subcategories. Maintain a logical flow between categories and subcategories. For
instance, the “Products” category might have subcategories for “Clothing,”
“Electronics,” and “Home Goods.” Each subcategory could then have its own set of
sub-subcategories for even more specific product types.

• Limit the number of main categories: Aim for 5-7 main categories to avoid
overwhelming users.

• Maintain consistency: Use the same hierarchical structure throughout your website or
application.

• Test your hierarchy: Conduct user testing to see if users can easily find the
information they’re looking for.

Organization schemes: choosing the right filing system:

P a g e 45 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

1. Alphabetical
✓ The alphabetical organization scheme excels for short lists or glossaries where users
have a specific term in mind.
✓ Its strength lies in fast and efficient retrieval.
✓ Imagine a phone book – you can instantly find a specific person’s listing by going to
the corresponding letter section.
✓ This familiarity with alphabetical order makes it easy to navigate and find information
without any special training.
2. Chronological
✓ The chronological organization scheme excels at presenting information that unfolds in
a sequence, allowing users to grasp the progression of events, concepts, or product
iterations.
✓ Imagine a historical timeline – it clearly portrays the past by laying out major events in
chronological order.
✓ This scheme is also intuitive for information that naturally follows a timeline, like
software updates or product releases.
✓ Users can easily track changes and see how things have evolved.

3. Geographical
✓ The geographical organization scheme shines for location-centric content, allowing
users to explore information based on their current location or desired destination.
✓ Imagine a travel guide app – with a few taps, users can discover nearby attractions,
restaurants, or hotels based on their GPS coordinates.
✓ This geographical organization empowers users to make informed decisions by
enabling them to compare options within a specific location.
4. Topical
✓ The topical organization scheme reigns supreme in its versatility.
✓ It seamlessly categorizes almost any type of content, from news articles to educational
resources, making browsing and discovery a breeze for users.

P a g e 46 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

✓ This scheme aligns perfectly with how people naturally think about information,
leading to an intuitive and user-friendly experience.

Organization Structure systems:

✓ The organizational structure is the act of making sense of your content.

✓ This is when you mark the connection between different pieces of information, and try
to come up with a framework that helps the user understand all those connections
among all the information your product has.
✓ Once the framework has been implemented, it makes it easier for the user to foresee
where certain information will be as there is a logic to the distribution of all the content
1. Hierarchical structures

Also known as tree structures, this would mean using a trickle down-effect, in which you use
broad categories at the top, and more specific and smaller subcategories the user can navigate
through.

2. Sequential structures

This form of information architecture organizes your content to create a certain path for your
user. This means the user will have to follow certain steps, and take in only the information
that is presented to them at that moment.

This works well to avoid giving too many choices to users, and have them become frustrated
or overwhelmed by all the possible choices at their disposal.

P a g e 47 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

3. Matrix structures

This is somewhat contrary to sequential structuring. While sequential organizing aims to take
the user by the hand down a series of designated steps, matrix structures will let the user choose
their preferred means of navigation. This translates into giving the user access to all the
information in the form of links and buttons, and letting them decide.

Complete Structure of Information Architecture:

****************** Best Of Luck ***********************

P a g e 48 | 49
 DEPARTMENT OF COMPTER SCIENCE AND ENGINEERING

CS3V13-UI & UX Design Unit-5

P a g e 49 | 49