1

2
Purpose statement: This module describes the skills, knowledge and attitude required to design
UI/UX. This module is intended to prepare students pursuing TVET Level 3 in Software
Development. At the end of this module, the students will be able to Analyse User Experience,
Define the User and Design Mockup.

Learning outcome 1: Analyse User Experience

Indicative content 1.1: Definition of key concepts

User experience: (UX) refers to the user’s journey when interacting with a product or service. UX
design is the process of creating products or services that provide meaningful experiences for users,
involving many different areas of product development including branding, usability, function,
and design.
User: Is a person who uses or operates something
Experience: Experience refers to conscious events in general, more specifically to
perceptions, or to the practical knowledge and familiarity that is produced by these conscious
processes.
What is user interface (UI)?
The user interface (UI): is the point of human-computer interaction and
communication in a device. This can include display screens, keyboards, a mouse and the
appearance of a desktop. It is also the way through which a user interacts with an application or a
website.

3
Interface: point where two systems, subjects, organizations, etc. meet and interact
Types of user interfaces
The various types of user interfaces include:
1. Graphical user interface (GUI)
2. Command line interface (CLI)
3. Menu-driven user interface
4. Touch user interface
5. Voice user interface (VUI)
6. Form-based user interface
7. Natural language user interface
Examples of user interfaces
Some examples of user interfaces include:
1) computer mouse
2) remote control
3) virtual reality
4) ATMs
As conclusion
User interface (UI) and User Experience (UX)
At the most basic level, the user interface (UI) is the series of screens, pages, and visual elements
like buttons and icons that enable a person to interact with a product or service. The goal of user
interface design is to make the user's interaction as simple and efficient as possible, in terms of
accomplishing user goals (user centered design).
User experience (UX), on the other hand, is the value that the end user gets while using your
product. It all depends on enhancing customer satisfaction by improving the usability,
accessibility, and pleasure when a user interacts with your product
 User Experience research or UX research
Is defined as users’ systematic study to discover behaviors, needs, motivations, and trends by
observations, analysis, and other user feedback. UX researchers use different methods to
understand problems and draw opportunities to stand out among their competition.
Research findings
Findings: Are facts and phrases, observations, and experimental data resulting from research.
Findings are basically the key outcome of the investigation. It is basically a key fact which you
can discover during an investigation.

4
Research findings are facts and phrases, observations, and experimental
data resulting from research. It’s important to note here that “finding” does
not always mean “factual information” because conductive research relies on
results and implications rather than measurable facts.
What is the difference between findings and research findings?
Findings are basically the key outcome of the investigation. It is basically a
key fact which you can discover during an investigation.
Research findings are facts and phrases, observations, and experimental data resulting from
research.
Steps of UI/UX Design Process
The UI/UX Design Process are methodologies that, if followed, allows you to
polish your user interfaces to be the best one possible for your business. If this
process is not followed, then it may end up in a situation where you need to
keep redesigning ourselves every time!
The entire UI/UX design process can be divided into 5 phase

Indicative content 1.2: Description of UX Research

or

5
The 5 Stages in the Design Thinking Process

• Stage 1: Empathize—Research Your Users' Needs.(user interview, user observation,

contextual inquiry)
• Stage 2: Define—State Your Users' Needs and Problems.(data analysis, information,
synthesis)
• Stage 3: Ideate—Challenge Assumptions and Create Ideas.

(brainstorming, worst possible idea)

• Stage 4: Prototype—Start to Create Solutions.(low-fidelity prototyping, wireframe, hi-

fidelity prototyping)
• Stage 5: Test—Try Your Solutions Out.(user testing, evaluation)

UX Research Methods and Approaches

Qualitative UX Research Method
1. User Interviews
2. Diary Studies: A diary study (sometimes called a camera study) is a UX research method in
which participants keep a log of their thoughts, experiences, and activities over a defined period
of time, usually a few days to several weeks.

Quantitative UX Research Methods

1. User Surveys: “A process of asking questions that are answered by a sample of a defined group
of people to get numbers that you can use to make decisions.”

6
2. Click Tracking: is when user click behavior or user navigational behavior is collected in order
to derive insights and fingerprint users.
3. Testing: A diary study (sometimes called a camera study) is a UX research method in which
participants keep a log of their thoughts, experiences, and activities over a defined period of time,
usually a few days to several weeks.
Mixed UX Research Methods
1. Heuristic Evaluation: : (of a method of teaching) allowing students to learn by discovering things
themselves and learning from their own experiences rather than by telling them things
2. Card Sorting: is a research technique that helps you discover how people understand and
categorize information, and ensures you create an information architecture that matches users'
expectations.
3. Usability Testing: is a method of testing the functionality of a website, app, or other digital
product by observing real users as they attempt to complete tasks on it.
Benefits of UX Research
The benefits of UX research: Better products Involving your potential customers directly helps
you gain a lot of knowledge on what the customers prefer, what their pain points are, and what
will help the overall improvement of the product.
UX researcher role and responsibilities The role of a UX researcher is to uncover user behaviors,
needs and motivations to make products, services and websites more natural and enjoyable for
users. Using qualitative and quantitative methods, they conduct comprehensive research and share
the insights from research with the UX designers.
Types of UX Data
There are two main:
1.Qualitative Method
2. Quantitative Method
UX research includes two main types: quantitative (statistical data) and qualitative (insights that
can be observed but not computed), done through observation techniques, task analysis, and other
feedback methodologies. The UX research methods used depend on the type of site, system, or
app being developed.
What are UX methods?
Steps of UX Analysis
1. Identification of user issues
2. Organization of UX data
3. Looking for recurring issues
4. Prioritization of fixes
5. Sharing of findings and recommendations
7
6. Building and testing new features
A UX competitive analysis can help you discover:
1. What user experiences are standard in your market
2. Actionable insights for improving changes
3. Opportunities to innovate within your own website’s user experience
4. What you’re doing right (and what to avoid) in your UX design

Assessment 2. Theoretical learning Activity

3. Base on your understanding what are the benefits UX research
4. Describe the types of UX Research Methods

Indicative content 1.3: Analysis of Brand Identity

Definition
The process of Brand Identity starts with understanding and indepth analysis of the brand, the
nature of the business, short-term and long-term goals, product and services offered, how does the
business wants to portray (represent, describe) itself in the market, values, and fundamentals that
have formulated the business.
A brand is a name, term, design, symbol or any other feature that distinguishes one seller's good
or service from those of other sellers.

A brand is the unique identity and perception of a company, product, or individual in the eyes of
the public. It's more than just a logo or a name—it's the overall experience and reputation that
people associate with a business or offering.

Key Elements of a Brand:

