SUNIT-I FOUNDATIONS OF DESIGN

UX VS. UI DESIGN

UX design refers to the term “user experience design”, while UI stands for “user interface design”.
Both elements are crucial to a product and work closely together. But despite their professional
relationship, the roles themselves are quite different, referring to very different aspects of the product
development process and the design discipline.

1
What is user experience (UX) design?

Here’s how he describes it: “User experience encompasses all aspects of the end-user’s interaction with
the company, its services, and its products.”

Don Norman’s definition tells us that, regardless of its medium plenty of non-digital UX (and there are
lots out there) UX Design encompasses any and all interactions between a potential or active customer
and a company.

As a scientific process, it could be applied to anything; street lamps, cars, Ikea shelving, and so on.
However, despite being a scientific term, its use since its inception has been almost entirely within digital
fields; one reason for this is that the tech industry started blowing up around the time of the term’s
invention.

Essentially, UX applies to anything that can be experienced—be it a website, a coffee machine, or a visit
to the supermarket. The “user experience” part refers to the interaction between the user and a product or
service. User experience design, then, considers all the different elements that shape this experience.

UX design

A UX designer thinks about how the experience makes the user feel and how easy it is for the user to
accomplish their desired tasks. They also observe and conduct task analyses to see how users actually
complete tasks in a user flow.

For example: How easy is the checkout process when shopping online? How easy is it for you to grip that
vegetable peeler? Does your online banking app make it easy for you to manage your money?

The ultimate purpose of UX design is to create easy, efficient, relevant, and all-around pleasant
experiences for the user.

About UX design in a nutshell:

• User experience design is the process of developing and improving the quality of interaction
between a user and all facets of a company.
• User experience design is, in theory, a non-digital (cognitive science) practice but used and
defined predominantly by digital industries.

2
 • UX design is NOT about visuals; it focuses on the overall feel of the experience.
UX tasks and responsibilities

Here is an example of a UX designer’s typical tasks and responsibilities. You’ll find a more detailed
account of the UX design process in this guide.

Strategy and content:

• Competitor analysis
• Customer analysis and user research
• Product structure and strategy
• Content development

Wire framing and prototyping

• Wire framing
• Prototyping
• Testing and iteration
• Development planning

Execution and analytics

• Coordination with UI designers

• Coordination with developers
• Tracking goals and Integration
• UX analysis and iteration

In fact, the role of the UX designer varies hugely depending on the type of company they’re working in.
You see that iteration of the product, as connected to analysis or testing, is indeed mentioned twice, but in
reality, you would put it in between every other item on the list.

Ultimately, the aim is to connect business goals to users’ needs through a process of user and usability
testing and refinement toward that which satisfies both sides of the relationship.

3
What is user interface (UI) design?
While user experience is a conglomeration of tasks focused on the optimization of a product for effective
and enjoyable use, user interface design is its complement; the look and feel, the presentation and
interactivity of a product.

But like UX, it is easily and often confused by the industries that employ UI designers—to the extent that
different job posts will often refer to the profession as completely different things.

Unlike UX, user interface design is a strictly digital term.

A user interface is the point of interaction between the user and a digital device or product—like the
touchscreen on your smartphone or the touchpad you use to select what kind of coffee you want from the
coffee machine.

In relation to websites and apps, UI design considers the look, feel, and interactivity of the product. It’s all
about making sure that the user interface of a product is as intuitive as possible, and that means carefully
considering each and every visual, interactive element the user might encounter.

A UI designer will think about icons and buttons, typography and color schemes, spacing, imagery,
and responsive design.

UI design

Like user experience design, user interface design is a multi-faceted and challenging role. It is responsible
for the transference of a product’s development, research, content, and layout into an attractive, guiding,
and responsive experience for users.

UI design is about:

• User interface design is a purely digital practice. It considers all the visual, interactive elements of
a product interface—including buttons, icons, spacing, typography, color schemes, and
responsive design.
• The goal of UI design is to visually guide the user through a product’s interface. It’s all about
creating an intuitive experience that doesn’t require the user to think too much!
• UI design transfers the brand’s strengths and visual assets to a product’s interface, making sure
the design is consistent, coherent, and aesthetically pleasing.

4
UI tasks and responsibilities

If you like the idea of creating awesome user experiences but sees yourself as a more visual person, you
may be more interested in UI design.

The look and feel of the product

• Customer analysis
• Design research
• Branding and graphic development
• User guides and storylines

Responsiveness and interactivity

• UI prototyping
• Interactivity and animation
• Adaptation to all device screen sizes
• Implementation with developer

As a visual and interactive designer, the UI role is crucial to any digital interface and, for customers, a key
element to trusting a brand. While the brand itself is never solely the responsibility of the UI designer, its
translation to the product is.

You’ll also note the final point, which states responsibility for the “implementation” of the design with a
developer. While this is generally how UI jobs have worked in the past, you should be aware that the lines
are blurring, as the term “web designer” (essentially a UI designer who can code) is being replaced by the
expertise of user interface designers.

While UX has no need for coding, UI is a role that, as time progresses, will rely on it as part of building
interactive interfaces, with “UI developer” beginning to appear as a role in companies.

2. Understanding their key differences

“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our
field.

5
6
 “User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our
field. A UI without UX is like a painter slapping paint onto a canvas without thought; while UX without
UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX
followed by UI. Both are essential for the product’s success.”

It’s important to understand that UX and UI do go hand-in-hand; you can’t have one without the other.
UX design is all about the overall feel of the experience, while UI is about how the product’s interfaces
look and function.

CORE STAGES OF DESIGN THINKING:

Design thinking is a non-linear, iterative process that can have anywhere from three to seven phases,
depending on whom you talk to.

We focus on the five-stage design thinking model proposed by the Hasso Plattner Institute of Design at
Stanford (the d.school) because they are world-renowned for the way they teach and apply design
thinking.

The five stages of design thinking,

• Empathize: research your users' needs.

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

Let’s dive into each stage of the design thinking process.

5 Stages of the Design Thinking Process

Stage 1: Empathize—Research Your Users' Needs

The first stage of the design thinking process focuses on user-centric research. You want to gain an
empathic understanding of the problem you are trying to solve.

Consult experts to find out more about the area of concern and conduct observations to engage and
empathize with your users.

Empathy is crucial to problem solving and a human-centered design process as it allows design thinkers
to set aside their own assumptions about the world and gain real insight into users and their needs.

7
Depending on time constraints, you will gather a substantial amount of information to use during the next
stage.

The main aim of the Empathize stage is to develop the best possible understanding of your users, their
needs and the problems that underlie the development of the product or service you want to create.

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

In the Define stage, you will organize the information you have gathered during the Empathize stage.
You’ll analyze your observations to define the core problems you and your team have identified up to this
point. Defining the problem and problem statement must be done in a human-centered manner.

For example, you should not define the problem as your own wish or need of the company: “We need to
increase our food-product market share among young teenage girls by 5%.”

You should pitch the problem statement from your perception of the users’ needs: “Teenage girls need to
eat nutritious food in order to thrive, be healthy and grow.”

The Define stage will help the design team collect great ideas to establish features, functions and other
elements to solve the problem at hand or, at the very least, allow real users to resolve issues themselves
with minimal difficulty.

Stage 3: Ideate—Challenge Assumptions and Create Ideas

During the third stage of the design thinking process, designers are ready to generate ideas. With this
solid background, you and your team members can start to look at the problem from different
perspectives and ideate innovative solutions to your problem statement.

Brainstorm and Worst Possible Idea techniques are typically used at the start of the ideation stage to
stimulate free thinking and expand the problem space.

This allows you to generate as many ideas as possible at the start of ideation. You should pick other
ideation techniques towards the end of this stage to help you investigate and test your ideas. Choose the
best ones to move forward with either because they seem to solve the problem or provide the elements
required to circumvent it.

Stage 4: Prototype—Start to Create Solutions

The design team will now produce a number of inexpensive, scaled down versions of the product (or
specific features found within the product) to investigate the key solutions generated in the ideation phase.

These prototypes can be shared and tested within the team itself, in other departments or on a small group
of people outside the design team.

8
This is an experimental phase, and the aim is to identify the best possible solution for each of the
problems identified during the first three stages. The solutions are implemented within the prototypes
and, one by one, they are investigated and then accepted, improved or rejected based on the users’
experiences.

By the end of the Prototype stage, the design team will have a better idea of the product’s limitations and
the problems it faces. They’ll also have a clearer view of how real users would behave, think and feel
when they interact with the end product.

Stage 5: Test—Try Your Solutions Out

Designers or evaluators rigorously test the complete product using the best solutions identified in the
Prototype stage.

This is the final stage of the five-stage model; however, in an iterative process such as design thinking,
the results generated are often used to redefine one or more further problems.

This increased level of understanding may help you investigate the conditions of use and how people
think, behave and feel towards the product, and even lead you to loop back to a previous stage in the
design thinking process. You can then proceed with further iterations and make alterations and

9
 refinements to rule out alternative solutions. The ultimate goal is to get as deep an understanding of the
product and its users as possible.

DIVERGENT AND CONVERGENT THINKING

Divergent and convergent thinking are two complementary methods to explore ideas, work towards goals,
and address challenges. In the design world where we’re constantly employing design thinking in our
work both approaches are necessary and lead to unique solutions for challenges that require exploration
and creativity.

Divergent and convergent thinking are both methods of thinking that are so deeply integrated into what
we do, we often don’t stop to think about the theories behind them. We often rail against tired concepts in
our industry like “think outside the box,” yet we still try to capture what that phrase meant before it
became a cliché. It’s good to go back to the basics once in a while.

Divergent thinking

Divergent thinking is taking a challenge and attempting to identify all the possible drivers of that
challenge, then listing all of the ways those drivers can be addressed. In divergent thinking, your mind
expands outward as you generate as many ideas as possible.

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

When setting up a divergent thinking exercise, participants need to know that all ideas are valid. It’s also
important to ensure that all participants can contribute equally—not just the most vocal. I often
recommend using methods such as the first few steps of nominal group technique to ensure all voices are
heard.

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

Divergent thinking techniques

There are many different techniques you can use to stimulate creativity and divergent thinking. It’s
important to find the ones that work best for you—everyone is different and it’s okay to try something,
realize it doesn’t work, and move onto another technique. As a user experience company, we utilize many
divergent thinking techniques:

• Freewriting:

This technique is helpful when you need to focus on one topic. Choose an allotted amount of time and
start writing, don’t worry about revising or proofreading just let the thoughts spill onto the page (or
screen). This technique allows a lot of thought generation without blockers that you can come back to,
restructure, and organize.

10
• Brainstorming:

This common group-problem solving technique involves contribution of ideas from multiple people and
discussion around the ideas provided. Encouraging all to participate and not be afraid of right or wrong
answers can help improve the session and divergent thinking.

• Nominal Group Technique:

This is a form of structured brainstorming that starts with individuals silently generating ideas, then
moves through sharing and discussion of those ideas. The silent generation of ideas ensures everyone in
the room has an equal voice, rather than just the most gregarious.

• Keeping a journal:

A great technique that allows you to record whatever spontaneous thought comes to your mind. Writing
down thoughts when they happen allows you to revisit them later. Our designers enjoy journaling, check
out how one of our experience designers used a work journal.

• Scenario role play:

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

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

Divergent thinking examples

User experience designers practice divergent thinking in a few ways. We use divergent thinking in the
initial stages of ideation on a project or task when we have a challenge to solve and we need to brainstorm
or iterate on creative solutions. Divergent thinking can also be used after you have synthesized research
data during discovery or validation phases of your work.

One great example of divergent thinking in action is in the early days of Twitter. Twitter took a Minimum
Viable Product (MVP) approach to their application. They created an online service without a clear
practical application or market, launched it to see how people would use it, then refined Twitter to
highlight those uses.

Convergent thinking

Convergent thinking, on the other hand, is known as the practice of selecting the optimal solution from a
finite set of ideas collected from different sources in order to solve a discrete challenge quickly and
efficiently.

11
 Convergent thinking is best practiced at times when you need an answer, and you believe you have access
to the data and information you need to guide a decision or solution. Convergent thinking typically calls
for speed, accuracy, and knowledge on a subject, so it’s best used when the team has access to experts and
relevant data. The team will analyze and bring that information together into an educated decision.

Convergent thinking techniques

There are many convergent techniques that can be used and below are a few that our teams use regularly:

• Grouping:

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

• Prioritizing:

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

• Dot-voting:

This technique allows each participant to join in a prioritization activity regardless of their participation
style or preferences. Individuals are given a set number of dots and apply them to the choices in a list.

• Filtering:

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

Convergent thinking examples

There are many examples of convergent thinking that demonstrate the necessity of this technique,
including in our own industry. We’re often asked questions by clients that have one, clear answer and we
know that because our team has spent years accumulating user experience design and technology
knowledge on specific types of problems, goals, and decisions. Also, as an evidence-based company,
gathering user and customer feedback often helps point us to very clear design solutions.

Considerthat scene in Apollo 13 where the astronauts are trying to generate enough power to get the
capsule back to Earth. The chief orders his team to make the capsule simulator “cold and dark,” and
create “the exact same conditions they’ve got” right down to the readings on all of the instrument panels.
One of his engineers says “I need a flashlight,” and the response is, “That’s not what they have up there.

12
 Don’t give me anything they don’t have on board.” The challenge is discrete and the solutions are limited
to the constraints of a hard reality.

Difference between divergent and convergent thinking

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

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

Divergent vs. convergent thinking problem-solving example

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

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

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

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

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

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

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

Divergent thinking, convergent thinking, and creativity

Both methods of thinking are important and necessary for creative work, and for work that requires
building solutions for complex problems. So while divergent thinking is typically associated with
creativity and convergent thinking is closely associated with logic, if you only use one method it’ll be
more difficult to come up with an innovative and elegant solution to the problem. That’s why we tend to
use both types of thinking.

However, there are times when one way of thinking might be best. The challenge in the context of design
thinking comes in framing the problems correctly if you want a specific result. Frame it one way, and you
may be leading the group to spend two months brainstorming when all you needed was a hammer four

13
 weeks ago. Frame it the other way, and you could end up with a team chasing every problem with the
same old hammer while your competition invented the screwdriver.

Embracing divergent and convergent thinking at Think Company

Since we have a clear idea of each method of thinking works, part of our job is to determine which one
best suits clients and project goals during the many phases of our work. We have learned to embrace these
thinking styles in a number of ways, including:

• Collaborative Think sessions with clients focused on design thinking, ideation, and brainstorming
• Technology discovery work to identify internal experts and gather knowledge on platforms and
process
• Regular sprint reviews and other project rituals to review, synthesize, and ideate around research
findings
• Ongoing internal collaboration with different departments to bring in subject matter experts
• Design validation and usability studies to collect evidence for convergent exercises
• Retrospectives focused on continuous improvement and knowledge sharing
• Ideation challenges for teams to keep creative work fun and innovative

Benefits of divergent and convergent thinking

• Increased creativity and innovation

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

Finally, the most important element of embracing divergent and convergent thinking techniques is getting
support from leadership during divergent and convergent thinking exercises. Stakeholder buy-in is easier
to accomplish when you are clear about the purpose and goals of an exercise. Giving an organizational
leader a heads up that tomorrow’s exercise will be about generating ideas, and that their participation and
support is critical to a successful session, can make or break the exercise.

BRAINSTORMING
Brainstorming is a method design teams use to generate ideas to solve clearly defined design problems. In
controlled conditions and a free-thinking environment, teams approach a problem by such means as “How
Might We” questions. They produce a vast array of ideas and draw links between them to find potential
solutions.

