Table of Contents

Week 1 UI/UX learning .................................................................................................... 4

Day1: introduction ........................................................................................................ 4

Day2: Principle of UI Design ...................................................................................... 10

DAY3: Interface Conventions .................................................................................... 14

Day4: Principle of UX................................................................................................. 26

Day5: Design for accessibility .................................................................................... 30

Week2 Figma: The Interface Design Tool ..................................................................... 32

Day1: Introduction...................................................................................................... 32

Day2: Creating and Designing ................................................................................... 35

Day3: Colours, Text Styles, and Components ........................................................... 36

Day4: Advanced Layout and Interactions .................................................................. 36

Day5: Prototyping, Animation .................................................................................... 36

Week3 Visual Design Principles .................................................................................... 37

Day1: Design thinking ................................................................................................ 37

Day2: Typography ..................................................................................................... 37

Day3: Colour Theory.................................................................................................. 39

Day4: Visual Hierarchy .............................................................................................. 43

Day5: Consistency and Branding .............................................................................. 44

Week4 User Research and Persona ............................................................................. 46

Day1: User Research Techniques ............................................................................. 46

Day2: Developing User Personas .............................................................................. 51

Day3: Mapping User Journeys .................................................................................. 56

Day4: Information Architecture .................................................................................. 59

Day5: Practice day..................................................................................................... 64

Week5 Wireframing and Prototyping ............................................................................. 65

Day1: Wireframing Essentials.................................................................................... 65

Day2: Low-Fidelity Prototyping .................................................................................. 72

Day3: High-Fidelity Prototyping ................................................................................. 75

Day4-5 Prototyping Tools .......................................................................................... 78

Week6 Interaction Design ............................................................................................. 78

Day1 Basics of Interaction Design ............................................................................. 78

Day2 Micro-interactions ............................................................................................. 82

Day3 Animations and Transitions .............................................................................. 85

Day4 Designing for Touch and Gesture..................................................................... 98

Day5 Advanced Interaction Techniques .................................................................. 100

Week7 Usability Testing .............................................................................................. 103

Day1: Planning Usability Testing ............................................................................. 103

Day2: Conducting Usability Testing ......................................................................... 108

Day3: Analysing Usability Data ................................................................................ 114

Day4: A/B Testing .................................................................................................... 119

Day5: Iterative Design and Testing .......................................................................... 125

Week8-9 ...................................................................................................................... 127

UI/UX Guide
Nature of the course: Theory + practical

Total Hour per day: 1 hour

Course Duration: 9 weeks

CourseSummary
Syvar Technology provides top-notch UI/UX design training to equip individuals with
essential skills for developing compelling web and mobile application designs. The
increasing demand for UI/UX designers in the IT industry has prompted us to offer this
course, providing graduates from our institute with abundant opportunities in the future.

Our course covers all the necessary concepts and roles essential for individuals aiming to
enhance their business or career by creating software or applications that meet customer

preferences and demands. Beyond just assisting in designing websites, software, or

applications, we empower participants to create their own websites with captivating

features and interfaces.

Course details

Week 1 UI/UX learning

Day1: introduction

• What is UI/UX.
 • Relationship between UI/UX.

Aspect UI (User Interface) UX (User Experience)

Focus Visual elements and layout Overall user interaction and satisfaction
Create an attractive and functional Ensure the product is easy to use and meets
Goal interface user needs
Buttons, icons, colors, typography, and
Components menus Usability, user research, personas, user journeys
Primary
Concern Aesthetics and interactivity Functionality, ease of use, and user satisfaction
User research, testing, and iterative
Design Process Graphic design, branding, and layout improvement
Outcome How the product looks How the product feels and performs
Ensuring the button is easy to find and
Example Designing a visually appealing button understand
Relies on UX insights to guide design Relies on UI to implement designs that meet
Dependency decisions user needs

• Roles in UI/UX.

UI/UX Designers play a crucial role in the development of digital products like
websites, mobile apps, and software. Their primary responsibilities revolve around
ensuring a seamless and effective user experience. Here’s a breakdown of their
key roles:

1. User Research and Analysis

• Understanding User Needs: They conduct user research to understand

the needs, motivations, and behavior of the users.
• Persona Development: Creating user personas to represent the different
types of users who might use their product.

2. Design and Prototyping

• Wireframing: Sketching basic layouts of web pages or app screens.

 • Prototyping: Creating interactive prototypes to simulate the final product.
• Visual Design: Designing the final graphical layout of the product with
attention to color schemes, typography, and design aesthetics.

3. Usability Testing

• Conducting Tests: Organizing usability testing sessions to gather

feedback on the prototypes.
• Analyzing Feedback: Analyzing user feedback to identify pain points and
areas for improvement.

4. Collaboration and Communication

• Working with Developers: Collaborating closely with developers to ensure

the design vision is translated into the final product.
• Stakeholder Engagement: Communicating with stakeholders to
understand their goals and constraints.

5. Accessibility and Inclusivity

• Ensuring Accessibility: Making sure the designs are accessible to all

users, including those with disabilities.
• Inclusive Design Practices: Incorporating diverse user needs to create
designs that are inclusive and cater to a wide audience.

6. Iteration and Improvement

• Iterative Design: Continuously improving the design based on user

feedback and changing requirements.
• Keeping Up with Trends: Staying updated with the latest design trends
and technologies.

7. User Interface (UI) Specifics

• Layouts and Elements: Designing intuitive and aesthetically pleasing

layouts.
 • Interactive Elements: Creating interactive elements like buttons and
menus.

8. User Experience (UX) Specifics

• User Journey Mapping: Mapping out the entire journey a user takes while
interacting with the product.
• Experience Strategy: Develop a strategy that defines the overall feel and
experience of the product.
• UI vs UX vs Frontend developer.

Aspect UI Designer UX Designer Frontend Developer

Visual elements and User experience and Coding and implementing
Primary Focus interaction design usability designs
Create an attractive and Ensure ease of use and Build responsive and high-
Main Goal functional interface satisfaction performance interfaces
Axure, InVision, Figma, User HTML, CSS, JavaScript,
Tools Used Sketch, Adobe XD, Figma testing tools React, Angular
Graphic design, visual User research, wireframing, Coding, web technologies,
Skills Required design principles prototyping responsive design
Style guides, high-fidelity User personas, wireframes, Functional web pages and
Typical Output mockups prototypes applications
Interaction with Rarely interacts directly Frequently interacts with Rarely interacts directly with
Users with users users for research users
Works closely with UX Works closely with UI Works closely with UI/UX
Collaboration designers and developers designers and stakeholders designers
• Job in the field of UI/UX designer.

UI Designer

Responsibilities: Design visual elements (layout, color, typography).

Skills: Graphic design, Sketch, Adobe XD, Figma.

UX Designer

Responsibilities: Conduct user research, create wireframes/prototypes.

Skills: User research, wireframing, prototyping.

UX Researcher

Responsibilities: Understand user needs and behaviors.

Skills: Research methods, data analysis, user testing.

Interaction Designer

Responsibilities: Design interactive elements and user flows.

Skills: Prototyping, interaction design principles.

Information Architect

Responsibilities: Organize and structure content.

Skills: Information architecture, navigation design.

UX/UI Developer

Responsibilities: Implement UI/UX designs into functional code.

Skills: HTML, CSS, JavaScript, responsive design.

Product Designer

Responsibilities: Oversee entire design process.

Skills: Cross-functional design, prototyping, user research.

 UX Writer

Responsibilities: Create user-friendly content.

Skills: Writing, UX principles, content strategy.

Visual Designer

Responsibilities: Focus on aesthetic aspects of UI.

Skills: Visual design, branding, typography.

Usability Analyst

Responsibilities: Evaluate and improve usability.

Skills: Usability testing, heuristic evaluation.

Practice:

Identify UI and UX elements in everyday applications.

https://careerfoundry.com/en/blog/ux-design/the-difference-between-
ux-and-ui-design-a-laymans-guide/

https://www.hotjar.com/ui-design/vs-ux-design/

https://www.interaction-design.org/literature/topics/ux-roles

An Introduction To UI Design (Free UI Design Tutorial) (careerfoundry.com)

An Introduction to User Experience Design (careerfoundry.com)

Day2: Principle of UI Design

Key design principles

• Alignment

Alignment refers to lining up the edges of elements on a page. When items are
aligned, they create a visual connection with each other. This helps the design look
clean and organized.

In your designs, always check that elements like text boxes, buttons, and images
line up with each other or follow a common edge. This makes the layout more
cohesive.

Example: Imagine you are arranging furniture in a room. If you align the edges of
the furniture with each other or with the walls, the room looks more tidy and well-
organized. Similarly, in UI design, aligning text, buttons, and images makes the
interface look structured and easy to follow.

• Balance

Balance is about distributing visual weight in your design. There are two types of
balance: symmetrical and asymmetrical. Symmetrical balance is when elements
are evenly distributed on both sides of a central axis, while asymmetrical balance
uses different elements to create an overall equal visual weight.

Ensure your design feels stable. Try to evenly distribute elements or use
contrasting sizes and colors to balance the visual weight across the screen.

Example: Think of a seesaw on a playground. If two people of equal weight sit on

either end, the seesaw balances perfectly (symmetrical balance). If one person is
heavier, the lighter person needs to move closer to the center to balance it out
(asymmetrical balance). In UI design, balance makes sure the design doesn’t feel
lopsided or heavy on one side.
• Contrast

Contrast is the difference between elements that makes them stand out from each
other. This can be achieved through color, size, shape, or texture. Contrast helps
to highlight important elements and guides the user's attention to key parts of the
design.

Use contrast to make important elements like buttons or headings stand out. For
instance, a bright button on a dark background draws attention, prompting users
to take action.

Example: Imagine reading a book with all text in the same color and size—it would
be hard to know what’s important. But if headings are larger and in a different color,
they stand out, making it easier to understand the structure and find information
quickly.

• Proximity

Proximity means placing related items close to each other. It shows that the items
are connected and belong together. This helps users to understand the structure
and organization of the content.

Group related elements close to each other. For example, place a label directly
above or beside its input field. This reduces the cognitive load on users, making
the design more user-friendly.

Example: Think of a grocery store: items in the same category (like fruits or dairy
products) are placed together. This makes it easier for shoppers to find related
items. Similarly, in UI design, grouping related elements (like a label and its input
field) together makes the interface more intuitive.

• Repetition

Repetition involves reusing the same elements throughout your design to create a
sense of consistency. It can be colors, fonts, shapes, or even layouts. Repetition
reinforces the overall design, making it more cohesive and easier to navigate.
 Establish a set of design rules (like a style guide) and stick to them. Use the same
colors for buttons, the same fonts for headings and body text, and consistent
spacing throughout your design.

Example: Think of a website where each page looks completely different. It would
be confusing to use. But if the same navigation bar, colors, and fonts are repeated
on every page, it creates a unified experience, and users know what to expect.

• Space (White Space)

Space, often called white space, is the empty space around elements. It doesn't
have to be white—it just means the absence of other elements. Space helps to
avoid clutter and makes the design more breathable and easier to read.

Don't be afraid of empty space. Use it to separate different sections of your design
and to give importance to elements by surrounding them with space. This makes
your design cleaner and more user-friendly.

Example: Imagine reading a book with no margins or paragraph breaks—it would

feel overwhelming. White space in UI design works the same way; it gives users’
eyes a place to rest and helps to focus on the important elements.

Summary

By applying these principles, it will be easy to create designs that are visually
appealing, easy to navigate, and effective in communicating their intended
message. Always remember to:

1. Align elements to create order.

2. Balance visual weight for stability.
3. Use contrast to highlight key features.
4. Group related items through proximity.
5. Repeat elements for consistency.
6. Utilize space to avoid clutter and enhance readability.
4 Golden rule of UI design

1. Prioritize consistency and usability

This principle represents two separate rules from Schneiderman’s list, both of
which overlap. The design throughout a web page or app should be consistent,
from the design of prompts and menus to the overall aesthetic of the
product. Consistent sequences of actions should be required for all similar
situations (i.e. if a user is required to swipe to proceed to the next page in one
instance, then the swiping gesture should be utilized for all similar tasks),
consistent commands should be expected, and designs should be accessible and
usable by as many people as possible, regardless of whether they are novice users
or experienced operators.

2. Make the interaction comfortable and clear

Ensure that there is nothing on the page that can confuse a user. When users
perform actions, offer informative feedback so that they know whether the action
has worked. For example, an app might acknowledge major actions through
changing the color scheme of a page or responding with animation, while
acknowledging minor actions by simply checking off a data entry field or graying
out sections that have already been completed. The goal of this rule is to offer
users a sense of relief and closure so that they know they don’t need to consider
contingency plans.

3. Prevent Error.

In a similar vein to reducing confusion, designers should ensure that—

a) The design of the page does not lead to serious errors (for example, a
web storage app should not place the “delete” button in a prominent
location where it can be accidentally clicked or tapped).
b) if an error is made, actions should be reversible as much as possible.
The latter is particularly important because the easy reversal of actions
relieves user anxiety, encourages exploration of unfamiliar options, and
 can save users time, especially when the units of reversibility vary
between a single action, a data entry task, or a complete group of
actions.

4. Don’t overwhelm Users.

Designers should reduce the short-term memory load on users. The rule of thumb
is that most people can remember seven—plus or minus two—chunks of
information at a time, so avoid interfaces that require users to remember
information across multiple pages. Users also don’t have patience for tedious data-
entry sequences, so avoid repetition and try to require as few users as possible.

Practice:

https://www.springboard.com/blog/design/golden-rules-of-ui-
design/

https://www.interaction-design.org/literature/topics/design-
principles

https://youtu.be/uwNClNmekGU?si=ZT1mCTBnoc3xXVfe

Evaluate popular websites for design principles like contrast, and balance.

DAY3: Interface Conventions

Interface Conventions: Theory

The Theory of Interface Conventions is the understanding that there are established
norms, guidelines, and practices governing the design and interaction of user interfaces.
These conventions are based on principles of usability, accessibility, and user
experience, aiming to create intuitive and efficient interfaces for users to interact with
digital systems. Let's explore the theory behind Interface Conventions:

Understanding Interface Conventions

• Usability principles:

Interface conventions are rooted in usability principles, which focus on designing

interfaces that are easy to learn, efficient to use, and error-tolerant. These
principles guide designers in creating interfaces that meet users' needs and
expectations.

• Predictability and Consistency:

Interface conventions prioritize predictability and consistency to enhance user

experience. By adhering to established design patterns and interaction behaviors,
interfaces become more intuitive and familiar to users, reducing cognitive load and
facilitating task completion.

• Accessibility standards:

Conventions encompass accessibility guidelines and standards to ensure

interfaces are inclusive and accessible to users of all abilities. Designers follow
accessibility conventions to create interfaces that can be used effectively by
everyone, regardless of their physical or cognitive abilities.

• Efficiency and Productivity:

Interface conventions optimize interface design for efficiency and productivity by

minimizing user effort and maximizing task completion speed. Consistent design
patterns and intuitive interactions streamline user workflows, enhancing overall
productivity.

• Feedback and Affordances:

Conventions emphasize providing users with clear feedback and affordances to

guide their interactions with the interface. Feedback mechanisms, such as visual
cues and interactive response states, communicate interface changes and user
actions, enhancing usability and comprehension.
 • Standardization and interoperability:

Interface conventions promote standardization and interoperability across interfaces

and platforms. Standardized design patterns, interaction behaviors, and data formats
enable seamless integration and communication between different applications and
devices.

Importance of Interface Conventions

• Consistency: Interface conventions establish consistency across interfaces,