1. Name: The brand’s name is often the first thing people notice and serves as a primary
identifier.
2. Logo: A visual symbol that represents the brand, often serving as the most recognizable
feature.
3. Tagline: A memorable phrase or slogan that conveys the essence or promise of the brand.
4. Design Elements: This includes colors, fonts, and other visual components used
consistently across marketing and products.
5. Voice & Tone: How the brand communicates with its audience, whether it's formal,
casual, friendly, authoritative, etc.

8
 6. Values & Mission: The guiding principles and purpose behind the brand that influence
how it operates and interacts with customers.
7. Customer Experience: The feelings and perceptions that customers have when
interacting with the brand—this can be through customer service, product use,
advertising, or social media.
8. Reputation: The collective opinions and attitudes people have about the brand based on
their experiences and the brand’s actions.

Brand vs. Branding:

• Brand: The overall perception and identity (what people think about you).
• Branding: The process of creating and shaping that identity through design, messaging,
and consistent communication.

Brand Identity: The brand identity is the unique set of brand associations that represent what a
brand stands for and promises to its customers. Or Brand identity is the visible elements of a brand,
such as color, design, and logo, that identify and distinguish the brand in consumers' minds.
Principles of branding design:
Design is brand.
1. Consistency: The design elements (logo, color palette, fonts, imagery) must be consistent
across all brand touchpoints (website, packaging, social media, advertising).
2. Simplicity: A simple, clear design is easier for people to remember and recognize. It also
ensures that the brand message is conveyed without overwhelming the audience.
3. Memorability: Branding should be distinctive and unique to make a lasting impression on the
audience. This could be achieved through a standout logo, tagline, or design style.
4. Relevance: The brand’s design should resonate with its target audience and reflect the brand’s
values, culture, and positioning in the market.
5. Flexibility: While maintaining consistency, the brand design should also be flexible enough to
adapt to different uses (digital, print, social media) without losing its essence.
6. Timelessness: A well-designed brand avoids following short-lived trends. Instead, it should
aim to remain relevant and impactful over time.
7. Emotional Appeal: A good brand design should connect emotionally with its audience. This
is often achieved through the right combination of visuals, colors, and messaging.
8. Storytelling: The brand’s design should tell a story about who the brand is, what it stands for,
and how it serves its customers.
9. Scalability: The brand's design should be scalable, meaning it works well in any size—from a
large billboard to a small business card or icon.

9
10. Authenticity: The brand should remain true to its core values and mission. Authenticity in
design ensures that the brand’s message and visuals align with its actions.
alternative
Integration.
Even though they emerged as two different disciplines, design and branding need to be integrated
if you want them to be effective. A product cannot do without its brand image, and brand image is
nothing without design.
Understanding the brand.
The more you know, the better you are as an expert. This is true when it comes to the design
process. If a designer does not understand your company’s core values, your deepest origins and
the mission of your product or service, the design process and the end-product might fall short of
a great story behind it.
Relationships.
People respond to emotion. If they cannot connect with a brand or make a
relationship happen, you know it will not work for either side. It is a designer’s
responsibility to make an emotion-evoking design, similarly to what Apple has done with their
products with which their users feel a deep connection. iPhones, and that is something that would
not work without a good branding design.
Strategy.
What many startups and small companies do not realize is that they need to employ a branding
strategy early on, from the very founding of the company.
Innovative solutions.
In a world where almost every product and every service are the same as another, it is hard not to
have similar ideas and use the same concepts for certain work. The designers, however, need to be
there to make things different from one another and offer innovative design solutions that will
leave their competition behind.
Reinvention.
Many companies today use their branding options to reinvent the brand and yet
retain the same image in the eyes of their audience.
Do not overdesign.
When one starts the creative process, it is very difficult not to get carried away and do more than
required, even to the point of ruining the entire concept.
Making a difference.
Many people forget about this important thing, but this principle relies on being
different than everyone else. No matter if you work on the local or global market,
you have got to have what it takes to step out and say:

10
 Identification of Brand Competition
Brand Competition can be defined as the conflict between the companies offering
the similar line of products or services in the same target market and to the same
target audience with the goal to have the higher market share, increased
revenues, huge profits, and growth as compared to the contemporary brand at the marketplace.
Knowing and astutely understanding the competitors of your brand is one of the crucial steps to
plan and execute a successful business strategy.
Types of Brand Competition:
1. Direct Competition: Brands that offer similar products or services targeting the same
customer base.

• Example: Coca-Cola vs. Pepsi.

2. Indirect Competition: Brands that provide different products or services but fulfill the same
customer need.

• Example: Coffee shops vs. tea shops

3) Replacement Competition: Replacement competition is the tricky(deceive)

situation when your customer indulges in the purchase of other product instead
of choosing your product to which he has been committed for a longer period of
time.
Example: A bicycle vs. a car for transportation.
Identification of Brand Personas
Personas are fictional(imagined) characters, which you create based upon your
research in order to represent the different user types that might use your service, product, site, or
brand in a similar way. Personas help designers to create understanding and empathy with the end
users.
User personas help designers shape product strategy and accompany during the
usability testing sessions.
Personas are fictional characters created to represent different user groups or target audiences.
They are based on real-world research and data, and are used to inform design decisions,
marketing strategies, and product development.

Personas are fictional characters created to represent different user groups or target audiences.
They are based on real-world research and data, and are used to inform design decisions,
marketing strategies, and product development.

Key characteristics of personas:

• Demographics: Age, gender, occupation, education, income, etc.

11
 • Goals: What they want to achieve or accomplish.
• Motivations: What drives their behavior and decisions.
• Frustrations: What challenges or obstacles they face.
• Needs: What they require to achieve their goals.

Benefits of using personas:

• Empathy: Helps designers and marketers understand users on a deeper level.

• Focus: Keeps the team focused on the needs of real people.
• Prioritization: Helps prioritize features and functionalities based on user needs.
• Communication: Provides a common language for discussing users and their needs.

By creating and using personas, teams can develop products and services that better meet the
needs and expectations of their target audience.

Theoretical learning Activity Theoretical learning Activity

Q1. Explain three types of Brand Competition based on brand competition
Q2. Name any four principals of brand design
Practical learning Activity
Using your computer with the internet download different image that will help to Make brand.

Task analysis is a process that helps UX designers learn how users actually go about
completing tasks with a product.