Best ways to use Brainstorming

14
 Brainstorming is part of design thinking. You use it in the ideation phase. It’s extremely popular for
design teams because they can expand in all directions. Although teams have rules and a facilitator to
keep them on track, they are free to use out-of-the-box and lateral thinking to seek the most effective
solutions to any design problem.

By brainstorming, they can take a vast number of approaches the better instead of just exploring
conventional means and running into the associated obstacles. When teams work in a judgment-free
atmosphere to find the real dimensions of a problem, they’re more likely to produce rough answers which
they’ll refine into possible solutions later.

In brainstorming, we aim squarely at a design problem and produce an arsenal of potential solutions. By
not only harvesting our own ideas but also considering and building on colleagues’, we cover the problem
from every angle imaginable.A good mix of participants will expand the experience pool and therefore
broaden the idea space.

GOLDEN RULES

Brainstorming may seem to lack constraints, but everyone must observe eight house rules and have
someone acting as facilitator.

1. Set a time limit – Depending on the problem’s complexity, 15–60 minutes is normal.

2. Begin with a target problem/brief – Members should approach this sharply defined question, plan
or goal and stay on topic.

3. Refrain from judgment/criticism – No-one should be negative (including via body language) about
any idea.

4. Encourage weird and wacky ideas – Further to the ban on killer phrases like “too expensive”, keep
the floodgates open so everyone feels free to blurt out ideas (provided they’re on topic).

5. Aim for quantity – Remember, “quantity breeds quality”. The shifting-and-sorting process comes
later.

6. Build on others’ ideas – It’s a process of association where members expand on others’ notions and
reach new insights, allowing these ideas to trigger their own. Say “and”—rather than discourage with
“but”—to get ideas closer to the problem.

7. Stay visual – Diagrams and Post-Its help bring ideas to life and help others see things in different
ways.

8. Allow one conversation at a time – To arrive at concrete results, it’s essential to keep on track this
way and show respect for everyone’s ideas.

To capture everyone’s ideas in a brainstorming session, someone must play “scribe” and mark every idea
on the board. Alternatively, write down your own ideas as they come, and share these with the group.

Often, design problems demand mixed tactics: brainstorming and its sibling approaches
braindumping (for individuals), and brainwriting and brainwalking (for group-and-individual mixes).

15
Risks in Brainstorming

Brainstorming involves harnessing synergy – we leverage our collective thinking towards a variety of
potential solutions.

It’s challenging to have boundless freedom. The person leading the session must “police” the team to
ensure a healthy, solution-focused atmosphere where even the shiest participants will speak up. A warm-
up activity can cure brainstorming “constipation” e.g., ask participants to list ways the world would be
different if metal were like rubber.

Another risk is to let the team stray off topic and/or address other problems. As we may use brainstorming
in any part of our design process including areas related to a project’s main scope it’s vital that
participants stick to the problem relevant to that part (what Osborn called the “Point of View”).

Similarly, by framing problems with “How Might We” questions, we remember brainstorming is organic
and free of boundaries. Overall, your team should stay fluid in the search for ways you might resolve an
issue not chase a “holy grail” solution someone has developed elsewhere. The idea is to mine idea “ore”
and refine “golden” solutions from it later.

GAME STORMING

Game storming is exploration of business challenges through the application of gaming (games). Game
storming will help organizations to:

● Overcome conflict and increase engagement with team-oriented games

● Improve collaboration and communication with visual-thinking techniques

● Generate better ideas, insights, strategies and more of them – faster than ever before

● Produce better products and services for your end users

Overall, game storming can encourage a shift in how work is done from a process centric model that’s
about predictability and consistency to a game-centric model that recognizes the complexity and
unpredictability of a digital world.

About Game

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

● Game space:

To enter into a game is to enter another kind of space where the rules of ordinary life are temporarily
suspended and replaced with the rules of the game. In effect, a game creates an alternative world, a model

16
world. To enter a game space, the players must agree to abide by the rules of that space, and they must
enter willingly.

● Boundaries:

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

● Rules for interaction:

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

● Artifacts:

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

● Goal:

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

Stages of a Game

Every game is a world which evolves in stages:

1. Imagine the world,

2. create the world,

3. open the world,

4. explore the world, and

5. close the world.

Here’s how it works:

1. Imagine the world

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

2. Create the world

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

3. Open the world

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

4. Explore the world

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

5. Close the world

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

Core Game Storming Skills

There are three core skills to Game storming:

● Asking Questions

● Creating Artifacts and Meaningful Spaces

● Employing Visual Language (Sketching)

1. Asking Questions

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

2. Creating Artifacts and Meaningful Spaces

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

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

3. Employing Visual Language

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

OBSERVATIONAL EMPATHY

Empathy requires us to put aside our learning, culture, knowledge, opinions, and worldview
purposefully in order to understand other peoples’ experiences of things deeply and meaningfully.
It requires a strong sense of imagination for us to be able to see through another person’s eyes.

It requires humility so we can seek to abandon our preconceived ideas and biases. It requires that
we have a heightened awareness of other peoples’ needs, wants, motivations and goals. Let’s go
through the traits an empathic observer should possess and some methods you can use to gain a
deep understanding of the people for whom you are designing.

Empathy is an innate quality in all people. Being an empathic listener in a Design

Thinking project is not as simple as it seems, because we are trained whether consciously in our
schools or workplaces, or subconsciously from our prior experiences to form judgements and
opinions about others rather than absorbing and understanding the raw data.

Empathy is especially important in the first stage of any Design Thinking process. The first stage
in Design Thinking is often named the “empathise” stage – the following four stages are:
Define, Ideate, Prototype and Test.

In the Empathise stage, it’s your goal as a designer to gain an empathic understanding of the
people you’re designing for and the problem you are trying to solve. This involves empathising
with, engaging and observing the peopleyour target audienceyou intend to help.

How to be an Empathic Observer

1. Abandon Your Ego

Most of us have a tendency to assert ourselves, which results in an imposition upon others, as well as
having more concern about our own situation rather than the needs and concerns of others. Often in our
education or workplace, we are taught to adopt an egocentric view of things and be firm in our opinions
and thoughts. However, in order to empathise deeply, we need to tame and put aside our egos. We need to

19
become aware of the primary goal of empathy in Design Thinking, which is to understand and experience
the feelings of others.

2. Adopt Humility
When we adopt humility, we naturally improve our ability to empathise, because through humility we
elevate the value of others above ourselves. In Rise of the DEO, Giudice and Ireland discuss the emerging
role of design leadership and point out that humility is a characteristic of design-focused leaders who are
willing to admit their own shortcomings as well as to abandon preconceived ideas for the good of the
overall vision and goals.

3. Be a Good Listener
To empathise, we need to listen and listen attentively. We need to choose actively to block out our inner
conflicting voices, and allow the other's voice to resonate. We need to train ourselves to control our
natural tendency to formulate our own opinions and voice them before the other person has finished
talking. Doing so would enable us to have a deeper kind of listening, which uncovers deeper meaning and
experience.

4. Hone Your Observation skills

In order to develop empathy towards our users, we need to do more than listen. We need to observe
others, and have a close reading of their behaviours, subtle indications, their non-verbal expressions, body
language, and environments.

Only once we are able to experience the full range of sensations of others within context can we have a
deeper and more meaningful empathic experience. Many times, what our users articulate is only a fraction
of the full story. By honing our observation skills, we can fill many of the gaps, leading to a deeper
understanding of someone else's experience.

5. Care
A genuine concern about the state of others, leading to the desire to act and assist, is required. This is one
of the important drivers that allow us to overcome our own needs and wants and seek to understand
others. We must build a sense of care, a deep concern and desire to want to help, nurture, and provide
assistance. This requires a level of emotional insight.

6. Be Curious
Being genuinely curious makes engaging in empathy research not only easier but also extremely
rewarding as we learn to understand what motivates people. By being curious, we are naturally inclined to
dig into unexpected areas, uncover new insights, and explore all aspects of people's lives. At a glance,
these details might seem unimportant, but they will expose the most important information we need for
problem solving.

7. Be Sincere
Nothing kills empathy more than a lack of sincerity. When we approach people with a superficial agenda,
superiority complex, or any mindset that may undermine our sincere intention to understand their
experience deeply, we are placing a barrier between us and those we seek to understand.

20
 Rather than approaching people with the mindset that they are in need of our help, we should realise that
we stand to benefit more out of deeply understanding them. After all, the solution exists to
serve their needs, and your work will not be complete unless you properly understand their needs.

Learn to Understand Body Language

We should have a keen awareness of how our body language sets the scene for trust and engagement
between ourselves and the people we are observing or interviewing. On top of that, we need to read and
interpret the signals that our users give off via their body language. This is a skill that comes with
practice, and thus practice we must.

At times, body language might be so subtle that the messages made by our very forms (eyebrows,
shoulders, hands, and virtually any other part) as well as how we sound and behave are visible only to
practiced readers of body language.

To connect with and engage our users on a deeper level, we need to study their body language, body
signals, facial expressions, voice intonations, and the positive and negative signs that come from these.
Here are some of the little things that you should pay attention to:

• Learn to read the subtle nuances in communication, change of tone, pauses and skipping back
over points.
• Listen to what is not being said, to what's being avoided or covered up.
• Subtly know when to encourage more expression or to lead the conversation or story in a
beneficial direction.
• Know what to ask and how to ask it and when the person might be ready to be asked.

Empathic Understanding of People

The most effective way you can gain empathy comes in the form of immersion: direct experience of the
lives, contexts, environments, and activities of the people you would like to understand better.

On top of immersing yourself in the environment to experience first-hand what it feels like to be your
user, there are also a couple of methods you can engage in so as to gain a deeper understanding of
people’s needs and emotions.

Here, we will highlight three methods, and provide a template for each that you can download and use.
Remember: the key to developing empathy is to go out there and practice with real people.

What-How-Why Method
The What-How-Why method is a tool that you can use while observing people to help you dive into your
observations and derive deeper levels of understanding. With the What-How-Why method, you start with
concrete observations theWhat and from there move to higher levels of abstraction asking How and then
finally you arrive at the Whyi.e., the emotional drivers behind people’s behaviours. This method is
extremely useful for you to analyse images that you might have taken while observing your users.

You should divide your observations into three sections: What, How and Why.

21
• In What, note down the details of what is happening. What is the person doing? What is
happening in the background? What is the person holding? Describe using adjectives and try to be as
concrete as possible.

• In How, describe how the person is doing what he or she is doing. For instance, is the person
putting in a great deal of effort? Is the person frowning or smiling while doing the task? Does the person
use many ad-hoc tools to make the task easier? Try to describe the emotional impact of performing the
task.

• Finally, in Why, try to interpret the scene. Based on the What and How observations, guess the
emotional drivers behind the person you are observing. The person might be frowning while doing a task
because she is concerned about hurting herself in the process which means safety is a driver of her
behaviours.

22
 UNIT-II FOUNDATIONS OF UI DESIGN
VISUAL AND UI PRINCIPLES:

UI Visual Design

User interface (UI) design is all about creating interfaces that users can interact with. It is the process
designers use to build device interfaces with an eye-pleasing outlook and style. UI Designers aim to craft
interfaces that users find easy and satisfying to use.

Digital marketing consulting firms agree that user experience (UX) is a key factor to any marketing effort.
These companies can innovate and challenge your ideas, being well versed in leveraging the power
of digital strategy services.

Putting users in the driver’s seat is the first step. As in the automotive industry, they might say they like a
manual transmission alas automatic cars sell more.

UI design principles

The 6 key design principlesof user interface

1.Clarity
From recognizing interactive and static elements to making navigation intuitive, clarity is an essential part
of a great UI design.

The job is to build an interface that minimizes the knowledge gap between what users know prior to
coming to your site and what they must know to use it properly.”

So when you create your product, ask yourself the following questions
• Is your navigation intuitive? Are users directed and encouraged to move from one page to the
next with ease?
• Have you used highly visible buttons that prompt users into clicking them?
• Is the purpose of each element on your product, website or application, clear and easy to
understand?

You only have eight seconds to grab a user's attention, so make sure you don’twaste those seconds by
creating confusion and chaos.

23
 2.Familiarity

The best interfaces are familiar for users.

Usability, i.e. how easily a user interacts with a product or a website, is closely related to familiarity.
Users depend on elements and interfaces acting in a way that’s familiar to their digital experience.

Jacob’s Law states that “Users spend most of their time on other sites. This means that users prefer your
site to work the same way as all the other sites they already know.”

Not only should you leverage established UI design principles and rules (like Ben Shneiderman’s golden
rules of UI design described above) to incorporate familiarity in your design, but also ensure that all
elements are in sync throughout the interface.

There are several benefits of incorporating the UI design principle of familiarity in your product:

• Increases user retention

The more familiar the user is with your interface and more easily they can use your website or app, the
more they’ll come back to it.
And since research shows that acquiring a new customer costs 6x to 7x times more than to retain an old
one, it’s vital that you create a seamless user experience by leveraging familiarity.

• Easier for UI designers

It’s easier for UI designers to incorporate tried and tested interface design solutions than create new ones
from scratch.

• Reduces the learning curve for users

The less time visitors have to spend understanding how the user interface works, the faster they can start
using your product or service.
It also reduces the chances of them exiting your website and moving on to the next website because yours
had a steep learning curve.

3. User Control

Place users in control of the interface. Jakob Nielsen explains why this is important: “Users often choose
system functions by mistake and will need a clearly marked ‘emergency exit’ to leave the unwanted state
without having to go through an extended dialogue. Support undo and redo.”

This basically means giving users different options to go back a step when they feel they’ve made a
mistake. This is closely related to Ben Shneiderman’s golden UI design rule, ‘Supporting internal locus of
control’, and ‘Allowing users to reverse their actions easily’.

As an example, whenever you’re creating forms, allow users to click the <Back> button and go back to
the page they were last on. Don’t take them all the way back to the homepage or the start of the form.

Similarly, when using overlays on your website, make sure the exit button {x} is clear. Otherwise, users
might click the back button on the browser and go back two steps instead of just exiting the overlay.

4.Hierarchy

24
 Strong visual hierarchy is a core design principle of a successful user interface. It consists of arranging
visual elements in a way that explains the level of importance of each element and guides users to take the
desired action. As a designer, your job is to organize UI design elements in a way that makes it easy for
users to navigate within your product.

As Pascal Potvin, design lead at IBM, says, Visual hierarchy creates an order of importance to visual
elements in order to direct a user’s attention and make information easier to consume.”
It ensures that users see the most important information first, then the next, and so on, and is established
through various elements. Some of them include:

• Color

The first and one of the most important elements of establishing visual hierarchy is color. Bright colors
stand out the most and can be used in muted color schemes to direct users to take a certain action.
Monese and Mailchimp both make great use of colour in their designs.

• Size

Size matters a lot in UI design, especially when establishing visual hierarchy. The bigger the element is,
the more visible it is. Smaller elements are usually those of less importance. So, as a designer, try to make
important things (like headlines or CTAs) bigger and bolder.

• Fonts

Play around with different sizes, weights and styles of fonts to establish visual hierarchy. This is exactly
what Odoo does here.

Notice how the main headline, which aptly explains what it’s all about, is of the largest font size and two
main words (‘real’ and ‘CRM’) are written in bold to emphasise it’s message.

And while the CTA is of smaller font size, it’s highlighted through a coloured box to ensure that the
audience’s eyes are drawn to it immediately after reading the headline.

• Negative space

Give your elements some breathing room - don’t cram all the objects and elements together on the screen.
Negative space makes important elements pop and stand out. Swaggar makes great use of negative space
on their website’s main page.