enabling users to transfer their knowledge and skills from one interface to
another seamlessly.
• Usability: By following conventions, designers create interfaces that are
intuitive and easy to use, resulting in a positive user experience.
• Accessibility: Conventions ensure interfaces are accessible to users of all
abilities, promoting inclusivity and equal access to digital systems.
• Efficiency: Conventions optimize user workflows, minimizing cognitive load
and maximizing task efficiency.

Interconventions: Application.

1. Navigation Patterns:

Application: Websites commonly adhere to standard navigation patterns such as

horizontal menus at the top or sidebar menus on the left. By following these
conventions, users can quickly locate and access information without having to
relearn navigation systems.

2. Button Design:

Application: Buttons typically follow established design conventions, such as

using a rectangular shape with rounded corners and a contrasting color to indicate
interactivity. This adherence to conventions ensures users recognize buttons
intuitively and understand their purpose.
3. Form Layout:

Application: Forms often follow a standard layout with labels placed above input
fields. This convention simplifies form completion by aligning with users'
expectations and reducing cognitive load. Error messages or validation feedback
are commonly displayed below the respective input fields.

4. Iconography:

Application: Icons serve as visual cues to convey actions or concepts. Designers

leverage established iconography conventions to ensure users understand their
meaning. For example, a magnifying glass icon universally signifies search
functionality, while a trash bin icon represents deletion.

5. Typographic Hierarchy:

Application: Content hierarchy is established through typographic conventions,

such as using larger font sizes for headings and smaller sizes for body text. This
hierarchy aids readability and guides users' attention to important information,
improving comprehension.

6. Responsive Design:

Application: With the prevalence of various devices and screen sizes, responsive
design conventions dictate the adaptation of layouts and content to different screen
dimensions. By adhering to these conventions, interfaces maintain usability and
consistency across devices.

7. Error Handling:

Application: Error messages and feedback follow established conventions to

effectively communicate issues to users. These conventions include using clear
and concise language, highlighting the problematic field, and offering actionable
guidance to resolve the error.
 8. Accessibility Standards:

Application: Designing with accessibility standards in mind ensures inclusivity for

all users, including those with disabilities. Conventions such as providing
alternative text for images, maintaining sufficient color contrast, and implementing
keyboard navigation enhance accessibility.

9. Visual Feedback:

Application: Interactive elements provide visual feedback upon interaction to

acknowledge user actions. Conventions include button states like hover, active,
and focus effects, as well as animated transitions to indicate changes in interface
state.

10. Consistency Across Platforms:

Application: Interfaces maintain consistency in design elements and interactions

across platforms (e.g., web, mobile, desktop applications) to facilitate a seamless
user experience. Consistent conventions ensure users can transition between
different devices or environments effortlessly.

By applying Interface Conventions effectively, designers create interfaces that are

intuitive, accessible, and user-friendly, ultimately enhancing the overall user
experience.

Approaches to Screen-Based UI

• Template VS Content

In design, particularly web and graphic design, understanding the distinction

between template and content is crucial for creating effective and user-friendly
interfaces. Here’s a breakdown of what each term means, their roles, and how they
interact.

Template
 Definition: A template is a pre-designed structure or layout used to create a
consistent appearance and functionality across different pages or documents. It
serves as a blueprint for where various types of content will be placed.

Components:

• Layout: Defines the structure and arrangement of elements (headers, footers,

sidebars, content areas).
• Design Elements: Includes styles, colors, fonts, and other visual aspects that
ensure a cohesive look and feel.
• Functionality: Incorporates interactive components like navigation menus,
buttons, forms, and other widgets.

Role in Design:

• Consistency: Templates ensure a uniform look and feel across multiple pages or
documents, enhancing the user experience by providing predictability.
• Efficiency: Using templates speeds up the design process, as designers don't
need to start from scratch for each new page or document.
• Scalability: Templates make it easier to manage large websites or documents by
allowing changes to the template to be automatically reflected across all instances
where it’s used.

Examples:

Website CMS: Content Management Systems like WordPress or Joomla use

templates to provide a consistent design across all pages.

Email Marketing: Platforms like Mailchimp offer email templates to maintain a

consistent branding and layout across different campaigns.

Content
 Definition: Content is the information or material that is placed within the template.
It includes text, images, videos, links, and any other data that communicates the
intended message to the audience.

Components:

• Text: Headlines, paragraphs, lists, and other written information.

• Media: Images, videos, audio files, infographics, and other visual or auditory
materials.
• Links and Attachments: URLs, downloadable files, and other resources that
provide additional information or functionality.

Role in Design:

• Communication: Content is the primary vehicle for conveying information, ideas,

and messages to the audience.
• Engagement: High-quality, relevant content engages users, encourages
interaction, and drives them to take desired actions (e.g., subscribing, purchasing).
• SEO and Accessibility: Well-crafted content improves search engine optimization
(SEO) and ensures the site is accessible to users with disabilities.

Examples:

Blog Posts: Articles, news, and other written materials published within a blog
template.

Product Pages: Descriptions, images, and specifications of products within an e-

commerce site template.

Social Media Posts: Text, images, and videos shared on social platforms, often
within a predefined post template.

Interaction Between Template and Content

 • Integration: The template provides the framework into which content is
placed. Effective integration ensures that content fits well within the
template’s design and layout without looking out of place or breaking the
structure.
• Adaptability: Good templates are flexible enough to accommodate
different types and amounts of content, adjusting layout elements as
needed.
• Customization: While templates provide a consistent structure, they often
allow for customization to ensure the content aligns with specific branding
or functional requirements.

Example Analysis

Good Example: Medium (Blogging Platform)

Template:

• Layout: Clean, minimalistic layout with a focus on readability.

• Design Elements: Consistent use of fonts, colors, and spacing to create a

cohesive look.
• Functionality: Features like claps, comments, and sharing options
integrated seamlessly.

Content:

• Text: High-quality, well-formatted articles.

• Media: Authors can easily insert images, videos, and other media to
complement the text.
• Links: Embedded links and references are easily incorporated.

• Interaction:

• Integration: Articles fit perfectly within the layout, maintaining readability

and aesthetic appeal.
 • Adaptability: The template adjusts for different lengths of articles and
varying media types.
• Customization: Authors can format their text and media to suit their style
while adhering to the platform’s overall design.
• Bad Example: Early MySpace (Social Networking Site)

Template:

• Layout: Users could customize their profiles extensively, leading to

inconsistent layouts.
• Design Elements: No unified design language, with users choosing
different backgrounds, fonts, and colors.
• Functionality: Variable, depending on user customizations.

Content:

• Text: User-generated content with varying quality and formatting.

• Media: Extensive use of images, videos, and music, often leading to clutter.

• Links: Numerous external links, sometimes poorly integrated.

Interaction:

• Integration: The high level of customization allowed for user profiles led to
poor integration, with content often clashing with the template, making
pages difficult to read and navigate.
• Adaptability: The lack of a standardized template meant that the site
didn't adapt well to different content types and lengths, leading to
inconsistent user experiences.
• Customization: While customization was a key feature, it often resulted in
a chaotic user interface, with varying levels of readability and usability
depending on individual user choices.

Key Takeaways
 • Templates Provide Structure and Consistency: They ensure a uniform
appearance and functionality across different pages or documents,
enhancing usability and user experience.
• Content Delivers the Message: It includes the information, media, and
interactive elements that engage users and convey the intended message.
• Effective Interaction is Crucial: The best designs balance the flexibility of
the template with the needs of the content, allowing for a cohesive,
adaptable, and user-friendly experience.
• Customization Should Be Controlled: While customization options are
important for personalizing content, they should be managed to maintain
overall consistency and usability.
• Understanding the interplay between templates and content is essential for
creating designs that are both visually appealing and functionally effective.
By carefully balancing these elements, designers can ensure that their work
not only looks good but also provides a seamless and engaging user
experience.

• Aesthetics and Functionality

Aesthetics and functionality are two essential aspects of design that work together to
create effective and appealing products. Let's explore how they intersect and
contribute to the overall user experience:

Aesthetics:

Definition: Aesthetics refers to the visual appeal and sensory experience of a

design. It encompasses elements such as colors, typography, imagery, layout, and
overall visual style.

Importance:
• Aesthetics play a crucial role in capturing users' attention and making a positive
first impression.
• Well-designed aesthetics can evoke emotions, convey brand identity, and
enhance user engagement.
• Aesthetic considerations contribute to overall user satisfaction and enjoyment of
the product.

Application:

• Choosing a visually pleasing color palette that aligns with the brand identity and
target audience.
• Using appropriate typography that enhances readability and complements the
overall design aesthetic.
• Incorporating high-quality imagery and visual elements to convey messages and
create visual interest.
• Applying principles of visual hierarchy and balance to create harmonious and
engaging layouts.

Functionality:

Definition: Functionality refers to the usability and practical aspects of a design.

It involves how well a product meets users' needs, enables tasks to be completed
efficiently, and provides a seamless user experience.

Importance:

• Functionality is essential for ensuring that users can easily accomplish their goals
and tasks within the product.
• Well-designed functionality enhances usability, reduces friction, and fosters user
satisfaction.
• Functionality directly impacts the effectiveness and efficiency of the product in
fulfilling its intended purpose.

Application:
 • Designing intuitive navigation and information architecture to help users find
content or features quickly.
• Implementing responsive and accessible design principles to ensure usability
across various devices and user contexts.
• Incorporating clear and concise feedback mechanisms to guide users and provide
assistance when needed.
• Conducting user testing and feedback iterations to identify and address usability
issues and optimize functionality.

Integration of Aesthetics and Functionality:

1. Balancing Priorities: Designers must strike a balance between aesthetics

and functionality to create a harmonious user experience. Both aspects
should complement each other rather than compete for attention.
2. User-Centered Design: A user-centered approach ensures that aesthetics
and functionality are tailored to meet users' preferences, behaviors, and
needs effectively.
3. Iterative Design Process: Continuous refinement and iteration allow
designers to optimize both aesthetics and functionality based on user
feedback and evolving design requirements.

Conclusion:

Aesthetics and functionality are integral components of design that work together
to create compelling and user-centric products. By carefully considering both
aspects, designers can achieve a balance between visual appeal and usability,
ultimately delivering a superior user experience.

Practice:

https://careerfoundry.com/en/blog/ux-design/the-fascinating-history-
of-ux-design-a-definitive-timeline/

https://www.knut.com/resources/the-history-of-ui-ux-design-
a%C2%A0look-through-time-at-the-art-of-interface-design/
https://www.interaction-design.org/literature/article/principle-of-
consistency-and-standards-in-user-interface-design

Day4: Principle of UX

Key UX principle
1. User-centered Design: This is the foundation of UX design. It means prioritizing
the user's needs and goals throughout the design process. Instead of focusing on
what the designer thinks is cool, successful UX design revolves around
understanding user research, including their pain points, tasks, and expectations.

Example: Imagine designing an ATM. Instead of focusing on a flashy interface,

user research might reveal people primarily use ATMs for quick cash withdrawals.
A user-centered design would prioritize a clear and simple interface with a
prominent "Withdraw Cash" button and straightforward steps to complete the
transaction.
2. Consistency: Consistency ensures users can navigate your product intuitively by
following familiar patterns. This applies to layout, terminology, and interaction
design.
Example: E-commerce websites often maintain a consistent layout across product
pages. The "Add to Cart" button is typically placed in the same location, and size
and color options use the same icons. This consistency allows users to move
between products seamlessly without having to re-learn the layout each time.

3. Hierarchy: Not all information is created equal. Visual hierarchy guides the user's
eye to the most important elements first. This can be achieved through size, color,
contrast, and placement.
Example: News websites use a hierarchy to prioritize headlines. Headlines are
displayed in a larger, bolder font than article text. This guides the user's eye to the
most important information first, allowing them to quickly scan headlines to find
articles of interest.
4. Context is : The way information is presented should adapt to the situation. For
instance, a mobile app might condense information compared to a desktop
website. Consider the user's device, task, and environment when designing the
experience.
Example: A weather app might display a detailed hourly forecast on a desktop
website, while the mobile app might show a simplified 3-day forecast. Both
versions provide the core information, but the format is tailored to the user's device
and likely need for quick access on the go.
5. User in Control: Users should feel like they are in control of the product, not the
other way around. Provide clear affordances (visual cues that indicate how to
interact with elements) and avoid hidden menus or confusing confirmation steps.
Users should be able to easily undo mistakes and exit unwanted processes.
Example: Many online forms allow users to preview their submitted information
before final confirmation. This empowers them to catch typos or make changes
 before it's submitted. Another example is the ability to "undo" or "redo" actions,
giving users control and the ability to fix mistakes.
6. Accessibility: A core principle of UX is ensuring everyone can use your product,
regardless of ability. This includes incorporating features for users with visual,
auditory, motor, or cognitive impairments. Following accessibility guidelines allows
you to reach a wider audience and create a more inclusive product.
Example: A video streaming service might include features like captions for the
deaf and hard of hearing, audio descriptions of visuals for blind users, and the
ability to adjust font size and color contrast for users with visual impairments. By
incorporating these features, the service becomes usable for a wider audience.
7. Usability Testing: The best way to ensure your design is effective is to see how
real users interact with it. Usability testing involves observing users as they
complete tasks and identifying any usability problems. By iteratively testing and
refining your design based on user feedback, you can create a product that is truly
user-friendly.
Example: Let's say you designed a new fitness tracker app. Usability testing
involves observing real users trying to navigate the app and complete tasks like
tracking their workout or setting goals. If users consistently struggle to find a
particular feature, it might be a sign the design needs to be adjusted for better
usability. Through iterative testing and refinement, you can create a user-friendly
experience.
Define the user, end user, and user experience

User:Any individual who interacts with a product or service.

Examples:

• A visitor browsing a website.

• A customer using a mobile app.

Key Points:

• Users have diverse needs and expertise levels.

• Interaction can be casual or frequent.

End User: The specific type of user who ultimately uses the product for its intended
purpose.

Examples:

• A student using an educational app.

• A patient using a health tracking device.

Key Points:

• Primary focus of user-centered design.

• Understanding their context and needs is crucial.

User Experience (UX): Encompasses all aspects of an end user's interaction with
a product, service, or company.

Components:

• Usability: Ease of use.

• Accessibility: Inclusivity for all users.

• Desirability: Appeal and emotional connection.

• Findability: Ease of finding information.

• Credibility: Trustworthiness.
 • Utility: Functional usefulness.

Examples:

• A well-designed website with intuitive navigation and quick load times.

• A problematic app with poor navigation and frequent crashes.

Key Points:

• UX is holistic and considers the entire user journey.

• Good UX addresses both functional and emotional user needs.

Practice:
https://careerfoundry.com/en/blog/ux-design/10-ux-laws-principles/
https://www.uxdesigninstitute.com/blog/ux-design-principles/
https://lawsofux.com/

Day5: Design for accessibility

Universal design, inclusive design and equity focused design

https://youtu.be/gIipuyUyfTs?si=NQrYN00x0LOEAq_s
https://youtu.be/cd1n0OT2UFU?si=mlw-5g2JGdMemh1f
https://medium.com/@genis.hti/universal-design-inclusive-
design-and-equity-focused-design-df51e1e9d4f0

Key framework in UX design

https://blog.logrocket.com/ux-design/ux-design-frameworks-types/#examples-of-
ux-design-frameworks
Importance of accessibility

Accessibility is crucial because it ensures that everyone, regardless of ability or disability,

can access and benefit from the same resources, services, and opportunities. Here are
some reasons why accessibility is important:

• Inclusivity: Accessibility promotes inclusivity by ensuring that all individuals,