12
A user experience (UX) designer is responsible for improving user interaction with a product,
whether a website or application, by helping users achieve their goals quickly and smoothly. UX
designers use task analysis when developing their product to gain insight and receive feedback
from users. Learning more about this process can help you understand its methodologies and
function in product development.
steps
1. Understand product specifications and user psychology
2. Interpret data and qualitative feedback
3. Create user stories, personas, and storyboards
4. Define the right interaction model and evaluate its success
5. Develop wireframes and prototypes around customer needs
6. Find creative ways to solve UX problems (e.g. usability, findability)
7. Work with UI designers to implement attractive designs
8. Communicate design ideas and prototypes to developers

Indicative content 1.5: Identification of end user pain point

Identification of end user pain point
Pain points: are problems that occur at the different levels of the customer experience: interaction
level, customer-journey level, or relationship level.
Three Levels of Pain Points
1. Interaction-level pain point:
refer to challenges or frustrations that customers experience during their interactions with a
product, service, or brand. These pain points can significantly impact the overall customer
experience and can arise at various touchpoints throughout the customer journey.
A user is passed from support person to support person. We’ve all been there — we call customer
support, say what we need, only to be passed to another department who “will be able to handle
that request.

Key Characteristics of Interaction-Level Pain Points:

1. User Experience (UX) Issues:

o Difficulties navigating a website or application.
o Confusing layouts or poorly designed interfaces that hinder usability.
o Slow loading times or system glitches during use.

13
 2. Customer Support Challenges:
o Long wait times for assistance or unhelpful responses from support staff.
o Lack of clear communication channels, making it hard for customers to get help.
o Inconsistencies in information provided by different support representatives.

2. Journey-level pain point: A user places an order and does not receive it for months.

Journey-level pain points refer to challenges or frustrations that customers experience

throughout their entire customer journey with a brand. These pain points can occur at various
stages, from awareness to post-purchase, and can significantly impact overall satisfaction and
loyalty.

Key Characteristics of Journey-Level Pain Points:

1. Awareness Stage Challenges:

o Difficulty finding information about the brand or products.
o Misleading advertising or unclear messaging that leads to confusion.
2. Consideration Stage Frustrations:
o Lack of sufficient product information or comparisons to make informed
decisions.
o Complicated navigation on websites, making it hard to browse options.

3. Relationship-level pain point: A user pays for a service but still has to watch ads.

Relationship-level pain points refer to challenges or frustrations that arise in the ongoing
relationship between a customer and a brand. These pain points typically involve emotional or
psychological aspects of the customer experience and can significantly impact customer loyalty,
trust, and satisfaction.

Key Characteristics of Relationship-Level Pain Points:

1. Trust Issues:
o Concerns about data privacy and security may lead to hesitation in engaging with
the brand.
o Past negative experiences that erode confidence in the brand’s reliability.
2. Communication Gaps:
o Lack of personalized communication can make customers feel undervalued or
ignored.
o Inconsistent messaging or branding that confuses customers about the brand’s
identity.

The Effects of Pain Points on Users

14
1. Pain Points Incur a Cost to Users

• Definition: Users may face various inconveniences or frustrations when interacting with
a product or service. These pain points can lead to additional costs, whether in terms of
effort, or resources.
• Examples:
o Increased Effort: Users may have to exert more energy to navigate a complicated
interface or process.
o Frustration and Stress: Ongoing issues can lead to emotional distress, affecting
overall satisfaction and well-being.

2. Pain Points Will Incur a Time Cost

• Definition: Many pain points result in users spending more time than necessary to
achieve their goals, whether that’s completing a task, finding information, or resolving an
issue.
• Examples:
o Longer Processes: A cumbersome checkout process can lead to longer wait times
and frustration.
o Inefficient Support: Users may spend excessive time trying to get help from
customer service, especially if they encounter long wait times or unhelpful
responses.

3. Financial Cost to the User

• Definition: Pain points can also lead to direct financial costs for users, either through
increased expenditures or lost opportunities.
• Examples:
o Lost Revenue: For businesses, pain points that affect efficiency can lead to lost
sales, which ultimately impact users who may miss out on timely services or
products.

Formative assessment
Theoretical learning Activity
Q1. According to the bellow statement answer True or False
a. Three Levels of Pain Points are plan, observation and Relationship.
b. Pain points are problems that occur at the different levels of the customer experience.
Q2. Discuss about effects of Pain Points on Users.
Attempt all questions
Q3.Cycle the letter corresponding to the best answer:
1) UX is:
A. User xampp

15
B. User unknown
C. User experience

2) UI is:/
A. User Internet
B. User Intermediate
C. User Interface
3) Which one will be Types of user interfaces/2marks
A.GUI
B.CSS
C.HTTP
4) Choose the correct answer
Steps of UI/UX Design Process are
a) Product definition, Design
b) Design, Research, Product definition
c) Product definition, Research, Analysis, Design, Validation.
5) Answer True or False
a. user interface (UI): is also the way through which a user interacts with
an application or a website.

A good UX analysis report should:

• Highlight the most urgent issues

• Be specific about the nature of each issue
• Include evidence like videos, screenshots, and transcripts
• Recommend solutions that are effective and efficient
• Include positive findings to let your team know what’s working well
Learning outcome 2: Define the user
Indicative content 2.1: Definition of key terms
✓ User story: is a short, simple description of a feature told from the perspective of the person
who desires the new capability, usually a user or customer of the system.

✓ User personas User personas, also known as customer personas or buyer personas, are fictional
representations of ideal customers or users that businesses create to better understand their target
audience. These personas are typically based on market research, data, and demographic
information to create a detailed and relatable profile of different customer segments. User personas
help businesses and product development teams tailor their products, services, marketing
strategies, and user experiences to better meet the needs and preferences of their target customers.

Creating user personas involves gathering information about the following aspects:

16
 Demographics: This includes age, gender, location, income level, education, and other relevant
personal information.

Psychographics: Understanding the values, attitudes, beliefs, and lifestyles of your target
audience. What are their interests, hobbies, and behaviors?

Pain Points and Goals: Identifying the challenges or problems that your personas face and their
goals or aspirations related to your product or service.

Buying Behavior: Understanding how your personas make purchasing decisions, where they
research products, and what factors influence their choices.

Communication Preferences: Determine the preferred communication channels and methods for
reaching your personas, whether it's email, social media, phone calls, or in-person interactions.

User Journey: Mapping out the typical path that each persona takes when interacting with your
brand or product. This includes awareness, consideration, purchase, and post-purchase stages.
✓ User journey: A user journey is a path a user may take to reach their goal when using a
particular website. User journeys are used in designing websites to identify the different ways to
enable the user to achieve their goal as quickly and easily as possible.
✓ UX brief (UX project brief): a UX design brief is a concise(giving a lot of information
clearly and in a few words) document that aims(a result that your plans ) at describing your
design project.
Indicative content 2.2: Creation of user story

✓ Characteristics of user story