As Nick Kampouris, User Experience & User Interface Designer, advises, “Social distance your elements,
text blocks and everything on your darn screen. Space is everyone's friend. Use the Law of Proximity to
help users visually navigate your pages. This is as much a part of your design than everything else so
please mind the gap.”

5.Flexibility

25
 “Flexibility doesn’t just follow a linear path, it’s about knowing your customers and giving flexibility for
different customer intents,” explains Brooke Cowling, Co-founder & CMO of Digital of Things.
Designing solutions that work great in all situations, to using shortcuts that speed up interaction for users,
flexibility is a key principle of user interface design.

You not only need to make your user interface learnable for new users, but it should also have
accelerators that help expert users speed up their processes. From novices to experts, ensure your product
is flexible and efficient for all kinds of users.

Some examples of a flexible UI design include:

• Shortcuts for performing frequently used steps with a single click

• Advanced search features
• Incorporating filter bars

And think multi-modal.

A multimodal user interface allows users to interact with the system through multiple modes, such as
speech, text touch, vision. As a designer, you need to be mindful of all these modes. Also, design the user
interface keeping in mind that your audience might use it via mobile, tablet, laptop, or a rusty old
computer.

“Many users depend mostly or entirely on mobile access; optimize the UI for the strengths of each device.
Be mindful that users' experiences may span across devices and modes of interaction (phone, email,
mobile device, desktop, in-person) - design experiences across those modes to support their
needs,” shares Jon Fukuda, Co-founder and Principal at Limina, and a design and UX industry leader.

6.Accessibility

Designing your website for all users is essential. According to the WHO, around 285 million people are
visually impaired, between 110 million and 190 million adults have significant mobility difficulties and
360 million people worldwide have disabling hearing loss.

Jesse Hausler, Principal Accessibility Specialist at Salesforce, writes, “Accessibility will not force you to
make a product that is ugly, boring, or cluttered. It will introduce a set of constraints to incorporate as you
consider your design.”

When designing products and websites, make sure that you meet the requirements of WCAG (Web
Content Accessibility Guidelines).

Some easy ways to incorporate the principle of accessibility while designing products are:

• Use the Web Aim Color Contrast checker to create strong color contrasts
• Ensure all your images have corresponding alt attributes
• Ask yourself if users can easily navigate your website via the tab key on your keyboard

USER INTERFACE ELEMENTS:

26
When designing your interface, try to be consistent and predictable in your choice of interface elements.
Whether they are aware of it or not, users have become familiar with elements acting in a certain way, so
choosing to adopt those elements when appropriate will help with task completion, efficiency, and
satisfaction.

Importance of UI Elements
Many UI elements can serve the purpose:

• List: It allows for the selection of multiple countries.

• Dropdown: This usually allows for the selection of a single element.
• Checkbox: An alternative way for selecting none, one, or multiple countries.
• Radio: It allows for the selection of a single element.
Types of UI Elements
Ideally, we can group UI elements into 3 major categories.

1. Input elements
2. Output elements
3. Helper elements
1. Input elements
Input elements are responsible for handling different user inputs. Sometimes they’re also part of the input
validation process. Some of the most used input elements include:

• Dropdowns
• Combo boxes
• Buttons
• Toggles
• Text/password fields
• Date pickers
• Checkboxes
• Radio buttons
• Confirmation dialogues

Here are nine of the most common input elements that every designer should know about. This list
includes buttons, checkboxes, text fields, and you’re certain to find them in the most popular design
systems, listed under UI components.

Checkboxes

27
 • Checkboxes allow the user to select one or more options from an option set. It is best practice to
display checkboxes vertically. Multi-columns are also acceptable considering the available space
and other factors.

Dropdowns
• Dropdowns allow users to select one item at a time from a long list of options. They are more
compact than radio buttons. They also allow you to save space. For better UX, it’s necessary to
add a label and a helper text as a placeholder. I.e. “Select One, Choose, etc.”

Combo boxes
• Combo boxes allow users to either type a custom value directly or select a value from the list. It is
a combination of a drop-down list or list box and a single-line input field.

Buttons

28
 • Buttons allow the users to perform an action with touch or click. It is typically labelled with text,
icon, or both. Buttons are one of the most important parts of a UI. So it’s important to design a
button that the user will actually click.

Toggles
• Toggles allow the user to change a view/value/setting between two states. They are useful for
toggle between on and off state or switching between list view and grid view.

Text and password fields

• Text fields and password fields allow users to enter text and password respectively. Text fields
allow both single-line and multi-line inputs. Multi-line input fields are also known as “textarea”.
Password fields generally allow single lines for a password.

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

29
Radio buttons
• Radio buttons allow users to select only one of a predefined set of mutually exclusive options. A
general use case of radio buttons is selecting the gender option in sign-up forms.

Confirmation dialogues
• Confirmation dialogues are responsible for collecting user consent for a particular action. For
example, collecting user consent for a delete action.

2. Output elements

Output elements are responsible for showing results against various user inputs. They also show alerts,
warnings, success, and error messages to the users. Output elements aren’t neutral by nature. They rely on
inputs and various operations.

3. Helper elements
All other elements fall into this category. The most widely-used helper elements include:

• Notifications
• Breadcrumbs
• Icons
• Sliders
• Notifications
• Progress bars
• Tooltips

30
 4.Navigational UI elements:

Navigational components simplify moving through the site, desktop or mobile app or any other digital
product. Navigational helper UI elements include things like navigation menus, list of links, breadcrumbs,
to name but a few.

5.Informational UI elements
Responsible for representing information. These include, for example, tooltips, icons, and progress bars.

USER INTERFACE PATTERNS

User interface (UI) design patterns are reusable/recurring components which designers use to solve
common problems in user interface design. For example, the breadcrumbs design pattern lets users retrace
their steps. Designers can apply them to a broad range of cases, but must adapt each to the specific
context of use.
Use of Design Patterns

Websites and apps have a conventional look and feel because of design patterns such as global navigation
and tab bars. In UI design, you can use design patterns as a quick way to build interfaces that solve a
problem for instance, a date picker design pattern to let users quickly pick a date in a form.

So, UI design patterns serve as design blueprints that allow designers to choose the best and commonly
used interfaces for the specific context the user faces. Each pattern typically contains:

• A user’s usability-related problem.

• The context/situation where that problem happens.
• The principle involved—e.g., error management.
• The proven solution for the designer to implement to address the core of the problem.
• Why—the reason for the pattern’s existence and how it can affect usability.
• Examples—which show the pattern’s successful real-life application (e.g., screenshots and
descriptions).

31
• Implementation—some patterns include detailed instructions.

Common UI Design Patterns

Some of the most common UI design patterns are:

• Breadcrumbs – Use linked labels to provide secondary navigation that shows the path from the
front to the current site page in the hierarchy.
• Lazy Registration – Forms can put users off registration. So, use this sign-up pattern to let users
sample what your site/app offers for free or familiarize themselves with it. Then, you show them a sign-
up form. For example, Amazon allows unrestricted navigation and cart-loading before it prompts users to
register for an account. Note:
• When content is accessible only to registered users or users must keep entering details,
offer them simplified/low-effort sign-up forms.
• Minimize/Avoid optional information fields. Use the Required Field Markers pattern
to guide users to enter needed data.
• Forgiving Format – Let users enter data in various formats (e.g., city/town/village or zip code).
• Clear Primary Actions – Make buttons stand out with color so users know what to do (e.g.,
“Submit”). You may have to decide which actions take priority.
• Progressive Disclosure – Show users only features relevant for the task at hand, one per screen.
If you break input demands into sections, you’ll reduce cognitive load (e.g., “Show More”).
• Hover Controls – Hide nonessential information on detailed pages to let users find relevant
information more easily.
• Steps Left – Designers typically combine this with a wizard pattern. It shows how many steps a
user has to take to complete a task. You can use gamification (an incentivizing design pattern) here to
enhance engagement.
• Subscription Plans – Offer users an options menu (including “Sign-up” buttons) for joining at
certain rates.
• Leader board – You can boost engagement if you use this social media pattern.
• Dark Patterns – Some designers use these to lead or trick users into performing certain actions,
typically in e-commerce so they spend more or surrender personal information. Dark patterns range in
harmfulness. Some designers leave an unchecked opt-out box as a default to secure customer information.
Others slip items into shopping carts. To use dark patterns responsibly, you must be ethical and have
empathy with your users. Dark patterns are risky because user mistrust and feedback can destroy a
brand’s reputation overnight.

Taking Care with Design Patterns

Freely available, UI design patterns let you save time and money since you can copy and adapt them into
your design instead of reinventing the wheel for every new interface. They also
facilitate faster prototyping and user familiarity. However, you should use them carefully. The wrong
choices can prove costly for example, if you:

• Approach problems incorrectly because you’re over-relying on patterns.

• Don’t fine-tune patterns to specific contexts.
• Don’t customize a distinct brand image (e.g., your website ultimately resembles Facebook).

32
• Overlook management requirements. If you create your own patterns, you must clearly define
how to use them and with what types of problems, version-control them, and store them for team access.
Overall, give users familiar frameworks that maximize convenience and prevent confusion while they
interact with your unique-looking brand.

INTERACTION BEHAVIOR SAND PRINCIPLES:

The process of interaction design involves studying the behavior and structure of interactive systems and
implementing them for developing useful digital products. In other words, interaction design is the
relationship between user and product and the services they use.

The purpose of interaction design is to create a great user experience. That’s why most of the UI
disciplines require understanding and hands-on experience of interaction design principles. After all, it’s
about designing for the entire interconnected system: the device, interface, context, environment, and
people. Interaction designers strive to create meaningful relationships between people and the products
and services they use. It may include computers, mobile devices, gadgets, appliances, and more.

It is important to understand ux design best practices while developing complex web and mobile
applications. These are the key elements that product designers should not neglect while creating an
interface for the user.

The 10 most important interaction design principles are-

1. UX: Match user experience and expectations

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

By matching the sequence of steps, layout of information, and terminology used with the expectation and
prior experiences of the users, designers can reduce the friction and discomfort of learning a new system.

33
 You can match your audience’s prior experiences and expectations by using common conventions or UI
patterns, for example, Hitee Chatbot.

2. Consistency

Along with matching people’s expectations through terminology, layout, and interactions, the design
should be consistent throughout the process and between related applications.

By maintaining consistency, you are helping users learn more quickly. You can re-apply their prior
experiences from one part of an application to another to maintain consistency throughout the design.
Design consistency is also an aid to intuitive interfaces.

Bonus – you can use the inconsistencies to indicate to users where things might not work the way they
expect. Breaking consistency is similar to knowing when to be unconventional.

3. Functional minimalism

“Everything should be made as simple as possible, but no simpler.”

The range of possible actions should be no more than is absolutely necessary. Providing too many options
will detract the primary function and reduce usability by overwhelming the user with choices. To achieve
the Zen of functional minimalism, you should-

1. Avoid unnecessary features and functions

2. Break complex tasks into manageable sub-tasks
3. Limit functions rather than the user experience.

4.Cognitive loads

Cognition refers to the “process of thoughts.” A good user interactive design minimizes the user’s “effort
to think” to complete a task. Another way to put this is that a good assistant uses his skills to help the
master focus on his skills.

For instance, while designing an interactive interface, we need to understand how much concentration a
task requires to complete it. Accordingly, you can design the UI that reduces the cognitive load as much
as possible.

Here’s a technique to reduce users’ “thinking work.” Focus on what the computer is good at and build a
system that utilizes its abilities to the fullest. Remember, computers are good at-

• Maths
• Remembering things
• Keeping track of things
• Comparing things
• Spell Checking and spotting/correcting errors
The point is – by knowing the attributes of users and products, one can create a design for a better user
experience.

5.Engagement

34
In terms of user experience, engagement is the measure of the extent to which the user has a positive
experience with your product. An engaging experience is not only enjoyable but also easier and
productive. Engagement is subjective to the system. I.e. your design must engage with the desired
audience.

For instance, what appeals to teenagers might be irrelevant to their grandparents. Apart from aligning
your design for the appropriate audience, achieving and creating control is the key.
The interaction design principles state that users should always feel like they’re in control of the
experience.

They must constantly experience a sense of achievement through positive feedback/results or feel like
they’ve created something.

Flow is what we’re looking to achieve through engaging interactions. We should allow users to
concentrate on their work and not on the user interface.

6. Control, trust, and explorability

Good interaction design should incorporate control, trust, and explorability to any system. If users feel in
control of the process, they’ll be more comfortable using the system. If the user is comfortable and in
control, they’ll trust the system and believe that the application will prevent them from making an
unrecoverable error or from feeling stupid. Trust inspires confidence and with confidence, the user is free
to explore further. Intuitive interfaces are extremely good at stimulating users to navigate and explore the
app.

7. Perceivability
People are aware of the opportunity to interact with interactive media. As interface designers, we must
avoid developing hidden interactions, which decrease the usability, efficiency, and user experiences. In
other words, people should not have to guess or look for opportunities to interact.

When developing interactive media, users should have the ability to review an interface and identify
where they can interact. We must remember that not everyone experiences and interacts with interface in
the same way others do. In the process of interaction design, make it a habit to provide hints and
indicators like buttons, icons, textures, textiles, etc. Let the user see that these visual cues can be clicked
or tapped with their fingers. Always consider the usability and accessibility of the interactive media and
how the user sees and perceives the objects in the interface.

8.Learnability

Another important interaction design principle is inducing the ability to learn to use the interface easily.
In other words, users should be able to learn to use the interface in the first attempt and should not face

35
 issues using it again. Please note that engaging interfaces allow users to easily learn and remember the
interactions.

Even though simple interfaces may require a certain amount of experience to learn, learnability makes
interaction intuitive. People tend to interact with an interface similar to other interfaces. This is the reason
why we must understand the process of interaction design thoroughly and the importance of design
patterns and consistency.

Intuitive interface design allows users to learn to use the interface without much effort and gives them a
sense of achievement. They feel smart and capable of grasping and utilizing newer interfaces. In a
nutshell, product designers should let the user feel confident while navigating through the interface.

9. Error prevention, detection, and recovery

The best way to reduce the number of errors a user makes is to anticipate possible mistakes and prevent
them from happening in the first place. If the errors are unavoidable, we need to make them easy to spot
and help the user to recover from them quickly and without unnecessary friction.

Error prevention techniques-

• Disabling functions that aren’t relevant to the user
• Using appropriate controls to constrain inputs (e.g. radio buttons, dropdowns, etc.)
• Providing clear instructions and preemptive help
• As a last resort, provide clear warning messages.

Anticipate possible errors and provide feedback that helps users verify that-

1. They’ve done what they intended to do.

2. What they intended to do was correct.

Please note that providing feedback by changing the visuals of the object is more noticeable than a written
message.

Error recovery techniques

• If the error is unavoidable, provide direction to the user to recover from it. For example, you can
provide “back,” “undo,” or “cancel” buttons.

• If a specific action is irreversible, you should flag it “critical” and make the user confirm first to
prevent slip-ups.

• Alternatively, you can create a system that naturally defaults to a less harmful state. For example,
closing a document without saving it should be intelligent enough to know the unlikely behavior
of the user. It can either auto-save or display a warning.

10. Affordance

36
 • Affordance is the quality of an object that allows an individual to perform an action. For example,
a standard household light switch appears innately clickable.
• The point is – users should get a clue about how to use an abject through its physical appearance.
While designing user interfaces, you can achieve affordance either by simulating ‘physical world’
affordances (e.g. buttons or switches) or keeping consistency with web standards and interface
design elements (e.g. underlined links or default button styles). The thing is, in an intuitive
interface, users are able to navigate and use the functionalities of the application without any
formal training.
• Interaction design is not always about creating a better interface for the users; it is also about
using technology in the way people want. It is necessary to know the target users to design a
desirable product for them. Interactive design is the basis for the success of any product. These 10
interaction design principles are based on the study and experiences of our team in designing
mobile and web apps for a broad product portfolio and on multiple mobile and web platforms.

