Designing and Building
AI Products
and Services
Workbook
Workbook 2: Designing a Human–
Computer Interaction Interface
Module 6
Advances in technology have swiftly moved us from keyboard to
motion-sensing interactions, bridging the divide between human
and computer interaction.
Nevertheless, many interfaces seem to be designed with little
regard to usability. This generally leads to frustration, reduced
productivity, and lost revenue, as users move on to the next
product in their search for new and innovative ways for interaction
technology. Therefore, the success of any AI product relies upon
incorporating effective user experience design methodologies
into the AI design process.
For this task, you’ll design a human–computer interface that uses
AI to solve a problem or improve a process. Follow the steps
below to complete this workbook entry.
1
1 Step 1: Select a Problem
Select a problem that needs to be solved or a process that needs
improvement. This problem can be something in your organization or
your personal life. Write a paragraph describing this problem/process.
Type your response here
Delivery agents in gig-economy platforms like Swiggy or Zomato face multiple challenges: unsafe
phone handlingwhile riding, inefficient route navigation, difficulty in managing multiple orders, and
poor communication with customers during deliveries. Current mobile interfaces rely heavily on
touch-based inputs, which are impractical in motion. Errors like missed turns or delayed
updatesreduce efficiency, customer satisfaction, and earnings, while also compromising safety.
This assignment proposes an AI-powered multimodal assistant for delivery agents. It will combine
real-time route
optimization, voice-enabled interaction, predictive delay alerts, and smart notifications into a
single HCI solution. The goal is to improve safety (hands-free interaction), efficiency (optimized
routing and batching), and customer experience (timely updates).
2
2 Step 2: Assess the User
The interaction design (IxD) process is what designers use to create
solutions centered on users’ needs, aims, and behavior when interacting
with products.
The IxD process involves five stages:
Discover what users need/want: Observe and interview potential
customers, and examine existing solutions.
Analyze: Sort and order your findings
Design: Outline a potential solution according to design guidelines and
fundamental design principles.
Prototype: Give users an idea of what the product will look like, and let
them test it
Implement and deploy: Build and launch your product.
The IxD process is iterative, and it may take many iterations before
pinpointing the ideal version of a solution. So, you should continue testing
and adapting appropriate changes around an ever-clearer understanding
of your users’ needs.
You’ll find that time and financial constraints get in the way. Examine where
you can achieve the most progress by using the most cost-effective
techniques to keep your design on course. You should aim for a minimum
viable solution rather than a “perfect” product.
3
2 Step 2: Assess the User (Continued)
You can use heuristic evaluation to help you identify the most obvious
usability errors and focus on fixing them first. Specifically, for this
step, you’ll address stage one, which involves “finding the users’ needs/
wants.”
Write a paragraph describing how the user and your application’s
interaction will occur, keeping in mind the user experience and limitations
of current human–computer interaction. How can you enhance the user
experience with your proposed application?
4
2 Step 2: Assess the User (Continued
Type your response here
The primary interaction with the proposed application will be through voice commands and haptic
feedback, minimizing the need for physical touch. For instance, an agent can say "Accept order,"
"Next stop," or "Inform customer of delay" while riding. The system will respond with clear audio
prompts via a helmet-mounted speaker and provide subtle vibrations on a smartwatch for critical
alerts, such as a sharp turn ahead or a new order notification.
This design addresses the severe limitations of current HCI, which demands a rider's visual and
manual attention on a small screen. The user experience is enhanced by creating a hands-free
environment that reduces the agent's cognitive load, improves safety, and allows them to focus on
the road. By incorporating predictive AI prompts, such as warning of a potential traffic jam and
suggesting an alternative route, the application moves from a reactive tool to a proactive partner.
5
3 Step 3: Select an AI Application
or Algorithm
In this step, given the problem at hand, you need to select the appropriate
AI algorithm that you will use for the HCI. Then, document the alternatives
and explain why you selected a particular algorithm for the HCI?
Although it may take a bit of research, the answer to this question is
essential for the success of your HCI. Return to the previous
modules' discussions concerning machine learning (ML) or deep learning.
Here are some resources to get you started.
Common ML Algorithms for Beginners
An ML algorithm is a procedure that runs on data and is used for building a
production-ready ML model. If you think of ML as the train to accomplish a
task, then ML algorithms are the engines driving the accomplishment of the
task.
ML algorithms can be grouped into three main categories.
1. Supervised ML algorithms search for patterns within the value labels
assigned to data points. Some popular ML algorithms for supervised
learning include support vector machines for classification problems,
linear regression for regression problems, and random forest for
regression and classification problems.
2. Unsupervised ML algorithms work with data where there are no labels
associated with data points. These ML algorithms organize the data into
a group of clusters to describe its structure and make complex data look
simple and organized for analysis.
6
3 Step 3: Select an AI Application or
Algorithm (Continued
3. Reinforcement ML algorithms choose an action based on each data
point and later learn how good the decision was. Over time, the algorithm
changes its strategy to learn better and achieve the
best reward.
Below, please find a list of some of the most common ML algorithms:
1. The Naïve Bayes classifier algorithm is among the most popular learning
methods grouped by similarities, which works on the popular Bayes
theorem of probability. The Naïve Bayes classifier algorithm can be used if
you have a moderate or large training dataset, if the instances have
several attributes, and if, given the classification parameter, attributes that
describe the instances should be conditionally independent. Its
applications include sentiment analysis, document categorization, and
email spam filtering.
2. The K-means clustering algorithm is a popularly used unsupervised ML
algorithm for cluster analysis. It operates on a given dataset through a
predefined number of clusters, k. The output of the k-means algorithm is k
clusters with partitioned input data. For instance, consider k-means
clustering for Wikipedia search results. The search term “Jaguar” on
Wikipedia will return all pages containing the word Jaguar, which can refer
to Jaguar as a car, Jaguar as a macOS version, and Jaguar as an animal.
The k-means clustering algorithm can be applied to group web pages that
talk about similar concepts. It is used by most search engines, such as
Yahoo and Google, to cluster web pages by similarity and identify the
“relevance rate” of search results.
The Support vector machine (SVM) learning algorithm is a supervised
3. ML algorithm for classification or regression problems where the dataset
teaches SVM about classes so that it can classify any new data into
different classes by finding a line (hyperplane that separates the training
dataset into classes. The advantages of using SVM include best
7
3 Step 3: Select an AI Application or
Algorithm (Continued)
classification accuracy on the training data, more efficiency for correct
classification of the future data, and no overfitting of the data. SVM is
commonly used for stock market forecasting by various financial
institutions. For instance, it can be used to compare the relative
performance of stocks when compared to the performance of other stocks
in the same sector.
4. The Linear regression ML algorithm shows the relationship between two
variables and how the change in one variable impacts the other. Linear
regression is used for estimating real continuous values. The most
common examples of linear regression are housing price predictions,
sales predictions, weather predictions, and employee salary estimations.
The basic goal of linear regression is to fit the best line among the
predictions. Linear regression is one of the most interpretable ML
algorithms. It’s fast and requires minimal tuning.
5. The Logistic regression ML algorithm is used for classification tasks and
not regression problems. Here, “regression” implies that a linear model is
fit into the feature space. The odds or probabilities that describe the
outcome of a single trial are modeled as a function of explanatory
variables. Logistic regression algorithms help estimate the probability of
falling into a specific level of the categorical dependent variable based on
the given predictor variables. Logistic regression is a robust algorithm as
the independent variables need not have equal variance or normal
distribution. Additionally, it does not assume a linear relationship between
the dependent and independent variables and, hence, can also handle
nonlinear effects. The applications of logistic regression include
epidemiology to identify the risk factors for diseases and plan accordingly
for preventive measures as well as for risk management in credit scoring
systems.
8
3 Step 3: Select an AI Application or
Algorithm (Continued)
6. The Decision tree ML algorithm is a graphical representation that makes
use of the branching methodology to exemplify all possible outcomes of
a decision, based on certain conditions. In a decision tree, the internal
node represents a test on the attribute; each branch of the tree
represents the outcome of the test, and the leaf node represents a
particular class label, i.e., the decision made after computing all the
attributes. The classification rules are represented through the path from
the root to the leaf node. Decision trees are very instinctual and can be
explained to anyone with ease. People from a nontechnical background
can also decipher the hypothesis drawn from a decision tree, as they are
self-explanatory. Decision tree algorithms can handle both categorical
and numerical variables and do not require making any assumption on
the linearity in the data. Hence, they can be used in circumstances where
the parameters are nonlinearly related. These algorithms are useful in
data exploration and implicitly perform feature selection. In finance,
applications of decision trees include banks classifying loan applicants;
in medicine, they are used to identify at-risk patients and disease trends.
7. Artificial neural networks (ANN) algorithms have interconnected
nonlinear neurons; thus, these ML algorithms can exploit nonlinearity in a
distributed manner. They can adapt free parameters to the changes in the
surrounding environment. They learn from their mistakes and make
better decisions through backpropagation. ANNs are easy to
conceptualize, and they can identify all probable interactions between
predictor variables. Financial institutions use ANN ML algorithms to
enhance their performance in evaluating loan applications and bond
rating. Many bomb detectors at US airports use ANNs to analyze airborne
trace elements and identify the presence of explosive chemicals.
9
Step 3: Select an AI Application
3 or Algorithm (Continued)
Google uses ANNs for speech recognition, image recognition, and other
pattern recognition (handwriting recognition) applications.
8. K-nearest neighbors (KNN) uses the prediction of continuous values
such as k regression. Distance-based measures are used in KNN to get
the closest correct prediction. The final prediction value is chosen on the
basis of the k neighbors. The advantages of using KNN include high
accuracy; although better algorithms exist, it’s very useful for nonlinear
data, as there are no assumptions here.
10
Step 3: Select an AI Application or
3 Algorithm (Continued)
Type your response here
The core of this HCI will be powered by a combination of Artificial Neural Networks (ANNs) and
Reinforcement Learning, supplemented by Natural Language Processing (NLP) models for voice
command interpretation.
◦Artificial Neural Networks (ANNs): ANNs are chosen for their ability to process complex, non-
linear data from multiple sources. They will analyze real-time GPS data, traffic patterns, weather
conditions, and historical delivery times to provide dynamic route optimization. ANNs can identify
all probable interactions between these variables to predict the most efficient path.
◦Reinforcement Learning: This algorithm is selected because it learns and adapts from
experience. The system will use reinforcement learning to continuously improve its order batching
and routing strategies. Over time, the algorithm will learn from its decisions to achieve the "best
reward," which in this case is the fastest and most efficient delivery sequence.
Justification: The combination of ANNs and Reinforcement Learning was selected because it
provides both powerful real-time analysis (ANNs) and a mechanism for continuous, long-term
improvement (Reinforcement Learning), which is essential for a system that operates in a
constantly changing environment
11
4 Step 4: Design the Interface
IxD focuses on creating engaging interfaces with behaviors that are well
thought out. Understanding how users and technology communicate with
each other is fundamental to this field. With this understanding, you can
anticipate how someone might interact with the system, fix problems
early, and invent new ways of doing things.
Best Practices for Designing Interactions
Consider the following qualities and associated questions when creating
digital products that have an interactive element.
What can a user do with their
mouse, finger, or stylus to
directly interact with the
interface? This includes pushing
buttons, dragging and dropping
across the interface, etc.
Define how users can interact
What commands can a user give
with the interface.
that aren’t directly a part of the
product to interact with it? An
example of an “indirect
manipulation” is when a user hits
“Ctrl+C,” they expect to be able
to copy a piece of content.
What about the appearance
(color, shape, size, etc.) gives
Give users clues about behavior the user a clue about how it
before actions are taken. may function?
12
4 Step 4: Design the Interface (Continued)
What information do you
provide to let a user know what
will happen before they perform
an action? This tells users what
will happen if they decide to
move forward with their action.
Are there constraints put in
place to help prevent errors?
Anticipate and mitigate errors. Do error messages provide a
way for the user to correct the
problem or explain why the error
occurred?
What feedback does a user get
once an action is performed?
When a user engages and
performs an action, the system
needs to respond to
acknowledge the action.
How long does it take between
Consider the system feedback an action and a product’s
and response time. response time? Responsiveness
(latency) can be characterized at
four levels: immediate (less than
0.1 second), stammer (0.1–1
second), interruption (1–10
seconds), and disruption (more
than 10 seconds).
13
4 Step 4: Design the Interface (Continued)
Are the interface elements a
reasonable size to interact with?
Elements, such as buttons, need
to be big enough for a user to be
able to select them.
Are edges and corners being
used strategically to locate
Strategically think about each interactive elements lsuch as
menus? Since the edge provides
element.
a boundary that the mouse or
finger cannot go beyond, it tends
to be a good location for menus
and buttons.
Are you following standards?
Users should understand how
interface elements are supposed
to function.
Is information chunked into
seven (plus or minus two) items
at a time? People are only able
to keep five to nine items in the
short-term memory before they
forget or make errors.
Simplify for learnability.
Is the user’s end simplified as
much as possible? Remove
complexity as much as possible
from the user, and instead build
the system to take this into
account while simplifying it up to
a certain
14
4 Step 4: Design the Interface (Continued
point before it no longer functions
Are familiar formats used?
Decision time is affected by how
familiar a format is for a user to
follow and how familiar they are
with the choices.
Specifically, for this step, you’ll answer the following questions and
use the answers in Step 5 to design your interface.
Questions Your Answers
Voice commands like "Start route," "Next
What commands can a user give for delivery," "Call customer," "Mark as delivered,"
interaction with the interface? and "Report issue" and simple haptic taps.
The interface will use large, high-contrast icons:
What about the appearance (color, a prominent microphone icon for voice input, a
shape, size, etc.) gives the user a large green checkmark for confirmations, and a
clue about how it may function? red cross for cancellations.
The system uses audio confirmation. For
What information do you provide to example, Confirmation prompts ('Sending delay
let a user know what will happen update to customer — proceed?').
before they perform an action?
Yes, complex actions or settings adjustments
Are there constraints put in place are locked while the vehicle is detected to be in
to help prevent errors? motion.
Plain-language messages with suggestions.
Do error messages provide a way
E.g., "Voice command not clear. Please speak
for the user to correct the problem louder," or "Network connection lost. I will retry
or explain why the error occurred? in 10 seconds."
15
4 Step 4: Design the Interface (Continued)
Questions Your Answers
Immediate audio feedback (e.g., "Order marked
What feedback does a user get once as delivered") and a corresponding haptic
an action is performed? "buzz" on their smartwatch.
Critical actions like navigation updates are
How long does it take between an immediate (<0.1 seconds). Standard command
action and a product’s response feedback is provided within 1 second to avoid
time? interrupting the user's flow.
All on-screen elements, like the map and key
Are the interface elements a icons, are designed to be large and glanceable
reasonable size for interaction? from a distance. Large Tap Zones
When stationary, a simple menu icon is located
Are edges and corners strategically in the top-left corner, a conventional and easily
being used to locate interactive accessible location
elements such as menus?
Yes, the interface only shows the current
Is information chunked into a few delivery step, the next turn, and the ETA. Order
items at a time?
Are familiar formats used? standard map layout and universally recognized
16
5 Step 5: Create a Wireframe
Create a wireframe of the HCI interface. This should include the user
application interface components and how this interface interacts with
both the user and the application. You can sketch the image using pen
and paper. You can also use word processing, presentation, or UX design
software such as Sketch, InVision, or Adobe XD.
Upload Your Image Here
17
Step 6: Evaluate HCI Usability
6 Heuristics
Examine Jacob Neilson’s ten principles for IxD heuristics that can be
used to evaluate an HCI interface:
1. Visibility of system status: The design should always keep users
informed about what is going on through appropriate feedback within
a reasonable amount of time. When users know the current system
status, they learn the outcome of their prior interactions and determine
next steps.
Predictable interactions create trust in the product as well
as the brand. This can be achieved by communicating clearly to users
what the system’s state is and presenting feedback to the user as
quickly as possible.
2. Match between the system and the real world: The design should
speak the users’ language. Use words, phrases, and concepts familiar
to the user, rather than internal jargon. Follow real-world conventions,
making information appear in a natural and logical order.
The way you should design depends very much on your specific users.
Terms, concepts, icons, and images that seem perfectly clear to you and
your colleagues may be unfamiliar or confusing to your users.
When a design’s controls follow real-world conventions and correspond
to the desired outcomes, it’s easier for users to learn and remember
how the interface works. This helps build an experience that feels
intuitive.
3. User control and freedom: Users often perform actions by mistake.
They need a clearly marked “emergency exit” to leave the unwanted
action without having to go through an extended process. When it’s
easy for people to back out of a process or undo an action, it fosters a
sense of freedom and confidence. Exits allow users to remain in
18
Step 6: Evaluate HCI Usability
6 Heuristics (Continued)
control of the system and avoid getting stuck and feeling frustrated. For
example, support "Undo" and "Redo," and show a clear way to exit the
current interaction, such as a "Cancel" button.
4. Consistency and standards: Users should not have to wonder whether
different words, situations, or actions mean the same thing. Follow
platform and industry conventions.
People spend most of their time using digital products other than yours.
Users’ experiences with those other products set their expectations.
Failing to maintain consistency may increase the users’ cognitive load by
forcing them to learn something new. This can be done by improving
learnability by maintaining consistency within a single product or a family
of products.
5. Error prevention: Good error messages are important, but the best
designs carefully prevent problems from occurring in the first place.
Either eliminate error-prone conditions, or check for them and present
users with a confirmation option before they commit to the action. There
are two types of errors: slips and mistakes. Slips are unconscious errors
caused by inattention. Mistakes are conscious errors based on a
mismatch between the user’s mental model and the design.
6. Recognition rather than recall: Minimize the user’s memory load by
making elements, actions, and options visible. The user should not have
to remember information from one part of the interface to another.
Information required to use the design (e.g., field labels or menu items)
should be visible or easily retrievable when needed.
Humans have limited short-term memories. Interfaces that promote
recognition reduce the amount of cognitive effort required from users.
19
Step 6:ffiEvaluate HCI Usability
6 Heuristics (Continued)
7. Flexibility and e ciency of use: Shortcuts — hidden from novice users —
may speed up the interaction for the expert user such that the design can
cater to both inexperienced and experienced users. Allow users to tailor
frequent actions.
Flexible processes can be carried out in different ways so that people can
pick whichever method works for them. For example, you can:
• Provide accelerators such as keyboard shortcuts and touch
gestures.
• Provide personalization by tailoring the content and
functionality for individual users.
• Allow for customization so that users can make selections
about how they want the product to work.
8. Aesthetic and minimalist design: Interfaces should not contain
information that is irrelevant or rarely needed. Every extra unit of
information in an interface competes with the relevant units of information
and diminishes their relative visibility.
This heuristic doesn’t mean you have to use a flat design. It’s about
making sure you’re keeping the content and visual design focused on the
essentials. Ensure that the visual elements of the interface support the
user’s primary goals. Keep the content and visual design of the user
interface focused on the essentials, and don’t let unnecessary elements
distract users from the information they really need.
9. Help users recognize, diagnose, and recover from errors: Error
messages should be expressed in plain language (no error codes). They
should precisely indicate the problem and constructively
suggest a solution.
These error messages should also be presented with visual treatments
that will help users notice and recognize them. Tell users what went
wrong in a language they will understand, and this can be achieved by
avoiding technical jargon.
20
Step 6:ffiEvaluate HCI Usability
6 Heuristics (Continued)
10. Help and documentation: It’s best if the system doesn’t need any
additional explanation. However, it may be necessary to provide
documentation to help users understand how to complete their tasks.
Help and documentation content should be easy to search and focused
on the user’s task. Keep it concise, and list the concrete steps that need
to be carried out. Ensure that the help documentation is easy to search,
and, whenever possible, present the documentation in context right when
the user requires it.
Specifically, your task will be to select five of these principles and
evaluate your final HCI design. For each heuristic chosen, write a
one-to-two-sentence response explaining how your final HCI
design aligns with the select heuristic.
Visibility of Error Prevention Recognition vs User Control & Aesthetic &
System Status → Voice Recall Freedom Minimalist
→ Real-time lockouts and → Familiar icons → Undo and Design
map and confirmation and AR overlays cancel options → Clean
feedback keep prompts reduce minimize maintain agent screens show
agents aware of mistakes. memory load. autonomy. only essential
orders and ETA. tasks, avoiding
clutter
01 02 03 04 05
21
Designing and Building
AI Products
and Services Workbook