• Be complete enough to demonstrate user value.
• Be short, simple, and clear.
• Contain supporting files and documentation if necessary.
• Be comprehensive enough to demonstrate value, but simple enough to develop in a single
iteration.
• Be written based on the input of all stakeholders.
• Be flexible and negotiable without impacting other stories or features.
• Be easy to test.
• Include acceptance criteria (conditions of satisfaction) for testers.
✓ Benefits of user stories
Why write user stories in the first place? Because they offer numerous benefits for an Agile
project. Here are a few examples:

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

eliminates confusion and makes it easier to grasp what the customer is looking for.

17
 • Increased flexibility: Because user stories don’t go into technical detail, they can be
molded to fit changing situations.

• Improved collaboration: When team members are aligned on one goal, they can work
better together and collaborate easily with other project stakeholders.
✓ Create user story

How to write user stories

Consider the following when writing user stories:

• Definition of “done” — The story is generally “done” when the user can complete the outlined
task, but make sure to define what that is.

• Outline subtasks or tasks — Decide which specific steps need to be completed and who is
responsible for each of them.

• User personas — For whom? If there are multiple end users, consider making multiple stories.

• Ordered Steps — Write a story for each step in a larger process.

• Listen to feedback — Talk to your users and capture the problem or need in their words. No
need to guess at stories when you can source them from your customers.

• Time — Time is a touchy subject. Many development teams avoid discussions of time
altogether, relying instead on their estimation frameworks. Since stories should be completable
in one sprint, stories that might take weeks or months to complete should be broken up into
smaller stories or should be considered their own epic.

Indicative content 2.3:Identification of user personas

18
✓ Importance of user personas
• Understanding the User
• Guiding Design and Development
• Improving Communication
• Prioritizing Features
• Enhancing Marketing Strategies
• Driving User Testing
• Fostering Innovation
✓ Characteristics of user personas
1 Personas aren’t fictional guesses at what a target user thinks

2 Personas reflect real user patterns, not different user roles.

3 A persona focuses on the current state (how users interact with a product), not the future (how
users will interact with a product).

✓ User personas in design process

Here’s how personas contribute in the design process:

1. Guiding Design Decisions: Personas keep the team focused on the user, They provide
insight into what users need and value in a product, which can influence features,
functionality, and even layout.
2. Aligning Stakeholders: Personas provide a common reference for all stakeholders
(designers, developers, marketers, and clients).
3. Prioritizing Features and Functions: By understanding which features resonate most
with personas, teams can prioritize development efforts.
4. Personalizing Content and Interactions: Personas help tailor the tone, style, and
content of the product.
5. Testing and Validation: During usability testing, personas are used to create realistic
scenarios, guiding testers to understand if the design aligns with the needs of specific user
types.

✓ Steps of creating user personas

19
 1. Collect the information about your users
2. Identify behavioral patterns from research data
3. Create personas and prioritize them
4. Find scenario(s) of interaction and create user personas UX documentation.
5. Share your findings and obtain acceptance from the team
Indicative content 2.4: Creation of user journey
✓ Types of user journey map

UX journey map
Sales journey map
Customer experience journey map

User journey maps can vary based on specific goals, such as enhancing user experience,
improving sales, or optimizing overall customer satisfaction. Here's a breakdown of these
journey map types:

1. UX (User Experience) Journey Map

• Purpose: To understand and improve how users interact with a product or service at every
stage.
• Use Case: Designed to identify pain points, optimize workflows, and create seamless
interactions in the product experience.
• Key Elements:
o User goals and actions at each step.
o Emotional responses and pain points during interactions.
o Touchpoints within the product or digital experience, such as screens, buttons, or
messages.
• Example: Mapping a user’s experience from discovering an app to signing up, using its main
features, and completing a primary task (e.g., creating a project, booking a service).

2. Sales Journey Map: Useful for identifying potential drop-off points, aligning marketing
strategies, and improving sales tactics.

• Key Elements:
o Sales funnel stages: awareness, consideration, decision-making, and purchase.
o Interactions with marketing materials (ads, social media, emails).
o Customer concerns, motivators, and objections at each stage.

20
 • Example: Mapping a B2B buyer’s journey from learning about a software tool through an ad,
researching it online, reading reviews, contacting sales, and making a final purchase decision.

3. Customer Experience (CX) Journey Map

• Purpose: To provide a holistic view of the customer’s interactions with a brand across all
channels and touchpoints.
• Use Case: Useful for understanding the full lifecycle of customer interactions, ensuring brand
consistency, and identifying areas where customer satisfaction can be improved.
• Key Elements:
o Multiple touchpoints: website, app, physical locations, support, social media, etc.
o Emotions, needs, and perceptions of the customer at each interaction.
o Post-purchase or long-term relationship stages like customer support, product
upgrades, and renewals.
• Example: Mapping a customer’s journey from becoming aware of a brand through social media,
researching products on the website, making an in-store purchase, and interacting with
customer support.

Service blueprints
Service blueprints are detailed diagrams that map out both the user experience and the
underlying processes, people, and systems that enable that experience.

Key Components of a Service Blueprint

1. Customer Actions: These are the steps the user takes during their journey, such as
browsing a website, making a purchase, or calling customer service.
2. Frontstage (Visible) Interactions: Actions that occur directly between the customer and
the service provider, such as in-store staff interactions, online chat support, or UI elements
on a website. These are visible to the customer.
3. Backstage (Invisible) Interactions: Internal actions and systems that support frontstage
interactions but aren’t visible to the user. For example, a support representative checking a
user’s history in a database or the backend processes that handle payment verification.
4. Support Processes: These are the additional internal processes that enable the service but
don’t directly interact with the customer. For example, logistics, database management,
inventory updates, and email automation.

21
 5. Physical Evidence: Any tangible or visible evidence of the service that users encounter,
such as receipts, emails, website layouts, or physical environments like store displays.
6. Lines of Interaction:
o Line of Interaction: This line separates customer actions from the service provider’s
frontstage actions.
o Line of Visibility: Separates the visible frontstage actions from the invisible backstage
actions.
o Line of Internal Interaction: Separates backstage processes from support processes,
ensuring clarity on what happens entirely out of the user’s sight.

There are four major elements to service blueprints:

1. Customer actions. What customers do when engaging with a service provider
2. Front stage actions. Employee actions that the customer sees
3. Back stage actions. Everything that occurs on the backend, out of the customer’s view.
4. Processes. All of the events and inner workings of the organization that make the
business work.

✓ Elements of a user journey map

Persona
Scenario
Stages of the journey
User actions
User emotions and thoughts
Opportunities
Internal ownership