BRANDING:
Branding and UI design are two things that go hand in hand. UI designers work with branding elements
when designing user interfaces which come together to fit like pieces of a puzzle.
Any UI design, whether it be an app or webpage, needs to act as an extension of the brand. A website
won’t be efficient in gaining brand loyalty and trust if its visual interface doesn’t contain recognisable
elements of the brand. There needs to be a distinct visual flow between branding and interfaces.
UI Designers work with branding elements like logos, colour palettes, typography, and imagery when
designing. For any design to be effective, all of these elements need to be locked down. If the UI designer
is provided with all of these, the final result will be an interface that runs smoothly alongside the brand.
Here’s how those elements are used within UI design:
Logo
It’s been claimed that 75% of people recognise a brand by its logo first. Logos are the backbone of a
brand’s visual identity, everything else stems off from that. Therefore when designing a user interface, the
logo should be one of the first things considered. It’s standard for a logo to be placed somewhere in the
header, as well as in the footer. As a result, the logo is one of the first things a user sees when they load
the webpage and can instantly make the connection between the brand and interface.

37
Examples of how Boots and the National Trust position their logos within their websites. By placing their
logos at the top of the page, it ensures that their logos are one of the first things a user sees when visiting
their websites.

Colour
UI Designers will use a brand’s colour palette to pick out which colours to use for backgrounds, text,
buttons, and other UI elements. Colour plays a huge visual role in both branding and UI design, so it’s
important for colours to be consistently used across print and digital interfaces.

An example of how the Natwest colour palette (left) has been injected into their UI design. They’ve used
purple as one of the most prominent colours, then brighter colours are used to add bursts of colour.
Natwest’s website is a prime example of brands sticking to their colours to keep branding consistent
across print and digital.

Typography

UI designers will use any typefaces specified in the branding guidelines when they come to inserting
titles, subtitles, copy blocks and any other element of texts. Branding guidelines specify which typefaces
should be used for different textual elements. Therefore this can be easily carried across by UI designers
when designing.

38
An example of how Tripadvisor has followed its brand guidelines when it comes to typography. The
guidelines advise that their font ‘Trip Sans’ should be used for titles and ‘Trip Sans Mono’ for body copy.
The guidelines also make recommendations for ‘web safe’ fonts that can be used when Trip Sans isn’t
available for use. By covering all possible bases when it comes to typography, Tripadvisor ensures that its
brand will stay consistent across all platforms.

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

Starbucks gives detailed advice when it comes to imagery used across their brand. Starbucks’ brand
guidelines stipulate that illustration used within their branding should evolve with trends, and suggest that
the use of textures would be ideal.

They also recommend that, where possible, their ‘Starbucks green’ shades should be used within
illustrations. The above example of Starbucks’ current homepage achieves this. The illustrations used are
on-trend, contain texture – and most importantly they contain ‘Starbucks green’.

Overall, branding plays an important role in UI design. Branding elements act as pieces that slot together
with UI elements to get the perfect result. Creating a UI interface that works well for the user and is
relevant to the brand.

STYLE GUIDES:

User interface style guides are design guidelines or standards and a development tool for
designing UI elements and interactions for various websites or app products. These documents
usually contains the essential details relating to your product’s user interface to ensure
consistency across different screen sizes, design teams, companies, and brands.

39
A UI style guide outlines design elements, such as typography, colors, layout, buttons, fonts,
other components, etc., approved for use in the brand guideline. These guidelines are essential
for design and product teams to keep the UI style guides consistent.

Need of UI style guides

For many reasons, developing a UI style guide is crucial when designing your digital product. If
you are creating your digital product for the first time without any prior design, a style guide will
help you streamline your design process and help you stay organized and in line with your brand
design guidelines.

Since your UI design is part of your brand design, it is good for you to have a consistent design,
so it impacts your brand visibility. A UI style guide helps you to save time when making design
decisions and prevent back and forth. Importantly, these guidelines also ensure that all your
designers (new or old) understand what to include and avoid when designing your product UI.

A style guide drives your business success by creating positive user experiences (for example, if
you have an e-commerce site, consistent branding on your site interface will make it easy for
your customers and potential customers to navigate the site easily, find what they want, and
complete payment).

Finally, a style guide is helpful when growing a design team from scratch. In addition, they come
in handy when on boarding new designers to the groups, providing them with all the essential
information they need to quickly adopt the look and feel of the product features, colors, and
brand guidelines to the Ui design.

Difference between UI Style Guides and Design systems

UI style guides are set rules with a complete list of user interface design’s do’s and don’ts.
Unfortunately, it is often easily confused with the term “design system,” different design
guidelines designers use. If you don’t know what design system means, here’s a definition.

A design system is a complete list of design principles, standards, and documentation that guides
designers and developers to design consistent products and increase sales. It is an all-

40
encompassing design document that contains design style guides, design patterns, technical
specifications, and component libraries to improve product and brand consistency.

A style guide is an element of a design system that lists out rules regarding the brand and visual
style of products. The critical difference between a UI style guide and a design system is that the
former focuses on the product’s overall aesthetics. At the same time, the latter specifies how
different design components within the design aesthetics look and function.

Benefits of UI Style Guides for Users and Design Teams

As mentioned in the earlier part of this blog article, a UI style guide benefits the UI users and not
just the design team. Hence in this section, we will share the benefits of UI style guides for
designers and users.

Benefits of UI style guides for Users

Adopting a UI-style design for your digital products can help your web users feel more confident
and comfortable interacting with your products. Better user engagement increases brand loyalty,
which could increase your success rate for the product. Here are some of the benefits of UI style
guides:

1. First, it makes it easier for users to understand the digital product.

2. Second, it builds coherent experiences that help users feel comfortable using your
product.
3. Third, adding intuitive features can help users interact with your digital products
without reading instructions.
4. Consistent branding increases brand recognition and helps users recognize another
website or application developed by your company.
5. It enhances brand loyalty.

Benefits of UI style guides for Design Teams

41
UI style guides guide designers to streamline the development process and create consistent and
well-designed digital products that increase your brand’s success. Here are some of the benefits
of UI style guides:

1. Creating your own UI style guide provides clear instructions or guidelines for
designers to follow when designing the product’s UI features.
2. It helps to save the time designers will spend seeking guidance from product
supervisors or leaders.
3. It offers developers and designers easy access to a library of approved assets and
elements that should be included in the products.
4. It encourages and improves collaboration between designers and developers since they
are all on the space page regarding design requirements.
5. It reduces the stress and burnout that comes with creating suitable designs.

What should be included in a UI Style Guide?

Now that we have covered what a UI style guide means and its benefits, the next step is
understanding everything you should include in your style guide. Below are the elements of UI
style guides that you should include when creating your UI style guides:

1. Typography

The typography section of your UI style guide contains guidelines on the fonts to include in your
designs. It should have the following:

• The specific font to use in all your product UI designs.

• A list of font sizes and weights to show visual hierarchy.
• Additional guidelines on the fonts as well as colors and links fonts to include inthedesign.
2.Color

Colors are an essential part of the visual brand, and UI design that sets the mood for brand
expression improves brand recognition and enhances solid emotional connections with
customers. However, your choice of colors can make or mar your user engagement success.

42
Since cohesive color schemes are significant for ensuring consistency, communicating with
users, and making the user interface attractive and engaging, your UI style guide must outline the
accepted color palette and scheme used in the guide.

3. Iconography

Icons represent objects, symbols, or concepts with specific meanings universally recognized in a
creative design. Icons are essential elements of UI that can be used to provide a simple and easy
way to improve the accessibility of a product user interface. Usually, for UI designs, icons are
paired with typography to explain or guide users on what the different icons used on the site
mean and where they will lead them.

In other situations, icons can organize similar functions like navigation, controls, tools, data, and
many more.

4. Layouts and grids

Layouts and grids are essential UI design elements that indicate where and how different visual
aspects of digital products are placed. So, the UI style guide must contain complete information
and standards for acceptable layouts and grids to ensure consistency of the design project and
help users move from page/screen to page/screen.

Also, considering the different guidelines available on different screens, devices, and search
engines, including clear instructions on the different layouts and grids, can help your digital
product appear the same across different screen sizes.

5. Components

The last on our list is the components you choose for UI designs and how they will all be
displayed to enhance user experience and avoid confusion across your products. An excellent
way to have consistent components in your UI design is to create design systems alongside your
Ui style guides to understand better how every design component would look.

Although we have already listed some of the components above, it is equally important to
include all the elements that would make UI design simple, accessible, and functional.

43
Tips For Creating UI Style Guides

Here are the tips for creating a UI style guide:

1. It should be easy to use by people from different disciplines, professional experiences,

and cultural backgrounds.

2. It should have clean, uncluttered screen layouts that are well-organized, legible, and
clearly labeled. To make it easy to use, keep the visual information minimal and use
spacious arrangements.

3. Keep the design instructions short and straight to the point. For example, use bullet
points in place of lengthy paragraphs. Also, prioritize visuals over words.

4. Since digital products are updated frequently, you must keep all relevant version

histories to help product teams.

Best UI Style Guide Generators

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

1. Mockplus

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

2. Fabricator

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

44
3. Aigis

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

UI Style Guide Examples

1. Pockie eCommerce Design System

2. Smart Home System

3. Mobile look design

4. Dihome Figma design

5. Figma Design Style

6. Dashboard UI style guide Template

7. Sketch Style guide

8. Dark Dashboard UI style Guide

9. Enso Brand Style Guide

10. Bond Sales Management dashboard style

11. UI style kits

12. Ramni UI shopping kit

13. Zen Motors design system

14. Brand Style Guide Illustrator

15. Brand style guide template

45
 UNIT-III FOUNDATIONS OF UX DESIGN
INTRODUCTION TO USER EXPERIENCE:
UX is a human-first approach to the design of a product, which has physical and digital
applications to the product. The main crux of UX involves the user’s full experience from the
first contact right through to the last.

User experience is how a person feels when interacting with a system. This includes a website,
mobile application, desktop software and basically any form of human/device interaction.

A UX designer focuses on structural design solutions for any issues that the user encounters
during their interaction to try and create a product that the user can delight in owing to its
effectiveness. UX is frequently the first step in the process of creating a product, establishing the
bare bones of a project which UI then fills with interactive and visual elements.

46
GOAL

UX is a mindset that should be shared by the whole team. It is the team’s way of empathising with
your users and being inquisitive about what they want. In this way UX isn’t a single step in a
process but a skill that must be applied at each stage.

This is an important step because a user’s first impression is critical. UXD can help with the
following:

1. What should the visual tone of the product be?

2. How do users feel when they see your product? Do they trust it?

3. It the product visually appealing and does it spark joy?

4. Is the visual design usable and accessible?

Always remember that users use products; they don’t use documentation. Design artefacts

(wireframes, prototypes, strategy documents) are a means to an end, so don’t lose sight on

improving the product.

47
UX Pyramid

The UX Pyramid is an excellent framework for categorising UX effort and tracking progress.
Based on Maslow’s hierarchy of needs, the base of the UX Pyramid lays the foundation with
fundamentals (breathing, in Maslow’s case), before advancing to higher, more enriching user
experiences.

Levels 1 to 3 of the Pyramid concentrate on a user’s ability to achieve a desired task.

Levels 4 to 6 go on to focus on the user’s experiences while using the product or service.

Many budget-focused businesses only see value in achieving up to level 3, thereby missing out on
improved customer loyalty, customer advocacy, customer spend and many other incredibly
beneficial outcomes that stem from an engaged customer.

Level 1: Functional

Characteristics:

• No bugs, errors and outages

• Uses current technologies (doesn’t rely on old technologies like Flash that don’t work

on phones or tablets)

• It has some purpose; someone has a need for it

• Includes all key features

• Works in all modern browsers

48
 • Passes basic accessibility

Level 2: Reliable

Characteristics:

• Loads in reasonable time, even in peak periods

• Content is current and accurate

• Data is clean and reliable

• Password resets are sent/received promptly

• It can be used effectively on mobile devices and standard device types

Level 3: Usable

Characteristics

• Users don’t get lost or confused

• Users can easily find the content or products they are interested in

• The site doesn’t rely on constant help messages or long instruction manuals

• It has a short learning curve

• Users don’t rely on ‘hacks’ or workarounds to use it

• Call centres aren’t swamped with basic enquiries

• Meets basic UX heuristics and best practice

49
Level 4: Convenient

Characteristics

• Users want to use it

• Users actively find situations and reasons to use it more

• Users recommended, up-vote and rate it

Level 5: Pleasurable

Characteristics

• Users invest themselves into it

• Users promote, share and evangelise it

• It becomes part of the user’s regular routine

Level 6: Meaningful

Characteristics

• Users love it; it brings meaning to their life

WHY YOU SHOULD CARE ABOUT USER EXPERIENCE

Companies and people have come to realize how vital the User Experience design is to their
digital products.

There is no developer shortage from websites to portals to mobile apps; the key is — whose
design is the most intuitive.

50
UX is everything.

This article will outline the 4 top reasons why you need to focus more on the customers’ user
experience.

1) A poorly designed product won’t keep its users

If your application is hard to use, over time, people will walk away.

There is always a new alternative hitting your market, and they will compete with your design.

If your design is timeless and intuitive your users won’t leave your app too quickly, even if the
competition has more features.

2) You’ll get excellent ratings

In 2020, users don’t stay quiet. If they’re happy, they’ll say it, and if not, they’ll say it too.

User Experience Design and ease of use, the number one point users talk about in their product
reviews.

Let them have what to compliment you on!

3) Your developers will be happier

Software products that put a significant focus on UX Design tend to attract better developers.

If developers see you don’t care about UX design, this will hint to them — that the burden of
design will fall on them.

Developers love to build.

Designers are trained to play around with your plans.

4) You’ll raise money faster

Investors check for good UX before anything.

If you want a foot in the capital door, put in a great effort in designing your software product
properly.

You’ll pay now, but it will accompany your product forever.

51
5) UX has always been part of our lives

As simple as it may sound, UX is everywhere. It is seen in your everyday tasks. Whether it be

riding the MRT, ordering pizza online, or even just browsing through the net, UX is there. It is

just unnoticed by most people.

An example of this would be the “Save to Facebook” feature that Facebook added last 2014. This

is one of the favorite examples when explaining UX. Over the years, the number of people

engaged in social media has been rising immensely. People are posting, commenting, tweeting,

and sharing content all over the Web.

But sometimes, we have no time to read or watch those content. It’s very frustrating when you

find interesting things but you cannot store them somewhere. This is where the save feature

comes in.

With this save feature, we won’t have to get or search for the link or name of the material we

found earlier. We can save things like articles, pages, pictures, videos in an instant and go back to

them when we have time.

This additional feature that Facebook added did not only relieve people out of their problems, it

also created a better experience when people are browsing in Facebook.With UX, we cancreate

solutions to the everyday pains of people.

6) UX teaches you about empathy

UX is about people building things and designing experiences for people. With UX, you will be
more concerned about “how can I help people live better?”, “how can I improve products or

52
services for people?” rather than “what is the most innovative product I can think of?”, “what will

bring more money in?”.

7) UX isn’t just about design, it is also about crafting experiences

Many people confuse UX and UI. UI deals with the interface or the look while UX covers a
bigger scope. UX is not just about the aesthetics, it’s about how people use a product, what they
feel when they’re using it, the experiences.