regardless of their physical, cognitive, or sensory abilities, can fully participate in
society. It helps prevent discrimination and exclusion based on disabilities.
• Equal Opportunity: Accessibility levels the playing field and provides equal
opportunities for all individuals to engage in education, employment, recreation,
and other activities. It ensures that people with disabilities have the same rights
and opportunities as everyone else.
• Diverse Perspectives: When products, services, and environments are designed
with accessibility in mind, they benefit everyone, not just those with disabilities. For
example, captions benefit not only deaf individuals but also people watching videos
in noisy environments or those who prefer to watch content without sound.
• Legal and Ethical Obligations: Many countries have laws and regulations that
mandate accessibility, such as the Americans with Disabilities Act (ADA) in the
United States and the Web Content Accessibility Guidelines (WCAG). Ensuring
accessibility is not only a legal requirement but also an ethical responsibility.
• Business Advantage: Making products and services accessible can expand the
customer base and increase market share. It demonstrates a commitment to
diversity and inclusion, which can enhance a company's reputation and brand
loyalty.
• Innovation: Designing with accessibility in mind often leads to innovative
solutions that benefit a wide range of users. Constraints imposed by accessibility
requirements can inspire creative problem-solving and lead to new technologies
and design approaches.
• Social Responsibility: Prioritizing accessibility is a matter of social responsibility,
recognizing the inherent worth and dignity of every individual. It fosters a more
 equitable and compassionate society where everyone can participate fully and
contribute their talents and skills.
https://designlab.com/blog/accessibility-resources-ux-design
https://careerfoundry.com/en/blog/ux-design/the-importance-of-usability-and-
accessibility-in-design/

Importance of equity focused design

https://uxplanet.org/designing-for-all-building-inclusive-and-equitable-experiences-
4a6c9c8213cb

Week2 Figma: The Interface Design Tool

Day1: Introduction

● Introduction to Figma

https://youtu.be/FTFaQWZBqQ8?si=vUqBXWEm_ckiRPjO

https://youtu.be/JGLfyTDgfDc?si=wKXmPUO9JoVjlVpV

● Web app vs Native App

Web app

The Figma web app runs in your browser. It is platform-independent,

meaning it can be accessed from any operating system (Windows, Mac,
Linux) with an internet connection.

Advantage:

• Accessibility: Accessible from any device with a browser and

internet connection. You can work on your designs from anywhere.
• No Installation Required: You don't need to install any software.
Simply go to the Figma website and log in.
 • Updates: Automatically receives updates and new features without
requiring manual downloads.

Limitation:

• Internet Dependency: Requires an active internet connection.

Performance might be slower if your internet connection is weak or
unstable.
• Browser Limitations: May be constrained by browser performance
and limitations. For example, browser crashes or memory limitations
can impact your work.

Example Use Case: Imagine you are a designer working from different
locations—home, office, and while traveling. Using the web app allows you
to access your work without worrying about which device you are using.
You simply log into Figma from any browser, and your workspace is ready
for you.

Native App

The Figma native app is a standalone application installed on your

computer. It is available for Windows, Mac, and Linux.

Advantage:

• Performance: Generally offers better performance compared to

the web app. It can handle larger files and more complex designs
more efficiently.
• Offline Access: You can work offline. Changes will sync when
you reconnect to the internet.
 • Integration: Better integration with the operating system, such
as file management, system-wide shortcuts, and potentially fewer
browser-related issues.

Limitation:

• Installation Required: You need to download and install the

app, and manually update it.
• Device Dependency: Tied to the device where the app is
installed. While you can install it on multiple devices, it’s less
flexible than a web browser for quick access.

Example Use Case: Suppose you are working on a complex design

project with large files and multiple high-resolution images. The native
app will provide better performance and stability. Additionally, if you are
traveling and do not always have reliable internet access, the ability to
work offline is crucial.

● Figma User Interface, Community, Plugins

https://youtu.be/0FKoJvUdlDI?si=ggZiKeW1nKHkeg0U

https://youtu.be/g6rQFP9zCAM?si=CxyvvGX-bRrh9Lfi

Practice:https://www.geeksforgeeks.org/difference-between-native-apps-and-
web-apps/

https://www.graphiclabstudio.com/post/figma-desktop-vs-web-which-is-right-for-
your-design-needs
Day2: Creating and Designing

• Creating New Files & Designing on a Grid:

Perfect Responsive Grid Systems Masterclass | UI Design & Figma Tutorial

How to Create a Responsive Bento Box Grid Layout | Figma Tutorial

• Creating a new file, Setting up frames, Adding text, Creating colored

backgrounds for text columns:

Figma Tutorial For Beginners 2024 | Web Design of Landing Page

Learn Figma Auto Layout in 10 Minutes (Everything You Need To Know)

MASTER Figma Components in 10 Minutes (Everything You Need To

Know)

• Importing and Cropping Photos:

Figma : How to Crop Image into Shape in Figma (2024)

How to Crop Images into Shapes in Figma

• Importing and modifying vector graphics:

How to Edit Vectors in Figma

Figma Tutorial: Import Adobe Illustrator files to Figma with one click

• Aligning and distributing layers:

Master Auto Layout in 20 minutes | 2023 Auto Layout Figma Tutorial

Watch This To Finally Understand FRAME CONSTRAINTS in Figma

• Layer opacity vs. fill opacity:

How to Make Background Transparent in Figma

Figma Tutorial for Beginners (2024): Website Design

Day3: Colours, Text Styles, and Components

• Colours
https://youtu.be/Xjog-H8VNqw?si=6akRQHtf9R1s54F3
• Text styles
https://youtu.be/hwjiExdMiNY?si=rdRCDXt-7oQncq3z
• Components
https://youtu.be/KnmxD8LvHmA

Day4: Advanced Layout and Interactions

• Auto Layout
https://youtu.be/wukJ1MTRxgQ?si=zpBX4K6fLIy7nJhD
https://youtu.be/fXl3WY_EzHU?si=gCAsULHFE8cAuP0a
• Variants
https://youtu.be/AwnJyGV-3Zs?si=GGm5RvmHcTUiuIWd
https://youtu.be/Z3In89pq8x4
• Hovers and Overlays
https://youtu.be/CxQtyupyqZo?si=ROAFk4j7-pTtAnvH
https://youtu.be/t82XRda5DnY?si=Eu060Cjfm97wGSHr

Day5: Prototyping, Animation

• Turning a Design into Clickable Prototype

https://youtu.be/LdkBokSj3aw?si=D8IVu75lVK7wgZKS
https://help.figma.com/hc/en-us/articles/360051748654-Prototype-
easing-and-spring-animations
• Figma Animation: Intro to Smart Animate
https://youtu.be/thplNeqE9Tg?si=PJE4S_gEj011VG8V
https://www.youtube.com/watch?v=qG5p1pd8eGo
 https://help.figma.com/hc/en-us/articles/360039818734-Prototype-
scroll-and-overflow-behavior

• Linking Up / Down a Page, Scrollable Areas and Hyperlinks

https://designcode.io/figma-handbook-sticky-nav
https://www.nobledesktop.com/learn/figma/linking-up-down-a-page-
scrollable-areas-hyperlinks

Week3 Visual Design Principles

Day1: Design thinking

Documentation

Practice:

Day2: Typography

Role of Typography in UI/UX Design

Typography plays a crucial role in UI/UX design by impacting how users perceive,
interact with, and navigate your digital product. Here's a breakdown of its
significance:

1. Readability and Clarity:

The primary function of typography is to ensure clear and effortless reading.

Choosing legible fonts with appropriate sizes and spacing allows users to consume
information efficiently.
Poor typography choices can lead to eye strain, frustration, and ultimately, hinder
user experience.

2. Visual Hierarchy and Information Architecture:

Typography helps create a visual hierarchy by using different font sizes, weights,
and styles. This guides users' attention towards important information, titles, calls
to action, and body text.

Effective typography creates a clear information architecture, allowing users to

scan the interface and locate what they need quickly.

3. Setting the Tone and Brand Identity:

The typefaces you choose can convey a specific mood or personality for your
brand. For example, serif fonts might suggest tradition and elegance, while sans-
serif fonts can project a modern and minimalist aesthetic.

Consistent use of typography throughout your interface reinforces brand

recognition and builds a cohesive user experience.

4. User Experience and Usability:

Readable typography directly impacts user experience by making interactions

smoother and less effortful. Proper font size and spacing on buttons, menus, and
forms ensure users can click and interact with the interface easily.

Typography also plays a role in accessibility, as users with visual impairments

might rely on larger font sizes or specific font types for optimal usability.

Additional Considerations:

Font Pairing: Choosing complementary font styles for headings, body text, and
accents creates a visually pleasing and balanced interface.

Line Length and Whitespace: Optimal line length and proper use of whitespace
improves readability and prevents text from appearing overwhelming.
 Responsiveness: Ensuring typography adjusts and maintains readability across
different screen sizes for optimal viewing on various devices.

https://careerfoundry.com/en/blog/ui-design/typography-ui-design/

https://medium.com/nyc-design/typography-the-basics-and-beyond-in-ui-ux-
design-52f946c43d65

Practice:

Experiment with different font pairings and styles using online tools like Google
Fonts. Create a typography hierarchy for a sample project.

Redesign the text elements of a sample webpage or app screen, focusing on

improving readability and visual appeal using different typographic styles.

Day3: Colour Theory

Color theory is the framework surrounding the use of color in art and design.
Recognize the color wheel that pops up on most basic color tools?

The basic color wheel displays three categories of color:

Primary colors: Red, blue, and yellow.

Secondary colors: Orange, purple, and green

Tertiary colors: Magenta, vermillion, violet, teal, amber, and chartreuse.

The color wheel charts these colors and their respective hues, tints, tones, and
shades. By being able to visualize how each color relates to the color next to it on
the color wheel, designers can create bespoke color palettes that give the interface
a balanced and harmonized aesthetic.

Let’s look more closely at these color variants:

Hue refers to the pure pigment of a color, without tint or shade. Any of the six
primary and secondary colors is a hue.

Shade refers to how much black is added into the hue. As such, shade darkens a
color.

The opposite of shade, tint refers to how much white is added to a color. As such,
tint lightens a color.

Tone is the result of a color that has had both white and black added to it.

Color temperature refers to the warmth or coolness of a color depending on what

colors have been added to it. Warm colors contain shades of yellow and red; cool
colors have a blue, green, or purple tint; and neutral colors include brown, gray,
black, and white.

Color systems
Color has two different natures: the tangible colors that can be seen on the surface
of objects, and the colors produced by light. These two types of color are known
as the additive and subtractive color systems. The third color system, called the
HEX system, is concerned with digital colors.

Let’s take a closer look at what they mean.

The additive color system (RGB)

RGB stands for red, green, and blue, and is based on the additive color model of
light waves that dictates that the more color you add, the closer the color gets to
white. RGB is primarily used on digital screens.

The subtractive color system (CMYK)

CMYK stands for cyan, magenta, yellow, and black, and it is commonly used in
physical printing. CMYK obtains colors by the subtraction of light.
The HEX color system

The HEX color system is based on a 16-digit system that goes from zero to nine,
followed by the letters a to f, where 0 is the lowest possible value and f the highest.
These digits are used to produce a “HEX triplet” or six-digit combination of
numbers and letters that represent a color called “HEX codes.” Each pair of
numbers in a HEX code represents the red, green, and blue components of each
color. In web design, every digital color has a HEX code.

For eg. Lighter / Darker: ; 45%, #e60000 ; 40%, #cc0000 ; 35%, #b30000 ; 30%,
#990000 ; 25%, #800000.

Choosing colors for your app

There’s so much more to choosing colors for your app than simply picking your
favorite colors. Before you dive into applying colors to your app screens, let’s look
at some key considerations to bear in mind.

Color psychology

To get you up to speed, let’s take a look at some of the most common color
associations below:

Orange is energetic and warm.

Red is associated with energy, war, passion, desire, and love.

Yellow evokes positivity, youth, joy, playfulness, sunshine, and warmth.

Pink evokes feelings of innocence and delicateness, gratitude, romance, softness,

and appreciation.

Blue is perceived as authoritative, dependable, and trustworthy.

Green symbolizes growth, freshness, serenity, money, health, and healing.

Black represents power, elegance, and authority.

Depending on which climate change app you’re designing, these color

associations are useful for deciding what you want your users to feel. For example,
if you’re designing the Ethical Eater app, green, yellow, or orange might elicit
emotions that are synonymous with ethical eating, vegetables, and veganism. For
the Activist App, blue, green, or black might fit well with the themes of activism and
sharing ideas.

Contrast
User interfaces containing only shades from the same color family are unlikely to
draw users’ attention—and, moreover, run the risk of being a complete headache
to navigate. Aim for a mild level of contrast and apply high contrasting colors only
for elements that are supposed to stand out, such as call-to-action buttons.

Stick to UI conventions

When working with colors, it’s easy to get carried away with aesthetics over
practicality. Of course, it’s great to be experimental—but challenging design
conventions with edgy or trendy designs can end up giving your users a headache.

Some common UI design color conventions include:

Using a dark color for text to ensure legibility

Keeping light colors for backgrounds

Using contrasting colors for accents (as mentioned above)

Sticking to classic call-to-action colors—such as red for a warning sign

Sticking to these conventions will reduce the cognitive load for your users and
allow them to navigate the interface intuitively.

Use the 60-30-10 rule

This popular interior design trick is a great way to keep your interface balanced.
This formula dictates that 60% of your website should be made up of your dominant
 hue, 30% should be your secondary color, and the remaining 10% should be your
accent color. Sticking to this formula will allow the eye to move comfortably from
one focal point to the next.

Practice:

Create three different color palettes for a fictional brand, considering different
moods and user demographics. Use tools like Adobe Color or Coolors.

Apply one of the color palettes to a wireframe or mockup, ensuring good contrast
and accessibility.

https://thefutur.com/content/how-to-use-color-color-basics

https://www.smashingmagazine.com/category/color-theory/

https://99designs.com/logo-design/psychology-of-color

https://www.interaction-design.org/literature/topics/color

Day4: Visual Hierarchy

https://www.interaction-design.org/literature/topics/visual-
hierarchy#:~:text=Visual%20hierarchy%20is%20the%20principle%20of%20arrangin
g%20elements,users%E2%80%99%20perceptions%20and%20guide%20them%20t
o%20desired%20actions.

https://youtu.be/8OTbyWndY9M?si=m0Ln6yuEYj3r-BVZ

https://www.masterclass.com/articles/visual-hierarchy

https://www.kimp.io/visual-hierarchy/

https://uxplanet.org/9-effective-tips-on-visual-hierarchy-
c3b30a7fd0ef

Practice:
 Perform a critique of an existing webpage or app screen, identifying issues with visual
hierarchy and proposing improvements.

Day5: Consistency and Branding

1. Introduction to Consistency in UI/UX Design

Explain what consistency means in the context of UI/UX design and why it's crucial.

Types of Consistency:

• Visual Consistency: Colors, typography, icons, and layout.

• Functional Consistency: Interaction patterns, behavior of UI elements.
• Internal Consistency: Consistency within the product itself.
• External Consistency: Consistency with other products and platforms users
might be familiar with.

2. Benefits of Consistency

• Enhances Usability: Making the interface predictable and easy to use.

• Builds Trust: Users trust a consistent and stable interface.
• Increases Efficiency: Users complete tasks faster with familiar patterns.
• Seamless User Experience: Ensures a smooth flow through the application.
• Supports Accessibility: Consistent design aids users with disabilities.

3. Consistency Best Practices

• Design Systems and Style Guides: Importance of creating and maintaining

them.
• Component Libraries: Use of reusable components.
• Regular Audits: Periodic checks to ensure consistency.
• Feedback Loops: Incorporating user feedback to maintain consistency.

4. Introduction to Branding in UI/UX Design