A user journey map is a visual representation that outlines a user's experience with a product or
service. Here are the essential elements that make up an effective user journey map:

1. Persona: Provides context about who the user is, including their goals, needs, and pain
points, making it easier for teams to empathize with the user.
2. Scenario: Needs to submit a design to a client on the go
3. Stages of the Journey: Discovery → Onboarding → Initial Use → Repeat Use → Feedback
4. User Actions: Searching for tools, signing up, creating design, sharing files, receiving feedback
5. User Emotions: Frustration (slow app load), satisfaction (quick file-sharing feature)
6. Opportunities: Improve load times, add more file-sharing options
7. Internal Ownership: Product team (Onboarding and Use), Customer Support (Feedback)

22
Create user journey map

Creating a user journey map involves breaking down the user's experience step-by-step, capturing key
stages, actions, emotions, and pain points.
Steps to Create a User Journey Map

How to create a customer journey map (step-by-step)

Here’s how to create a user journey map in 6 steps:

1. Choose a user journey map template (or create your own)

2. Define your persona and scenario
3. Outline key stages, touchpoints, and actions
4. Fill in the user’s thoughts, emotions, and pain-points
5. Identify opportunities
6. Define action points and next steps

23
Indicative content 2.5: Perform UX Research

9 steps for conducting UX research to gain valuable insights

1. Define the objectives for your research project

2. Identify the target audience to be researched
3. Select the right UX research methods
4. Recruit participants for gathering research findings
5. Choose a tool for conducting user research
6. Analyze the research data to gather insights
7. Share research insights with key stakeholders
8. Implement findings and optimize the user experience
9. Iterate and improve key performance metrics

Learning outcome 3: Design Mockup

● Description of Key Concepts

✓ User interface

In general, an interface is a device or a system that unrelated entities use to interact. According to
this definition, a remote control is an interface between you and a television set, the English
language is an interface between two people, and the protocol of behavior enforced in the
military is the interface between people of different ranks.

What is user interface (UI)?

The user interface (UI) is the point of human-computer interaction and communication in a
device. This can include display screens, keyboards, a mouse and the appearance of a desktop. It
is also the way through which a user interacts with an application or a website.

The growing dependence of many businesses on web applications and mobile applications has
led many companies to place increased priority on UI in an effort to improve the user's overall
experience.

24
In the industrial design field of human–computer interaction, a user interface is the space where
interactions between humans and machines occur.

✔ User experience

The user experience (UX or UE) is how a user interacts with and experiences a product, system
or service. It includes a person's perceptions of utility, ease of use, and efficiency.

User Experience Basics

User experience (UX) focuses on having a deep understanding of users, what they need, what
they value, their abilities, and also their limitations.

Factors that Influence UX

At the core of UX is ensuring that users find value in what you are providing to them.
1. Useful: Your content should be original and fulfill a need

2. Usable: Site must be easy to use

3. Desirable: Image, identity, brand, and other design elements are used to evoke emotion and
appreciation(thanks)

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

5. Accessible: Content needs to be accessible to people with disabilities

6. Credible: Users must trust and believe what you tell them

✓ Importance of UX/UI design the software development

1. Usability

25
Time spent on the UX and UI interface is designed to attract and retain users for your
application.

2. Allows people to understand

 Deploying an app with a poor user experience offers a lasting look.

 Before deployment, you can identify and resolve problems so your first impression is
good.
 A user-friendly app keeps people from leaving.
 You must consider the needs of your customers before designing the Ul UX.
3.Establishes your brand

Attractive applications have more users and they’re a reality.

The popular UI / UX has attracted several millions of uses, apps like Twitter, Instagram,
Facebook, etc. The happiness from a great user experience makes users trustworthy.

4.Lower costs and time management

26
 You have a very little risk that your clients would have an issue with your application if you
invest in a great UI / UX design.
 A great product does not need regular updates so you save money and time on an update.
 The upgrade needs some money-and-time expenses.
 The effective architecture of UX and UI saves development time.
 Mock-ups and prototypes smooth out problems before a long period of production.
 You keep track of the release date so you are less likely to go back and redo development
work.
Important principles of user experience design

1.Meet the users’ needs

Refers to the process of understanding and fulfilling the requirements, preferences, and expectations of
users when designing a product, service, or system.

2. Know where you are in the design process

 Refers to having a clear understanding of your current stage or position within the overall design
workflow.
 Design processes typically consist of several stages, such as research, ideation, prototyping, testing,
and final implementation.

3. Have a clear hierarchy

In design refers to the organization of elements in a way that communicates their importance and
guides users through the information effectively.

4. Keep it consistent

Users expect products to share some similarities with other products they regularly use.

This makes it easy for them to become familiar with the new product without any additional
learning costs. It may sound a little counterintuitive(describes something that does not happen in
the way you would expect it to ), but the more familiar your design is to others, the faster users
can learn to use it, which enhances their experience.
Understand accessibility

An increasingly important rule from among the UX design basics is designing with accessibility
in mind. In simple words, a designer’s responsibility is to make sure their design is usable for as
many people as possible. This means that your design needs to be accessible to people with
disabilities too.

27
Context is key

When designing, you need to take into account the user’s context. Location is a

commonly understood contextual factor—are you designing for someone on the go or for
someone sitting at a desk? But there are other things to consider, including the time available
with the user, their emotional state, the device they are using, the people who influence them,
and more.

5. Usability first

UX design is entirely focused on solving the users’ problems, which makes usability of the
design one of the most crucial user experience design principles. No matter how aesthetically
pleasing your work may be, it won’t strike a chord with the user unless it is safe and easy to use.

Hence, you should conduct usability tests throughout the UX design process, including before
you start your initial design, during the prototyping phases, and at the end of the process.

6. Use simple language

Just as simplicity has become a best practice in visual design, UX-focused copywriting should
avoid technical terms and opt for simple language. Users are busy, they’re on the go, they’re
multi-tasking, so use words in your design that are closest to the user’s thoughts.

Simple language is easy to understand, which enhances your design’s user-friendliness.

7.Confirm before you commit

Accidents happen all the time. Your design should help correct this, though, because you don’t
want to give the user a poor experience. This makes confirmation another one of the essential
UX design principles.

28
8.Design with personality

Your design can attract more users if it showcases a character that interests the user persona you
are designing for. Users find it hard to connect with a lifeless design, device, or code.

Adding personality to your design gives it the human touch that makes it more attractive and
usable (like the Trello blog).

UX design process key phase

1. Product definition One of the most important phases in UX design is actually done before the
product team creates anything. Before you can build a product, you need to understand its
context for existence. ...

2. Product research Once you’ve defined your idea, the product team moves to the research
phase.

3. Analysis

4. Design