Experiences are valuable because we see how people perceive, feel, react and behave towards

something. In UX, we analyze these experiences and use them to further improve how we

implement design and tasks flows into our products.

When you start learning about UX, you will learn to ask the right questions.

“What problems am I solving?”

“Who am I doing this for?”

“How do people feel about the product?”

“Is the product design aligned with its purpose?”

Imagine going to a place you haven’t been to before. You don’t know how you’ll get there, what

you’ll see, and what you’ll do. Without maps or signs, you’ll be frustrated, asking random

strangers where you’ll go. Without details or information about the place, you don’t know what to
expect, what activities you will be doing.

53
This is where UX comes in. A product, whether it be a website, an app or a system, should have

the proper structure, design, fields in order to guide the user in understanding the product. This, in

turn, will help the user get a better experience with it.

8) UX brings a lot of career opportunities

People are beginning to understand the importance of UX. That’s why UX is becoming more and
more popular in different industries all over the world. UX is growing. This is reflected in the
many career opportunities that a UX designer can go into. Jobs can range from the general UX
designer to a UX specialist like user researcher, product designer, or interaction designer.

Also note that careers in UX are part of the high-paying jobs spectrum. The only downside (for

some people) of pursuing a UX career is that most of these jobs are located mostly in the States

and UK.

9)UX will put you on a lifelong learning

Everything is dynamic, especially in UX. Since UX deals with people, it demands for constant

change. The needs of people today may not be the same needs we see tomorrow. It is inevitable

that people will change, so as their needs.

Most people in their career are constantly faced with the problem that they have routine jobs. In

UX, you will get to learn about various aspects because user experience cuts across many

different fields. Some of which are computer science, psychology, graphic design, marketing, and

many more.

54
Because of this, you will be pushed to learn and acquire as many knowledge and skills as you can,

in just about everything. And I think that’s the greatest takeaways in life: continuous growth and

learning.

UNDERSTANDING USER EXPERIENCE:

UX is critical to the success or failure of a product in the market.

UX is confused with usability.

There are 7 factors that describe user experience, according to Peter Morville a pioneer in the

UX field.
• Useful
• Usable
• Findable
• Credible
• Desirable
• Accessible
• Valuable

55
Useful

If a product isn’t useful to someone why would you want to bring it to market. If it has no
purpose, it is unlikely to be able to compete for attention alongside a market full of purposeful
and useful products. It’s worth noting that “useful” is in the eye of the beholder and things can be
deemed “useful” if they deliver non-practical benefits such as fun or aesthetic appeal.

Usable

Usability is concerned with enabling users to effectively and efficiently achieve their end
objective with a product. A computer game which requires 3 sets of control pads is unlikely to be
usable as people, for the time being at least, only tend to have 2 hands.

Products can succeed if they are not usable but they are less likely to do so. Poor usability is
often associated with the very first generation of a product think the first generation of MP3
players; which lost their market share to the more usable iPod when it was launched. The iPod
wasn’t the first MP3 player but it was the first truly usable MP3 player.

Findable

Findable refers to the idea that the product must be easy to find and in the instance of digital and
information products; the content within them must be easy to find too. If you cannot find a
product, you’re not going to buy it and that is true for all potential users of that product.

If you picked up a newspaper and all the stories within it were allocated page space at random,
rather than being organized into sections such as Sport, Entertainment, Business, etc. you would
probably find reading the newspaper a very frustrating experience. Findability is vital to the user
experience of many products.

Credible

Credibility relates to the ability of the user to trust in the product that you’ve provided. Not just
that it does the job that it is supposed to do but that it will last for a reasonable amount of time
and that the information provided with it is accurate and fit-for-purpose.

It is nearly impossible to deliver a user experience if the user thinks the product creator is a
lying, clown with bad intentions they’ll take their business elsewhere instead.

56
Desirable

Skoda and Porsche both make cars. They are to some extent both useful, usable, findable,
accessible, credible and valuable but Porsche is much more desirable than Skoda. This is not to
say that Skoda is undesirable they have sold a lot of cars under that brand but given a choice of a
new Porsche or Skoda for free most people will opt for the Porsche.

Desirability is conveyed in design through branding, image, identity, aesthetics and emotional
design. The more desirable a product is the more likely it is that the user who has it will brag
about it and create desire in other users.

Accessible

Accessibility often gets lost in the mix when creating user experiences. Accessibility is about
providing an experience which can be accessed by users of a full range of abilities – this includes
those who are disabled in some respect such as hearing loss, impaired vision, motion impaired or
learning impaired.

Design for accessibility is often seen by companies as a waste of money because the impression
is that people with disabilities make up a small segment of the population. In fact, in the United
States at least 19% of people have a disability according to the census data and it is likely that
this number is higher in less developed nations.

That’s 1 in 5 people in the audience for your product that may not be able to use it if it’s not
accessible or 20% of your total market.

It’s also worth remembering that when you design for accessibility, you will often find that you
create products that are easier for everyone to use not just those with disabilities. Don’t neglect
accessibility in the user experience.

Finally, accessible design is now a legal obligation in many jurisdictions including the EU and
failure to deliver it may result in fines.

Valuable

Finally, the product must deliver value. It must deliver value to the business which creates it and
to the user who buys or uses it. Without value it is likely that any initial success of a product will
eventually be undermined.

57
Designers should bear in mind that value is one of the key influences on purchasing decisions. A
$100 product that solves a $10,000 problem is one that is likely to succeed; a $10,000 product
that solves a $100 problem is much less likely to do so.

DEFINING THE UX DESIGN PROCESS AND ITS METHODOLOGY:

Design Thinking is an iterative process involving redefining problems, empathizing users,

ideating solutions. Design thinking process involves 5 phases

1. Empathise,

2. Define,

3. Ideate,

4. Prototype,

5. Test.

Refer unit 1 notes

https://medium.com/@rakshapatidar1010/5-steps-in-the-ux-design-design-thinking-
process-
f52d2c6789cb#:~:text=Design%20thinking%20process%20involves%205,%2C%20Ideate
%2C%20Prototype%2C%20Test.

Methods of the UX Design process

Here are some basic steps to start the user experience project.

1. User Personas

The first step in the process is getting to know your audience. This allows you to develop

experiences that relate to the voice and emotions of your users. To begin this, you will want to
create a user persona, which is a representation of a particular audience segment for a product or a

58
service that you are designing. It allows you to create an example of the kind of person that might

be using your product or your service.

2. User interviews

Interview existing and potential users of the product or service to gain insight into what would be

the most effective design. Because the user’s experience is subjective, the best way to directly

obtain information is by studying and interacting with users.

3. Job Stories

A short, simple description of a product feature told from the perspective of the person who wants

that feature.

4. Functionality map

Once you’ve studied the job stories, start by building a functionality map for the pages you would

like to create. A functionality map is a clearly organized hierarchy of all the pages and subpages

within your product.

Creating a functionality map makes it easier to imagine how a user will get from point A to point

B on your product, It is an effective tool for adding efficiency to the product building process.

5. Wireframes

The visuals on each page matter just as much as the site structure, so invest time into creating

wireframes, which are visual guides that represent the skeletal framework of a product and

provide a preview of your product’s look and feel. With a wireframe in place, you can eliminate

usability issues before it gets developed. This can save your development time for necessary
adjustments down the line.

59
6. Prototyping

A prototype is a “mockup” version of your final product, which is then used for user testing
before a product launch. Its goal is to reduce the level of wasted time and money that can often
occur when proper testing has not been carried out on a product prior to launch.

7. Usability testing

Usability testing is a way of testing how easy it is to use a product by testing it with real users in

order to identify any roadblocks or friction they might face when interacting with it.

By providing a great user experience for your users, not only can you increase the probability of

them completing conversion tasks across your product, but you can change lives.

Think about it for a moment. By making your interactions as simple and intuitive as possible you

are making your end users’ lives easier.

And if your product or service is able to help your users complete their tasks or solve their

problems as quickly as possible, this will leave a lasting impression one of which they will

happily talk about to their friends and family.

There are 3 types of usability testing,

1.Moderated vs. Unmoderated

2.Remote vs in person

3.Explorative vs Comparative

60
RESEARCHIN USER EXPERIENC E DESIGN:

User experience (UX) research is the study of learning what end users of a system or product
need and want, then employing those insights to enhance the design process for products,
services or software.

UX research can take different forms depending on the area of focus. For example, for product
teams, UX research could mean validating concepts and prototypes. For marketing teams, it
might mean testing brand designs and messaging before launching products.

Benefits of UX research

UX research helps organizations in many ways, but the following are some of the oft-cited
benefits of performing UX research on a regular basis:

• Understand how users experience websites, mobile applications, products and

prototypes.

• Evaluate and improve ideas and prototypes based on the findings of the UX research,
enabling organizations to make the right design decisions early in the development
process.

• Discover new customer needs and business opportunities.

• Find and fix flaws in products and services.

• Provide better user experiences than competitors.

• Understand every user interaction across the entire customer journey.

• Develop a more useful picture of the target audience for better advertising and
marketing.

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 intuitive and enjoyable for users. Using qualitative and

61
quantitative methods, they conduct comprehensive research and share the insights from research
with the UX designers. The goal of the UX researcher is to make the overall design process
smoother and more productive.

Some typical responsibilities of the UX researcher include:

• Create a well-crafted research plan with clear objectives.

• Build a picture of the target users based on their needs, wants, motivations and
challenges.

• Write usability research screener questionnaires and discussion guides.

• Recruit targeted users for specific research studies.

• Moderate one-on-one usability sessions.

• Develop and implement quantitative surveys.

• Conduct client and stakeholder interviews.

• Provide actionable and meaningful recommendations for the product team.

• Present findings of the design research to a larger team clearly and in an organized
manner.

• Work closely with the product team to identify research goals.

• Establish and implement an overall research strategy.

TOOLS AND METHOD USED FOR RESEARCH:

Like many types of research, studies on UX behaviors embody a number of different approaches
to testing, data aggregation and garnering information. This involves both quantitative and
qualitative methods.

Using quantitative research methods, UX researchers test proposed hypotheses about users'
behaviors and attitudes based on a system of numerical and statistical evidence. Quantitative

62
methods uncover, for instance, what percentage of people can successfully find a button on a
page or how many users clicked on a particular link.

Here are some of the most prominent forms of UX research in use today:

• Card sorting. A technique that assesses and designs the navigation and structure of
an application or website by giving individuals a list of related items (for example, a
sample inventory listing for an online supermarket) and asking them to group the
items in a way that makes the most logical sense to them.

• Contextual interviews. Monitored sessions where UX researchers observe users in

their natural environments and ask questions to gain firsthand accounts of their
experiences.

• Focus groups. A moderated feedback approach where a panel of users are asked to
discuss their experiences among themselves, either in moderated or open formats, to
help researchers learn more about the group's attitudes, ideas and wants.

• Expert reviews. Accredited and verified evaluations of a website against a list of

established industry standards or other governing guidelines.

• Surveys. A selected series of questions posed to a number of users that help

researchers learn about the individuals who use the end product.

• Usability testing. An evaluation technique that attempts to uncover the problems and
frustrations users have with a site through one-on-one sessions where users perform
tasks using a particular software application or other product.

• A/B testing. An assessment technique where users take part in blind studies that
randomly assigns those users to different versions of a website, application or other
software product.

63
USER NEEDS AND ITS GOALS :

User experience (UX) design is often seen as a balancing act between satisfying user needs and
meeting business objectives. Designers must navigate the tension between these two priorities to
create successful digital products.

Designing for user needs is critical to creating products that are user-friendly and meet the
expectations of the intended audience. UX designers must understand the users they are
designing for, including their needs, goals, and pain points. This understanding enables designers
to create products that are intuitive and easy to use, resulting in a positive user experience.

However, designing for users alone is not enough. Businesses have goals they must meet, and the
products they create must serve those goals. UX designers must ensure that their designs align
with the business’s objectives and contribute to the company’s bottom line. This means that
designers must consider business metrics such as conversion rates, revenue, and customer
acquisition when designing digital products.

The tension between designing for user needs and business goals can be challenging to navigate,
but it is essential for designers to find a balance that satisfies both priorities. One way to do this
is to involve stakeholders from both sides early in the design process. By doing so, designers can
ensure that the business goals are aligned with user needs and that the product they create is
valuable to the company and the user.

Another way to balance user needs and business goals is to prioritize the most critical user needs
and business objectives. Designers should identify the core needs of their target audience and
focus on designing a product that meets those needs while contributing to the business’s
objectives. This approach can help designers avoid feature bloat and ensure that their product
provides a clear value proposition to the user.

UX designers must navigate the tension between designing for user needs and meeting business
objectives. The key to finding a balance is to involve stakeholders from both sides early in the

64
design process and to prioritize the most critical user needs and business objectives. By doing so,
designers can create successful digital products that satisfy both user needs and business goals.

KNOW ABOUT BUSINESS GOALS:

Taking Inspiration from Innovation: Key Insights from Eight Entrepreneurs Making an Impact in
Emerging Markets

It’s easy to feel overwhelmed by all the critical challenges we face globally. For me, one source
of hope and inspiration are the entrepreneurs we support at Miller Center for Social
Entrepreneurship, whose innovative solutions to these challenges demonstrate that business
really can be a force for social good.

But for social entrepreneurs to flourish, they must learn from each other. To that end, we asked
entrepreneurs from Miller Center’s Clean Water and Climate-Smart Agriculture in-residence
program to share some thoughts on their innovations, the challenges they’ve overcome and the
lessons they’ve learned. The insights these eight leaders shared can aid fellow social
entrepreneurs in their journeys toward building sustainable businesses that help end global
poverty. (You may have seen them at last fall’s SOCAP conference, where they took the stage to
present their social enterprises during a standing-room-only pitch session.)

Whether working to increase smallholder farmers’ yields or profits, improve farmers’

distribution and market access, or promote solutions to drinking water or sanitation, these
entrepreneurs expressed a few common themes, which I’ll share below.

PAY CLOSE ATTENTION TO CUSTOMERS’ NEEDS

Rather than relying on generic, theoretical or top-down solutions — or assuming that a workable
solution in one situation can be generalized to another set of circumstances — successful
entrepreneurs begin by thoroughly understanding the needs, obstacles, environment, influences
and dynamics of the people or communities they intend to serve.

For example, Cycle Connect focuses on helping isolated farmers acquire the assets they need to
increase yields and reach buyers for their products. “We meet our clients where they are: in deep
rural areas disconnected from roads, markets and connectivity,” said CEO Emmy Okkema. “By

65
being close to our clients in the last mile, we are able to understand their farming cycles, social
structures and financial capacity.” Based on this familiarity with its customers’ needs, Cycle
Connect has provided more than 12,000 farmers with productive assets they need — including
oxen, plows and transport such as bicycles and motorcycles — which the enterprise also plays a
key role in distributing to the farmers. As Okkema describes it, her company is the only
successful provider of these essential assets, “due to our farmer-centric loan terms, community-
based oxen sourcing and tailor-made business training that includes renting out oxen in the
farmers’ villages.”

ADAPT TO NEW CHALLENGES

Entrepreneurs must often deal with unexpected challenges — particularly when working in
emerging markets. Sometimes, they need to move away from what originally seemed like a
viable path, in response to changing conditions or new pressures.

That’s what The Harvest Fund — which leverages technology, finance and training to support
marginalized women farmers in Africa — did when it faced a sudden obstacle with one
particular crop. “After we pivoted toward tomato production, the markets experienced an
extreme drop in fresh tomato prices,” said Michelle Kurian, the enterprise’s executive director.
“We then brainstormed ways to easily process fresh tomatoes to tomato paste at farm level.”
Zambia has only two tomato products companies, and they generally import their tomato paste,
so The Harvest Fund realized it could fill a supply chain gap with its farmers’ locally produced
paste.