What branding is and why it's important in UI/UX.

 Elements of Branding:

• Visual Identity: Logo, color scheme, typography.

• Voice and Tone: The personality and language used in the UI.
• Values and Mission: Communicating the brand’s core principles and
mission.

5. Benefits of Strong Branding

• Establishes Identity: Distinguishes the product from competitors.

• Builds Emotional Connection: Creates loyalty and positive user
associations.
• Communicates Values: Conveys the brand’s message and mission.
• Perceived Quality: Enhances the perceived quality and professionalism.
• Supports Marketing: Reinforces marketing efforts and brand recall.

6. Branding Best Practices

• Consistent Visuals: Uniform use of logos, colors, and typography.

• Brand Guidelines: Creating and adhering to comprehensive brand
guidelines.
• Storytelling: Using the UI to tell the brand’s story and convey its values.
• User Research: Understanding user perceptions and aligning them with the
brand.

7. Integrating Consistency and Branding

• Unified Design Systems: Merging design systems with brand guidelines.

• Cross-functional Collaboration: Working closely with marketing,
development, and other teams.
• User-Centered Design: Ensuring user needs and preferences align with
brand and consistency efforts.
 Practice: Assign projects that require maintaining consistency and applying
branding principles.

Watch a video tutorial on creating a design system.

https://uxdesign.cc/designing-for-brand-integrity-how-to-
integrate-branding-into-the-ux-process-295266e5b48e

https://www.uxpin.com/studio/blog/guide-design-consistency-
best-practices-ui-ux-designers/

https://careerfoundry.com/en/blog/ui-design/the-importance-of-
consistency-in-ui-design/

Week4 User Research and Persona

Day1: User Research Techniques

• What is user research?

User research is a critical component of the UI/UX design process that involves
understanding users' needs, behaviors, motivations, and pain points through
various qualitative and quantitative methods. The primary goal of user research is
to gather insights that inform and guide the design process to create products that
are user-centered and effectively meet user needs.

Methods of User Research

Qualitative method:

• Interviews: One-on-one conversations with users to gather detailed insights about

their experiences and needs.
 • Focus Groups: Group discussions to explore users' attitudes, feelings, and
reactions to a product or concept.
• Observations: Watching users interact with a product in their natural environment
to understand their behavior.
• Diary Studies: Users document their interactions with a product over time,
providing insights into their long-term use and experience.

Quantitative methos:
• Surveys: Structured questionnaires that gather data from a larger user base,
providing statistical insights.
• Analytics: Analyzing usage data from the product to understand user behavior
and identify trends.
• A/B Testing: Comparing two versions of a product to see which one performs
better in terms of user engagement and satisfaction.

Steps to conduct user research.

User research is a valuable process that can be broken down into several key steps:

a. Define Your Research Goals:

This is the critical first step. What do you want to learn from your research? Are
you trying to understand user needs for a new product, identify pain points with an
existing feature, or gauge user experience (UX) with a website redesign? Clearly
defined goals will guide your entire research process.

b. Choose Your Research Methods:

There's no one-size-fits-all approach to user research. Different methods are

suited for different goals. Here are some common techniques:

• Interviews: In-depth conversations with users to gain rich qualitative data

about their experiences, thoughts, and feelings.
 • Surveys: Efficient way to gather quantitative data and reach a larger pool
of users.
• Usability Testing: Observing users interact with a product to identify
usability issues and areas for improvement.
• Card Sorting: Helps understand how users categorize information and
organize content.
• A/B Testing: Comparing two versions of a design element to see which one
performs better with users.
c. Develop a Research Plan:

This plan outlines the specifics of how you'll conduct your research. It should
include:

• Target Audience: Who will you be recruiting for your research?

• Sample Size: How many participants will you need to gather reliable data?
• Research Questions: Specific questions you aim to answer through your
chosen methods.
• Data Collection Tools: Surveys, interview scripts, screener questions for
recruiting participants, etc.
d. Recruit Participants:

Find the right users to participate in your research. Ideally, they should represent
your target audience and possess the characteristics you're looking for.

e. Conduct the Research:

This is where you put your plan into action! Follow best practices for your chosen
methods, be empathetic and objective in your approach, and strive to create a
comfortable environment for participants.

f. Analyse and Synthesize Results:

Once you've collected your data, it's time to make sense of it. Analyse the data
from interviews, surveys, or usability tests to identify patterns, trends, and key
takeaways.
g. Share Your Findings:

Communicate what you learned from your research to stakeholders and team
members. Present your findings in a clear and concise way, highlighting insights
that can inform design decisions and product development.

By following these steps, you can conduct effective user research that provides
valuable insights to create user-centered products and services.

• What is the purpose of user research?

The purpose of user research is to put your design project into context. It helps
you understand the problem you’re trying to solve; it tells you who your users are,
in what context they’ll be using your product or service, and ultimately, what they
need from you, the designer! UX research ensures that you are designing with the
user in mind, which is key if you want to create a successful product.

Throughout the design process, your UX research will aid you in many ways. It’ll
help you identify problems and challenges, validate or invalidate your assumptions,
find patterns and commonalities across your target user groups, and shed plenty
of light on your users’ needs, goals, and mental models.

• Why is it so important to conduct user research?

As mentioned, effective user research is an important aspect of any successful

business and can lead to numerous potential benefits. If you're still contemplating
whether it's worth your time and effort, here are some of its advantages:

➢ Customer-centric design

The first benefit from effective user research is creating a customer-centric

design. By understanding how the users interact with your product or service,
you can tailor the design to their wants and needs. Not only will this lead to
improved product usability, but it’ll also enhance user satisfaction.

➢ Improved product usability

Addressing all the pain points and areas of improvement will also lead to improved
product usability. It’s only natural that you may start losing customers if your
product or service doesn’t align with what the audience is looking for, as even the
smallest detail can cause a significant inconvenience for users. Thus, it’s best to
discover and fix the frequent issues that the users are coming across to ensure the
product or service is optimized for use.

➢ Enhanced user satisfaction

Since your products and services will be optimized for the customers, effective
user research also leads to enhanced user satisfaction. This term is generally
used to describe the customer’s experience with your product or service. A higher
user satisfaction means that the users are comfortable using your product and that
it meets their expectations.

➢ Increased customer loyalty

The customer-centric design, improved product usability, and enhanced user

satisfaction all lead to increased customer loyalty. Every business strives to build
a loyal fanbase around its product or service since it directly affects the company’s
success. Gaining the audience’s trust will lead to returning customers who are also
willing to promote your product to others.

Practice:

Draft questions for a user interview based on a hypothetical app.

https://careerfoundry.com/en/blog/ux-design/the-importance-of-user-research-
and-how-to-do-it/

https://designstrategy.guide/ux/ux-research-guide/

https://www.userevaluation.com/post/how-to-conduct-effective-user-research

https://uxplanet.org/ultimate-guide-to-user-research-bed4a57d260
Day2: Developing User Personas

• What is user persona?

User personas are user profiles that represent the wants and needs of a subgroup
of your target audience. These personas are an in-depth analysis of your ideal
customer and their behavior patterns, goals, skills, attitudes, problems, and
background information.

User personas help you identify key themes and thought patterns amongst your
audience, which enable you to connect with your target audience and make better
product decisions.

Design teams can use this information to create designs and build products and
services that fit the needs of the audience.

You likely already have an idea of what a user persona is. Here, we want to dive
deeper into the practice of creating user personas and share how to make them
as useful as possible for your team.

• Why do we need persona?

Whether you’re developing a smartphone app or a mobile-responsive website, it’s

very important to understand who will be using the product. In order to solve a real
user problem, you need to have a clear problem statement in mind; in order to
write this problem statement, you first need to understand your users and their
needs.

Knowing your audience will help influence the features and design elements you
choose, thus making your product more useful. A persona clarifies who is in your
target audience by answering the following questions:

• Who is my ideal customer?

• What are the current behavior patterns of my users?
• What are the needs and goals of my users?
• What issues and pain points do they currently face within the given context?
 Understanding the needs of your users is vital to developing a successful product.
Well-defined personas will enable you to efficiently identify and communicate user
needs. Personas will also help you describe the individuals who use your product,
which is essential to your overall value proposition.

Personas help with strategizing and making smart design decisions. They make
real users memorable for the product team, helping to focus efforts and build
empathy.

And it’s good to note that personas are also important to have when
you’re conducting a UX audit.

So, in a nutshell, user personas are crucial if you want to design something that is
useful, desirable, and valuable to your target audience. A solid user persona is
your northern star, guiding your design decisions from start to finish.

Not only that. Most designers work in multidisciplinary teams where it’s important
to communicate your findings from the user research stage. Personas encompass
all the essential details about your users, presenting them in a memorable way
that everyone can understand—not just designers.

• How do we define user persona?

Steps to Define a User Persona

1. Conduct User Research

• Qualitative Methods: Use interviews, focus groups, and observations to

gather in-depth insights about your users' behaviors, needs, and
motivations.
• Quantitative Methods: Utilize surveys, analytics, and data analysis to gather
statistical data that supports and enhances your qualitative findings.

2. Identify Patterns and Insights

• Analyze Data: Look for commonalities and patterns in the collected data.
Identify key themes, behaviors, and pain points that emerge from the
research.
• Group Similar Users: Segment users into groups based on similar
characteristics, needs, and behaviors.

3. Create Detailed Persona Profiles

For each identified user segment, create a persona profile that includes the
following elements:

Basic Information

• Name: A fictional, yet realistic, name to humanize the persona.

• Demographics: Age, gender, occupation, education, location, and other
relevant demographic details.

Background

• Biography: A short narrative that provides context about the persona’s life,
including personal and professional history.
• Family Status: Information about family or living situation, if relevant.

Psychographics

• Goals: What the persona aims to achieve with your product.

• Needs: Specific needs that your product or service can fulfill.
 • Pain Points: Challenges and problems the persona faces that your product
can help solve.
• Values and Beliefs: Core values and beliefs that influence the persona’s
decisions and behaviour.
• Interests and Hobbies: Activities and interests that provide insight into the
persona’s lifestyle.

Behavioural information

• Tech Proficiency: The persona’s comfort level and proficiency with

technology.
• Product Usage: How often and in what context the persona uses your
product or similar products.
• Preferred Channels: The persona’s preferred communication channels
and devices.
• Decision-Making Process: How the persona makes decisions, including
influencers and typical processes.

Motivations

• Drivers: What motivates the persona to use your product or service.

• Triggers: Specific events or circumstances that prompt the persona to seek
out your product.

Frustrations and challenges

• Pain Points: Specific problems the persona encounters in their daily life or
with existing solutions.
• Obstacles: Barriers that prevent the persona from achieving their goals.

Quotes and Real-Life Anecdotes

• Direct Quotes: Actual quotes from user research that highlight the
persona’s thoughts and feelings.
• Anecdotes: Short stories or examples that illustrate the persona’s
experiences and behaviours.
 Persona scenario

• Scenario: A brief scenario that describes a day in the life of the persona or
a specific situation where they would interact with your product.

Visual representation

• Photo: A representative image to help visualize the persona.

• Mood Board: Optional, but a collection of images, colors, and other visual
elements that represent the persona’s lifestyle and preferences.

• Example of user persona.

 Practical:

Create a detailed persona from the hypothetical data collected.

https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/

https://maze.co/guides/user-personas/

https://userguiding.com/blog/user-persona-examples

https://www.blitzllama.com/blog/user-personas-examples

Day3: Mapping User Journeys

• What is user journeys mapping?

User journey mapping involves visually representing the user's experience and
interactions with a product or service. It helps designers identify pain points,
emotional highs and lows, and opportunities for improvement. By mapping the
user's journey, designers can empathize with the user's experience and address
their needs effectively.

• What Design Problems Does a User Journey Map Solve?

A user journey map is an excellent tool for UX designers because it visualizes how
a user interacts with a product and allows designers to see a product from a user’s
point of view. This fosters a more user-centric approach to product design, which
ultimately leads to a better user experience.

User journey maps help a product team to find the answer to the “What if?”
questions. Also, a user journey map can be helpful when a company tracks
quantitative key performance indicators. In this case, a user journey map can
become a cornerstone for strategic recommendations.

• Type of user journey mapping

User journey maps are helpful across the product design and development
process, especially at two crucial moments: during product development and for
 UX troubleshooting. These scenarios call for different user journey maps: current-
state and future-state.

i) Current-state user journey maps

A current-state user journey map shows existing customer interactions with

your product. It gives you a snapshot of what's happening, and pinpoints
how to enhance the user experience.

Take the puppy training app, for example. A current-state customer journey
map might reveal that users are abandoning their shopping carts before
making in-app purchases. Look at it from your customers' point of view:
Maybe they aren't convinced their credit cards will be secure or the shipping
address workflow takes too long. These pain points show where you might
tweak functionality to boost user experience and build customer loyalty.

ii) Future-state user journey maps

A future-state user journey map is like a vision board: it shows the ideal
customer journey, supported by exceptional customer experiences. Sketch
out your best guesses about user behavior on an ideal journey, then put
them to the test with usability testing. Once you've identified your north star,
you can explore new product or site features that will optimize user
experience.

• How to make a user journey map

To start user journey mapping, follow this step-by-step guide.

1. Step 1: Define user personas and goals.

Gather user research and data like demographics, psychographics, and

shopping behavior to create detailed customer personas representing your
target audience. In your dog-training app example, one key demographic may
be parents. What’s their goal? It isn't necessarily "hire a puppy trainer"—it could
be "teach kids how to interact with a puppy."
 2. Step 2: Identify customer touch points.

Locate the points along the user journey where the user encounters or interacts
with your product. In the dog training app example, touchpoints might include
social media videos, app website, app store category search (e.g., pets), app
reviews, app store checkout, in-app onboarding, and app customer support.

3. Step 3: Visualize journey phases.

Create a visual representation of user journey phases across key touchpoints

with user flow diagrams , flowcharts, or storyboards.

4. Step 4: Capture user actions and responses.

For each journey stage, capture the user story: at this juncture, what are they
doing, thinking, and feeling? This could be simple, such as: "Potential
customer feels frustrated when the product image takes too long to load."

5. Step 5: Validate and iterate.

Finally, show your map to real users. Get honest feedback about what works
and what doesn’t with user testing, website metrics , or surveys. To use
the dog-training app example, you might ask users: Are they interested in
subscribing to premium how-to video content by a professional dog trainer?
Apply user feedback to refine your map and ensure it reflects customer needs.

Practical:

Develop a user journey map for your persona interacting with a website.

https://www.nngroup.com/articles/journey-mapping-101/

https://builtin.com/articles/user-journey-mapping

https://www.figma.com/resource-library/user-journey-map/
Day4: Information Architecture

• What is information Architecture?

Information architecture (IA) is a research-driven process that focuses on the

structure and organization of content within a digital product. Designers of
countless digital interfaces (websites, computer and mobile apps) use IA when
deciding how to arrange all of the information within a product so it makes sense
to the user.

The goal of information architecture is to organize content in a way that makes it

easy for users to learn, adapt to, and navigate a product quickly and with minimal
difficulty.

Information architecture takes into account the layout of content and design
elements on each page/screen, as well as the flow between screens and the way
users move through information from page to page. The structure of site or app
will depend largely on what type of product it is (ie. retail site vs. fitness tracker vs.
a blog) .

• How is IA used in UX design?

Digital products depend on well-designed information architecture. When a UX

designer creates a digital product, information architecture acts as a sort of
blueprint that helps make the product more accessible and understandable to
users.

The value of information architecture

Successful information architecture provides value for both users and businesses.