5. Validation (Testing)

1. Product definition

One of the most important phases in UX design is actually done before the product team creates
anything. Before you can build a product, you need to understand its context for existence. The
product definition phase sets the foundation for the final product. During this phase, UX
designers brainstorm around the product at the highest level (basically, the concept of the
product) with stakeholders.

29
This phase usually includes:

a) Stakeholder interviews: interviewing key stakeholders to gather insights about business goals.

b) Value proposition mapping: thinking about the key aspects and value propositions of the
product: what it is, who will use it, and why they will use it.

c) Concept sketching: creating an early mockup of the future product (can be low fidelity aper
sketches of the product’s architecture).

2. Product research

Once you’ve defined your idea, the product team moves to the research phase. This phase
typically includes both user research and market research. This phase can include:

Individual in-depth interviews (IDI). A great product experience starts with a good
understanding of the users.

Competitive research. Research helps UX designers understand industry standards and identify
opportunities for the product within its particular niche.

3. Analysis

The aim of the analysis phase is to draw insights from data collected during the

research phase, moving from “what” users want/think/need to “why” they

want/think/need it. During this phase, designers confirm that the team’s most

important assumptions are correct.

This phase of the UX process usually includes:

Creating user personas. Personas are fictional characters that represent the different user types
for your product. As you design your product, you can reference these personas as realistic
representations of your target audience.

30
Example of a user persona, showcasing the person’s gender, age, motivations, and more. Image
credit Creating user stories. A user story is a tool that helps designers understand the
product/service interactions from the user’s point of view.

Storyboarding. Storyboarding is a tool that helps designers connect user personas and user
stories. As the name suggests, it’s essentially a story about a user interacting with your product.

4. Design

When users’ wants, needs, and expectations from a product are clear, product

designers move to the design phase. At this step, product teams work on various activities, from
creating information architecture (IA) to the actual UI design.

The design phase usually includes:

Sketching. Sketching is the easiest and fastest way to visualize our ideas. Creating wireframes.
A wireframe is a tool that helps designers visualize the basic structure of a future page, including
the key elements and how they fit together.

Creating prototypes. While wireframes are mostly about structure and visual

hierarchy (the look), prototypes are about the actual interaction experience (the look and feel).

Creating design systems. For large projects, designers typically create a system of components,
patterns, and styles that help both designers and developers stay on the same page regarding the
design.

5. Validation (Testing)

31
Validation is an essential step in the design process because it helps teams understand whether
their design works for their users. The validation phase of the UX process may include the
following activities:

Once the design team has iterated the product to the point where it’s usable, it’s time to test the
product in-house.

Testing sessions. User testing sessions with people who represent your target audience are very
important. There are many different formats to try, including

moderated/unmoderated usability testing, focus groups, beta testing.

Surveys. Surveys are a great tool for capturing both quantitative and qualitative information
from real-world users Analytics. Quantitative data (clicks, navigation time, search queries, etc.)
from an analytics tool can be very helpful to uncover how users interact with your product.

Wireframe

What is a wireframe?

A wireframe is a skeletal blueprint or framework that outlines the basic design and functions of a
user interface (such as a website or application).

The goal of a wireframe is to quickly and easily communicate:

• The contents of the page

• The page structure and layout

• The app’s functions

32
In other words, a wireframe describes the basic structure, functions, and content of the page.

Wireframes can be low-fidelity or high-fidelity, depending on your needs and preferences.

A low-fidelity wireframe is often sketched out on paper or a whiteboard and is a useful way to
brainstorm the basic outline for your design. A high-fidelity wireframe has more detail and may
include simple workflows and interactions.

What is a mockup?

A mockup is the next, more in-depth iteration of the wireframe outline. A mockup is a static
wireframe that includes more stylistic and visual UI details to present a realistic model of what
the final page or application will look like.

33
A good way to think of it is that a wireframe is a blueprint(plan) and a mockup is a visual model.

A mockup typically includes additional visual details such as:

1. Colors, styles, graphics, and typography

2. Styled buttons and text

3. Navigation graphics

4. Component spacing

Mockups are useful tools for understanding and communicating what the final interface should
look like and gives stakeholders a chance to preview design and style choices before committing
to building the app in a functional prototype.

Prototype

A prototype is “A simulation or sample version of a final product, which UX teams use for
testing before launch.”

The goal of a prototype is to test and validate ideas before sharing them with

stakeholders and eventually passing the final designs to engineering teams for the development
process.

Prototypes are essential for identifying and solving user pain points with participants during
usability testing. Testing prototypes with end-users enables UX teams to visualize and optimize
the user experience during the design process.

Distinction from wireframe, mockup and prototype

34
 z

This figure shows clearly difference between wireframe, mockup and prototype .

Distinction from wireframe, mockup and prototype

A wireframe is a quick sketch of a product intended to convey its desired functionalities.

● A mockup is a realistic design of a product designed to gather feedback on its visual elements.

● A prototype is an interactive simulation of a product designed to test the user experience.

Information Architecture

What is information architecture?

Figure that show the components of information architecture

Information architecture is a discipline that focuses on the organization of

information within digital products. For example, when designers create apps and websites, they
lay out each individual screen so that the user can easily find the information they need. They

35
also create a flow that lets users navigate between screens without much effort. UX architects
determine the right organization and flow.

Design thinking process

What is design thinking?

Design thinking is a methodology that attempts to solve complex problems in a creative and
user-centric way. Core features of the design thinking methodology include:

1. Focus on end-users. The end-user plays a key role in the design thinking
process—all key product design decisions are evaluated according to the end
user’s needs and wants.
2. Solid problem framing. Rather than accepting the problem as given, designers explore the
problem space to find a root cause of the problem. The insights they gain can help designers
reinterpret the given problem.
3. Creating tangible solutions. Convey design solutions using sketching and
prototyping as opposed to presentations and slide decks.
4. The five-stage design thinking model was originally posited by the Hasso-Plattner Institute of
Design at Stanford (d.school). The design thinking stages are:
1. Empathize. Understand the problem of the user for whom you are
designing.
2. Define. Form a problem statement.
3. Ideate. Generate creative solutions to this problem.
4. Prototype. Build a tangible representation of this solution.
5. Test. Validate this solution

User-centered design

36
User-Centered Design Basics
The User-centered design (UCD) process outlines the phases throughout a design and
development life-cycle all while focusing on gaining a deep understanding of who will be using
the product.
The following are the general phases of the UCD process:
1. Specify the context of use: Identify the people who will use the product, what
they will use it for, and under what conditions they will use it.
2. Specify requirements: Identify any business requirements or user goals that must be met for
the product to be successful.
3. Create design solutions: This part of the process may be done in stages, building from a rough
concept to a complete design.
4. Evaluate designs: Evaluation - ideally through usability testing with actual users -is as integral
as quality testing is to good software development.