Gravity Water, which turns rain into safe drinking water for schools in developing countries
around the world, encountered a challenge of a different nature. “When Gravity Water first
launched in Nepal, the country was still rebuilding after two devastating earthquakes in 2015,”
said Danny Wright, the company’s founder and executive director. The earthquakes’ destruction
complicated Gravity Water’s mission due to post-quake water pollution, limited electricity to run
water filtration systems, and lack of money and knowledge to fix the ones already installed. The
enterprise responded by developing an innovative, 100% electricity-free solution combining
rainwater harvesting, elevated storage and gravity-fed filtration to meet the needs of its
customers.

66
Natural disasters have also presented challenges to Miyonga Fresh Greens, which works with
growers across East Africa to export fresh vegetables and fruits to markets in Europe. The effects
of climate change have led to more severe weather, and in some Kenyan counties where
Miyonga works, heavy rains were destroying crops, causing a reduction in yield, diminishing the
product quality of harvested produce and creating unpredictable supply for the company to
distribute. To address this challenge, “in 2020 Miyonga introduced innovative agro-processing
technology, creating dried and powdered fruit products to expand growers’ value beyond fresh
horticultural products for export and local consumption,” said Grace Njoroge, operations
manager.

In other cases, a lack of local resources can complicate a company’s original business plan. For
Sauti East Africa, their initial concept of creating a platform to connect low-technology farmers
with market information faltered when they discovered that data sources profiling buyers and
sellers in East Africa’s marketplaces simply weren’t available. “We were falling short of
addressing one of the greatest needs for farmers in East Africa: finding buyers for their
products,” said Lance Hadley, the company’s CEO and co-founder. Sauti responded by
establishing its own directory of buyers and sellers, enabling them to connect farmers to this
information directly.

Solving funding challenges is another area that requires creative solutions. For example, getting
funding to help vulnerable communities gain access to clean water is easier than finding funders
willing to pay for the ongoing maintenance of the handpumps, taps and other systems necessary
to sustain that water access. SaniTap is addressing this gap through an innovative financing
mechanism to rehabilitate — and maintain for 15 years — water sources serving hundreds of
thousands of people in Madagascar. “SaniTap will use the fast-emerging carbon offset market to
finance the work,” said Andrew Tanswell, managing director. “Carbon credits will be generated
from the restored provision of safe drinking water, and will then create revenue through their sale
to large corporations that seek to go carbon-neutral and net-zero.”

67
But perhaps the most counterintuitive example of a business challenge these entrepreneurs
shared was from AMAATI, which had to think creatively when its efforts were actually too
successful. The Ghanaian social enterprise, which is working in Northern Ghana to revive the
use of fonio, an ancient, nutrition-dense cereal grain, initially targeted only women smallholder
farmers. “Women’s land access was the key problem we wanted to solve,” said CEO Salma
Abdulai. “However, when men realized that women using marginal lands for fonio started
growing other crops after the land was regenerated, they insisted on getting the land back.”
AMAATI responded by involving the men in the cultivation of fonio, too. “Once they started
benefiting from their relationship with AMAATI, they realized how important it was for their
wives to continue using the land,” Abdulai said.

FORGE DEEPER CONNECTIONS WITH CUSTOMERS, FUNDERS AND PARTNERS

Many of these social entrepreneurs acknowledged how critical it is to establish and extend
connections with customers, partners, funders and other parties.

For example Warc Africa, which designs and sells regenerative farming inputs as a service,
found success when they “pivoted to a partnership approach with suppliers and downstream
buyers to shift to fairer pricing and cash-and-carry — resulting in more inputs delivered to more
farmers at prices that helped farmers save $100 per acre on maize input bundles, and [allowed]
Warc to operate with no credit risk,” said CEO Christopher Zaw.

In Uganda, Cycle Connect leveraged its relationship with customers to help farming families
overcome their physical distance to markets for their products. “The past year we set up six
smaller branches in last-mile trading centers that are 50 miles from nearby towns,” said CEO
Emmy Okkema. “This allowed us to build strong relationships with farming communities and
see more clients faster. With this strategy we saw a 70% increase in loans, and we now have a
95% repayment rate.”

Grace Njoroge at Miyonga also believes in the power of strong business relationships. “One
aspect that has greatly contributed to Miyonga’s growth is forming strategic partnerships,” she
said. “Over the years we have partnered not only with the farmers we work with, but also with
institutions and development agencies. The partnerships have enabled Miyonga to not only gain
funding for our projects, but also increase our resources, access a wealth of knowledge, increase

68
revenue and reach a wider market — thus enabling us to bridge the gap between opportunity and
expertise while improving the livelihoods of smallholder farmers.”

69
 UNIT-IV WIREFRAMING, PROTOTYPING AND TESTING

SKETCHING PRINCIPLES:

10 UI/UX Sketches Techniques

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

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

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

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

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

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

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

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

6: Photograph samples

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

7: Types of Stationeries

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

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

71
8: Sketch in layers

Sketching in layers allows you to outline your design step-by-step and add on other details later. Get

the grasp of your ideas on your first few layers, if you are not happy with the layers, you can erase and

start again. Once you are confident in building the consistent momentum of sketching, you can adjust

the thickness from time to time, and increase the hue of your instrument accordingly.

9: Add content accordingly

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

10: Record fail and successful attempts

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

SKETCHING RED ROUTES:

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

Origin of the Red Route

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

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

Identify Red Routes

Red routes are:

Critical. Without these routes, your product would not deliver any value.

End-to-end tasks with multiple steps or actions, not single events. For example, clicking a “Sign Up” button
is an action, not a route. However, user registration from beginning to end would be a route.

Frequently utilized. They will often capture the use cases of 90%+ of all users.

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

Key value drivers. They drive your key business metrics.

Objectively successful. You should be able to clearly define what success looks like.

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

Building a Red Route Matrix

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

Uber

Rider Red Route: Requesting a ride

Rider Normal Route: Adding a payment method

Driver Red Route: Accepting a ride

Driver Normal Route: Changing profile settings

Airbnb

Guest Red Route: Booking a room

Guest Normal Route: Leaving a review

Host Red Route: Managing reservations

Host Normal Route: Updating listing pictures

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

Benefits of Identifying Red Routes

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

Most importantly, it helps your team build and optimize product features that deliver the most value to your
customers and drive your key metrics.

"Red Routes" typically refer to major roads in urban areas where stopping, parking, and loading
restrictions are strictly enforced to maintain traffic flow. Here are some key points you might want to
consider when sketching notes about Red Routes:

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

Traffic Flow: The primary goal of Red Routes is to keep traffic moving smoothly and efficiently, especially
during peak hours. This helps reduce congestion and travel times.

Restrictions: Note the types of activities that are restricted on Red Routes:

No parking: Vehicles cannot be parked on the road, even temporarily.

No stopping: Vehicles cannot come to a halt, except in emergencies or at designated areas like bus stops.

No loading/unloading: Commercial activities like deliveries are restricted to specific times and areas.

Clear Signage: Red Routes are often marked with clear signage indicating the restrictions. Look for signs
with the red route symbol and associated regulations.

Enforcement: Red Routes are typically rigorously enforced to maintain their effectiveness. Local authorities
use CCTV cameras, traffic wardens, and automated systems to monitor and issue fines for violations.

Exceptions: Some Red Routes might have specific exceptions, such as allowing loading/unloading during
certain hours or granting permits to certain vehicles (e.g., emergency services).

Benefits:

Reduced congestion: By preventing activities that disrupt traffic flow, Red Routes help keep the roads clear.

Improved air quality: Reduced idling and smoother traffic flow can lead to lower emissions.

Faster travel times: Vehicles can move more quickly along these routes without frequent stops.

Impact on Businesses: While Red Routes prioritize traffic flow, they can pose challenges to businesses that
rely on deliveries or curb-side services. Finding a balance between traffic management and supporting local
commerce is important.

Public Transport: Red Routes often include dedicated lanes for buses or trams, which further enhances
public transport reliability.

75
Urban Planning: Red Routes are part of broader urban planning strategies to create more efficient
transportation networks. They might complement initiatives like pedestrian zones, cycling lanes, and public
spaces.

Community Awareness: Local authorities often engage in public awareness campaigns to educate drivers
about Red Routes, their benefits, and the consequences of violations.

Technology and Future Developments: As technology advances, automated systems for monitoring and
enforcement might become more sophisticated, helping ensure compliance and safety.

Remember to organize your notes in a clear and concise manner, using bullet points, headings, or diagrams
to visually represent the information. These points should give you a good foundation for understanding and
explaining the concept of Red Routes.

RESPONSIVE DESIGN:

Responsive design is an approach to web design in which the interface adapts to the device's layout,
facilitating usability, navigation and information seeking. Responsiveness is possible thanks to media
queries, allowing the design to adjust automatically to the browser space to ensure content consistency
across devices, and design elements being sized in relative units (%).

Responsive design has significant benefits, and it's a default for web design to support device switching.

With responsive design, you may:

Reach a larger audience: nowadays, more users access the web through mobile devices.

Save time and development efforts since designers and developers only focus on one design version.

Improve SEO, as search engines reward mobile-friendly websites with better search positions.

Ensure brand and design consistency across devices, as there is no chance to modify guidelines to fit
different design boxes.

Why Responsive Design is so Popular:

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

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

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

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

Understanding the Language of Responsive Design

Responsive design has three core principles:

Fluid Grid System

Grid systems are aids designers use to build, design, arrange information and make consistent user
experiences. In interaction design, multi-column, hierarchical and modular are the most widely-used types
of grids.

The principle of a grid is simple: every element occupies the same percentage of space, however large or
small the screen becomes, which means that the components can be scaled up and down as the user switches
devices.

For non-photographic images, such as icons, you can use SVG files—these file formats are lightweight, and
you can scale them to any resolution without losing quality.

Media Queries and Breakpoints

Media queries are filters that detect the browsing device's dimensions and make your design appear
appropriate regardless of the screen size. To aid media queries, you have breakpoints: these are the values
where the content of your website will be rearranged to provide the user with the best possible experience.

Media queries and breakpoints go hand in hand, and both can be defined in your CSS style sheets. For
designers, a breakpoint is a boundary where the design will change to accommodate the features to the new
size. Commonly, designers use three sizes when designing responsive websites: 1024 & upwards, 1023-768,
and 767-320 px.

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

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

Best Practices & Considerations for Responsive Design

With responsive design, you design for flexibility in every aspect—images, text and layouts. So, you should:

Assume a "mobile-first" mentality: Whether you start designing from the smallest screen or the desktop
version, assuming a mobile-first mentality helps you practice the mobile-first approach, a design principle

77
with simplicity at its core. A mobile-first mentality means prioritizing content, leaving complex graphs and
images for the desktop version, and creating fat-finger-friendly tap targets (30px minimum).

Use Scalable Vector Graphics (SVGs). These are an XML-based file format for 2D graphics, which
supports interactivity and animations.

Include three or more breakpoints (i.e., design for 3+ devices).

Prioritize and hide content to suit users' contexts. Check your visual hierarchy and use progressive
disclosure and navigation drawers to give users needed items first. Keep nonessential items (nice-to-haves)
secondary.

Aim for minimalism.

Apply design patterns to maximize ease of use for users in their contexts and quicken their familiarity: e.g.,
the column drop pattern fits content to many screen types.

Aim for accessibility with font sizes/styles. Use contrast and background effectively. Consider learning
about typographic scales to harmonize body copy and headlines. As some users rely on screen readers, make
all your text "real" instead of text within images.

Responsive design is robust and economical, but its "easy" nature is deceptive. You can still run into
difficulties if you use it without caution. For example, it can restrict your control over the design's screen
sizes; consequently, if you do not set media queries upfront, the elements could shift independently. Also, it
is typical to run into issues with advertisement formats, especially on mobile devices.

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

RESPONSIVE DESIGN:

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

Key Concepts:

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

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

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

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

Best Practices:

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

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

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

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

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

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

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

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

Tools and Frameworks:

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

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

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

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

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

79
WIREFRAMING:

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

Key Concepts:

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

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

Functionality: Wireframes indicate the interactions and behaviors of different UI elements, providing a
sense of how the user will navigate and interact with the product.

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

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

Types of Wireframes:

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

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

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

Best Practices:

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

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

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

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

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

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

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

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

Tools for Wireframing:

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

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

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

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

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

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

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

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

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

81
CREATING WIREFLOWS:

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

To create effective wireflows notes, follow these steps:

Identify User Flows: Determine the key user flows or scenarios that you want to document. These could be
tasks, actions, or processes that users will perform within your application.

Gather Content: Collect all the relevant wireframes, sketches, or mockups that represent the screens
involved in each user flow. Ensure that you have a clear understanding of the sequence of screens and the
interactions between them.

Tools: You can use specialized design tools like Sketch, Figma, Adobe XD, or even basic tools like
PowerPoint, Keynote, or paper and pen to create wireflows.

Start with Screens: Arrange the wireframes or sketches of the screens in the order they appear in the user
flow. Each wireframe should represent a distinct screen or interface state.