• IA value for users: When users can access a digital product like a website,
app, or software quickly and navigate through it easily, they are more likely
to stay with the product or come back to it in the future.
• IA value for businesses: When users have a pleasant experience using a
digital product, companies make money, gain trust, and build their
 reputation Users have a greater tendency to stay and search for
information, buy online products, purchase software, or sign up for
newsletters.

Tips for improving your IA

Creating an effective information architecture starts with using a design

document to lay the foundation of your site. It also takes a good deal of
forethought. A few pre-design processes can help designers:

• Define goals: Consider what you want your efficient IA to achieve and how
it will help the company (e.g., attract more website users, increase profits,
etc.).
• Analyze competitors: Look at competitors with similar products to assess
what they’re doing that does and doesn’t work for them.
• Survey content: Decide what content to keep in a digital product and what
to dispose of.
• Key ingredients
• Process of creating Information Architecture (IA):
➢ User Research:

Begin by conducting user research. Through surveys, interviews, and other

methods, gather insights into user needs, goals, preferences, and pain points. This
research provides the foundation for your IA.

➢ Information Gathering:

After understanding user requirements, collect all relevant content for the digital
product. This includes text, images, videos, documents, and other media assets
that will populate the website or app.

➢ Create a Sitemap:

Develop a visual sitemap that outlines the overall structure of the digital product.
Define the hierarchy of pages, subpages, and establish relationships between
different parts of the site.

➢ User Flow Diagrams:

Create user flow diagrams to map out how users will navigate and interact within
the digital product to achieve their goals. These diagrams provide a
comprehensive view of user journeys.

➢ Wireframing:

Before delving into detailed IA work, create wireframes. These are simple,
functional layouts that act as a visual guide for page structure and design, ensuring
a user-cantered approach.

➢ Information Architecture (IA):

Define the IA by setting up navigation menus, submenus, and labels. Ensure

content is grouped logically with a clear hierarchy, aligning it with user expectations
and content organization.
 ➢ Card Sorting:

If necessary, conduct card sorting exercises with users. This participatory method
helps validate and refine your IA decisions by involving users in organizing content
according to their mental models.

➢ Prototyping:

Develop interactive prototypes that represent the digital product's functionality and
user interactions. Prototypes enable you to test the IA's usability and gather
valuable feedback.

➢ Usability Testing:

Conduct usability testing with real users. Observe how they interact with the
prototype or digital product, identifying any usability issues related to the IA. Use
the insights gained for improvements.

➢ Refinement and Iteration:

The IA process is not a one-time effort. Continuously refine and iterate based on
user feedback and evolving needs. Regularly update the IA to ensure it remains
effective and user centric.

Practical:

https://careerfoundry.com/en/blog/ux-design/a-beginners-guide-to-information-
architecture/

https://uxplanet.org/information-architecture-design-a-step-by-step-guide-
41dcd4405ee3a

https://www.interaction-design.org/literature/topics/information-architecture

Day5: Practice day

Week5 Wireframing and Prototyping

Day1: Wireframing Essentials

1. Introduction to wireframes

Consider the role of an architect. Before they get stuck in with designing a beautiful house
for their clients, they first need to create a two-dimensional blueprint of the house’s
structure. This blueprint will help them visualize where the entrance and exit points will
be, the direction that people will walk in, and how each room can be best utilized. It’s a
functional jumping-off point for the rest of the home’s design. Think of a wireframe as a
blueprint for digital productise provide a clear overview of the page structure, layout,
information architecture, user flow, functionality, and intended behaviours.

As wireframing occurs in the early stages of a digital product’s life cycle, wireframes are
usually comprised of basic shapes and symbols. Colours, fonts, images, and other
stylistic features are omitted to keep the focus on the screen’s core elements. Depending
on how much detail is required, wireframes can be drawn by hand or created digitally.
2. What is the value of wireframing?

Wireframing in the early stages will allow you to gather honest feedback from
stakeholders and identify key pain points that help to establish and develop your
concept. It’s also the easiest way to test your ideas, and the wireframing process might
see you go in a completely different direction. Once your app or website has taken its
final form, documenting your wireframing process will enable you to talk confidently about
each stage of your product’s evolution.

Wireframing is a communication tool. Through your wireframes, your clients and

stakeholders should clearly understand the function and purpose of specific features.
Seeing the elements sketched out on a wireframe will also allow you to visualize how they
all work together—and may even prompt you to decide to remove a few if you feel the
interface is getting too cluttered.

If you have a pen and paper to hand, you can quickly sketch out a wireframe without
spending a penny—and the abundance of tools available means you can also build a
digital wireframe within minutes. By exposing the very core of the page layout, flaws and
pain points can easily be identified and rectified without any significant expenditure of
time or money. The further along you get with your design, the harder it is to make quick
changes!
3. What are the type of Wireframe?

Low-Fidelity

The easiest way to create low-fidelity wireframes is with good ol’ pen and paper. Basic
shapes are more than enough to communicate the hierarchy of content on a single
screen. Low-fi wireframes can also be designed with tools like Invision Freehand, which
is the digital variant of drawing wireframes on a whiteboard. Below, you can see the low-
fidelity wireframes
Medium-Fidelity

Once you’re happy with your content’s overall structure, next up is your medium-fidelity
wireframes. This is where you’ll refine and adjust your content. At this stage, you might
migrate your wireframes to your chosen digital tool, and introduce grid systems that help
you to get a more accurate spacing between each element. You can also adjust the sizes
of each component. Check out our mid-fidelity wireframes for the two app screens below.
Notice how they’re cleaner, more detailed iterations of our low-fidelity wireframes?
High-Fidelity

High-fidelity wireframes are the final stage of wireframing. At this stage, all your UI
elements should be accounted for, and your visual hierarchy should be finalized. Below,
you can see our high-fidelity wireframes for the two app screens.

4. When to skip wireframe stages.

Many design teams assume they have to start with a low-fidelity wireframe and evolve
from there. That makes sense when you're exploring new product concepts, so you can
align on key components, iterate, and then add visual design details later. However
according to Tom, there is a case for jumping straight into high-fidelity wireframe design.

“If you have an established design system, and the design you're exploring is like others
that already exist, conversations probably won't get too derailed by visual design details,”
Tom explains. “In these cases, exploring a design idea at a higher fidelity can be just as
fast and just as effective.”
5. best 7 practices in wireframe design

An effective wireframe can be as simple as a napkin sketch or as complex as a static

product mockup. By applying these best practices in wireframe design, you can align on
directions with your team faster, and move forward with the best approach.

1. Identify your design goals.

Before you start sketching or tinkering with wireframe templates, name your design goals.
Consider user needs, and what actions you want them to take to achieve them. Maybe
you can help the user to solve a problem by buying a helpful product, or by signing up for
an educational newsletter. Align your design team around this goal, so that your
wireframe designs advance that cause.

2. Choose the right size for your wireframe.

Your wireframes should match the size of the screen your target audience will be using.
Naturally, a website or application will look different on a laptop than it would on a mobile
device. With that in mind, standard wireframe sizes for screen types are as follows:

Mobile: 1080 pixels wide by 1920 pixels long

8” Tablet: 800 pixels wide by 1280 pixels long

10” Tablet: 1200 pixels wide by 1920 pixels long

Desktop: 768 pixels wide by 1366 pixels long

3. Keep your wireframe design simple.

Start your wireframe using grayscale colors, limiting fonts, and replacing graphics with
boxes. Make sure your blueprint meets the user requirements at the most basic level. If
you focus on details like misspellings or color schemes, you might overlook a flaw in the
user experience. For simple early-stage designs, truncated previews or cards may suffice.
But for content-rich interfaces, Tom recommends using real content instead of “lorem
ipsum” placeholder text. “When you start to apply information architecture on a user
interface, listing menu items 1-2-3-4 isn't very useful,” he explains. “Then you want to use
real content.”
4. Maintain design consistency.

Wireframes shouldn’t cause distraction or confusion. Similar components should look the
same across all wireframes, so they're easy to grasp, iterate on, and code. Even if there’s
a slight variation between two related components, different designs can create
uncertainty for developers across pages and iterations.

5. Make navigation obvious.

Your user flows should be fluid and intuitive. As you apply information architecture to
your wireframe, consider where you might need to support it with navigation and
wayfinding cues. If users must consult a sitemap, your navigation and information
architecture needs improving.

6. Don’t get too attached to your wireframe.

Even a high-fidelity wireframe is still a rough draft that needs changes to become a final
product. Once your design team finalizes the wireframe design, it’s time for collaboration
with developers and other creative team members to add functionality.

7. Leverage wireframing tools.

Design teams need wireframes they can share, save, and turn into mockups
online. Figma's wireframe kit comes with drag-and-drop design tools that make it easy
for beginners and design pros alike to create customized, high-fidelity wireframes.

Practice:

Sketch the wireframe of a landing page.

https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/#when-
does-wireframing-take-place

https://www.figma.com/resource-library/what-is-wireframing/

https://careerfoundry.com/en/blog/ux-design/difference-between-wireframes-
prototypes-mockups/
Day2: Low-Fidelity Prototyping

➢ What is low-fidelity prototyping?

A low-fidelity prototype is a quick and easy tangible representation of a concept, a use

flow, or an information structure created for getting quick feedback and improving the
product. These prototypes are generally characterized by low technology
implementation and can use a variety of materials, including sheets of paper,
cardboard, glue, straws, Lego blocks, among many others.

➢ What are the types of low-fidelity prototyping?

Designers use two types of low-fidelity prototypes: paper prototypes and wireframes.

a) Paper prototyping involves sketching basic user interfaces onto a piece

of paper or a whiteboard. Designers and key stakeholders use these low-fi
prototyping tools to rapidly capture ideas for a new or redesigned user
experience. While offline prototypes can generate useful internal feedback
with small teams, online whiteboards facilitate prototyping with larger,
hybrid teams.
b) Wireframing uses simple blueprints of digital screens to capture basic
layouts and content hierarchy. Wireframes can also show user interactions
in a user flow, which can be helpful for usability testing. Pro tip:
Figma's wireframing tool helps you build low-fidelity assets you can
easily sync with your design system components.
 ➢ How to build low-fidelity prototyping?

Step 1: Outline the problem you want to solve.

What design concept do you want to test to meet user needs or challenges? Work with
your business and UX research teams to capture design goals in a clear problem
statement.

Step 2: Outline core functionality.

What design elements and interactions are essential? Sketch out your basic design
concept, capturing its structure and sequence with a simple storyboard or user flow.

Step 3: Develop your design.

Start outlining the screens in your flow. You could use paper or an online whiteboard —
or apply readymade screen layouts with FigJam's prototyping template . Keep each
screen simple and high-level, with limited interactions, transitions, and visual design. Stay
focused on the problem you're solving.

Step 4: Test and iterate your ideas.

Share your prototype(s) with internal teams to align on a design direction. Then use the
prototype of the selected design to conduct user testing, so that you can refine your
design. Pro tip: Add notes or comments to your prototype to help team members and
users understand where to focus their attention and explain how key features may work.

➢ What are the benefits of low-fidelity prototyping?

Lo-fi prototyping can have a big impact on the overall user experience. When used
effectively, a low-fi prototype can help you:

• Collect relevant user feedback quickly. Users feel more comfortable

critiquing works in progress (i.e., rough sketches or wireframes) than near-final
designs. Prototypes with more features or a higher level of detail take more
time to assess.
 • Reduce product development risk by addressing user interface issues in
the early stages of design and development.
• Streamline workflows by helping product team members avoid costly, time-
consuming revisions later in the design and development process.
• Make changes on the fly in an agile design process that allows for quick
and easy fixes.
• Collaborate with different teams. Strategists, developers, and project
managers can build low-fi prototypes—especially online prototypes which don’t
require design expertise.

Practice:

Use paper and pencil to create a prototype of the wireframed landing page.

https://www.figma.com/resource-library/low-fidelity-prototyping/

https://devsquad.com/blog/low-fidelity-prototyping

https://blog.prototypr.io/low-fi-prototyping-what-why-and-how-24f77d9f4995

https://youtu.be/I5u2QOH18W8?si=8uAB4R5n8SJY7l7h

Day3: High-Fidelity Prototyping

➢ What is High-fidelity prototyping?

A high-fidelity prototype is a polished simulation of your final product. Visual design

details and real content show the look and feel of the end product. For testing,
robust interactivity and functionality provide a more realistic user experience.

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

While high-fidelity prototypes closely resemble your final product, low-fidelity
prototypes do not. Low-fidelity prototypes range from rough paper prototypes to
basic digital wireframes. They don't include complex interactions, animations, or
transitions—but hi-fi prototypes do.

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

➢ What are the benefits of High-fidelity prototyping?

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

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

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

Practice:

Use Figma to create a high-fidelity prototype of the landing page.

https://www.figma.com/resource-library/high-fidelity-prototyping/

https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/
Day4-5 Prototyping Tools

https://help.figma.com/hc/en-us/articles/17146044893591-Advanced-prototyping-
examples

https://www.uxpin.com/studio/blog/advanced-prototyping-features/

Practice:

Explore and demonstrate an advanced feature in Figma that was not covered earlier in
the course.

Present your high-fidelity prototype and receive feedback.

Week6 Interaction Design

Day1 Basics of Interaction Design

• What is interaction design?

Interaction design (IxD) defines the structure and behavior of interactive systems.
Interaction designers strive to create meaningful relationships between people and
the products and services that they use, from computers to mobile devices to
appliances and beyond. Our practices are evolving in tandem with the rest of the
world.

Interaction design began the day the first screen was designed to hold more than
static copy. Everything from a button to a link to a form field is part of interaction
design. Over the past several decades, a number of books have been released
that explain facets of interaction design and explore the myriad ways it intersects
and overlaps with experience design.
 Interaction design has evolved to facilitate interactions between people and their
environment. Unlike user experience design, which accounts for all user-facing
aspects of a system, interaction designers are only concerned with the specific
interactions between users and a screen. Of course, in practice, things are never
so clearly delineated.

Type of interaction model.

• Human-to-Computer Interaction (HCI): This model emphasizes how users

engage with computers and similar devices. It often focuses on graphical user
interfaces (GUIs), where visual elements guide the interaction.
• Human-to-Human Interaction (HHI) through Technology: Here, the model
focuses on how technology mediates human interaction, such as through social
media platforms or collaboration tools.
• Multi-Modal Interaction: This model involves multiple methods of interaction,
such as voice, touch, gesture, and more, often found in modern smartphones
or virtual reality environments.
• Conversational Interaction: Seen in chatbots and voice assistants, this
model focuses on interactions through natural language, providing a more
human-like experience.

Key Components

Understanding interaction models requires familiarity with certain fundamental

components:

• User Inputs: How users communicate or control the system. This could be
through touch, voice, clicking, etc.
• System Outputs: How the system responds to user actions, providing
feedback through visuals, sounds, vibrations, etc.
• Flow: The sequence and relationship between inputs and outputs, shaping the
overall interaction process.
• Context: Understanding the environment, purpose, and user needs that shape
the interaction.
 • Constraints: Limitations that guide or restrict user behavior, simplifying
choices, and helping guide user actions.

Design Principles for Interaction Models

Designing interaction models that resonate with users and meet their needs is not
a simple task. It requires a keen understanding of both human psychology and the
fundamentals of design. In this section, we’ll explore the essential principles that
guide the creation of effective, intuitive, and engaging interaction models.

1. Visibility

Visibility is about ensuring that the essential elements users need are easily
discernible. It’s about prioritizing and making accessible the key functions or
information, avoiding unnecessary clutter, and guiding users’ attention to where
it’s needed.

2. Feedback

Feedback is crucial in interaction design as it confirms users’ actions. Whether

through visual cues, sound, or tactile responses, feedback informs users about the
result of their interaction, ensuring they understand what has happened and what
to expect next.