Usability
Usability Testing can be defined as the kind of testing performed from the end user's point of
view for determining whether the application you are developing is effortlessly usable or not.
Your application may build entirely per the requirements. Still, they might not be used at the
time of delivering the project in the user's hands.
Here's a simple block diagram of usability testing below:

37
3-Clicks rule
The 3-click rule is a persistent, unofficial heuristic that says that no page should take more than 3
clicks (or taps on a touchscreen) to access. A variation pronounces that the most important
information should take no more than 3 clicks to get to.

Feedback in UX: [Presenter] One of the most important mechanisms we employ in UX is

feedback. Feedback is the system's response to the user's action. If you've ever submitted a form
and not received a response, you've likely felt confused on whether the system worked and
whether you had to do it again. Feedback gives users the confidence that their action was
acknowledged by the system. Feedback is incorporated into everything we design, from how
buttons behave on click to receiving an email confirmation on your new account signup.
Essentially, according to Hogue, feedback answers questions across four categories:
Location: Where am I?
Current Status: What’s happening — and is it still happening?
Future Status: What will happen next?
Outcomes & Results: What just happened?
Indicative content 3.2: Use of Figma prototyping tool Setup Figma

38
Step 1: Get access to Figma Create or sign in to your Figma account ...
Step 2: Enable the component libraries Open the design file you’d like to connect to the DDS 2
libraries.
Step 3: Manage Components are listed in the Assets panel.
Step 4: Integrate styles
Step 5: Review updates
Step 1: Get access to Figma
Create or sign in to your Figma account
If you already have a Figma account set up with your Dell or Dell team email address, visit
Figma.com and sign in. If you do not have a Figma account, visit the onboarding instructions
created by Dell Digital Design’s Design Operations team for instructions on how to set up your
account.
You must be a member of this team before you can enable the DDS v2 component libraries.

Step 2: Enable the component libraries

Open the design file you’d like to connect to the DDS 2 libraries. On the sidebar, select the
Assets panel. Select the Library icon to view a list of DDS 2 libraries. To enable the libraries, use
the toggle switches. While you can enable all of the libraries, the most commonly used
components are located in the following two libraries:
• Components & Patterns for Web Light Mode
• Foundations & Icons Light & Dark Mode

39
Step 3: Manage components
Components are listed in the Assets panel. Click any component and drag it from the panel onto
your canvas. Some components are more customizable than others. Buttons, for example, contain
variants and states that can be modified.
Step 4: Integrate styles
All of the foundational styles for colors, typography, elevation, and grid will fully integrate into
Figma when you enable the DDS 2 libraries. You can access library styles in the Properties panel
by selecting the style you want to update. Step 5: Review updates
You may see a notification that prompts you to review or dismiss component updates.
Carefully review the updates before accepting them—they may break your layout or design and
you will not be able to undo those changes.
Figma interface

40
Below there are many tools we found in figma interface
1. The canvas in Figma is the backdrop on which all of your frames,
groups, and other layers live.
2. Frames allow you to access extra functionality in Figma. You will
need to use Frames to use the following features or functions: Layout
Grids.
1. Menu
2. Layers
3. Design Panel
4. Pages
5. Inspect Panel
6. Options
7. Prototype
8. Assets
Figma Mirror
A Full Introduction of Figma Mirror

41
Figma mirror is the mobile version of Figma, where you can prototype your desktop designs into
your mobile phones. To understand the Figma mirror, we have first to understand what Figma is?
As earlier I mentioned that Figma is vector graphics digital designing prototype web-based
software. It is generally a UI and UX designing application. Figma is proven ideal for creating a
website, apps, or for small interface programs.
Steps to Use Figma Mirror App
Well, Figma mirror is a mobile version of Figma which runs for both Android and iOS. It
generally helps you test your designs on mobile. It can be done by two methods first one by
using the Figma mirror app, and another one is by opening the Figma mirror in the browser. If
you want to know how to use Figma mirror App, then you have to follow some easy steps:
Step 1: Download the mobile version app from the play store or iOS store whichever OS you are
using.
Step 2: After the downloading is done then sign in using the credentials by which you have you
have logged in to your pc.
Step 3: Now select a frame from your designs, on your desktop, and it will be mirrored in your
device you can also use the Figma mirror app in the browser as well to do so you have to open
Figma mirror in your browser and then follow the same time steps followed above, and your
design will be mirrored.
Indicative content 3.3: Sketch wireframe
Sketch Wireframes and Examples
Wireframing is the best way to design a modern and effective web-page. Traditionally, many
people think of wireframing as something done with pen and paper, which left most of us non
artistic people feeling left out. That's why we decided to create premade sketch wireframes for

42
you! Create a wireframe today using one of our templates and customize it to your business
objectives.

3 Tips for Creating Sketch Wireframes

1. Skip the Color
The point of wire framing is not to be distracted by color palettes or blinking icons, but rather to
focus on the core layout and design of the page. Leave out the color and flash and focus on the
order of elements and placement of your call to actions.
2. Request Constant Feedback
When creating a wireframe, you should always be asking for feedback from
coworkers or team members. Try to ask people from various departments, as each will offer a
unique perspective on what they like about your wireframe design and where there is still room
for improvement.
3. Decide on One Clear Page Objective

43
Pick one clear page goal or objective. Is the goal of this page to capture the user's email address
so a sales rep can follow up? Is it to have the user start a free trial? Or is it to guide them through
a self-service purchase process? Whatever it is, pick one goal and always keep that goal in mind
when designing.
Indicative content 3.4: Sketch mockup
Setting up files
To set up the files we use the following steps:
1. Creating file
2. Create and edit frames
3. Creating pages