Connect Screens: Use arrows, lines, or connectors to indicate the flow of the user journey between screens.
Clearly label these connectors with short descriptions that explain what triggers the transition (e.g., "Click
on 'Next'", "Swipe left", etc.).

Annotations and Notes: Add annotations and notes near each screen or connector to explain the purpose of
the screen and any specific interactions, features, or user actions associated with it.

Include Decision Points: If your user flow involves decision points (e.g., "If the user is already logged in,
skip to screen X"), clearly indicate these in your wireflows.

Error Handling: Include screens or branches that show how the system responds to errors or unexpected user
actions. This could include error messages, validation alerts, and recovery paths.

Feedback and Review: Share your wireflows with other team members, stakeholders, or users to gather
feedback and make improvements. Make sure the flow makes sense and is easy to follow.

Keep It Clear and Simple: While documenting user flows, remember that the goal is clarity. Keep the design
simple and easy to understand. Avoid clutter and unnecessary detail.

82
Versioning: As the design evolves, it's common to have multiple versions of wireflows. Make sure to clearly
label and date each version to keep track of changes.

Accessibility Considerations: If applicable, make sure your wireflows account for accessibility features and
considerations in your user flows.

Interactive Prototypes: If possible, you can use tools that allow you to create interactive prototypes from
your wireflows. This can provide a more immersive understanding of the user flow.

Remember that wireflows are a tool for communication and collaboration. They help bridge the gap
between designers, developers, and stakeholders, ensuring everyone is on the same page regarding the user
experience and interactions within the application.

Wireflow creation process:

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

Identify the key screens in the interface. ...

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

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

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

83
BUILDING A PROTOTYPE:

5 ways to improve your prototyping workflow

1.Use master components to speed up prototype connections:

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

THERE'S A BETTER WAY. Early in your process, turn your hamburger menu into a component.
Once you've done that, link each menu item of that master component to the appropriate frame.
Moving forward, any time you create an instance of the hamburger component, all the connections
will automatically propagate! No more beating your head against a wall with busy work.

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

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

Link to Figma file

2. Use components for scrolling content

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

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

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

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

84
"Overflow Behavior."5) Place an instance of this component within your designs and resize
them to fit.

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

Link to Figma file

3. Timed delays and overlays to simulate interactions

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

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

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

4. A table of contents:

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

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

5. Using Observation Mode

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

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

85
Get started with prototyping

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

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

1. Define Goals and User Needs:

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

2. Choose the Right Tools:

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

3. Low-Fidelity Wireframes:

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

4. Information Architecture:

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

5. Visual Design:

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

6. Interactive Elements:

Build interactions into your prototype to demonstrate how users will interact with various elements. This
can include buttons, menus, forms, and more.

7. High-Fidelity Prototyping:

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

86
8. User Flow and Navigation:

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

9. Gestures and Animations:

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

10. Test on Real Devices:

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

11. User Testing:

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

12. Iterate and Refine:

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

13. Responsive Design:

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

14. Accessibility Considerations:

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

15. Collaboration:

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

16. Presenting to Stakeholders:

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

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

87
BUILDING HIGH:

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

User Interface (UI) Design:

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

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

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

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

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

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

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

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

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

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

User Experience (UX) Design:

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

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

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

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

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

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

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

Feedback Loops: Incorporate feedback mechanisms, such as error messages, success notifications, and
progress indicators, to keep users informed about their actions.

Testing and Iteration: Continuously test your designs with real users and gather feedback. Use this feedback
to refine and iterate on your UI/UX.

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

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

FIDELITY MOCKUPS:

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

1. Fidelity Mockups:

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

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

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

2. UX Notes:

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

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

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

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

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

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

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

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

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

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

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

90
DESIGNING EFFICIENTLY WITH TOOLS:

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

1. Understand the Basics:

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

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

2. User-Centered Design:

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

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

3. Wireframing and Prototyping:

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

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

4. Consistency and Patterns:

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

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

5. Visual Hierarchy:

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

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

91
6. Typography and Readability:

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

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

7. Color Scheme and Accessibility:

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

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

8. Navigation and Information Architecture:

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

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

9. Feedback and Interactivity:

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

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

10. Mobile Responsiveness:

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

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

11. User Testing and Iteration:

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

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

12. Collaboration Tools:

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

92
Version control and commenting features help streamline the design process.

13. Accessibility Considerations:

Design with accessibility in mind, ensuring your product is usable by people with disabilities. Follow
WCAG guidelines for web content.

14. Performance Optimization:

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

15. Continuous Learning:

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

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

INTERACTION PATTERNS:

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

Face-to-Face Interaction:

In-person conversations.

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

Immediate feedback and real-time communication.

Written Communication:

Includes emails, letters, memos, and text messages.

Allows for more thoughtful and deliberate communication.

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

Phone and Voice Communication:

93
Real-time audio conversations.

Tone of voice and intonation convey emotions and meaning.

Often used for quick information exchange.

Video Calls:

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

Enables visual cues and body language.

Widely used for remote work and virtual meetings.

Social Media Interactions:

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

Allows for public or private communication.

Supports sharing text, images, videos, and links.

Engages a wide audience and can go viral.

Messaging Apps:

Platforms like WhatsApp, Messenger, and Slack.

Supports one-on-one and group chats.

Often used for quick, informal communication.

Online Forums and Communities:

Platforms like Reddit, Quora, and specialized forums.

Users discuss topics of interest in threads.

Valuable for seeking and sharing information and opinions.

Email Etiquette:

Use a clear subject line.

Maintain a professional tone.

Be concise and to the point.

Use proper salutations and signatures.

94
Active Listening:

Paying full attention to the speaker.

Asking clarifying questions.

Providing feedback to demonstrate understanding.

Avoiding interrupting.

Conflict Resolution:

Addressing disagreements and disputes.

Using effective communication to find common ground.

Active listening, empathy, and compromise are key skills.

Networking:

Building professional relationships.

Exchanging information and contacts.

Requires effective communication and interpersonal skills.

Group Dynamics:

How individuals interact within a group.

Roles, leadership, and communication patterns play a role.

Group decision-making and consensus-building.

Online Dating:

A specific interaction pattern for seeking romantic or personal connections.

Profiles, messaging, and arranging meetups are common steps.

Customer Service Interactions:

Companies interacting with customers.

Handling inquiries, complaints, and feedback effectively.

Non-Verbal Communication:

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

Often conveys emotions, intentions, and attitudes.

Cultural Sensitivity:

Recognizing and respecting cultural differences in communication.

Avoiding stereotypes and bias.

Digital Etiquette:

Following online etiquette, such as avoiding trolling and cyberbullying.

Respecting privacy and consent in digital interactions.

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

CONDUCTING USABILITY TESTS:

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

1. Define Objectives:

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

2. Identify User Profiles:

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

3. Recruit Participants:

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

4. Create Test Scenarios:

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

96
5. Prepare the Testing Environment:

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

6. Develop a Test Plan:

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

7. Conduct Pilot Tests:

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

8. Conduct Usability Tests:

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

9. Observe and Take Notes:

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

10. Analyze Data:

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

11. Report Findings:

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

12. Iterate and Improve:

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

13. Share Results:

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

97
14. Repeat Testing:

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

15. Consider Remote Usability Testing:

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

16. Maintain User Privacy and Informed Consent:

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

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

OTHER EVALUATIVE USER RESEARCH METHODS:

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

Heuristic Evaluation:

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

Identifies potential usability problems based on recognized best practices.

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

Cognitive Walkthrough:

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

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

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

Accessibility Testing:

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

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

Expert Review:

Involves usability experts conducting a comprehensive evaluation of a product.

May use a combination of methods, including heuristic evaluation, cognitive walkthroughs, and usability
guidelines.

Provides valuable insights into usability issues.

A/B Testing:

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

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

Useful for making data-driven design decisions.

Eye Tracking Studies:

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

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

Clickstream Analysis:

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

Helps identify user navigation patterns and areas of interest.

System Usability Scale (SUS):

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

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

Post-Task Questionnaires:

99
Administered after users complete specific tasks in a usability test.

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

Customer Satisfaction Surveys:

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

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

Usability Benchmarking:

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

Provides context for evaluating usability performance.

Remote Usability Testing:

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

Allows for testing with geographically diverse users.

Tree Testing:

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

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

Card Sorting:

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

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

Surveys and Questionnaires:

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

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

Field Studies and Contextual Inquiry:

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

100
Provides valuable insights into user behavior and needs.

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

SYNTHESIZING TEST FINDINGS:

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

Understand the Purpose:

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

Collect Raw Data:

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

Organize the Information:

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

Introduction: Provide context and the purpose of the tests.

Methodology: Describe the test setup and procedures followed.

Results: Present the data, findings, and observations.

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

Recommendations: Offer suggestions or actions based on the findings.

Conclusion: Summarize the key takeaways.

Summarize Key Findings:

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

Provide Context:

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

Recommendations and Actionable Insights:

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

Be Objective:

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

Use Clear and Concise Language:

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

Cite Sources:

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

Proofread and Edit:

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

Peer Review:

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

Finalize and Distribute:

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

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

102
PROTOTYPE ITERATION:

Creating prototype iteration is an essential part of the UI (User Interface) and UX (User Experience)
design process. These notes help designers and teams keep track of changes, improvements, and user
feedback throughout the iterative design cycle. Here's a template and some guidance on how to
structure and document your prototype iteration notes effectively:

Prototype Iteration Notes

Project Name:

[Enter the name or description of your project.]

Date:

[Enter the date of the iteration.]

Iteration Number:

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

Prototype Version:

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

Design Goals:

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

Changes Made:

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

Page/Screen Name 1:

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

Page/Screen Name 2:

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

User Feedback:

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

User 1 Feedback:

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

User 2 Feedback:

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

Observations:

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

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

Next Steps:

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

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

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

Action Items:

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

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

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

Attachments:

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

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

105
 UNIT-V- RESEARCH, DESIGNING, IDEATING, & INFORMATION
ARCHITECTURE

Identifying and Writing Problem Statements - Identifying Appropriate Research Methods -

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

Identifying and Writing Problem Statements:

Problem statements in the context of UI (User Interface) and UX (User Experience) design are
essential for framing design challenges and guiding the design process. They help define the
specific issues or challenges that need to be addressed. Here's a guide on how to identify and
write problem statements for UI and UX design:

Identify the User Pain Points:

Start by conducting user research, such as surveys, interviews, or usability testing, to understand
the pain points and frustrations users are experiencing with your product or website.

Gather data and feedback from various sources to identify common issues and patterns.

Define the Problem Clearly:

Be specific and clear about the problem you want to address. Avoid vague statements.

Use data and user feedback to support your problem statement. For example:

"Users are abandoning the shopping cart at a high rate during the checkout process."

"Users find it difficult to locate essential information on the website."

Consider Business Goals:

Align the identified problems with the broader business goals and objectives. How does solving
these problems contribute to the success of the product or service?

Prioritize Problems:

Not all problems are of equal importance. Prioritize them based on factors like user impact and
business value.

You can use techniques like the Eisenhower Matrix (urgent vs. important) to prioritize issues.

106
Use the "How Might We" (HMW) Framework:

Frame the problem statement as an open-ended question using the HMW framework. This
encourages creative thinking and solution ideation.

For example: "How might we simplify the on boarding process to reduce user drop-off rates?"

Consider Constraints:

Identify any constraints or limitations, such as budget, technology, or time that may impact the
design solutions.

These constraints should be acknowledged in the problem statement.

Include Metrics:

Whenever possible, include specific metrics that can be used to measure the success of the
design solution. This makes it easier to track progress and evaluate the effectiveness of the
solution.

For example: "Reduce cart abandonment rate during the checkout process by 20%."

Write Concisely and Clearly:

Ensure that the problem statement is concise and easily understood by all team members.

Avoid jargon or technical terms that might be unclear to non-designers.

Share with Stakeholders:

Share the problem statement with relevant stakeholders, including designers, developers, product
managers, and others involved in the design process.

Gather input and feedback to refine the problem statement further.

Keep it User-Centric:

Always focus on the user's perspective when crafting problem statements. The goal is to improve
the user's experience.

Here are a few example problem statements for UI/UX design:

Problem: Users frequently struggle to find relevant product information on our e-commerce
website.

107
How Might We: How might we improve the product information layout and navigation to help
users quickly find what they need?

Problem: Mobile app users are experiencing slow load times and crashes on older devices.

How Might We: How might we optimize the app's performance to ensure a smooth experience
on a wide range of devices?

Problem: Users abandon our mobile banking app during the registration process.

How Might We: How might we simplify and streamline the registration process to reduce drop-
offs?

Remember that problem statements are dynamic and may evolve as you learn more through the
design process. Regularly revisit and refine them to ensure your design efforts remain focused on
addressing the most critical issues.

Identifying Appropriate Research Methods:

When conducting research in the field of UI (User Interface) and UX (User Experience) design,
it's crucial to choose appropriate research methods that align with your specific goals, resources,
and the stage of your design process. Here are some common research methods used in UI and
UX design:

User Interviews:

Goal: To gain deep insights into users' needs, preferences, and pain points.

When to Use: At the beginning of a design project to understand user goals and expectations.

Surveys and Questionnaires:

Goal: To collect quantitative data on user preferences and behaviors.

When to Use: When you need to gather data from a larger user base or assess usability at scale.

Usability Testing:

Goal: To evaluate the usability of a design by observing real users interacting with it.

When to Use: Throughout the design process, especially when you have a prototype or a live
product.

108
Card Sorting:

Goal: To understand how users categorize and organize information.

When to Use: During the information architecture and content organization phase.

Eye Tracking:

Goal: To study where users look and how their gaze moves across a screen.

When to Use: Useful for understanding visual attention and optimizing layouts.

A/B Testing:

Goal: To compare two or more design variations to determine which one performs better in
terms of user engagement or conversion.

When to Use: After design changes have been implemented to assess their impact.

Heat maps and Click Tracking:

Goal: To visualize where users click and where they spend the most time on a webpage.

When to Use: For fine-tuning the placement of elements and calls to action.

Contextual Inquiry:

Goal: To observe users in their natural environment and understand their workflow.

When to Use: For gaining insights into how users perform tasks in their real-life context.

Competitive Analysis:

Goal: To evaluate the user experience of competitors' products.

When to Use: Before and during the design process to identify opportunities and gaps in the
market.

Diary Studies:

Goal: To collect longitudinal data on user experiences and behaviors over time.

When to Use: When you want to understand user experiences and interactions over an extended
period.

109
Prototype Testing:

Goal: To gather feedback on early design concepts and prototypes.

When to Use: In the early stages of design to iterate and refine concepts.

Expert Reviews/Heuristic Evaluations:

Goal: To have usability experts evaluate a design based on established usability principles
(heuristics).

When to Use: As a quick and cost-effective way to identify potential usability issues.

Remember that the choice of research methods should be driven by your specific research
questions and goals. Often, a combination of methods, such as user interviews followed by
usability testing, can provide a comprehensive understanding of user needs and help refine
design solutions effectively. Also, consider your budget, time constraints, and available
resources when selecting research methods.

Creating personas:

Creating personas is a crucial step in the UI (User Interface) and UX (User Experience) design
process. Personas are fictional representations of your target users, and they help you better
understand and design for the needs, goals, and behaviors of your audience. Here's how to create
personas for UI and UX design:

Identify Your Target Audience:

Start by defining who your users are. Consider factors such as age, gender, location, occupation,
and any other relevant demographics. Also, think about their technological proficiency and
experience with similar products or interfaces.

Gather User Research:

Conduct user research to collect data about your potential users. This can include surveys,
interviews, usability testing, and analytics. The goal is to gather insights into user behaviors,
preferences, and pain points.

Segment Your Users:

Group your research findings into segments or categories based on common characteristics and
behaviors. These segments will serve as the foundation for your personas.

110
Create Personas:

For each user segment, create a persona. A persona typically includes the following elements:

Name: Give your persona a fictional name to make them more relatable.

Photo: Include a representative image to put a face to the persona.

Demographics: List relevant demographic information like age, gender, job title, and location.

Goals and Needs: Outline the primary goals and needs of this persona when interacting with your
product or interface.

Challenges and Pain Points: Describe the challenges, pain points, and frustrations this persona
may encounter.

Behaviors and Habits: Detail the typical behaviors and habits associated with this persona, both
online and offline.

User Stories: Create scenarios or user stories that illustrate how this persona might use your
product.

Empathize with Your Personas:

To truly understand your personas, put yourself in their shoes. Consider how they would interact
with your design, what features they would find valuable, and what might cause them frustration.

Use Personas Throughout the Design Process:

Personas should inform your design decisions at every stage of the process. Whether you're
sketching wireframes, creating prototypes, or conducting usability testing, keep your personas in
mind to ensure your design meets their needs.

Validate Personas with User Testing:

Once you have your personas, use them to guide usability testing sessions. This will help you see
if your design effectively addresses the needs and goals of your target users.

Iterate as Needed:

Your personas should not be static. As you gather more data and insights through user research
and testing, update your personas to reflect any changes in user behaviors or preferences.

111
Share Personas Across the Team:

Ensure that your entire design team, including developers, marketers, and stakeholders, is
familiar with the personas. This helps maintain a user-centered focus throughout the project.

Remember that the key to effective personas is to base them on real user data and to continually
validate them as your project progresses. Personas are a valuable tool for ensuring that your UI
and UX design decisions align with the needs and expectations of your target audience.

Solution ideation:

Solution ideation is a critical phase in the UI (User Interface) and UX (User Experience) design
process where you generate creative solutions to address the needs and problems identified
during research. Here's a structured approach to solution ideation in UI and UX design:

Understand the Problem:

Before diving into ideation, make sure you have a clear understanding of the user problems and
pain points you're trying to solve. Review your user research findings and personas to keep the
user's perspective at the forefront.

Cross-functional Brainstorming:

Gather a diverse group of team members, including designers, developers, product managers,
and stakeholders, for a brainstorming session. Diverse perspectives can lead to innovative ideas.

Set Ideation Goals:

Define specific goals for your ideation session. What are you trying to achieve with this
brainstorming session? Are you looking for new features, design improvements, or entirely new
concepts?

Use Creative Techniques:

Employ creative techniques to stimulate innovative thinking. Some popular methods include:

Mind Mapping: Create visual diagrams to explore ideas and relationships.

Storyboarding: Create a sequence of visual narratives to depict user interactions.

Role Play: Act out user scenarios to understand how the design would work in practice.

Crazy 8s: Rapidly sketch eight different design concepts in eight minutes.

SCAMPER: Use this technique to question and modify existing ideas by substituting, combining,
adapting, modifying, putting to another use, eliminating, or reversing.

112
Encourage Quantity Over Quality:

During ideation, don't filter or judge ideas too early. Aim to generate a large quantity of ideas
before narrowing them down. Quantity often leads to more creative solutions.

Prioritize Ideas:

After the ideation session, review and prioritize the generated ideas based on criteria such as
feasibility, impact on user experience, alignment with project goals, and resource constraints.

Create Concept Sketches or Wireframes:

Translate promising ideas into concept sketches or wireframes. These low-fidelity

representations allow you to visualize and share ideas quickly without getting bogged down in
details.

Iterate and Refine:

Don't expect the first round of ideation to yield the perfect solution. Iteration is a crucial part of
the design process. Continually refine your concepts through feedback and testing.

Validate with Users:

Once you have more developed design concepts, conduct usability testing or gather user
feedback to ensure that your solutions meet user needs and expectations.

Collaboration and Communication:

Throughout the ideation process, maintain open communication within your design team and
with stakeholders. Share ideas, progress, and insights to keep everyone aligned.

Document Your Ideas:

Keep a record of all your ideas, sketches, wireframes, and notes from brainstorming sessions.
This documentation can be valuable for reference and future iterations.

Consider Technical Feasibility:

While ideating, consider the technical constraints and capabilities of your development team or
platform. Innovative ideas are great, but they should also be implementable.

Remember that the ideation process should be dynamic and flexible, allowing for creative
exploration and adaptation as you progress through the UI and UX design project. By following
these steps and involving your team in the ideation process, you're more likely to generate
effective and user-centered design solutions.

113
Creating User Stories:

User stories are a crucial tool in UI (User Interface) and UX (User Experience) design as they
help to define the features and functionality of a product from a user's perspective. User stories
typically follow a specific format and are used to capture the user's needs, goals, and
expectations. Here's how to create user stories for UI and UX design:

User Story Format:

A well-structured user story typically follows this format:

"As a [type of user], I want [an action or feature], so that [benefit or goal]."

Components of a User Story:

Role or Persona (As a [type of user]): Begin the user story by specifying who the user is. This is
often based on the personas you've created during your design process.

Action or Feature (I want [an action or feature]): Describe the specific action or functionality the
user wants to perform or interact with in the product.

Benefit or Goal (so that [benefit or goal]): Explain why the user wants to perform this action or
use this feature. What is the desired outcome, benefit, or goal for the user?

Examples of User Stories:

As a first-time visitor to the website, I want a clear and concise homepage, so that I can quickly
understand what the website offers.

As a registered user, I want the option to save my progress in a multi-step form, so that I can
complete it at my own pace without losing data.

As a mobile app user, I want an intuitive swipe gesture to navigate between screens, so that I can
easily switch between different sections of the app.

As a customer, I want to see product reviews and ratings on the product detail page, so that I can
make an informed purchasing decision.

As a content creator, I want a drag-and-drop interface for uploading and organizing my media
files, so that I can efficiently manage my multimedia content.

Tips for Creating User Stories:

114
Keep Them User-Centered: User stories should always focus on the user's needs, not technical
details. Avoid specifying technical implementation details in user stories.

Make Them Specific and Actionable: Ensure that each user story is clear and specific about what
the user wants to accomplish.

Prioritize User Stories: Assign priority levels to user stories to help your team understand which
features or actions are most important to users.

Iterate and Update: User stories are not set in stone. They can evolve as you gather more user
feedback and insights during the design and development process.

Collaborate with the Team: User stories are most effective when they are created collaboratively
with input from designers, developers, product managers, and other stakeholders.

Estimate Effort: During the development phase, you can estimate the effort required to
implement each user story. This helps in planning and prioritization.

Use a Tool or Template: Many teams use project management or collaboration tools to document
and manage user stories. These tools often provide templates and features for organizing and
tracking user stories.

By creating user stories, you ensure that your UI and UX design efforts are aligned with user
needs and goals throughout the design and development process. These stories serve as a
foundation for making design decisions that enhance the user experience.

Creating scenarios:

Creating scenarios in UI (User Interface) and UX (User Experience) design is an essential step in
designing products that are user-friendly and meet the needs of your target audience. Scenarios
help designers understand how users will interact with a product or application in various
situations. Here are some scenarios you can create to improve UI and UX design:

On boarding Scenario:

Scenario: A new user has just installed your mobile app. They open it for the first time.

Goal: Ensure the on boarding process is smooth and informative.

Steps: Describe the user's actions, such as signing up, setting preferences, or learning about key
features.

115
Task Completion Scenario:

Scenario: A user wants to complete a specific task within your application.

Goal: Evaluate the efficiency and ease of task completion.

Steps: Describe the user's actions, including navigation, data input, and interactions with UI
elements.

Error Handling Scenario:

Scenario: A user encounters an error or issue while using your product.

Goal: Test error message clarity and guide the user toward resolution.

Steps: Describe how the user encounters the error, reads the message, and attempts to resolve it.

Mobile Responsiveness Scenario:

Scenario: A user accesses your website or app on a mobile device with varying screen sizes.

Goal: Ensure a seamless user experience across different devices.

Steps: Describe how the UI elements adapt to different screen sizes and orientations.

Accessibility Scenario:

Scenario: A user with disabilities (e.g., vision impairment) interacts with your interface.

Goal: Ensure your design is inclusive and accessible to all users.

Steps: Describe how the user relies on assistive technologies, like screen readers, and interacts
with accessible features.

User Feedback Scenario:

Scenario: A user wants to provide feedback or report a problem.

Goal: Make it easy for users to communicate their thoughts and issues.

Steps: Describe the user's journey from encountering a feedback option to submitting their
feedback.

116
Navigation Scenario:

Scenario: A user needs to find specific information or move between different sections of your
application.

Goal: Assess the intuitiveness and effectiveness of your navigation structure.

Steps: Describe how the user navigates through menus, tabs, or links to reach their destination.

Multi-Platform Scenario:

Scenario: A user starts an interaction on one platform (e.g., web) and continues it on another
(e.g., mobile app).

Goal: Ensure a consistent and seamless experience across platforms.

Steps: Describe how the user switches between platforms and whether their progress is
synchronized.

E-commerce Checkout Scenario:

Scenario: A user wants to make a purchase on your e-commerce website.

Goal: Optimize the checkout process for efficiency and ease of use.

Steps: Describe the user's journey from adding items to the cart, entering payment details, and
completing the purchase.

User Support Scenario:

Scenario: A user needs assistance from your customer support team.

Goal: Provide accessible and effective support channels.

Steps: Describe how the user accesses support, whether through chat, email, or a knowledge
base.

By creating and testing these scenarios, you can identify design flaws and make improvements to
enhance the overall UI and UX of your product or application. Remember to involve actual users
or conduct usability testing to gather valuable feedback and insights.

117
Flow diagrams:

Flow diagrams are a valuable tool in UI (User Interface) and UX (User Experience) design to
visualize the user journey and interactions within a digital product or website. They help
designers and stakeholders understand the user experience and ensure that it aligns with the
project's goals. Below, I'll outline how to create flow diagrams for UI and UX design:

1. Define the Scope and Goals:

Before you start creating flow diagrams, clearly define the project's scope and goals. Understand
the purpose of the product, the target audience, and the desired user experience.

2. Identify User Personas:

Create user personas to represent different types of users who will interact with your product.
This helps you tailor the design to meet their specific needs.

3. Determine User Flows:

Identify the main user flows within your product. These are the paths that users will take to
achieve their goals. Common flows include onboarding, making a purchase, signing up, or
accessing specific content.

4. Start Sketching:

Begin by sketching rough flow diagrams on paper or using digital sketching tools. These
sketches don't need to be detailed; they should serve as a rough outline of the user's journey.

5. Choose the Right Symbols:

In UI/UX flow diagrams, use standardized symbols to represent different elements. Common
symbols include rectangles for screens/pages, arrows for transitions, and diamonds for decision
points.

6. Create a Digital Version:

Once you have a basic sketch, use a digital design tool like Adobe XD, Sketch, Figma, or a
flowchart-specific tool like Lucidchart to create a polished version of your flow diagram. These
tools often come with libraries of UI elements and icons for easy drag-and-drop.

118
7. Define User Actions:

On your flow diagram, clearly label user actions such as clicks, taps, swipes, or inputs. Indicate
what happens at each step, including any system responses or feedback.

8. Add Annotations:

Include annotations or notes to provide additional context or explanations for specific elements
or interactions within the flow.

9. Test and Iterate:

Share your flow diagrams with team members, stakeholders, or potential users to gather
feedback. Use their insights to iterate on your design and improve the user experience.

10. Keep It Updated:

- As your project evolves, update your flow diagrams to reflect any changes in the user journey
or design. This ensures that everyone involved in the project has access to the latest information.

11. Consider Interactive Prototypes:

- While flow diagrams are great for illustrating the overall structure and navigation of a product,
consider creating interactive prototypes to provide a more realistic experience of the user
interface and interactions.

12. Accessibility and Responsiveness:

- Ensure that your flow diagrams reflect considerations for accessibility and responsiveness in
design. This is crucial for delivering an inclusive user experience across different devices and
user abilities.

Remember that flow diagrams are just one part of the UI/UX design process. They serve as a
communication tool to align stakeholders and provide a visual representation of the user journey.
The actual design and development process will involve more detailed work on individual
screens, interactions, and usability testing.

119
Flow mapping:

Flow mapping, also known as user flow mapping or simply user flow, is a visual representation
of the paths users take through a digital product or website. It is an essential tool in UI (User
Interface) and UX (User Experience) design, helping designers understand how users navigate
and interact with a system. Here's how to create flow maps in UI/UX design:

1. Define Your Objectives:

Before you start creating flow maps, clearly define your design objectives. Understand the
purpose of the flow map, what specific aspect of the user experience you're analyzing or
improving, and the goals you aim to achieve.

2. Identify User Personas:

As with any UI/UX design project, start by identifying user personas to represent the different
types of users who will interact with your product. This helps you design for specific user needs
and behaviors.

3. Map User Flows:

Identify the user flows you want to map. User flows represent the various paths that users take to
accomplish specific tasks or goals within your digital product. Common user flows include sign-
up, login, onboarding, making a purchase, and more.

4. Sketch Initial User Flows:

Begin by sketching out the initial user flows on paper or using digital sketching tools. These
sketches serve as a rough outline of the user's journey through the system. Keep these sketches
simple and focused on the user's main steps and interactions.

5. Choose a Design Tool:

To create digital flow maps, choose a design tool that suits your preferences. Tools like Adobe
XD, Sketch, Figma, or dedicated flowchart software can help you create polished and
professional flow maps.

6. Create a Digital Version:

Translate your rough sketches into a digital format. Use the design tool to create a clean and
organized version of your flow maps. In your digital version, you can add more detail and
specificity to each step.

120
7. Define User Actions:

Clearly label user actions at each step of the flow. Indicate what the user does (e.g., click, tap,
input information) and what the system's response is (e.g., screen transition, feedback message).

8. Use Visual Cues:

Employ visual cues such as arrows, lines, or connectors to show the direction of the flow.
Arrows typically represent the user's path, while lines or connectors indicate connections
between screens or steps.

9. Add Annotations:

Include annotations or notes to provide additional context or explanations for specific elements
or interactions within the flow. Annotations can help team members and stakeholders understand
the design rationale.

10. Test and Iterate:

- Share your flow maps with others, including team members, stakeholders, or potential users, to
gather feedback. Use their input to iterate on your design and make improvements to the user
experience.

11. Accessibility and Responsiveness:

- Ensure that your flow maps reflect considerations for accessibility and responsiveness in
design. This is vital for delivering an inclusive and user-friendly experience across various
devices and user abilities.

Flow mapping is a valuable part of the UI/UX design process as it helps designers visualize and
communicate the user journey effectively. However, it should be complemented with other
design activities, such as wireframing, prototyping, and usability testing, to create a well-rounded
and user-centered product.

Information architecture:

Information architecture (IA) plays a crucial role in the field of user interface (UI) and user
experience (UX) design. It involves organizing and structuring information in a way that makes
it easy for users to find what they need and navigate through a digital product or website.
Effective information architecture enhances the overall user experience by ensuring content is
logically organized and accessible. Here's how information architecture is used in UI and UX
design:

121
User Research and Analysis: Before designing an information architecture, it's essential to
understand the target audience, their goals, and their information needs. Conduct user research,
surveys, and usability testing to gather insights into user behavior and preferences.

Content Inventory and Audit: Create a comprehensive inventory of all the content that will be
part of the digital product or website. Conduct a content audit to evaluate the relevance, quality,
and organization of existing content.

User Flows and Task Analysis: Map out user flows to understand how users will navigate
through the interface and accomplish tasks. Analyze the steps users need to take to achieve their
goals and identify potential pain points.

Card Sorting: Card sorting exercises can help determine the most intuitive way to organize
content and navigation. Users are asked to categorize and prioritize content items, revealing
patterns in how they expect information to be structured.

Sitemaps: Create sitemaps to visually represent the hierarchical structure of the digital product or
website. Sitemaps show the relationships between different sections and pages, helping designers
plan the navigation system.

Wireframing: Design wireframes that serve as low-fidelity representations of the UI layout and
content placement. Wireframes focus on the structural and functional aspects of the design
without the distraction of visual details.

Prototyping: Develop interactive prototypes to test the IA and navigation. Prototypes allow
designers to see how users interact with the product, identify navigation issues, and make
necessary adjustments before finalizing the design.

Navigation Design: Design the navigation menu and elements such as breadcrumbs, search bars,
and filters to facilitate easy access to content. Ensure that navigation labels are clear and concise.

Information Hierarchy: Establish a clear hierarchy for content, emphasizing the most important
information and reducing cognitive load. Use techniques like typography, color, and spacing to
visually convey hierarchy.

Content Taxonomy: Organize content into categories and subcategories based on user mental
models and the product's objectives. Use descriptive labels that resonate with users' language and
understanding.

Search and Filtering: Implement robust search functionality and filtering options to help users
quickly find specific information or products, especially in content-rich applications.

122
User Testing: Continuously conduct usability testing to gather feedback on the information
architecture and navigation. Make iterative improvements based on user insights.

Accessibility: Ensure that the information architecture is accessible to all users, including those
with disabilities. Follow accessibility guidelines to provide an inclusive experience.

Responsive Design: Adapt the information architecture to different screen sizes and devices,
ensuring a consistent and user-friendly experience on desktops, tablets, and smartphones.

Content Management: Develop a content management strategy to maintain the integrity of the
information architecture as new content is added or existing content is updated.

Analytics and Iteration: Monitor user behavior and gather analytics data to identify areas where
the information architecture can be improved. Iteratively refine the IA to enhance the overall
UX.

Incorporating information architecture principles into UI and UX design helps designers create
interfaces that are intuitive, user-friendly, and conducive to achieving the goals of both users and
the digital product or website. It ultimately leads to a more satisfying and efficient user
experience.

123
124