3. Constraints

By limiting options or guiding user actions, constraints simplify the interaction

process. They help users by directing them towards the desired outcome, reducing
confusion, and aiding decision-making.

4. Mapping

Mapping refers to the relationship between controls and their effects. Proper
mapping ensures that users can predict the results of their actions, making the
interaction feel natural and intuitive.

5. Consistency
Consistency in design helps users transfer knowledge from one part of an
application to another or even between different platforms. Consistent use of
colors, icons, terminology, and overall design aids in user comprehension and
comfort.

6. Affordance

Affordance is about providing hints or clues that guide the user. A well-designed
affordance gives the user information about how an element is to be used. For
example, a button designed to look pushable indicates to the user that it can be
clicked.

7. User-Centered Design

Focusing on the user’s needs, preferences, and context ensures that the
interaction model is aligned with the audience it serves. User-centered design
involves continuous testing and feedback to tailor the experience to the users.

8. Flexibility and Adaptability

Modern interaction models must be able to cater to a wide range of users with
varying levels of expertise. Designing for flexibility means creating interfaces that
are accessible to both novice and expert users, adapting as needed.

9. Error Prevention and Recovery

Effective interaction design helps prevent user errors and offers clear pathways to
correct them if they occur. This involves thoughtful design and clear guidance,
allowing users to navigate without fear of making irreversible mistakes.

10. Consideration of Cultural and Accessibility Factors

Understanding and accommodating diverse user backgrounds and abilities is vital.

This includes considering cultural norms and expectations, as well as designing
for accessibility to ensure inclusiveness.
Practice:

Analyze an app's interaction design and make a improvement.

https://itcraftapps.com/blog/a-guide-to-designing-application-interaction-models/

https://www.linkedin.com/pulse/practical-guide-interaction-model-design-mltech-
soft

https://www.uxmatters.com/mt/archives/2012/01/defining-an-interaction-model-
the-cornerstone-of-application-design.php

Day2 Micro-interactions

• What are micro-interactions?

A micro-interaction is a small, task-based interaction in digital products. It provides

feedback or visual responses to user actions. These interactions guide users as
they offer subtle cues about how to use a product.

Although small, designers create these single-purpose animations to transform

boring actions into memorable moments. They make the product more intuitive,
engaging, and efficient with the aim to enhance the user experience.

A few examples of micro-interactions include:

• A light animation when a user likes a post to indicate the action was successful.
• The sound of refresh when a user pulls down to update a feed.
• Autocomplete suggestions appear as a user type in a search bar.
• A progress bar that fills as a file uploads to provide status information.
• The ability to see the other person is ‘Typing’ on messaging apps.

How do micro-interactions help improve the UX?

Moments and details, both large and small, contribute to our overall experience with a
product. micro-interactions can transform a good product into a great one.

Here are some ways micro-interactions can benefit your design:

 • Enhance product usability.
• Humanize the user experience and make it more relatable and fun.
• Provide real-time feedback to users on their actions.
• Smoother UI interactions that increase user satisfaction.
• Speed up the product adoption.
• Decrease the complexity of tasks that causes friction in the customer journey.
• Prevent user errors and frustration that result in a high churn rate.

How do micro-interaction work?

• Trigger

The trigger is the first part of the micro interaction. They can be triggered by the
user or system. A user-initiated trigger can include clicking, swiping, pressing a
button, or scrolling.

A system-initiated trigger can happen when certain qualifications are met, and the
system decides to show a notification, pop-up, or animation.

• Rule

The rule determines the next action after a user or system triggers a micro
interaction. What happens next after a user clicks an icon? Will this open an
animation? Will this log the user out of their account?

Rules must be logical to the user. When a user clicks on the flashlight app icon,
they expect a flashlight to come on. This rule also applies to system-triggered
micro interactions.

When all preset conditions are met, the user gets the expected system-initiated
results. If the user sets a 6 a.m. alarm, it will inform the user once it’s 6 a.m. This
is an example of a condition-rule pair.

• Feedback
 Feedback keeps users updated about what’s happening during micro-interactions.
One of the best examples of user feedback is the payment process with inline
validation.

Using inline validation helps the users know instantly when they’ve done
something wrong. For example, when they filled in the wrong card number.

This appears as a red border color to flag errors and a green border color to notify
the user of success.

• Loops and Modes

Loops and modes define the meta-rules of micro-interactions and how they change
after repeated uses. Examples can be seen in a toggle switch for a time-tracking
app.

Users can toggle the switch between the “on” and “off” modes to see when a
session starts.

Practice:

Design a micro-interaction for submitting a form on the app.

https://www.nngroup.com/articles/microinteractions/
https://uxdesign.cc/micro-interactions-why-when-and-how-to-use-them-to-boost-
the-ux-17094b3baaa0

https://youtu.be/hHp4FGVcHjY?si=lyvjEVs97O5LfDXT

https://userpilot.com/blog/micro-interaction-examples/

https://www.interaction-design.org/literature/article/micro-interactions-
ux#what%E2%80%99s_a_micro-interaction?%C2%A0-0

https://designlab.com/blog/microinteractions-enhancing-user-experience-
through-small-details

Day3 Animations and Transitions

• What is UI animation?

UI animation or user interface animation adds visual effects to UI elements and

components to make them interactive. This interactivity helps guide users through
a website or digital product while creating an immersive and enjoyable user
experience.

• Why is UI Animation Important?

The primary role of UI animations is to draw users’ attention to an important CTA

or show them what to do next. UI animations allow designers to communicate with
users without text.

For example, a progress bar will animate to draw your attention so you can see
how much of a signup process you must still complete. The alternative would be
text somewhere on the user interface saying something like, “you have completed
20% of this signup process.”

You can imagine that a user interface would get very cluttered and confusing if text
replaced UI animation!
 UI animation also allows designers to communicate with users across cultures and
languages. Animating a button to show a user where to click (or tap) will attract
their attention, no matter what language they speak.

Lastly, UI animation plays a crucial role in design psychology and reducing

cognitive load. Designers minimize the mental effort required to use a digital
product by providing context, familiarity, and consistency through animations.

• Types of UI Animation
1) Loading and progress
2) State changes
3) Navigation
4) Microinteractions
5) Branding

Loading and Progress

Loading and progress allow users to visualize where they are or what’s happening.

Loading: an animation showing the user that the system is working. For example, a
loading animation (throbber) or percentage indicator showing a user that a product is busy
loading a page or processing information. These loading UI animations are critical
because users might think that the product or website has stopped working without them–
which could mean they abandon the product before it’s had a chance to load!

Progress: animations that show users where they are in a flow and how much they still
have to complete. For example, a progress bar at the top of an eCommerce checkout
flow animates each time the user moves closer to completion.

State Changes

Designers often use animations to communicate a digital product or element’s state.

For example, a button might remain dark and unclickable until a user complete’s the
required form fields. Once the form is complete, the button’s state changes to active (or
clickable), letting users know they can click the button to proceed.

Structure & Navigation

Navigational UI animations help users navigate user interfaces and find what they want.
Designers will use animation to show users which page or tab they’re viewing or create
page transitions that indicate which direction they’re moving.

UI animation is also helpful to communicate navigational hierarchy so users can

understand the product or website’s structure–resulting in a more enjoyable user
experience.

Microinteractions

Microinteractions convey feedback and information based on user interaction or system

changes. This feedback and information almost always include some type of UI
animation.

A microinteraction we see every day is a mobile text or message notification. When you
receive a text, a popup appears on your phone to alert you. In some instances, the alert
will show you the whole text message before minimizing it to show the sender’s name.
This entire notification sequence is a UI animation triggered by the system.

Another common microinteraction is how a digital product responds to scrolling or

swiping. As you perform these actions, multiple UI animations may take place, like a page
transition, content loading, navigational changes, and more.

Branding
Animations are a fantastic way to promote brand awareness and interaction with users.
Designers will often use fun logo animations to give the brand a lighthearted, welcoming
appeal.

UXPin’s code-based editor enables designers to create JS-based interactions that look
and feel like the final product. With high-fidelity prototypes that behave like the final
product, designers get significantly better feedback from usability testing and
stakeholders.

• UI Animation: Disney’s 12 Principles of Animation

1. Squash and Stretch

The squash and stretch principle is essential to create animations with the illusion of
gravity, weight, mass and flexibility. A bouncing ball commonly exemplifies this principle;
it stretches when it travels up and down and squishes when it hits the ground.
In digital interfaces, the squash and stretch principle makes elements feel tactile and
gives visual cues or feedback regarding available affordances. For example, to
encourage users to effectuate a purchase, designers can use the squash and stretch
principle to animate the pay button to draw the users' attention and entice them to “press”
the button.

To successfully use squash and stretch, the object's volume must remain consistent
throughout the animation.

2. Anticipation

Anticipation helps to prepare the viewer for what's about to happen, and it’s crucial to
make any motion feel real. There are many anticipatory movements that our brain
processes at a subconscious level.
In digital interfaces, designers can use the anticipation principle to inform the user about
what will happen if they perform a particular action. One of the main applications of this
principle is hover animations: if users hover over a button, it moves to show the users it
is interactive.

3. Staging

The staging principle describes motions that guide the viewer's eye and draw attention to
what's important within the scene.

Designers can use animation to show the users where to focus within the interface.
4. Straight-Ahead Action and Pose to Pose

This principle refers to two different approaches to animation. Straight-ahead animation

is created, drawing frame-by-frame from start to finish.

The pose-to-pose technique involves creating the critical frame first—a frame in the
beginning, middle and end. Then, in the case of computer animation, the animation
software completes the rest automatically for you.

In UI design, designers will most likely use the pose-to-pose method—for instance, to
create component states—except if they’re looking to animate something unusual.

5. Follow Through and Overlapping Action

This principle reflects the fact that not all parts of an object move at the same time. This
phenomenon is critical when objects come to a standstill after being in motion.
In UI animation design, elements can be related to each other but may move at different
rates—for example, an image, a title and a description. The initiator of the movement will
be the most crucial element, in this case, the image, and then the title and description
follow. This principle helps establish a hierarchy in an interface.

6. Slow In and Slow Out

This principle defines how movement starts and stops. For example, any vehicle starts
moving slowly before accelerating and speeding up, and the reverse happens when the
vehicle brakes. The addition of more frames at the beginning and end of a motion
sequence achieves this effect.
This principle is vital to make any motion feel natural and authentic. Without easing in and
out, animations will feel robotic.

7. Arc

In the physical world, most objects move following a slight arc.

In UI animation design, designers can breathe life into animations by using arcs as
animation paths instead of straight lines. A great example of this principle is the Mac’s
dock bar hover animation, which makes navigation through the different apps anchored
in the dock intuitive and fun.

8. Secondary Action

Secondary actions are used to support or emphasize the main action going on within a
scene. The addition of secondary actions adds another dimension to animations.

In UI design, designers can use secondary actions to elicit emotions. For example, if the
user has submitted a very long form, the submit button could have a secondary
celebratory animation (for instance, confetti) to congratulate the user for completing a
time-consuming task.

9. Timing

How quickly or slowly an object moves gives a lot of information.

In UI design, designers can use timing to inform users. For instance, the speed of a file-
loading animation could indicate how big the file is. This will give the user a sense of how
long the process will take and why—so the upload will be slower if they’re uploading a big
file and much quicker if it’s a small file.

10. Exaggeration

This principle gives the animations a fun character and helps the viewer focus on what’s
important.
In UI animation design, designers can exaggerate certain elements to make it clear to
users how they are supposed to interact with the interface. In addition, exaggeration
always adds an entertaining aspect to the design.

A good animation effect will be invisible to the viewer. However, if the exaggeration is too
much, it may annoy users.

11. Solid Drawing

Understanding the basics of drawing—or, in the case of UI, the principles of visual
design—will help designers create more successful animations.

For example, a user would immediately think there is something wrong with an app if it
has a button with a shadow that doesn’t follow a proper perspective.

This phenomenon is even more evident in skeuomorphic design, where elements imitate
their real-world counterparts. Any distortion in design needs to be justified and feel
intentional to the user.

12. Appeal
Animations need to appeal to the viewer. There is no mathematical formula to get this
right, but animation should trigger the viewer's attention and create a pull. Research and
testing are vital aspects of getting the appeal of animations just right.

In UI design, the appeal is critical to stand out. Many products are competing for the same
market. Designers can use animation to define a product's personality and create an
emotional connection with the user.

Some digital products like Duolingo create actual animated characters to add personality
and visual appeal to their interfaces, and that can create a deeper connection with the
user.

Practice:

https://www.uxpin.com/studio/blog/ui-animation-examples/

https://www.interaction-design.org/literature/topics/ui-animation

https://careerfoundry.com/en/blog/ui-design/ui-animation-beginners-guide/

https://uxdesign.cc/transition-animations-a-practical-guide-5dba4d42f659
https://designerup.co/blog/complete-guide-to-ui-animations-micro-interactions-
and-tools/

Day4 Designing for Touch and Gesture

Touch interactions are the way users interact with digital devices using their fingers or
touchscreens. They are a fundamental aspect of mobile app design and website design
for touch-enabled devices. Here's a closer look at touch interactions:

Types of Touch Interactions:

• Tap: A single press on the screen to activate an element or function.

• Swipe: Dragging your finger across the screen in a specific direction (up, down,
left, right) to trigger an action like scrolling through content or navigating between
pages.
• Long Press: Holding your finger on an element for a longer duration to access a
secondary menu or function.
• Pinch-to-Zoom: Pinching or spreading your thumb and index finger on the screen
to zoom in or out of an image or map.
• Double Tap: Tapping the screen twice in quick succession, often used to zoom in
on an image or "like" content on social media.

Key Design Considerations for Touch Interfaces

1. Touch Target Size

Ensure touch targets (buttons, links, icons) are large enough to be easily tappable without
causing frustration.

Recommended size: At least 44x44 pixels.

Example: A button on a mobile app should be large enough for users to tap without
accidentally touching adjacent elements.
2. Spacing and Layout

Provide adequate spacing between interactive elements to prevent accidental touches.

Ensure the layout is not cluttered and elements are easily distinguishable.

Example: Menu items in a navigation bar should have enough space between them to
avoid accidental taps.

3. Feedback

Offer immediate visual or haptic feedback to indicate that a touch action has been
recognized.

Feedback can be in the form of animations, color changes, or vibrations.

Example: When a user taps a button, it can slightly change color or show a ripple effect
to confirm the action.

4. Gesture Recognition

Ensure the system accurately recognizes gestures and does not confuse them with
accidental touches.

Design intuitive gestures that match user expectations and common usage patterns.

Example: Swiping left on an item to delete it should not be confused with scrolling through
a list.

5. Accessibility

Consider users with different abilities and provide alternatives or adjustments to touch
interactions.

Implement features like adjustable touch sensitivity and alternative input methods.

Example: Provide an option to increase button size for users with motor impairments.
Practice:

Prototype gesture-based interactions for the mobile app.

https://www.uxmatters.com/mt/archives/2020/02/designing-for-touch.php

https://www.uxmatters.com/mt/archives/2019/05/a-design-language-for-touch-
gesture-and-motion.php

https://photricity.com/blog/designing-for-touch-creating-an-intuitive-touch-
friendly-user-experience/

https://youtu.be/RCBlH3mjRFU?si=2l4CWLx-YVG6RQ3G

Day5 Advanced Interaction Techniques

Advanced Interactions in UX design refer to innovative ways users can interact with digital
products beyond the traditional methods of tapping, clicking, and swiping. These
interactions aim to create a more natural, engaging, and immersive user experience.
Here's a breakdown of some key areas in Advanced Interaction UX Design:

1. Voice Control:

Users interact with the system through spoken commands and natural language. Voice
assistants like Siri or Alexa are prime examples.

Benefits:

• Hands-free interaction: Ideal for situations where using a screen is difficult

(driving, cooking).
• Accessibility: Enables users with visual impairments or motor limitations to
interact more easily.
• Natural communication: Feels more intuitive for some users compared to
traditional interfaces.
2. Gesture Recognition:

Users interact with the system using gestures like swiping, pinching, or tilting the device.
It's prominent in mobile apps and virtual reality experiences.

Benefits:

• Intuitive interaction: Gestures can feel more natural than button presses for
specific actions.
• Enhanced immersion: Gesture control in VR creates a more realistic and
interactive experience.
• Reduced screen clutter: Can minimize the need for on-screen buttons and
controls.

3. Haptic Feedback:

The system provides tactile feedback through vibrations or motion to simulate physical
sensations. Gaming controllers and smartphone keyboards often utilize haptic feedback.

Benefits:

• Increased engagement: Haptic feedback adds another layer of sensory

feedback, making interactions more immersive.
• Confirmation and feedback: Can be used to subtly confirm actions or provide
feedback on interactions.
• Accessibility: Haptic feedback can be helpful for users with visual impairments.

4. Augmented Reality (AR) and Virtual Reality (VR):

AR overlays digital elements onto the real world, while VR creates a completely
immersive virtual environment. Both require specialized hardware like headsets or
glasses.

Benefits:

• New ways to interact: AR and VR enable entirely new forms of user interaction,
pushing the boundaries of the digital experience.
 • Enhanced learning and training: AR can be used to overlay information onto
physical objects for educational purposes.
• Immersive experiences: VR allows users to step inside virtual worlds and interact
with digital content in a hyper-realistic way.

5. Artificial Intelligence (AI) and Machine Learning (ML):

AI and ML can personalize user experiences, anticipate user needs, and even generate
content based on user interaction. Chatbots and recommendation systems are examples
of AI in action.

Benefits:

• Personalized experiences: AI can tailor the interface and functionalities to

individual user preferences.
• Predictive interaction: The system can anticipate user needs and suggest
actions before they even occur.
• Intelligent assistance: Chatbots powered by AI can provide real-time support and
answer user questions within the app.

Designing for Advanced Interactions:

• Understanding User Needs: Carefully consider user context, goals, and comfort
level with new technologies when designing advanced interactions.
• Usability Testing: Rigorous testing is crucial to ensure advanced interactions are
intuitive, efficient, and don't create confusion for users.
• Balancing Innovation and Familiarity: While embracing new technologies, aim
to maintain a level of familiarity for users. Don't overwhelm them with overly
complex interaction methods.

By incorporating these advanced interaction elements thoughtfully, UX designers can

create more engaging, user-centered experiences that push the boundaries of how we
interact with digital products.
Practice:

https://blog.logrocket.com/ux-design/interaction-design/

https://htmlburger.com/blog/ui-interactions-examples/

https://www.interaction-design.org/literature/article/how-to-use-voice-interaction-
in-augmented-reality

https://www.interaction-design.org/courses/ux-design-for-augmented-reality-
course

https://www.toptal.com/designers/interactive/interaction-design-principles

Week7 Usability Testing

Day1: Planning Usability Testing

1. What is usability testing and why does it matter?

usability testing is the process of discovering ways to improve your product by

observing users as they engage with the product itself (or a prototype of the
product). It’s a UX research method specifically trained on—you guessed it—
the usability of your products. It is a measure of how easily users can
accomplish a given task with your product.

Usability testing, when executed well, uncovers pain points in the user journey
and highlights barriers to good usability. It will also help you learn about your
users’ behaviors and preferences as these relate to your product, and to
discover opportunities to design for needs that you may have overlooked.

You can conduct usability testing at any point in the design process when
you’ve turned initial ideas into design solutions, but the earlier the better. Test
early and test often! You can conduct some kind of usability testing with low-
and high- fidelity prototypes alike—and testing should continue after you’ve got
a live, out-in-the-world product.

2. The Benefits of Usability Testing

Usability testing offers numerous advantages that can significantly impact the success of
your design projects:

• Identifying User Pain Points: Usability testing helps you uncover areas of
frustration or confusion in your design, allowing you to address these pain points
effectively.
• Enhancing User Satisfaction: By listening to user feedback, you can make design
adjustments that lead to increased user satisfaction and loyalty.
• Reducing Development Costs: Catching usability issues early in the design
process can save time and money by avoiding costly redesigns and
redevelopments.
• Improving Conversion Rates: Usability testing can help you optimize your website
or app for better user engagement and higher conversion rates.
• Competitive Advantage: User-friendly designs often outperform competitors in the
market, giving you a significant edge.

3. Type of Usability testing.

I. Qualitative or quantitative

Any user research will fall into the category of qualitative or quantitative. You
ideally want usability testing to gather both kinds of data, to provide a rounded
evaluation of the user experience.

Qualitative usability testing focuses on the ‘why’; understanding users'

experiences, thoughts, and feelings while using a product. For example, you could
conduct a think-aloud study where users verbalize their thoughts while using your
product to complete usability tasks. Qualitative data can be gathered from
observation, interviews, and surveys.
 Quantitative usability testing focuses on collecting and analyzing numerical
data like success rates, task completion times, error rates, and satisfaction ratings.
It’s about identifying patterns, making predictions, and generalizing findings.

II. Moderated or unmoderated

Moderated and unmoderated usability testing are two different approaches to

usability. In moderated usability testing, a moderator guides the users through the
test (in-person or remotely). They answer any questions participants may have,
ask follow-up questions, and record observations during the test.

Unmoderated usability testing, as the name suggests, doesn’t involve a moderator.

Users’ complete tasks independently, typically using usability testing tools that
record their actions and responses.

III. Remote or in-person

Research can be done remotely or in-person, depending on the type of product you're
testing and your research goals.

Remote usability testing can be moderated or unmoderated and is done using online tools
or software that allows users to share their screens, record their activity, and provide
feedback. It’s useful because your team and test participants can be based in entirely
different locations.

In-person usability testing, on the other hand, is conducted in a physical location, usually
a usability lab or other research facility. For that reason, it can be more expensive, time-
consuming, and limiting in terms of sample size and geographic reach. Many researchers
opt for remote research, however in-person testing may be necessary for products that
require safety considerations, supervision during use, or physical testing.
4.Usability testing vs. user testing

Though they sound similar and share a somewhat similar end goal, usability testing and
user testing are two different things. We’ll look at the differences in a moment, but first,
here’s what they have in common:

• Both share the end goal of creating a design solution to meet real user needs.
• Both take the time to observe and listen to the user to hear from them what
needs/pain points they experience.
• Both look for feasible ways of meeting those needs or addressing those pain
points.

User testing essentially asks if this kind of user would want this particular kind of product—
or what kind of product would benefit them in the first place. It is entirely user focused.

Usability testing, on the other hand, is more product-focused and looks at users’ needs in
the context of an existing product (even if that product is still in the prototype stages of
development). Usability testing takes your existing product and places it in the hands of
your users (or potential users) to see how the product works for them—how they’re able
to accomplish what they need to do with the product.

5. How do you identify the target audience or user personas for your usability
testing?

I. Market Research: Conduct thorough market research to understand the

demographics and characteristics of your potential user base. This could include
factors such as age, gender, location, occupation, interests, and technological
proficiency.
II. User Surveys: Distribute surveys to your existing user base or target audience to
gather insights into their preferences, behaviors, and pain points. Use open-ended
questions to allow respondents to provide detailed information about their needs
and challenges.
III. Interviews and Focus Groups: Conduct one-on-one interviews or organize focus
groups with representative users to delve deeper into their experiences, goals, and
expectations regarding the product or service. This qualitative approach can
provide rich insights into user motivations and decision-making processes.
IV. Analytics and User Data: Analyse website analytics, app usage data, or any
available user data to understand how users currently interact with your product or
similar products. Look for patterns in user behavior and demographics to identify
key user segments.
V. Persona Development: Based on the information gathered from the above
methods, create user personas — fictional representations of your target users
that encapsulate their characteristics, goals, challenges, and behaviors. These
personas should be detailed enough to guide decision-making throughout the
usability testing process.
VI. Stakeholder Input: Collaborate with stakeholders, including product managers,
designers, marketers, and customer support teams, to gather insights into their
understanding of the target audience and their expectations for the product.
VII. Iterative Refinement: Continuously refine and validate your user personas as you
gather more data and insights from usability testing and other sources. Adjust
 personas based on new information to ensure they accurately reflect the evolving
needs of your target audience.

Practice:

https://www.interaction-design.org/literature/topics/usability-testing

https://maze.co/guides/usability-testing/#types-of-usability-testing

https://careerfoundry.com/en/blog/ux-design/usability-testing-guide/#usability-
testing-vs-user-testing

Day2: Conducting Usability Testing

1. What are some common techniques for moderating usability testing sessions?
Moderating usability testing sessions involves guiding participants through the tasks while
observing and recording their behaviors and feedback. Effective moderation ensures that
the data collected is valid and reliable. Here are some common techniques for moderating
usability testing sessions:

1. Preparing for the Session

• Develop a Script: Create a detailed script outlining the session's flow, including
an introduction, task instructions, and concluding remarks. This helps maintain
consistency across sessions.
• Pilot Testing: Conduct a pilot test to identify any issues with the tasks or
instructions and make necessary adjustments before the actual sessions.

2. Introduction

• Build Rapport: Begin by introducing yourself and explaining the purpose of the
session. Emphasize that it is the product being tested, not the participant.
• Explain the Process: Outline what the participant should expect during the
session, including the think-aloud protocol if used.
• Obtain Consent: Ensure that participants have signed consent forms and
understand how their data will be used.
3. Think-Aloud Protocol

• Encourage Verbalization: Ask participants to verbalize their thoughts, feelings,

and decisions while performing tasks. This provides insight into their thought
processes.
• Gentle Reminders: If a participant falls silent, gently remind them to keep thinking
aloud without interrupting their flow.

4. Task Moderation

• Clear Instructions: Give clear, concise instructions for each task, ensuring the
participant understands what is expected.
• Neutral Demeanour: Maintain a neutral tone and body language to avoid
influencing the participant's behaviour or responses.
• Non-leading Prompts: Use non-leading questions to probe for more information
without suggesting solutions or influencing their actions.

5. Observation and Note-taking

• Active Observation: Watch for non-verbal cues such as facial expressions,

gestures, and body language, as these can provide valuable insights.
• Detailed Notetaking: Record observations meticulously, noting any difficulties or
areas of confusion the participant encounters.

6. Interventions

• Minimal Interference: Allow participants to struggle with tasks to observe natural

behavior, intervening only if they become excessively frustrated or stuck.
• Offer Help Sparingly: When necessary, provide hints or guidance, but do so in a
way that allows the participant to arrive at the solution themselves.

7. Post-Task Debriefing

• Follow-up Questions: Ask open-ended questions after each task to gather

additional feedback and clarify observations.
 • Reflection: Encourage participants to reflect on their overall experience, including
any likes, dislikes, and suggestions for improvement.

8. Concluding the Session

• Thank the Participant: Express gratitude for their time and effort.
• Final Questions: Offer an opportunity for the participant to ask questions or
provide any additional feedback.
• Incentive Distribution: If applicable, distribute any incentives or compensation as
promised.

9. Recording and Analysis

• Video/Audio Recording: With the participant's consent, record the session for
later review and analysis. This ensures that no detail is missed.
• Debrief with Team: After the session, debrief with the research team to discuss
findings and any immediate observations.

2. What are the advantages and disadvantages of remote usability testing versus
in-person testing?

When conducting usability testing, you have the choice between inviting participants to a
physical location (in-person testing) or having them interact with the product remotely
(remote testing). Both methods offer advantages and disadvantages, and the ideal choice
depends on your specific needs and resources.

Advantages of Remote Usability Testing:

• Cost-effective: Remote testing eliminates the need for a dedicated testing facility,
travel expenses for participants, and recruiter fees.
• Wider Reach: You can recruit participants from a broader geographic pool,
ensuring a more diverse user base for testing.
• Convenience: Participants can test from the comfort of their own homes, at their
preferred time, leading to potentially higher participation rates.
 • Realistic Context: Users interact with the product in their natural environment,
which can reveal usability issues that might not surface in a lab setting.
• Focus on User Behavior: Remote testing tools often capture screen recordings
and eye-tracking data, providing deeper insights into user behavior.

Disadvantages of Remote Usability Testing:

• Limited Control: The moderator has less control over the testing environment.
Background noise, distractions, or technical difficulties can impact the session.
• Non-verbal Cues: Observing subtle body language cues that can be valuable in
in-person testing might be less apparent remotely.
• Technical Dependence: Both the moderator and participant need a reliable
internet connection and working devices to ensure a smooth testing experience.
• Building Rapport: Establishing a rapport with participants remotely can be more
challenging compared to an in-person setting.

Advantages of In-Person Usability Testing:

• Moderator Control: The moderator has more control over the testing
environment, minimizing distractions and ensuring participants stay focused on the
tasks.
• Richer Data: In-person observation allows for capturing non-verbal cues, facial
expressions, and body language that can provide deeper insights.
• Rapport Building: The moderator can build rapport with participants more easily,
creating a more comfortable and interactive testing environment.
• Technical Support: Technical issues can be addressed more readily in a
controlled lab setting.

Disadvantages of In-Person Usability Testing:

• Costlier: In-person testing requires renting a facility, recruiting participants locally,

and potentially covering travel expenses, making it more expensive than remote
testing.
 • Limited Reach: The participant pool is restricted to a specific geographic location,
potentially limiting the diversity of user experiences.
• Less Natural Environment: The lab setting might feel artificial to participants,
potentially influencing their behavior and interaction with the product.

Choosing Between Remote and In-Person Testing:

Here are some factors to consider when deciding between remote and in-person testing:

• Project Budget: Remote testing is generally more cost-effective.

• Target Audience: If geographic diversity is crucial, remote testing is preferred.
• Product Complexity: For complex products, in-person observation might be
beneficial.
• Research Goals: If non-verbal cues are important, in-person testing might be
better.

3. What steps should be taken to document observations and gather feedback

effectively during testing sessions?

Before the Testing Session:

• Develop a Documentation Plan: Decide on your preferred documentation

methods (note-taking templates, digital recording software) and create a clear
structure for capturing observations and feedback.
• Prepare Templates (optional): Consider creating note-taking templates with
sections for recording user demographics, task scenarios, observations, user
quotes, and usability issues encountered.

During the Testing Session:

• Multi-Method Approach: Combine different methods to capture a holistic view of

the user experience. Here are some effective techniques:
• Detailed Notes: Discreetly document key observations, user actions, facial
expressions, and any technical glitches encountered.
• Screenshots/Screen Recordings: Capture screenshots or use screen recording
software to document user interactions with the interface.
 • Audio Recordings: Obtain consent from participants to record the audio session,
which can help capture their thought processes and verbal feedback.
• Focus on Specifics: Don't just record generic observations. Focus on capturing
specific user actions, time spent on tasks, areas of confusion, and direct quotes
that illustrate user pain points.
• Organize Your Notes: Maintain a clear and organized system for your notes. Use
timestamps or separate sections for each task scenario to facilitate analysis later.

After the Testing Session:

• Review and Organize Recordings: Review audio or screen recordings to identify

key moments and insights that you might have missed during the session.
• Consolidate Notes: Combine notes from all sources (written observations,
screenshots, audio recordings) into a central document for each participant.
• Identify Themes: Analyze your data to identify recurring themes, usability issues,
and areas for improvement. Group similar observations and quotes together to
identify patterns.
• Create a Usability Testing Report: Compile your findings into a clear and concise
report that summarizes the testing process, observations, key user quotes, and
recommendations for improvement.