The growing interest in content design is a welcome development. Such interest recognizes that
content decisions can’t be separated from the context in which the content will be used.
Content Design as Problem Solving Content design is most effective when treated as the
exploration of user problems, rather than as the fulfillment of user tasks.
The following tools will help to make Application of contents in design
1. Adding predefined shapes
2. Add custom shapes
3. Pen tool Add Images
4. Masking
5. Effects and blending
6. Strokes
7. Management of layout (Auto-layout, Grid,
8. Application of element alignments

44
Creation of color palettes
Custom palettes are perfect for custom designs. Using color as a communication tool is much
more intuitive than it may seem. Colors make us feel certain ways that we may find hard to
explain but easy to understand
Use Figma plugins to quickly generate a color system
• Step 0 — Install Plugins Make sure you have these Figma Plugins installed:
• Step 1 — Create a Color Chip and Color Swatch Create a shape for your Color Chip.
• Step 2 — Duplicate and Rename Swatches Make 4 duplicates of the Color Swatch frame
• Step 3 — Add Labels with Smart Text Plugin
• Step 4 — Dial in the Colors and Create Styles
Creation of components
Create Your First Component. When creating a React component, the
component's name MUST start with an upper case letter.
The following elements will help to create components:
1. Reusable input components
2. Reusable checkbox and radios
3. Reusable button components
4. Content cards
Application of mockup design
Best Free Application Mockup PSD Templates: If you are in the process of launching your
mobile product, you might need some application prototypes. It would help you please the design
and then launch it on the advertisement campaigns.
During designing mockup, we can use the following tools:
1. Content sections
2. Navigation bar
3. Dropdown men
4. Sidebar menu
5. Design simple online shopping platform with Items listing, cart, checkout
6. Design authentication pages
7. Design a B2B platform
Test design using Figma Mirror
1. Run usability testing on Figma prototypes

45
2. Create missions for users to complete
3. A/B test designs to compare performance
4. Get quantitative data like success rates, miskick rates, and duration.
5. Review heat maps for each screen in your prototype
6. Ask follow-up questions with scales or open-ended questions
7. Find the best user flow for your designs
8. Run in-person tests using a single device
Indicative content 3.5: Presentation of Prototype
Starting prototyping
How to create a prototype in 7 steps:?
If you want to learn how to create a prototype, consider following these steps:
1. Conduct research
When you have an idea for a product, a beneficial first step to conduct is
researching similar products. This can help you determine whether your idea is innovative
2. Draw a design
Before you create a prototype, it's important to design your product. A sketch can help you
roughly determine what your finished product might look like and how it might function. These
sketches only represent initial product ideas, so finding a design, you like is essential and may
require several drafts.

3. Develop a virtual model

The next step toward creating an effective prototype is generating a virtual model of your
product.
4. Determine whether you require assistance
After building a model of your product, you can now determine whether you can build the
prototype yourself. If your prototype requires specific machinery to build, consider asking
someone trained in using such machines to
5. Generate a proof of concept
A proof-of-concept prototype demonstrates how your product works. This prototype might not
look exactly like your finished product, but it's important that your proof of concept contains the

46
moving or mechanized parts from your design so you can see how each part functions together.
This can help ensure you build a product that functions as intended. help you.
6. Create your prototype
Once you're certain you can create a functional product, you can build a version that adheres
more to your model and designs. For this prototype, you can combine your visual ideas from
your design with your proof of concept's functionality. With this information, you can also
determine which parts of your design work and which may require adjustments.
7. Repeat any steps as needed
Once you test your prototype or allow your intended audience to use it, you might discover areas
that require improvement. Consider returning to your sketches, 3D model or proof of concept to
make any required changes. You can repeat these steps as many times as needed to find the right
combination of function and design for your prototype. Then, you can show your mastered
prototype to potential investors or begin manufacturing your product.
What are the benefits of using a prototype?
Creating a prototype can be an important early step toward ensuring a successful production
process because it can provide you with key information about your idea for a product.

Here are some benefits of using a prototype in your product design process:
1. Tests your product's functionality: Testing your product can help you make adjustments to
ensure optimal performance and eventual customer satisfaction.
2. Saves money before production: Creating one or two prototypes is typically a less expensive
process than mass producing a product without testing it first.
3. Allows you to demonstrate your product to investors : A prototype of your product can also
help you show investors what your product aims to accomplish and how well it works.
4. Determines your product's usefulness: Another effective method associated with creating a
product is allowing select members of your intended audience to use your prototype, which can
help you determine whether they believe the product is useful.
5. Highlights the proper materials to use: When you generate an idea for a product, you might
determine the specific materials you require and an outline of your eventual product's shape.
With a prototype, you can then take your original idea and learn how to create a better product at
a lower cost.

47
6. Helps you coherently discuss your product: When you speak to others, such as investors,
manufacturers and distributors, about your product, they might have specific questions about its
dimension, weight, mobility and other aspects.
Add interactivity
Learn the basics of adding interactivity to your Adobe InDesign documents, including adding
links, buttons, animation, sharing your interactive document, and more.
What types of interactivity can I add to my Documents?
There really are a lot of other types of interactivity you can add to your documents including
placing video and sound files and setting options in the Media panel, working with Object States
to turn multiple objects like a series of images into a multistate object that can act like a
slideshow, for example, or adding working Buttons and Forms.
Present Prototype
How To Give a Prototype Presentation (and How To Be a Good Audience for One!)
Whether it’s to a client, a development team, or your fellow designers, presenting prototypes is a
great skill for consultants and product designers to have. Here are some tips for helping your
audience understand your prototype:
Start with the ‘why’: By reminding your audience of the context, you get everyone on the same
page. Start by going over the big-picture goals, where your prototype fits into the overall project,
and any specific constraints you are working within.
Tell your audience what they are about to see: Even for a really simple prototype, it’s important
to verbally explain it before showing any screens.
Call out the events or steps that a user will encounter: it helps them understand what they should
be looking for, and the steps they should see when you do show them your prototype.
Make it crystal-clear: Use arrows, color coded sticky notes or text to guide your audience
through the prototype.
Tell a story: Storytelling helps make the product real, and helps convey the passage of time, an
integration or a handoff to another part of the process. Remember that products are used by
people — who is going to use yours, how will it be a part of their day, what will the user have to
do, and what will be an integration?
Practice! Walk through your presentation by yourself and then also with a friend or colleague
who isn’t familiar with the project.
If you’re on the receiving end of a prototype presentation, here’s how you can help make it
valuable and productive:

48
Approach the prototype with an open mind: There are often multiple ways to interpret a solution.
Sometimes a button could work just as well as a link, or an icon — don’t let your preconceived
ideas about the design of the feature or application block you from seeing other ways to solve the
problem.
Don’t let the product you currently have limit the product you could have: When a prototype is
intended to replace your current system, it can be tempting to feel more comfortable with the
familiarity of what you already have. But remember, if your existing system was perfect, you
probably wouldn’t be trying to update it in the first place.
Be willing to give constructive feedback: If you like something, say so! And if you have
concerns, speak up. Ask for time to think over a prototype if there are parts that you are unsure
about and then clearly articulate why you do or don’t like it, or you do or don’t think it will
work. Your perspective will only make the product stronger.
As conclusion
Prototyping is a great design thinking tool–and the power of a prototype is enhanced when
everybody can understand and react to it. A clear, engaging presentation, followed by thoughtful
and open discussion, will help your final product be the best it can be.
-

End of module

49