Practice:

https://youtu.be/bcfqmx2hnUQ?si=_2Xg1yw0CZVxaEJG

https://www.nngroup.com/articles/usability-checklist/

https://www.hotjar.com/usability-testing/process-examples/

https://www.ramotion.com/blog/remote-usability-testing/

https://www.usertesting.com/blog/in-person-vs-remote-usability-testing

https://www.dhs.gov/cx/cx-learning/usability-testing/moderating-usability-testing
Day3: Analysing Usability Data

1. How do you prioritize and categorize usability issues identified during testing?

Categorization:

• Severity: This categorizes issues based on their impact on the user's ability to
complete tasks. Here are some common categories:
• Critical: These issues completely block users from completing tasks or using the
product effectively. (e.g., login functionality not working, crucial information
missing)
• Major: These issues significantly hinder task completion and cause frustration.
(e.g., confusing error messages, misleading navigation elements)
• Minor: These issues cause inconvenience but don't prevent users from completing
tasks. (e.g., inconsistent formatting, typos)
• Cosmetic: These issues affect the visual appearance but don't impact usability.
(e.g., minor alignment issues, color scheme preferences)
• Frequency: Consider how often users encounter the issue. Issues that occur
frequently across different user groups might be higher priority.
• Impact: Evaluate the overall impact of the issue on user experience, satisfaction,
and business goals. Issues that lead to user abandonment or lost sales
opportunities might be prioritized.

Prioritization:

• Severity Matrix: Combine severity and frequency to prioritize issues. Critical and
major issues that occur frequently should be addressed first.
• Effort vs. Impact: Consider the effort required to fix the issue compared to the
potential impact it has on users and business goals. High-impact issues with
relatively easy fixes might be prioritized.
• User Research Integration: If you have conducted user research beyond usability
testing (e.g., surveys), consider how specific issues align with user pain points
identified in that research.
Here's an example:

Issue: Login button is difficult to find on the homepage.

Severity: Major - Users might struggle to log in and access the core functionalities.

Frequency: Frequent - Multiple users encountered this issue during testing.

Impact: Moderate - May lead to user frustration and potential churn.

Effort: Low - A minor design adjustment can likely fix this.

Based on this analysis, this login button issue would be considered a high priority fix due
to its moderate impact on user experience and the relatively low effort required to address
it.
2. What are some commonly used metrics for evaluating usability test results?

1. Task Completion Rates:

The percentage of users who successfully complete assigned tasks. Low completion
rates indicate significant usability problems. Users might be unable to find the functionality
they need or the interface might be too complex.

Consider analyzing which tasks had low completion rates and why. Were the instructions
unclear, or was the interface layout confusing?

2. Time on Task:

The average time users take to complete specific tasks. High times can indicate users
are struggling to navigate or understand the interface. They might be backtracking, getting
lost, or unsure of how to proceed.

Analyze time spent on specific parts of the task. Were users stuck on a particular step or
screen? This helps pinpoint where the design needs improvement.

3. Error Rates:

The number of errors users make while trying to complete tasks. Errors can include typos,
selecting wrong options, or missing crucial steps. A high error rate suggests the interface
is misleading or lacks clarity. Users might be making unintended actions due to poor
design choices.

Categorize errors by type (e.g., data entry, navigation). This helps identify patterns and
potential causes for the errors.

4. User Satisfaction:

Users' overall feelings and opinions about the product's usability. This is typically
gathered through post-test surveys or interviews. Satisfaction goes beyond task
completion. It reflects how enjoyable and user-friendly people find the experience.

Use surveys with open-ended questions and follow-up interviews. This allows users to
elaborate on their frustrations and areas for improvement.
5. Think Aloud Protocol:

A qualitative technique where users verbalize their thoughts while performing tasks.
Think-aloud reveals a user's thought process and decision-making during interaction. It
unveils confusion, mental models, and where users might be making assumptions.

The researcher listens for hesitations, frustrations, and areas where users seem unsure.
This provides valuable insights into users' cognitive processes.

6. Eye Tracking:

A technology that tracks where users look on the screen. Eye tracking reveals areas of
interest, confusion, and users' scanning patterns. This helps understand how users
visually navigate the interface and identify where their attention goes.

Eye tracking data can be combined with other metrics to create a holistic picture. For
example, high fixation times on an area where users make errors might indicate a
confusing design element.
3. How do you differentiate between qualitative and quantitative data analysis in
usability testing?

Aspect Qualitative Research Quantitative Research

Questions Why? How many and how much?
Answered
Goals Both formative and summative: Mostly summative:
- Inform design decisions - Evaluate the usability of an
existing site
- Identify usability issues and find - Track usability over time
solutions for them
- Compare site with competitors
- Compute ROI
When It Is Anytime: during redesign, or when When you have a working product
Used you have a final working product (either at the beginning or end of a
design cycle)
Outcome Findings based on the researcher’s Statistically meaningful results that
impressions, interpretations, and are likely to be replicated in a
prior knowledge different study
Methodology - Few participants - Many participants
- Flexible study conditions that can - Well-defined, strictly controlled
be adjusted according to the team’s study conditions
needs
- Think-aloud protocol - Usually no think-aloud

Practice:

https://youtu.be/iyWWe_tZeEY?si=dfdU-tE6yXtpfacL

https://www.nngroup.com/articles/how-to-rate-the-severity-of-usability-problems/

https://www.hotjar.com/usability-testing/evaluation-analysis/

https://uxdesign.cc/analysing-usability-testing-data-97667ae4999e

https://www.nngroup.com/articles/quant-vs-qual/

https://app.uxcel.com/lessons/a-guide-to-conducting-effective-usability-testing-
224/qualitative-vs-quantitative-usability-testing-7124

https://www.hotjar.com/usability-testing/tools/
Day4: A/B Testing

1.What is A/B testing, and how does it differ from traditional usability testing?

A/B testing is a method of comparing two versions of a digital product to

determine which one performs better in achieving a specific goal. The
two versions, A and B, are presented to users in a randomized way, and
their behavior is measured and analyzed. The goal of A/B testing is to
identify which version performs better and to make data-driven
decisions based on the results.
 Feature A/B Testing Usability Testing
Focus Compares design variations for Evaluates ease of use and user
better performance on a specific experience for completing tasks.
metric (e.g., conversion rate, click-
through rate).
Method Randomly splits users into groups Observes real users completing tasks
(A & B) to see which variation of a and asks questions about their
design element performs better. experience.
Benefits Provides data-driven evidence of Reveals user thought processes,
which design is statistically better frustrations, and areas for improvement.
for a specific goal.
Limitations Doesn't explain why one design Results can be subjective and may not
performs better, only which one be generalizable to a larger user base.
converts better.
Analogy Like a competition between athletes Like observing athletes' training (user
(designs) to see who performs better performing tasks) to identify areas for
in a race (specific timeframe). improvement in their technique (user
experience).
Data Primarily quantitative (metrics like Primarily qualitative (observations, user
Analysis conversion rate, time on task). quotes, feedback).
pen_spark

2.What are the key components of designing an A/B test?

1. Defining a Hypothesis and Goal:

• Start with a clear question: What do you want to learn or improve? Are you aiming
to increase sign-ups, click-through rates, or time spent on a specific page?
• Formulate a hypothesis: Based on your observations or user research, predict
which design variation will lead to a positive change in the chosen metric.

2. Choosing the Element to Test:

• Identify a specific element on your website or app that you believe could be
improved. This could be a button text, headline, layout format, image, or any
element you think might influence user behavior.
• Focus on one variable at a time: Testing too many changes simultaneously makes
it difficult to isolate the cause of any observed effects.
3. Designing Variations:

• Create two or more variations of the chosen element. Keep the changes focused
and avoid introducing too many drastic differences.
• Maintain consistency: Ensure both variations share the same overall design and
functionality, except for the element being tested.

4. Setting Up the Test:

• Choose your A/B testing tool: Many website analytics platforms or dedicated A/B
testing tools can help manage traffic splitting and data collection.
• Determine traffic allocation: Decide how you will split your website traffic between
the original design (control) and the variations (treatments). Typically, a 50/50 split
is common.
• Establish a timeline: Set a timeframe for running the test, ensuring you gather
enough data to reach statistically significant results.

5. Monitoring and Analyzing Results:

• Track key metrics: Monitor the chosen metrics (e.g., conversion rate) for both
variations throughout the test duration.
• Analyze data statistically: Use statistical tools to determine if the observed
difference in the metric between the variations is statistically significant. This helps
avoid drawing conclusions based on random chance.

6. Making Data-Driven Decisions:

• Interpret the results: Based on your analysis, determine which design variation
performed better or if there's no statistically significant difference.
• Implement changes: If a variation shows a positive impact, consider implementing
it permanently on your website or app.
• Learn and iterate: Use the learnings from the A/B test to inform future design
decisions and potentially conduct further tests with new variations.
3.What are some common pitfalls to avoid when conducting A/B testing?

• Testing the wrong thing: Don't waste time testing elements that are unlikely to impact
your goals. Focus on areas with potential for significant improvement based on user
research or analytics data.

Example: Instead of testing a minor color change on a button, you might prioritize testing
a complete redesign of your checkout process based on user feedback indicating difficulty
in completing purchases.

• Not having a clear hypothesis: A clear hypothesis guides the test and helps interpret
the results. Without a defined goal, you might struggle to draw meaningful conclusions.

Example: Instead of simply testing a new headline, you should hypothesize that a more
benefit-oriented headline will lead to a higher click-through rate on your blog post. This
provides a clear direction and success metric.

• Testing too many variables at once: Isolate the element you're interested in.
Changing multiple things simultaneously makes it difficult to pinpoint which change
caused the observed effect.

Example: Instead of testing a new button text, layout format, and color simultaneously,
focus on testing just the button text variation first. This allows you to isolate the impact of
the specific copy change on user behavior.

• Running the test for too short a duration: You need enough data to reach statistically
significant results. Running the test for too short a period might lead to misleading
conclusions due to random fluctuations.

Example: Plan to run your test for at least a week or two, especially if your website traffic
is low. This ensures you gather enough data to determine if the observed difference is
statistically significant or just random chance.
• Not considering sample size: Ensure you have enough website traffic to split between
the control and variations. A small sample size can lead to unreliable results.

Example: If your website only gets 100 visitors a day, splitting them into multiple
variations might not provide enough data points for each variation. Consider waiting until
you have a larger traffic volume before conducting the A/B test.

• Making changes mid-test: Avoid altering the test elements or traffic allocation once
the test has begun. This can invalidate the results.

Example: If you see a slight dip in conversions during the test, resist the urge to change
the variation. Stick to your planned test duration and analyze the final results to
understand the overall impact.

• Focusing only on the average: Analyze how different user segments interact with the
variations. A change that benefits one group might negatively impact another.

Example: A travel website finds that a new layout increases overall bookings. However,
it fails to realize that while it appeals to solo travellers, families prefer the previous layout
with more prominent family-friendly options.

• Overlooking technical issues: Ensure your A/B testing tool doesn't introduce delays
or errors that could affect user behavior and skew the results.

Example: An e-commerce site runs an A/B test on checkout buttons. Unbeknownst to

them, a bug in the testing tool intermittently prevents users from completing purchases
on one of the variations, skewing the results.

• Blindly following case studies: Every website and audience is unique. Results from
other companies might not apply to your specific context.

Example: A food delivery app adopts a competitor's strategy of gamifying its loyalty
program without considering its user demographics. The move backfires as its older user
base finds the gamification distracting and confusing.
• Giving up too soon: A/B testing is an iterative process. Even if your initial test doesn't
yield a clear winner, analyze the learnings to inform future variations and keep improving.

Example: A fitness app tests two workout reminders but discontinues the test after a
week due to lack of significant difference. Later analysis reveals that while both variations
had similar initial engagement, one showed higher retention over a longer period.

https://www.interaction-design.org/literature/topics/a-b-
testing#what_is_a/b_testing?-0

https://www.uxpin.com/studio/blog/ab-testing-in-ux-design-when-and-why/

https://bootcamp.uxdesign.cc/a-b-testing-what-it-is-and-how-to-use-it-to-optimize-
your-designs-1bd55ab9c26c

https://www.hotjar.com/ab-testing/mistakes/
Day5: Iterative Design and Testing

1.What is the role of iterative design in the usability testing process?

• Initial Design: The iterative design process begins with the creation of an initial design
or prototype of the product. This prototype is often based on the requirements and goals
of the project but may not fully meet user needs or expectations.

• Usability Testing: The prototype is then subjected to usability testing, where users
interact with the product in realistic scenarios. Usability testing aims to identify usability
issues, such as navigation problems, confusing interfaces, or unclear instructions.

• Feedback Collection: During usability testing, feedback is collected from users about
their experience with the product. This feedback may be gathered through various
methods, including observation, interviews, surveys, or usability metrics.

• Analysis and Iteration: The feedback collected during usability testing is analyzed to
identify usability issues and areas for improvement. Based on this analysis, iterations are
made to the design to address the identified issues and enhance usability.

• Prototype Revision: The design prototype is revised based on the changes identified
during the iteration process. This could involve modifying interface elements, adjusting
navigation paths, simplifying instructions, or making other usability improvements.

• Repeat Testing: The revised prototype is then subjected to another round of usability
testing to evaluate the effectiveness of the changes made. This process of testing,
analyzing feedback, and iterating is repeated multiple times until the product's usability
meets the desired standards.

• Finalization: Once usability testing indicates that the product's usability meets the
desired goals and requirements, the design is finalized for implementation.
2.What are the benefits of conducting multiple rounds of usability testing
throughout the design lifecycle?

• Identifying Usability Issues Early: Usability testing in the early stages of the design
process helps identify usability issues before significant resources are invested in
development. By catching problems early, you can address them more easily and cost-
effectively.

• Iterative Improvement: Each round of usability testing provides valuable feedback that
can be used to iterate and improve the design. By incorporating feedback from multiple
rounds of testing, you can gradually refine the product to better meet user needs and
expectations.

• Validation of Design Changes: Usability testing allows you to validate design changes
and improvements before implementing them. Testing these changes with real users
helps ensure that they have the intended impact and don't introduce new usability issues.

• Increased Confidence: Conducting multiple rounds of usability testing increases

confidence in the design by validating its usability with different user groups and in various
contexts. This helps reduce the risk of usability issues impacting user satisfaction and
adoption.

• Identification of Edge Cases: Testing with a diverse range of users and scenarios
helps identify edge cases and usability issues that may not have been apparent initially.
By uncovering these edge cases, you can design more inclusive and accessible products.

• Continuous Learning: Each round of usability testing provides opportunities for

learning about user behavior, preferences, and pain points. This ongoing learning allows
you to refine your understanding of the target users and design solutions that better meet
their needs.

• Alignment with User Needs: Regular usability testing ensures that the design remains
aligned with user needs throughout the design lifecycle. By continuously validating the
design with users, you can ensure that it evolves in response to changing user
requirements and preferences.
• Improved Product Quality: Ultimately, conducting multiple rounds of usability testing
leads to a higher quality product that provides a better user experience. By incorporating
user feedback and iteratively improving the design, you can create a product that meets
user needs and expectations more effectively.

Practice:

https://www.nngroup.com/articles/iterative-design/

https://www.smartsheet.com/iterative-process-
guide#:~:text=It%20improves%20usability.%20Testing%20and%20debugging%20are%
20easier,are%20involved%20with%20each%20iteration.%20It%20eliminates%20confu
sion

https://www.switchboard.app/learn/article/design-iteration-process

Week8-9
Real-time projects, Portfolio