lOMoARcPSD|43432534

CCS370 UI AND UX Design Notes

UI & UX design (Anna University)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

PET ENGINEERING COLLEGE

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

SUBJECT NAME: UI AND UX DESIGN

SUBJECT CODE: CCS370

REGULATION: 2021

YEAR: III

SEMESTER: VI

Downloaded by Rafikhan lukman1(rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

CCS370 UI AND UX DESIGN

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

What is UI?

UI stands for user interface.

It is the point of contact between humans and computers.
For example, screens, sounds, overall style, and responsiveness are all elements of UI.
A user interface involves the following four components:
1. Navigational elements. Navigational elements help users navigate an interface.
Example: slide bars, search fields, and back arrows.
2. Input controls. On-page elements that enable users to input information are input
controls.
Example: Buttons, checkboxes, and text fields
3. Informational components. Informational components are used to communicate
information to the user.
Example: A progress bar
4. Containers. Containers organize content into easily digestible sections.
Example: accordion menu

UI design UX design
Focuses on interaction design, the
visual elements of a website or Focuses on satisfying user intent and providing a
application, and ensuring a clear navigation path to access information on a
navigation path is visually site or app.
attractive and effortless to use.

What is UI design?

User interface (UI) design is the process designers use to build interfaces in software or
computerized devices, focusing on looks or style. User interface design is responsible for a product's
appearance, interactivity, usability, behavior, and overall feel.
Types of UI design
Many different types of UI design exist. The table below compiles a few of the most popular and
well-known.
 Graphical User Interface (GUI): A graphical user interface allows users to
interact with a device through graphical icons.
Example: laptop’s desktop or home screen
 Additional types of UI design include
 Touch screen user interfaces are GUIs that use touch screen technology rather
than a mouse or stylus.

Downloaded by Rafikhan lukman2(rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Form-based user interfaces use text boxes, checkboxes, and other informational
components. They enable users to fill out electronic forms.

Tips for excellent UI design

Simplicity, familiarity, and consistency are a few of the most important principles for a UI
designer to keep in mind. Consider the following UI design tips from industry experts like Apple and
Google.
 Format content to fit the screen of the intended device. Users should not need to zoom
or scroll horizontally to view the entirety of a page’s content.
 Ensure there is adequate contrast between the background and page elements like text to
increase legibility.
 Alignment doesn’t just apply to text. Buttons and images must also be aligned to
demonstrate relevance and relativity to users.
 High image resolution is essential for all image assets.
 Make sure your UI design is responsive. Whether users view the UI on a large screen,
small screen, in portrait mode, or landscape mode, they should be able to read and
maneuver it with ease.
Key principles of UI design
An easy way to recall the fundamental principles of UI design is to learn the four c’s:
 Control. The users should be in control of the interface.
 Consistency. Use common elements to make your UI predictable and easy to navigate, even
for novice users.
 Comfortability. Interacting with a product should be an effortless, comfortable experience.
 Cognitive load. It’s critical to be mindful of bombarding users with content. Be as clear and
concise as possible.
UI Design Tools:
 Figma
 Adobe XD
 Sketch
 InDesign
Guidelines:
1. Make buttons and other common elements perform predictably (including responses
such as pinch-to-zoom) so users can unconsciously use them everywhere.
2. Maintain high discoverability. Clearly label icons and include well-indicated affordances:
e.g., shadows for buttons.
3. Keep interfaces simple (with only elements that help serve users’ purposes) and create
an “invisible” feel.
4. Respect the user’s eye and attention regarding layout. Focus on hierarchy and readability:
a. Use proper alignment. Typically choose edge (over center) alignment.
b. Draw attention to key features using:
i. Color, brightness and contrast. Avoid including colors or buttons excessively.
ii. Text via font sizes, bold type/weighting, italics, capitals and distance between
letters. Users should pick up meanings just by scanning.

3
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
 InDesign
Guidelines:
5. Make buttons and other common elements perform predictably (including responses
such as pinch-to-zoom) so users can unconsciously use them everywhere.
6. Maintain high discoverability. Clearly label icons and include well-indicated affordances:
e.g., shadows for buttons.
7. Keep interfaces simple (with only elements that help serve users’ purposes) and create
an “invisible” feel.
8. Respect the user’s eye and attention regarding layout. Focus on hierarchy and readability:
a. Use proper alignment. Typically choose edge (over center) alignment.
b. Draw attention to key features using:
i. Color, brightness and contrast. Avoid including colors or buttons excessively.
ii. Text via font sizes, bold type/weighting, italics, capitals and distance between
letters. Users should pick up meanings just by scanning.
9. Minimize the number of actions for performing tasks but focus on one chief function
per page. Guide users by indicating preferred actions.
10. Put controls near objects that users want to control. For example, a button to submit a
form should be near the form.
11. Keep users informed regarding system responses/actions with feedback.
12. Use appropriate UI design patterns to help guide users and reduce burdens (e.g., pre-fill
forms). Maintain brand consistency.
13. Always provide next steps which users can deduce naturally, whatever their context.

CORE STAGES OF DESIGN THINKING PROCESS:

 Design thinking is a methodology which provides a solution-based approach to solving
problems.
 Design thinking is a non-linear, iterative process
 It is important to note the five stages of design thinking are not always sequential. They do
not have to follow a specific order, and they can often occur in parallel or be repeated
iteratively.

The five stages of design thinking are:

 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.

4
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Stage 1: Empathize—Research Your Users' Needs

 In the first phase of design thinking you gain real insight into users and their needs.
 Focuses on user-centric research. You want to gain an empathic understanding of the
problem you are trying to solve.

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

 Define the problem statement in a human-centered manner.
 Organize the information you have gathered during the Empathize stage.
 Analyze your observations to define the core problems.

 Defining the problem and problem statement must be done in a human-centered

manner.

Stage 3: Ideate—Challenge Assumptions and Create Ideas

 Identify innovative solutions to the problem statement you’ve created.
 Look at the problem from different perspectives and ideate innovative solutions to your
problem statement.

 There are hundreds of ideation techniques such as Brainstorm, Brainwrite, Worst Possible
Idea and SCAMPER.

 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 

Stage 4: Prototype—Start to Create Solutions

 Identify the best possible solution.
 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. 
 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. 

CONVERGENT AND DIVERGENT THINKING:

 Divergence and convergence is a problem-solving method that emphasizes empathy,
experimentation, and iteration.
 It is a human-centered design approach that focuses on understanding people's needs,
behaviors, and motivations to design creative solutions that meet those needs effectively.
 Coined by psychologist J.P. Guilford in the 1950
 These cycles of thinking provide the structure for this iterative design thinking process.
 Divergence and convergence are like the inhale and exhale of the design thinking process.

5
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
Divergence vs convergence

 Divergence creates space and possibilities, while convergence brings focus and direction.
 Designers move back and forth between these two processes throughout the design thinking
process, building on the insights and ideas generated during each cycle to refine and
improve the solution.
 Divergent and convergent phases are non-linear.

Divergence Thinking:
 Divergence is the process of exploring and generating a wide range of ideas and possibilities
without any judgment or criticism.
 Divergent thinking allows designers to expand the possibilities and consider different
perspectives, angles, and dimensions of the problem





6
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Convergent Thinking:
 Convergent thinking refers to the process of selecting, evaluating, and refining the most
promising ideas from the divergent phase.
 It involves narrowing down and refining possibilities by selecting the best ideas and
combining them to create a coherent and effective solution.

Benefits of divergent and convergent thinking

 Increased creativity and innovation

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

How to apply divergent and convergent thinking

1. Diverge to ideate
 Generate a wide range of ideas without judgment or criticism in a brainstorming session or
other quick ideation exercise.
 Use this discovery period to identify the problem and encourage team members to come up
with many possible solutions.

Conducting a Brainstorm template

Use this template to hit the ground running with big ideas that will move your design
process forward.

 The group can vote to select which captures the problem at hand, or the facilitator can
assign a question to each participant.
 Set aside some time for the group to brainstorm on their own, and then bring everyone
together to build upon and clarify the ideas.

7
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

2. Converge to evaluate the ideas

 Evaluate the ideas based on feasibility, viability, and desirability using decision matrices,
prioritization grids, or other evaluation tools.

 The goal in this convergent phase is to clearly define the problem, then understand and
map any assumptions behind the ideas, and clarify the requirements for an effective
solution.
 Evaluate the ideas the team has so far with the Critique template.

How to run a critique

1. Present the ideas and context from the brainstorming session

2. Invite feedback across three categories: what went well, what didn’t go well, and
what could be improved
3. Gather the feedback, organize it by theme, and create actionable next steps within
the same workspace
3. Diverge again to develop and prototype
 Based on the requirements, begin finding solutions that meet requirements and
address end-user pain points and concerns.
 Improve upon the selected ideas using prototyping and user testing, gathering feedback
from stakeholders to ensure that the final solution meets their needs and preferences.

4. Converge again to further refine

 The final divergent step involves refining the solution, testing it for viability, and getting the
buy-in and resources to implement it.

5. Implement

 Implement the selected ideas and monitor their effectiveness, iterating the process as needed
to continue improving the customer experience.

Tips to get the most out of divergent & convergent exercises

1. Use a variety of ideation techniques

2. Avoid premature judgment
3. Test early and often
4. Be open and adaptable
5. Use a visual tool to make collaboration easier

BRAINSTORMING

Definition of brainstorming

 Brainstorming is a creative thinking technique for coming up with new ideas and solving
problems.
 Teams use this ideation method to encourage new ways of thinking and collectively
generate solutions.
 Brainstorming encourages free thinking and allows for all ideas to be voiced without
judgment, fostering an open and innovative environment.

 This process typically involves a group of people, although it can be done individually as
8
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
well.
 Brainstorming usually takes place in a group setting where people get together to creatively
solve problems and come up with ideas.
 However, it’s also useful for individuals who need to explore novel solutions to a problem.
Sitting down by yourself and writing down solutions to potential problems is a great way to
brainstorm individually.

Purpose of brainstorming:

 The primary purpose of a brainstorming session is to generate and document many ideas, no
matter how “out there” they might seem.
 Through this lateral thinking process, inventive ideas are suggested, which sparks creative
solutions.
 By encouraging everyone to think more freely and not be afraid to share their ideas, teams
can build on each other’s thoughts to find the best possible solution to a problem.

Benefits of brainstorming

 Encourages creativity

Brainstorming sessions are meant to be free of judgment. Everyone involved is meant to feel
safe and confident enough to speak their minds. There will be some good and some bad ideas, but
this doesn’t matter as long as the final outcome is one that can solve the problem.

 Fosters collaboration and team building

Brainstorming is not only good for problem-solving. It also allows employees and team
members to understand how the people around them think. It helps the team get to know each
other’s strengths and weaknesses..

 Generates innovative, revolutionary ideas

Brainstorming is the perfect mix between a free-thinking, creative environment and one
that is governed by rules. No two people think alike. So, combining the good parts of
everyone’s answers will result in holistic and revolutionary solutions.

 Establishes different perspectives

One of the major benefits of brainstorming is that it allows and encourages all members
of the session to freely propose ideas. This type of environment fosters courage in people who
may not usually offer their perspective on a problem.

 Introduces many ideas quickly

Brainstorming encourages teams to come up with many ideas in a relatively short period of
time.

9
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
Types of brainstorming techniques:

1. Reverse brainstorming
In a typical brainstorming session, the group is asked to consider solutions to a problem.
Reverse brainstorming is simply the opposite: teams are asked to ideate on the problem instead of
the solution. This type of brainstorming is done before the start of an important project, as it helps
teams anticipate any future obstacles that might arise.

2. Random word brainstorming

One of the main goals of a brainstorming session is to come up with new ideas. One of the
best ways to do this is to say the first words that come to mind when a specific topic or subject is
mentioned. Random word brainstorming allows for exactly that. The team is given a problem, and
they need to shout out the first words that they think of, regardless of what they are. These words
are then written down and later put into interesting combinations to see if they will lead to a usable
solution. This brainstorming method is extremely fast and usually very efficient at solving a defined
problem.

3. The 5 Whys Method

Like the reverse brainstorming method, the 5 Whys method aims to look at the root causes
of a problem to stop that same issue from arising again. This method attempts to curb the problem
before it can reoccur by asking the question “why?” over and over until it can no longer be
answered. Once you reach this stage, you have arrived at the root cause of the issue.

4. SCAMPER model
Developed by Bob Earle, an author of creativity books for kids, the SCAMPER model was
originally a game aimed at imagination development in adolescents. It has, however, become
popular in the corporate world as a means of improving and encouraging creativity in team
members when dealing with complex, defined problems. Using this model, your team will view a
problem through 7 filters: substitute, combine, adapt, modify, put to another use, eliminate, and
reverse.

5. Rapid ideation
Rapid ideation brainstorming is almost the exact same thinking model as random word
brainstorming. In this method, however, everyone writes down the solutions they are thinking of
instead of shouting them out. This gives participants a bit more privacy with their immediate
thoughts — possibly leading to even more creative and revolutionary outcomes.

6. Starbursting
Once again, brainstorming can change based on the team’s perspective and each session’s
expected outcome. Starburst brainstorming focuses on getting the team to ask questions instead of
coming up with answers.

How to hold a brainstorming workshop:

1. Assign a facilitator
When done as a group, a brainstorming session needs to have boundaries. You need to
choose someone who will facilitate the session and provide guidelines for the thinking exercises.
This is so the session doesn’t get too scattered and stays on the right track. The facilitator should
pose questions and guide the group from start to finish.

10
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
2. Establish context and ensure group understanding
A brainstorming session cannot be properly carried out without context. The group must
understand why they are meeting and what the end goal of the session is.. The brainstorming
method that will be used should also be established and explained at the outset.

3. Define an objective
While brainstorming is often looked at as a form of free-thinking creativity, it is best to try
to stay within certain rules. It’s essential that you define a clear objective and use the session to
reach your predetermined goal.

4. Set a time limit

Setting a defined time limit before the session starts is important to the success of your
brainstorming session. No doubt your team could come up with countless ideas, but there has to be
a limit on how long the session can run.

5. Decide on the brainstorming technique

The brainstorming technique that will be used must be decided on before the session begins.
The best way to do this is to look at the problem at hand. If you’re looking to prevent obstacles
from arising in the future, try the “5 Whys” technique. If you’re looking to come up with new
marketing ideas or get creative with workplace conflicts, try the rapid ideation technique.

6. Set some ground rules

Brainstorming ground rules are essential to to the success of the session, as they keep
everyone focused on the topic at hand and ensure that no one goes off track.

7. Capture all ideas

The entire point of a brainstorming session is to come up with as many ideas as possible,
regardless of whether the standalone suggestion will lead to success. This means that you need to
use the right tools to document the ideas being suggested.

8. Discuss and vote on ideas

After all the ideas have been captured, it’s time to discuss them. The team needs to be
productive in choosing a creative idea that suits the problem, or they can try combining a few ideas
to come up with a holistic solution. To make decisions as a group and come to an agreement, teams
can use the dot voting method. This technique reveals group priorities and helps everyone reach a
consensus on the direction to take.

9. Turn ideas into action

Once the final idea has been chosen, it’s time to create a plan of action and a deadline for the
idea to be put in place.

Tips for brainstorming activities

 Record all ideas
If you want to have a successful and productive brainstorming session, it’s important
that you capture every idea suggested, good and bad. An idea might seem silly when first
brought up, but it might become an invaluable idea as the session moves on. Capture everything,
and right at the end, work out which ideas best suit the problem.

Downloaded by Rafikhan lukman11

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
 Ensure that everyone’s ideas are heard
When brainstorming is done as a group activity, everyone needs to feel comfortable
and confident to propose ideas. The best way to make sure the environment fosters these
feelings is to make the session feel like a conversation, not a presentation. Create a safe and
open environment that gives everyone equal opportunity to voice their opinions and ideas.

 Focus on quantity
People often like to say, "Focus on quality, not quantity," but it’s the opposite when
brainstorming. In a brainstorming session, you should focus on getting as many ideas on the
board as possible, even if they're only one-word ideas. These can all be used to come to a
holistic solution at the end of the session.

 Mix it up
Brainstorming should be a fun and creative endeavor. You shouldn’t be too rigid —
though some ground rules are important. If your team has weekly brainstorming sessions,
try new brainstorming techniques and activities each time you meet. This will keep your
team members on their toes and help make them excited about the next meeting.

 Avoid criticism

There are no bad ideas in a brainstorming session. This is the attitude that all team
members must adopt when entering the session. No one should be criticized for the ideas
that they propose.

OBSERVATIONAL EMPATHY:
Empathy is defined as “the action of understanding, being aware of, being sensitive to, and
vicariously experiencing the feelings, thoughts, and experience of another without having the
feelings, thoughts, and experience fully communicated in an objectively explicit manner.”

Designers need to build empathy for their users in order to take the right course of action.
It’s important to understand how the user feels when interacting with a certain product or interface;
does the layout of this website evoke feelings of frustration? What emotions does the user go
through when navigating this app?

Where does empathy fit into the Design Thinking process?

 Empathy is considered the starting point for any design project, and constitutes phase one
of the Design Thinking process.
 During empathize phase, the designer spends time getting to know the user and
understanding their needs, wants, and objectives.
 The empathize phase requires you to set aside your assumptions.
 The first step in empathizing with your users is to suspend your own view of the world
around you in order to truly see it through your users’ eyes. When it comes to Design
Thinking and human-centered design, it’s time to stop guessing and start gathering real
insights about the user!

Downloaded by Rafikhan lukman12

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
What is empathic design?

One of the main objective of empathize stage is to identify user needs and behaviors that
are latent, or unarticulated. As a designer, it’s important to distinguish between what people say
they would do in a certain situation, and what they actually do.

Empathic research and design is not concerned with facts about the user, such as their age or
location. Rather, it focuses on their feelings towards a product and their motivations in certain
situations. Why do they behave in a certain way? Why do they prefer to do this instead of that?
Why do they click here rather than there when presented with a particular screen or page?

How to become a more empathic designer

 Practice empathy in your everyday life
 The power of facial expressions
 Assume a beginner’s mindset (Listen, don’t judge!)
 Pay attention to body language
Key empathy-building methods
1. Empathy interviews

One way to build empathy is by conducting empathy interviews. The key to an effective
empathy interview is to structure it as an open conversation; don’t try to steer the session with a set
list of questions. Remember, the goal is to uncover as much insight as possible—not to confirm or
negate a preconceived notion. Excellent tips on interviewing for empathy: constantly asking “why?”
,asking non-binary questions, encouraging storytelling, and paying attention to nonverbal cues.

2. Immersion and observation

It is also extremely useful to observe your users in action, be it in their natural environment
or immersed in a certain situation. Observing your users, either by photographing or videoing them,
helps to identify needs, motivations, or challenges that they’re not aware of—and therefore not able
to articulate.

There are several ways of observing your users.

 One option is to bring them in and observe them while they interact with the product,
or problem, you are trying to design for. You might video them or record their screen
as they navigate a website.
 Another option is to ask your users to keep their own photo or video journal over a
certain time period, or while completing certain tasks in their everyday lives. The
advantage of this is that your users aren’t so aware of being watched and may
therefore act more naturally.

3. Extreme users

In their quest to build empathy and truly understand the problem that their users face, designers will
often turn to extreme users. Extreme users help to reframe the problem and uncover

Downloaded by Rafikhan lukman13

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
new insights: “Extreme users’ needs are somewhat amplified. They need less or more of something
to solve their problems. They often find workarounds to existing problems, unlike average users.”

Engaging with extreme users can help you to identify problems and needs that so-called mainstream
users.

4. Constant curiosity: Ask what, how, and why?

Throughout the empathise phase, you should constantly be considering the what, how, and
why of your users’ behaviour. The what-how-why framework can help you translate your
(assumption-free) observations into more abstract user motivations. Divide your page into three
sections and break down what you’ve observed as follows:

 What? Refers to the details of what has happened: for example, the user took the following
actions when entering their payment details on an ecommerce website. 
 How? Here you will consider how the user has completed these actions. What were their
facial expressions? Were they exerting a lot of effort? Did they seem at ease, frustrated, or
confused?
 Why? Now it’s time to make some educated guesses about the user’s motivations and
emotions as they complete these tasks.

5. Empathy maps

Empathy maps are another great tool not only for getting to know your users, but for
sharing this knowledge across the wider team. An empathy map is “a collaborative visualization
used to articulate what we know about a particular type of user.

Empathy mapping requires you to consider your users in relation to four different quadrants:

1. Says: Contains direct quotes based on what the user has said, for example during an
empathy interview.
2. Thinks: Considers what the user might be thinking, but may not want to explicitly reveal.
For example: “Am I stupid for not being able to navigate this website?”
3. Does: Looks at concrete actions the user takes, for example: refreshing a page, clicking a
button, comparing different options before making a purchase.
4. Feels: Considers what emotions the user is experiencing at certain points. For example:
“Frustrated: Can’t find what they are looking for on the page.”

After the empathise phase, you’ll go on to define your problem statement based on what
you’ve learned about your users. This will then be followed by ideation, prototyping, and testing

14

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

UNIT II FOUNDATIONS OF UI DESIGN

Visual and UI Principles - UI Elements and Patterns - Interaction
Behaviors and Principles – Branding - Style Guides
VISUAL AND UI PRINCIPLES:
Visual hierarchy is an optimal arrangement of screen elements, in such a way that
they appear to be balanced, organized, functional, and aesthetically pleasing to the human
eye.
There are 12 Visual Design Principles
1. Size and Scale
2. Color Contrast
3. Alignment
4. Emphasis
5. Balanced Typography
6. Repetition
7. White/Negative Spacing
8. Proximity
9. Movement
10. Proportion
11. Perspective
12. Reading Patterns
1. Size and Scale
 Size and scale aid in balancing out elements based on their relevance and
importance.
 Maintain a fixed-size system for all elements.
 For example, large and bold text understood is important whereas small and
lightweight text is not too emphasized.
 For text define H1, H2 so on till H6 sizes to place in balance.
2. Color Contrast
 Color and Contrast is another principle used to make elements stand out.
 It is associated with the use of complementary color pairing. It makes the design
pop and grabs the user’s attention on a specific element on the screen.
 To implement this in design, always put important information in bright to make
the design or information pop, to easily capture user attention.
 Warm colors will stand out against dark backgrounds, making them appear closer
than cool colors on a dark background.
 Whereas, cool colors stand out over a light background, making them appear
closer than warm colors on a light background. So use these colors, in accordance
with your color scheme.
3. Alignment
 This describes the symmetric distribution of elements in designs.
 Alignment helps create a structure in design and information.

15

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
 It mentions having balance and hierarchy in all types of screen elements such as
images, text, and icons.
 With the help of alignment, users know where to look, where to read, and how to
interact. This can be seen in all designs whether websites or map outlines.
4. Emphasis
There can be times when you as a designer want to focus on a slogan, text
paragraph, or image, at this time emphasis comes into the picture. This helps deliver a clear
message to the user about the context. Emphasis is both comparative and relative, as when
trying to put emphasis on any element one stands out and the other settles down.
Emphasis can be achieved in a variety of ways, such as:
 Scale – By rescaling elements to make them appear larger and bigger as more the
size, the better it grabs the attention.
 Positioning – Placement of the element also comes under putting emphasis and can
be centered aligned, or peripheral
 Highlighting using color, patterns, or texture
 Use of font weights such as bold, semi bold, or even extra bold.
 Underlining the information
 Putting pieces of information in Capital letters or sometimes under inverted commas.
 Using lines and arrows to grab attention
5. Balance Typography
 Text hierarchy is crucial to achieve as more than 80% of the website or app have
text content, including paragraph headings and image captions.
 Balancing out the textual content is very important, this can be done with the help
of font weight, increasing heading font size, bold or underlining important details,
and adding color to the text.
 Proper text hierarchy makes the layout look more pleasing to the eye and cleaner.
 It reduces the clutter on the read and enforces better readability.
6. Repetition
 Repetition in design refers to employing the same elements repeatedly throughout
a piece of work, including colors, patterns, typefaces, images, textures, and more.
 Repeating elements over and over again in the design creates better consistency
and ease for the user to know what to do and where to find something.
 This is majorly a good principle to use for motion graphics while creating a
motion video repeating hills and mountains continuously to avoid any breaks in
visuals.
 Also having consistent logos, icons, CTA, and colors throughout the product also
creates brand identity.
 Repetitive information also stays long in user memory, using a repetitive app over
a long period of time makes the muscle memory strong and thus users are very
attached to the app/website.
7. Negative Spacing

Downloaded by Rafikhan lukman16

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
 Cluttered websites reduce the ability to scan and read information effectively,
whereas a dense website has information evenly spread with the help of proper
spacing between multiple screen elements. This spacing is called or referred to as
negative or white spacing.
 Effective use of white space, as a designer, lets the elements breathe while
experimenting with alignment, balance, contrast, and movement.
 Without the proper use of white or negative spacing, it makes the content looks
flooded, unorganized, and overwhelming to the user
8. Proximity
 To make the relevant elements appear to be a group, proximity principles talk
about adequate spacing between elements to help users visually combine or
separate them from each other.
 Elements that are near to each other are often grounded together as one part,
whereas a good amount of spacing between elements separates them from each
other.
 Elements that are considered as a group would also be assumed to be having the
same functionality, quality, and traits as each other.
9. Movement
 Movement refers to how a user or a reader scans through the content. How do they
move from one point to another?
 In user experience, the importance of movement gives a traceable path of how users
have scanned through the website or app while approaching a goal.
 It can be created in a design by using lines that trace paths between different focal
points. It helps users to move forward as well as come back if they are lost in
between the process.
10. Proportion
 Proportion in design talks about how 2 elements relate to each other even after being
different in size, color, and functionality.
 Visual designers may not always need to worry about an element’s exact size or
placement, but they may be much more deeply concerned with how that element
interacts with other parts within the design as a whole.
 There can be many sections, groups, chunks, and individual pieces of information
which might be fitting a screen but what is important to be concerned about is how
they are relating to each other such that they are pleasing to the eye as well as
understandable at the same time.
11. Perspective
This visual principle of design indicated the depth and how it was conveyed. It is the
process of designing while keeping space in mind, as it all depends on how humans perceive
space and understand it. There are different types of perspectives through which humans
look, perceive, and interpret information:

Downloaded by Rafikhan lukman17

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
 One-point perspective – Having only one vanishing point falling opposite to the
viewer’s eye.
 Two-point perspective – Having two vanishing points, often used in architectural
designs
 Three-point perspective – Having three vanishing points, in horizontal and vertical
lines.
12. Reading Pattern
 There is always a pattern in how users scan and read any information.
 From numerous research, it is found that human is read from top to bottom and based
on cultural writing it can be right to left(like Hebrew and Urdu) or left to right(like
English).
 There are typically a few patterns like:
oZ-Shaped: Scan the website from the top left to the bottom right of the page.
Making a z shape while scanning through content.
oF-Shaped: When a user starts scanning data in F shape they start by reading
the top line from left to right and then going straight to the bottom. Such as
Google’s search result page.
oLayered Cake: When users only focus on the top heading and title while
leaving the rest of the content unread.
oSpotted: When the user focused on specific content scanning in a random
manner.
10 essential UI design principles
Effective user interface design is about removing as many obstacles, bottlenecks,
stumbling blocks, and potential causes of confusion as possible from the user experience.
1. Keep the UI design simple
2. Predict and preempt
3. Put the user in the driving seat
4. Be methodical and consistent
5. Avoid unnecessary complexity
6. Provide clear signposts
7. Be tolerant of mistakes
8. Give relevant feedback
9. Prioritize functions
10. Design the UI for accessibility

UI ELEMENTS:
UI elements are the visual elements that people can see on a website or app interface
(including the buttons, menus, text fields, progress bars, and so on). They enable users to
interact smoothly with the website or mobile app and get what they want from it. They are
also essential tools for designers looking to create a unique visual language and to ensure
consistency across different products.
The UI elements are grouped into four categories:

Downloaded by Rafikhan lukman18

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
 Input controls
 Navigational components
 Informational components
 Containers

 Input controls:
Input controls are a series of UI elements that enable users to input information so that
your website/app can react correctly and quickly to meet their needs. Many basic UI
components come under this category, such as buttons, text fields, images, checkboxes,
radius buttons, and drop-down lists. Some of the main input controls are:
1. Buttons:
A Button traditionally appears as a rectangular shape labeled with an icon, text or
both, and is typically used to handle user actions, like submitting, sending, uploading,
downloading, and so on.

2. Text fields
Text fields, also known as Input fields, are where users can enter text. This can be a
single or multiple lines. These are not limited to forms; any field that enables people to input
text or information comes under this heading, such as the commonly-used "Search" field.

3. Images & icons

Images or icons are intuitive image components that can be used to enhance
explanations or demonstrations and make the site easier to use. As well has helping users to
understand and navigate the website/app better, they are a great way to improve the entire
visual appeal.
In some cases, they can be hyperlinked and used as action buttons.

4. Checkboxes

Downloaded by Rafikhan lukman19

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
A checkbox is a basic UI component that allows users to make a binary choice simply
by checking or unchecking an option. Designers usually use a group of checkboxes, grouped
vertically or horizontally, to provide users with more options. They are often a key feature of
form or database design where they can improve the user experience.

5. Radio buttons
Radio buttons are simple circular elements that provide users with multiple options, a
bit like checkboxes. However, radio buttons only allow users to select one option at a time,
while with checkboxes they can often select multiple options at once.

6. Lists & Drowndown lists

Like radio buttons, lists offer users different options and enable them to choose one
item at a time. Lists differ in that they do not have the circular buttons by the options
available; users simply click on the option itself. But it is still possible to add icons or
numbers to make the process clearer.

Like a list box, a dropdown list is a common way of presenting a list. It is often
hidden, occupying only a single line of UI space before it is activated.

7. Toggles
Toggles are basic button components that enable users to turn something on or off.
They work just like an on-off switch. So they are often used to change website or app settings
where there are just two options, such as notifications, auto system updates, and so on.

Downloaded by Rafikhan lukman20

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Navigational components
Navigation components are a range of UI components that can make it easy to
navigate through a website or mobile app. There are many navigational components, such as:
1. Navigation bars: A navigation bar, generally located at the top of the screen, is a
section of the website or app interface that helps users navigate and get to the information
they are looking for. It contains many navigational buttons, such as Home, Contacts us,
About, Profile, and so on.

2. Menus & Drop-down menus

Website menus are a series of linked items that help users navigate between different
pages and page sections. They are often placed at the top and can be divided into different
types, such as Hamburger Menu, Meatball Menu, Mega Menu, and Kebab Menu, and so on.
To save screen space and improve UX, designers also use dropdown menus to present
different menu options. Users can click on or hover over a button or option to open up the full
menu and see all its items. Dropdown menus are best for websites with a lot of menu options.

3. Sidebars
Sidebars present a list of navigational actions or options located on the left or right
side of a website or app page. They often allow users to show or hide items or even hide the
entire sidebar if they wish. So, they are perfect to make a minimalistic website or mobile
app.

Downloaded by Rafikhan lukman21

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

4. Tab bars (for Android or iOS apps)

Tab bars are common on Android or iOS mobile apps. They often locate at the bottom
of a mobile app interface, allowing users to move back and forth quickly between different
sections of the app.

5. Accordion
The accordion is a navigational element that presents a list of navigational items
stacked vertically. This allows users to expand or collapse each item to check its contents. It
is an excellent way to present a large amount of navigational information in a limited space.

6. Tree Menus
The Tree Menus are an advanced navigational component that displays all
navigational options in a tree structure. It is an intuitive way of presenting all related options
hierarchically. It is also another good option if you want to display large amounts of
information in a limited space.

7. Breadcrumbs:

22
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
A Breadcrumb provides users with a clickable trail of links to let them know where
they are within a website. Typically placed at the top of the page, it does a great job of
helping users see their current location and move between different parts of the website.

8. Carousels
Carousels allow users to browse through a set of images, cards, or content in limited
webpage space. It is easy to click one of the images or cards to receive more details from
elsewhere. They can operate automatically or manually according to individual
requirements.
9. Search bars/fields
Search bars or fields allow users to search for pages, sections, or content by entering
key words or tags. These are used widely in UI design to create a more pleasant browsing
experience for users.

10. Tags
Tags are often used in Blogs or Social websites to help users find content in the same
category quickly. While being used with Search bars, they serve more like keywords that can
help users find the content they are looking for with a few simple clicks.

 Informational components
Informational components are components that help share information with users,
including tooltips, progress bars, notifications, modal windows and alters, and many more.
1. Tooltips
Tooltips provide users with hints to explain the name, use, or function of an element.
They appear when a user hovers the mouse over the element. Designers find tooltips very
useful for creating a more user-friendly product.

23
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

2. Progress bars
Progress bars are UI components used to show users how far along they are in a
process: for example, submitting, shipping, purchasing, or uploading, and so on. They can
also encourage users to carry on and complete all the steps to get to the end.

3. Notifications
A notification is a message that indicates a change, update, or error in a task, project, or team. It is
intended to encourage the user to check out what's new as soon as possible. It is often automatically
sent to participants when a change occurs.

4. Loader
A loader is often an animated component that tells users that the website/mobile app
is processing action in the background and asks them to wait patiently. To make them wait
enjoyable, loaders can have creative designs in different forms and colors. For example:

 Containers
Containers are UI components that can hold together a full set of components and content
that are related to each other so that you can use them as a whole.

24
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
1. Cards
Cards are typically rectangular or square module that contains different page
information, like buttons, texts, images and more, so that you can use them all as a whole.
These days, to create an intuitive yet clear layout and enhance UX successfully, cards have
become very popular and can be found nearly everywhere on the web or app page.

2. Scroll boxes
Scroll boxes are UI elements used to create a scrollable content, enabling users to
view a large number of images, cards, or content in limited page space.

3. Forms
Forms are advanced components that can help collect user information, such as
shipping information, account information, registration information, contact information, etc.

BRANDING
UI branding design is a set of assets and visual elements which make your brand what
it is, it could include logo, brand palette, typography, illustrations of a specific style,
animations & much more.

Logo
Logos are the backbone of a brand’s visual identity. 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.

25
Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
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.
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.

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.
STYLE GUIDES:
A UI style guide contains all the rules and guidelines for the design of a product’s
user interface. It includes everything from typography to iconography to color palettes and
beyond.

Why is a UI style guide important?

The product will have a consistent look and feel, which creates a more professional
appearance and gives users an intuitive experience.
Designers can easily work together on the same project, as they can refer to the style
guide for answers.
Consistency saves time and money in the long run, so designers don’t have to reinvent
the wheel every time they start a new project.
What are the risks of working without a UI style guide?
 Your product could lack consistency.

Downloaded by Rafikhan lukman26

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
 It will be harder for designers to work together, as they won’t have a common
reference point. This can lead to frustration and wasted time.
What should your style guide include?
A grid system:
A grid system is a set of rules governing the placement of elements on a page. It helps
to create a sense of order and hierarchy and makes it easier for designers to lay out content in
an easily understandable format. The grid system includes everything from the width of the
margins to the size of the gutters.
Spacings: this is the distance between elements on a page and includes everything from the
margins to the padding. Proper spacing is important for creating balance and harmony in your
design. Use smaller spacings for tweaking elements within components and larger spacings
for placing elements on the page.
Breakpoints: a breakpoint is a point at which the layout of a page changes to
accommodate different screen sizes. This is important for responsive design, as it ensures the
content will look good on all devices.
Typography: typography refers to all the rules for formatting and place type. This
includes everything from the typefaces and font sizes to line spacing and the hierarchy of
headings and subheadings.
Text values: text values are the way words appear in your design, such as putting all
titles in title case. Button CTAs might be in all caps, and body text might be in sentence case.
Define your rules and stick to them!
Numerical values: numerical values are your rules for numbers. For example, you
might decide all prices should appear with two decimal places, or dates need to be written in
a certain format. Again, define your rules and stick to them.
Rules for buttons: buttons are one of the most important elements in any UI, as
they’re the primary way users interact with your product. As such, it’s important to have
strict rules for how you’ll design them. This includes everything from the color and shape of
the button to the size of the text and the spacing around it. You should also avoid having
multiple buttons on one page (keep analysis paralysis at bay!) and get user feedback on their
actions. No one likes clicking ‘pay now’ only for nothing to happen. Cue panic!
Iconography: an iconography system contains all the rules for using icons. This
includes everything from the style of the icons to their color to their size.
Colour palette: a color palette is a set of complementary colors used in your product.
A palette helps to create a unified look and feel and makes it easier for designers to choose
colors that work well together.
Layout guidelines: these should contain all the rules for how content is laid out on a
page. This includes everything from the size and spacing of elements to the use of white
space.
Imagery: imagery guidelines contain all the rules for how you use images, such as the
size and resolution of images and their placement on the page.

Downloaded by Rafikhan lukman27

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Logos: logo guidelines include everything from the shape and size of the logo to its
color and placement.

Accessibility: accessibility guidelines contain all the rules for how you make your
product usable for people with extra needs. This includes everything from the use of
alternative text for images to the use of easily readable fonts.

Rules for forms: form design rules include everything from labels and input fields to
the spacing between elements. It should also encompass error messages, visual cues (such as
a longer field for ‘other comments’), and label placement.

Rules for tables: guidelines for tables should include everything from headers and
footers to the shading of cells. You should also specify text alignment within cells and
whether or not to use borders.

Gestalt principles and the law of similarity: the law of similarity states that similar
elements look like they’re part of the same group or related in some way. You can use this to
your advantage by grouping related items together and ensuring the items in each group are
similar. Why is it important to include this in your style guide? Because it will make your
product easier to use and help people understand how to navigate it.

How to make a UI style guide: best practice

Creating a UI design style guide is no easy feat. But with our best practice tips, you’ll
be well on your way to success. Here’s what you need to do:

1. Define the purpose of your style guide

The first step in creating a style guide is to define its purpose. What are you trying to
achieve with it? Do you want to create a unified look and feel for your product? Do you want
to ensure all your designers are using the same rules? (Probably both.) Once you know what
you want to achieve, you can start planning how to get there.

2. Know your audience

Who will use your style guide? Is it just for your design team, or will it also be other
teams, such as marketing and product teams? Knowing your audience will help you decide
what to include in your style guide and how to structure it.

3. Gather existing assets

Before creating anything new, gather all your existing assets, such as product logos,
color palettes, and previous design guidelines. Having all of these in one place will make it
easier for you to create a new style guide consistent with what already exists.

4. Decide on the structure of your style guide

To start putting together the actual style guide, decide on its structure. How are you
going to organize all the information? There’s no right or wrong answer here, but try and
think about the order in which designers work.

Downloaded by Rafikhan lukman28

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
1. Create a visual identity section

The first section of your style guide should outline your product’s visual identity. This
is where you’ll define things like your logo, color palette, and typography. Including these
elements in your style guide will help to create a unified look and feel for your product.

2. Define the user interface

The next section of your style guide should focus on the user interface. This is where
you’ll define things like your product’s layout, navigation, and buttons — elements that
shape the overall user experience.

3. Create a section for content

The final section of your style guide should cover content, including elements like the
tone of voice and writing style. Having all of these in one place will help to ensure your
product’s content is consistent and on-brand.

4. Make it easy to use

Once you’ve created your style guide, make sure it’s easy to use. Add items like a
table of contents and an index so people can easily find what they’re looking for. And make
sure to keep it up to date as your product evolves.

5. Get feedback and iterate

Finally, don’t forget to get feedback from your team and iterate on your style guide.

As your product grows and changes, so too will your style guide. Getting feedback and
making changes can ensure that it always stays relevant and up to date.

6. Use tools that are up to the job

Diagramming tools can be a big help when creating a UI design style guide.

With Cacoo, you can create high-quality diagrams that are easy to share and update. And
because Cacoo runs in the cloud, you can access your diagrams from anywhere on any
device. That means the second someone changes the guide, everyone knows about it —
which is exactly what you want when consistency is your goal.

Downloaded by Rafikhan lukman29

(rafikhanlukman@gmail.com)
 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
UNIT III
FOUNDATIONS OF UX DESIGN
Introduction to User Experience - Why You Should Care about User Experience -
Understanding User Experience - Defining the UX Design Process and its Methodology
- Research in User Experience Design - Tools and Method used for Research - User
Needs and its Goals - Know about Business Goal
INTRODUCTION TO USER EXPERIENCE:
The user experience (UX) is what a user of a particular product experiences when
using that product. User experience (UX) design is the process of building products that are
easy and enjoyable for people to use. A UX designer’s job is thus to create a product that
provides the best possible user experience.

WHY YOU SHOULD CARE ABOUT USER EXPERIENCE

1. Time savings through UX

Saving users time and making more money in the process have always been desires of
for-profit companies. The time aspect has always been or will always be important and can be
optimized through UX. Time savings can be achieved, for example, by improving and
reducing process steps or on the basis of self-explanatory interaction surfaces.

Examples:
In e-commerce, the processing of orders
Contactless payment
Fingerprint login/payment
QR code tickets

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
Effect of well-implemented UX:
Employees can work through their processes faster
Employee/customer satisfaction is increased
The customer’s buying hurdles are removed
Purchase transactions can be maximized
Utilization of processes is increased by the optimizations
2. Increased competitiveness through UX
In order to stand out from the market on the basis of well thought-out UX, visual
design plays a major role in addition to the customer experience with the product. Basically,
it can be said that well thought UX works without a beautiful UI.
3. Cost reduction through UX
Development costs can be reduced by having the support of a UX expert on projects.
Visual prototypes, which are used at the beginning of a project, can address potential risks or
raise questions early on through revisions. Costly development misunderstandings,
subsequent changes or serious architecture problems that take several working days of
development time can thus be avoided. It can also replace the costly development of code-
based prototypes, which are usually discarded at the beginning of a project.
4. Project support / demonstration
Product presentations that are visually presented are perceived comparatively
differently by customers and considered more professional than dull black-and-white slides
about the theory, for example, of navigation patterns within an app. As an example, before
starting a project, in order to build trust with the customer, mockups of the app or software in
question can be used as a supportive form of demonstration.

UNDERSTANDING USER EXPERIENCE

User experience (UX) focuses on having a deep understanding of users, what they
need, what they value, their abilities, and also their limitations. It also takes into account the
business goals and objectives of the group managing the project. UX best practices promote
improving the quality of the user’s interaction with and perceptions of your product and any
related services.
Factors that Influence UX
At the core of UX is ensuring that users find value in what you are providing to them.

In order for there to be a meaningful and valuable user experience, information must be:

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Useful: Your content should be original and fulfill a need

Usable: Site must be easy to use

Desirable: Image, identity, brand, and other design elements are used to evoke emotion
and appreciation

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

Accessible: Content needs to be accessible to people with disabilities
Credible: Users must trust and believe what you tell them

Areas Related to Building the User Experience

UX is a growing field that is very much still being defined. Creating a successful user-
centered design encompasses the principles of human-computer interaction (HCI) and goes
further to include the following disciplines:

 Project Management focuses on planning and organizing a project and its resources. This
includes identifying and managing the lifecycle to be used, applying it to the user-
centered design process, formulating the project team, and efficiently guiding the team
through all phases until project completion.
 User Research focuses on understanding user behaviors, needs, and motivations through
observation techniques, task analysis, and other feedback methodologies.
 Usability Evaluation focuses on how well users can learn and use a product to achieve
their goals. It also refers to how satisfied users are with that process.
 Information Architecture (IA) focuses on how information is organized, structured, and
presented to users.
 User Interface Design focuses on anticipating what users might need to do and ensuring
that the interface has elements that are easy to access, understand, and use to facilitate
those actions.
 Interaction Design (IxD) focuses on creating engaging interactive systems with well
thought out behaviors.
 Visual Design focuses on ensuring an aesthetically pleasing interface that is in line with
brand goals.
 Content Strategy focuses on writing useful content by planning the creation, delivery and
governance behind it.
 Accessibility focuses on how a disabled individual accesses or benefits from a site,
system or application. .
 Web Analytics focuses on the collection, reporting, and analysis of website data.

DEFINING THE UX DESIGN PROCESS AND ITS METHODOLOGY:

User experience (UX) design is the process design teams use to create products that
provide meaningful and relevant experiences to users. UX design involves the design of the

entire process of acquiring and integrating the product, including aspects of branding, design,
usability and function.

The UX design process:

The basic UX design process has five different steps:

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES
Research and understanding

User experience design begins with extensive UX research before any designs are
mocked up.

 User research: identify pain points, goals, blockers, and characteristics among users,
and draw up detailed user personas that inform design decisions to keep the UX
design process focused on users.
 Market research: understand t he mar ket and similar product s avail able, what those
products share in terms of UX, and identify opportunities to differentiate your product
based on UX. 
 Historical analysis: get a sense of the history of your product, and use previous
iterations to inform future design decisions, ensure mistakes aren’t repeated, and
continuously improve your product’s UX based on what you’ve learned. 

2. Prototyping and wireframing:

After the research stage, a designer creates a prototype and wireframe of your
product, outlining how users will flow from one feature or element to the next, and how the
product will look visually.

The prototype is your minimum viable product (MVP): a version of your product with
enough features to allow your first users to test it and offer feedback. The prototype generally
doesn’t look like a finished product, but it provides a sense of how the finished product will
work.

Prototyping and wireframing—and then testing lets you get valuable user
feedback before you spend resources finalizing your product, potentially avoiding a lot of
work and time spent developing the wrong features and UX for your users.

3. Testing

Next, your product team will conduct user tests—like A/B tests, MVT, and split tests—
to identify existing or potential design issues that may cause friction for users.

Some user testing may include using product experience and behavior analytics tools
like heatmaps and session recordings and collecting user feedback that can help identify
blockers and pain points.

4. Launch

Throughout the testing phase, you’ll refine your prototype based on results and user
feedback, make changes, and add final touches before launch.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Once your product is ready, launch is often done in stages. For example, your UX
team might release a beta version or ‘soft launch’, where a new design is launched to a small
group of users first, to get additional user feedback and usage data before rolling it out to
your whole user base.

5. Iteration

UX design is a constant, iterative process so more testing follows the product’s

launch.In the iteration stage, your team will continue to make updates and improvements as
needed, and closely monitor how those changes impact the product experience.

A/B and multivariate testing are often part of this stage, so your team can see the
impact of product changes and compare multiple versions of the design to see which creates
the best user experience. Then the winning version is rolled out.

What is User Research?

 User research is all about discovering who your target audience is based on a wide
range of methods like ethnographic surveys and quantitative research.
 It involves studying multiple interactions a user makes with your product and
utilizing this feedback for product improvement.
 User research is a practical approach to understanding customers’ behaviors, needs
and pain points so you can create the best products for them.

Benefits of User Research

1. User research helps you to build empathetic products that meet the core needs of your
target market.
2. It gives you a clearer idea of how users utilize your product in everyday life to
achieve their goals.
3. User research helps you to cut down costs by limiting the need for costly product
iterations along the way. When you have a clear idea of who your users are and what
they want, you’ll spend less time building a product they will love.
4. It helps you to nail product usability design. You’ll create something that people will
actually use because it addresses their pain points.
5. User research gives you a clear idea about the features you should prioritize for your
product. Many times, organizations have a long list of features they want to
incorporate into a product. With user research, you can streamline this list and have
only important features that improve the product’s functionality.
6. User research provides a clear path to understanding users’ mental models, that is,
what they are already familiar with. With this insight, you can create a design that
meets their expectations without sacrificing your creativity.
7. It’s an effective way to spot unexpected differences between user groups in your
target market, based on their needs and goals. This is very helpful for companies
building products that cut across multiple market segments.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

8. User research is an important part of design strategy. It helps you to create functional
designs that are valuable to users and easy to use.

User Research Methods

1. Observation

Observation is a data collection method where the researcher pays attention to users to
see how they naturally interact with your product. Observation helps you to understand users’
pain points as they go about their normal routines in their natural environments. The nature of
the observation could be accomplished either as a complete observer, an observer as a
participant, a participant as an observer or as a complete participant.

Advantages of Observation

1. It is the simplest method of data collection in research.

2. Observation results in more accurate data collection.

Disadvantages of Observation

1. It cannot be used in all user research contexts.

2. The observer’s personal bias can affect the validity of the research results.

2. Focus Groups

A focus group is made up of 6–10 participants from your research sample who openly
discusses a specific topic as part of research. During focus group discussions, participants
have the opportunity to share feedback and insights on a particular topic.

The mediator sets the stage for the conversation and takes note of all the views shared
on the topic.

Pros

1. It helps you to obtain in-depth information from research participants.

2. It is a cost-effective data collection method.

Cons

1. The researcher has very little control over the outcome.

2. The group might not be a true representation of your target audience.

3. Contextual Interviews

Contextual interviews or inquiries merge observation methods with traditional

interview methods to understand the context in which a design will be used. It allows the
researcher to understand how people use a product in a specific context. It’s a great way to
see your product from the users’ perspectives.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Pros

1. It introduces a user-centered approach to design.

2. Contextual inquiries produce in-depth research data for organizations.

Cons

1. It is time-consuming.
2. It can be difficult to accurately interpret data from contextual interviews.

4. Usability Testing

Usability testing helps you to measure the range of your product and how users can
accomplish a variety of tasks with it. Usability tests are done repeatedly, from the early
developmental stages of the product until its release. Results from these tests help you to
build the best product for the market.

Pros

1. It helps you to rate your product’s performance in terms of its functionalities for users.
2. Usability tests provide high-level contextual information for research.

Cons

1. Usability testing requires a lot of commitment from participants; that is, it is time-
consuming.
2. It is a complex method of data collection.

1. First Click Testing

First click testing measures the user-friendliness of a product to determine its

usability. It allows organizations to know how easy it is to complete a task on their website or
mobile application. As the name suggests, first click testing is all about examining what users
will click on first to complete an intended task.

Pros

 You can get real-time feedback from a large number of users in a short time.
 It helps you to discover any usability issues with your product.

Cons

1. You can’t test the whole website and website flow during first click testing.

2. Online Surveys

An online survey consists of a set of structured questions that participants respond to

as part of a research. Online surveys are administered through data collection platforms like

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Formplus that allow you to receive and analyze data efficiently. In user research, online
surveys come in handy for every part of the product development process.

Pros

1. Participants get real-time access to online surveys and can fill them at their
convenience.
2. Online surveys are fast and affordable.

Cons

1. High-level of survey response bias, especially when completing the survey comes
with incentives.
2. Data errors due to question non-responses.

User Research Best Practices

1. Know who your users are

You cannot build a product that people would want to use without knowing
who your target audience is and what they like. At this stage, it’s best to leverage
qualitative research methods like face-to-face interviews and focus groups to learn
about users’ preferences. You can also send out surveys with close-ended and open-
ended questions.

2. Prioritise their needs

After collecting data from users, the next step is to organise this information
for useful insights. You should look out for preference patterns that cut across
multiple subgroups in your research sample. Your design should address the primary
needs you have highlighted from your research data.

3. Be flexible

Building a user-friendly product means you need to be open to trying out new
ideas outside your comfort zone. Once you have enough data backing pointing to a
specific need, you should find a way to include a product or design feature that
addresses this need.

4. Conduct research at every stage of the process

User research isn’t something you just do once and that’s it. At every stage of
the process, you need to keep testing your product features to make sure you’re on
track. It’s also important to conserve some budget and resources to perform research
later in the project as well.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

5. Always communicate

Make sure everyone on your product development team has access to the user
research data, plus a clear idea of what you’re trying to achieve. On Formplus, you can use
the teams and collaboration features to coordinate communication with relevant stakeholders
who are working on the product. There’s nothing like too much communication so use all the
channels you have to keep everyone in the loop.

UX RESEARCHERS TOOLS:
UX researchers have access to many different solutions to conduct user experience
research and manage different stages of their workflow. For instance, there are user research
tools for conducting usability testing, surveys, interviews, or more specialized tests, such
as card sorting or tree testing.

UX Research Features
Tool
Maze Integrations with leading design platforms, remote testing, surveys, IA
testing, real-time reports, collaboration features, pre-built templates
Loop11 Online usability testing, prototype testing, benchmarking, A/B testing, IA
testing
Userlytics Usability testing, user experience studies, prototype testing, live
conversations, card sorting, tree testing
Remote user research in real-time, moderated and unmoderated testing,
Lookback collaborative dashboard, live note-taking
Usability testing, interviews, surveys, intercept testing, click testing, tree
Userzoom testing, card sorting, participant recruiting
Unmoderated research, remote user interviews, participant recruiting,
automatic transcriptions, on-call observers, interactive timeline for taking
dscout notes
User Participant recruitment, screener surveys, scheduling interviews, messaging
Interviews participants, automatic incentives, participation tracking
Ethnio Participant recruitment, central participant database, incentives, screeners,
intercepts, scheduling options
Ribbon Participant recruitment, screeners, automatic interview scheduling, incentive
management, moderated interviews
Optimal Card sorting, tree testing, first-click testing, IA testing, online surveys,
Workshop qualitative research, participant recruitment
Remote user testing, first-click testing, design surveys, preference tests,
UsabilityHub five-second tests, participant recruitment
Moderated, unmoderated and hybrid card sorting, pre and post-study
kardSort
interviews, tool tips
Hotjar Heatmaps, screen recordings, unmoderated research, in-product feedback
widgets and follow-up surveys

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Tools for usability testing

UX research tools do a lot from recruiting participants and planning the interviews to
getting feedback, and sharing your findings, having a great tool stack is important for running
a great research practice.
Selecting the right UX research toolkit depends on where you are in the research
process, the research method you’ll be using, the size of your organization, and the type of
product you’re researching.
1. Maze
 Maze is a continuous product discovery platform that empowers product teams to
collect and consume user insights, continuously.
 Maze helps teams build the habit of continuous product discovery in a platform that
enables everyone to run great research.
 Maze integrates directly with Adobe XD, Figma, InVision, Marvel, and Sketch, and
allows you to import an existing prototype from the design tool you use.
 Maze allows you to run surveys and collect user feedback early in the design process,
and also enables you to test your information architecture with features such as Card
Sorts and Tree Tests.
 Maze's reporting functionality automatically records and documents completion rates,
misclick rates, time spent, click heatmaps, and more.
 Maze also generates a usability test report instantly for each test, that you can share
with anyone with a link.
Key features: Integrations with leading design platforms, remote testing, surveys, IA testing,
real-time reports, question repository, collaboration features, pre-built templates.

2. Loop11
 Loop11 helps you conduct moderated and unmoderated usability testing on live
websites, prototypes, and competitors’ websites, among others.
 With Loop11, you can start testing at the wireframing and prototyping stage to ensure
your designs are headed in the right direction.
 Beyond usability testing, Loop11 can help user researchers conduct competitive
benchmarking, A/B testing, and IA testing.
Key features: Online usability testing, prototype testing, benchmarking, A/B testing, IA
testing

3. Userlytics
 Userlytics is a user testing platform that helps you conduct research at scale by testing
digital assets like websites, applications, mobile apps, prototypes, etc.
 You can collect both qualitative and quantitative data and set up advanced metrics and
graphical reports.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 With Userlytics, you can run any combination of moderated or unmoderated user
experience studies, usability tests, card sorting, and tree testing using a diversity of
features.
Key features: Usability testing, user experience studies, prototype testing, live conversations,
card sorting, tree testing.
Tools for user interviews
4. Lookback
 Lookback is a comprehensive user research tool that offers you the ability to do live
user interviews contextualized through a live recording of the user’s screen.
 Lookback helps you conduct moderated, unmoderated, and remote research and
includes a collaborative dashboard that lets you sync all your research and customer
feedback and share it with your team.
 Lookback sessions are recorded automatically, so you can rewatch them at your
convenience and create highlight clips to share with colleagues and stakeholders.
Key features: Remote user research in real-time, moderated and unmoderated testing,
collaborative dashboard, live note-taking

5. Userzoom
 Userzoom is a UX research platform for remote usability testing and includes features
such as participant recruiting, heatmap and analytics recording, etc.
 You can use it to collect quantitative or qualitative feedback and create A/B tests with
mock-ups to get feedback from users before product development.
 With Userzoom, you can run unmoderated task-based studies with test participants
from all around the world on a website, prototype, wireframe, or mock-up.
Key features: Usability testing, interviews, surveys, intercept testing, click testing, tree
testing, card sorting, participant recruiting

6. dscout
 dscout is a remote qualitative research platform that helps you collect in-context
insights from the people who use your products.
 One component of the platform is dscout Live, which lets you run remote user
interviews and collect feedback from participants.
 You can also use dscout Diary to see people’s everyday product experience as it
happens either on video or in photos.
 dscout is also helpful because it streamlines the most time-consuming parts of
interviews with research-centric features such as participant scheduling, automatic
transcriptions, on-call observers, and an interactive timeline for taking notes and clips.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Key features: Unmoderated research, remote user interviews, participant recruiting,

automatic transcriptions, on-call observers, interactive timeline for taking notes

Tools for recruiting participants

7. User Interviews
 User Interviews is a well-known platform that helps you make better product
decisions with seamless access to quality participants.
 The platform is known for allowing you to build your own pool of participants or
access their panel of over 350,000 vetted research participants who can be filtered by
profession.
 User Interviews offers features like screener surveys, scheduling interviews, and
participation tracking for your existing users.
 The median turnaround time is 2 hours, though it can vary based on the project.
Key features: Participant recruitment, screener surveys, scheduling interviews, messaging
participants, automatic incentives, participation tracking

8. Ethnio
 Another user research tool for selecting participants is Ethnio, which enables you to
create screeners for intercepting people on your website or app so that you can find
the right participants for user research.
 Ethnio provides various filters for screeners and automated scheduling options that
help streamline the process of getting in touch with users.
 Within the platform, Ethnio also includes a tool called Research Incentives, a
calculator that helps you reward your participants by instantly paying them using
different online services.
Key features: Participant recruitment, central participant database, incentives, screeners,
intercepts, scheduling options

9. Ribbon
 Ribbon is an all-in-one participant recruitment and screening tool that allows you to
find users, screen them, and automatically schedule user interviews.
 They’re also currently working on features including interview transcripts and
participant incentives.
Key features: Participant recruitment, screeners, automatic interview scheduling, incentive
management, moderated interviews

10. Optimal Workshop

 Optimal Workshop offers a suite of testing tools to help you conduct information
architecture (IA) tests.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 For card sorting, you can use their OptimalSort tool to understand how people think
your content should be organized and categorized.
 Another component of Optimal Work is Treejack, which helps you conduct
unmoderated tree tests to identify if users are currently getting lost on your site and
where they expect to find key information.
Key features: Card sorting, tree testing, first-click testing, IA testing, online surveys,
qualitative research, participant recruitment

11. UsabilityHub
 UsabilityHub is a remote research platform that offers a range of testing tools,
including first click testing, design surveys, preference tests, and five-second tests.
These tests enable you to collect data and validate design decisions.
 With UsabilityHub’s Panel, researchers can recruit test users from a pool of
participants based on criteria such as age, gender, education, and more to get feedback
from a relevant target audience.
Key features: Remote user testing, first-click testing, design surveys, preference tests, five-
second tests, participant recruitment

12. kardSort
 kardSort is an online card sorting tool which offer moderated, unmoderated, and
hybrid card sorting.
 kardSort operates in a simple drag-and-drop function which makes card sorting easy
for researchers and participants alike.
 Working on all browsers, you can set up and run a card sorting session incredibly
quickly, and it’s ideal for asynchronous sessions due to its simplicity and ability to
add pre or post-study questions.
Key features: Moderated, unmoderated and hybrid card sorting, pre and post-study
interviews, tool tips

13. Hotjar
 Hotjar is a remote research tool which allows you to view real-time user behavior via
heatmaps and screen recordings.
 With a huge amount of data available, plus in-app surveys, Hotjar is a great solution if
you’re looking to focus on heatmapping as a research method and want to really
understand the nuance of user behavior.
Key features: Heatmaps, screen recordings, unmoderated research, in-product feedback
widgets and follow-up surveys

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

UNDERSTANDING USER NEEDS AND GOALS

To create a great user experience, it's essential to understand the needs and goals of
your users. This helps you design a product that meets their needs and provides a positive
user experience. By understanding your users, you can design an intuitive, easy-to-use, and
enjoyable product, increasing engagement and customer satisfaction.

You can use several methods to understand your users' needs and goals. Here are three
common methods:

 User Research: User research involves gathering information about your users, such
as their demographics, behaviors, and attitudes. You can conduct user research
through surveys, analytics, or user testing. User research helps you understand your
users and their needs, which can inform the design of your product. 

 User Interviews: User interviews involve asking your users questions about their
needs and goals and their experience using similar products. This helps you gain
insight into their thoughts and feelings about your product and what they need from it.
User interviews are a great way to understand your users' perspectives and create a
product that meets their needs.

 Usability Testing: Usability testing involves observing users interacting with your
product and identifying areas where the product can be improved. This information is
then used to iterate on the product's design and create a better user experience.
Usability testing is a valuable method for understanding how users interact with your
product and identifying areas for improvement. 

Importance of Personas in User-Centered Design

Personas are fictional representations of your users, and they help you keep their
needs and goals in mind throughout the design process. Personas can be based on data from
user research and user interviews. They help you make design decisions, such as which
features to include and how to structure the interface.

Personas are an important tool in user-centered design because they keep the focus on
the user and their needs, helping you create a product that meets their needs and provides a
great user experience.

User Research
User research is the process of gathering information about your users and their needs to
inform the design of your product. It helps you understand how users interact with your
product, their pain points, and what they need from it.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

By conducting user research, you can create a product that meets the needs of your
users and provides a great user experience.

User research types

There are two main user research types: quantitative and qualitative.

1. Quantitative Research: Quantitative research involves gathering numerical data

about your users, such as age, gender, and usage patterns. This type of research is
useful for identifying patterns and trends among your users. It is often conducted
through surveys or analytics.
2. Qualitative Research: Qualitative research involves gathering non-numerical data
about your users, such as their opinions, attitudes, and behaviors. This type of
research is useful for gaining deeper insights into your users' needs and goals. It is
often conducted through user interviews or user testing.

There are several methods you can use to conduct user research. Here are three common
methods:
 Surveys: Surveys are popular for gathering quantitative data about your users. They
involve asking a series of questions to a large group of users. Surveys can be
conducted online or in person and are useful for gathering information about user
demographics, usage patterns, and satisfaction levels. 
 Analytics: Analytics involves gathering data about how users interact with your
product, such as how long they spend on certain pages or which features they use
most often. This type of research can be conducted using tools like Google Analytics
or Mixpanel. 
 User Testing: User testing involves observing users as they interact with your
product and asking them questions about their experience. This type of research can
be conducted in-person or remotely and is useful for gaining qualitative insights into
how users interact with your product. User testing can help you identify pain points
and areas for improvement in your product design. 

User Interviews
User interviews are a method of qualitative user research involving one-on-one
conversations with users to gather information about their needs and goals.

User interviews can provide valuable insights into user behavior and preferences and
help you better understand how to design a product that meets your users' needs.

Benefits of User Interviews

 They allow you to gather detailed information about your users' needs and goals.
 They provide insight into how users currently interact with your product and what
pain points they experience. 
 They can help you identify potential solutions to user problems and generate new
ideas for product features.
 They provide an opportunity to build rapport with your users and develop empathy for
their needs.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

How to conduct usability testing

Here are four steps for conducting user interviews:

 Planning: Define the purpose of the interview and what you hope to learn from it.
Create a list of questions that will help you achieve your goals. Consider factors like
the length of the interview and the location where the interview will take place. 

 Recruiting Participants: Identify potential participants who match your user

persona. Reach out to them and ask if they would be willing to participate in the
interview. Please inform them about the interview and how their data will be used. 
 Conducting the Interview: Begin the interview by introducing yourself and
explaining the purpose of the interview. Ask open-ended questions that allow the user
to share their experiences and feelings. Listen carefully to their responses and ask
follow-up questions to gather more information. Take notes during the interview to
help you analyze the data later.
 Analyzing the Data: Once you have completed the interviews, review your notes and
look for patterns and themes in the data. Use this information to identify areas for
improvement in your product design. Consider sharing your findings with your team
to help inform product decisions.

Usability Testing
Usability testing is a method of evaluating a product's usability by testing it with real
users. This involves observing users as they attempt to complete tasks with the product and
noting any areas where they experience difficulty or confusion.
Usability testing can help you identify areas where your product design can be improved and
provide valuable feedback for future iterations.

Benefits of Usability Testing

 It allows you to observe how users interact with your product in a realistic setting.
 It helps you identify areas where users experience difficulties or confusion, which can
be used to improve the product's design. 
 It can provide valuable feedback that can inform future iterations of the product.
 It can help you build rapport with your users and demonstrate your commitment to
their needs.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Steps for Conducting Usability Testing

Steps to user research

 Planning: Define the test's purpose and what you hope to learn from it. Create a list
of tasks that users will be asked to complete during the test. Consider factors like the
length of the test, the location where the test will take place, and the equipment you
will need. 

 Recruiting Participants: Identify potential participants who match your user

persona. Reach out to them and ask if they would be willing to participate in the test.
Please inform them about the test and how their data will be used. 

 Conducting the Test: Begin the test by introducing yourself and explaining the
purpose of the test. Ask users to complete your defined tasks and observe them as
they work. Take notes on any areas where users experience difficulty or confusion. Be
sure to allow time for users to provide feedback on their experience. 

 Analyzing the Data: Once you have completed the tests, review your notes and look
for patterns and themes in the data. Use this information to identify areas for
improvement in your product design. Consider sharing your findings with your team
to help inform product decisions.

Personas
Personas are fictional characters representing different types of users who might
interact with your product. They are created based on user research and help you better
understand your target audience. Personas are typically created with a name, photo, and brief
description, including demographic information, goals, behaviors, and pain points.

Benefits of Personas
 They provide a shared understanding of your target audience among team members.
 They help you to design products that meet the needs of your target audience.
 They help you identify the most important features and functionalities for your users.
 They help you to prioritize design decisions and features based on user needs and
goals.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Steps for Creating Personas

 Conduct User Research: Begin by conducting user research to understand your

target audience. This may involve surveys, interviews, and usability testing. Collect
information on users' goals, behaviors, pain points, and demographics. 
 Identify Patterns and Insights: Once you have collected user data, review it and
look for patterns and insights. Identify common behaviors and goals among your
users.
 Create Fictional Personas: Based on the insights you have gained from your user
research, create fictional personas that represent different types of users. Give each
persona a name, photo, and brief description, including demographic information,
goals, behaviors, and pain points.
 Use Personas in Design Decisions: Once you have created personas, use them to
inform your design decisions. Consider how each persona might interact with your
product and what features and functionalities are most important to them. Use
personas to prioritize design decisions and features based on user needs and goals. 

KNOW ABOUT BUSINESS GOALS

What are business goals?

 Business goals are the outcomes an organization aims to achieve.

 They can be broad and long term or specific and short term.
 Business leaders set goals in order to motivate teams, measure progress, and improve
performance.
 They are established so that employees may work toward a common goal.

Business Goals vs. Business Objectives

Business Goals Business Objectives

A business goal is a broad, long-term A business objective is a specific and
outcome an organization works toward. measurable task, project, or initiative.
Business goals refer to outcomes. Business objectives refer to actionable tasks.
Business objectives lay out the ‘how’ in Business objectives are clear and precise.
clear, doable steps that lead to the desired
result.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Frameworks for Writing Business Goals

Goal-setting frameworks can help you get the most out of your business goals.
Common frameworks include SMART, OKR, MBO, BHAG, and KRA. Here are the
common frameworks for writing business goals with examples:

 SMART: SMART goals are specific, measurable, achievable, relevant, and time-
bound. This is probably the most popular method for setting goals. Ensuring that your
goals meet SMART goal criteria is a tried and true way to increase your chances of
success and make progress on even your most ambitious goals.
Example: We will increase the revenue from our online store by 5 percent in three
months by increasing our sign-up discount from 25 to 30 percent.

 OKR: Another popular approach is to set OKRs, or objectives and key results. In
order to use OKRs, a team or individual selects an objective they would like to work
toward. Then they select key results, or standardized measurements of success or
progress.
Example Objective: We aim to increase the sales revenue of our online store.
Example Key Result: Make $200,000 in sales revenue from the online store in June.

 MBO: MBO, or management by objectives, is a collaborative goal-setting framework

and management technique. When using MBO, managers work with employees to
create specific, agreed-upon objectives and develop a plan to achieve them. This
framework is excellent for ensuring that everyone is aligned on their goals.
Example MBO: This quarter, we aim to decrease patient waiting times by 30 percent.

 BHAG: A BHAG, or a big hairy audacious goal, is an ambitious, possibly

unattainable goal. While the idea of setting a BHAG might run contrary to a lot of
advice about goal-setting, a BHAG can energize the team by giving everyone a shared
purpose. These are best for long-term, visionary business goals.

Example: We want to be the leading digital music service provider globally by 2030.
 KRA: KRAs, or key result areas, refer to a short list of goals that an
individual,department, or organization can work toward. KRAs function like a rubric
for general progress and to help ensure that the team’s efforts have an optimal impact
on the overall health of the business.
Example: Increase high-quality sales leads per sales representative.

Use the table below to compare the pros and cons of each goal-setting framework to help you
decide which framework will be most useful for your business goals.

Framework Pros Cons

Manageable Inflexible and prescriptive
SMART (specific, Easy to measure success Narrowly focused
measurable,
achievable, relevant, Good for focusing attention Doesn’t measure growth
time-bound)
Not optimal for long-term goal
setting

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Framework Pros Cons

Aligns teams on priorities Inflexible and prescriptive
OKRs (objectives Good for strategic planning Easy to set too many objectives
and key results) Good for focusing attention

Encourages employee Requires extra paperwork

involvement Requires high managerial skill
Inflexible and prescriptive
MBOs (management Helpful for performance
by objectives) reviews
Encourages career
development

Broad in scope Not always achievable

BHAGs (big hairy Highly motivating Doesn’t specify strategy
audacious goals) Encourages innovation

KRAs (key results Aligns teams on priorities Doesn’t specify strategy

areas)
Good for focusing attention Easy to set too many areas

Types of Business Goals

A business goal is any goal that helps move an organization toward a desired result.
There are many types of business goals, including process goals, development goals,
innovation goals, and profitability goals.

Here are some common types of business goals:

 Growth: A growth goal is a goal relating to the size and scope of the company. A
growth goal might involve increasing the number of employees, adding new verticals,
opening new stores or offices, or generally expanding the impact or market share of a
company.
 Process: A process goal, also called a day-to-day goal or an efficiency goal, is a goal
to improve the everyday effectiveness of a team or company. A process goal might
involve establishing or improving workflows or routines, delegating responsibilities,
or improving team skills.
 Problem-Solving: Problem-solving goals address a specific challenge. Problem-
solving goals might involve removing inefficiency, changing policies to accommodate
a new law or regulation, or reorienting after an unsuccessful project or initiative.
 Development: A development goal, also called an educational goal, is a goal to
develop new skills or expertise, either for your team or for yourself. For example,
development goals might include developing a new training module, learning a new
coding language, or taking a continuing education class in your field.
 Innovation: An innovation goal is a goal to create new or more reliable products or
services. Innovation goals might involve developing a new mobile app, redesigning
an existing product, or restructuring to a new business model.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Profitability: A profitability goal, also called a financial goal, is any goal to improve
the financial prospects of a company. Profitability goals might involve increasing
revenue, decreasing debt, or growing the company’s shareholder value.
 Sustainability: A sustainability goal is a goal to either decrease your company’s
negative impact on the environment or actively improve the environment through
specific initiatives. For example, a sustainability goal might be to decrease a
company’s carbon footprint, reduce energy use, or divest from environmentally
irresponsible organizations and reinvest in sustainable ones.
 Marketing: A marketing goal, also called a brand goal, is a goal to increase a
company’s influence and brand awareness in the market. A marketing goal might be
to boost engagement across social media platforms or generate more higher-quality
leads.
 Customer Relations: A customer relations goal is a goal to improve customer
satisfaction with and trust in your product or services. A customer relations goal
might be to decrease customer service wait times, improve customers’ self-reported
satisfaction with your products or services, or increase customer loyalty.
 Company Culture: A company culture goal, also called a social goal, is a goal to
improve the work environment of your company. A company culture goal might be to
improve employee benefits; improve diversity, equity, and inclusion (DEI) across
your organization; or create a greater sense of work-life balance among employees.

What Are Business Goal Examples?

Business goal examples are real or hypothetical business goal statements. A business
goal example can use any goal-setting framework, such as SMART, OKR, or KRA. Teams
and individuals use these examples to guide them in the goal-setting process.

What Are Short-Term Business Goals?

Short-term business goals are measurable objectives that can be completed within
hours, days, weeks, or months. Many short-term business goals are smaller objectives that
help a company make progress on a longer-term goal.

Examples:

 Increase Your Market Share: When companies increase their market share, they
increase the percentage of their target audience who chooses their product or service
over competitors. This is a good short-term goal for companies that have long-term
expansion goals.
 Reduce Paper Waste: All businesses produce waste, but company leaders can take
actions to reduce or combat excessive waste. Reducing your company’s paper waste
is a good short-term goal for companies that have long-term sustainability goals.
 Increase Social Media Engagement: High social media engagement is essential for
businesses that want to increase brand awareness or attract new customers. This is a
good short-term goal for companies with long-term marketing or brand goals.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

What Are Long-Term Business Goals?

A long-term business goal is an ambitious desired outcome for your company that is
broad in scope. Long-term business goals might be harder to measure or achieve. They
provide a shared direction and motivation for team members.

Here are three sample long-term business goals:

 Increase Total Sales: A common growth profitability goal is to increase sales. An

up-and-coming software company might set a long-term goal of increasing their
product sales by 75 percent over two years.
 Increase Employee Retention: Companies with high employee retention enjoy many
benefits, such as decreased hiring costs, better brand reputation, and a highly skilled
workforce. A large corporation with an employee retention rate of 80 percent might
set a long-term goal of increasing that retention rate to 90 percent within five years.
 Develop a New Technology: Most companies in the IT sphere rely on innovation
goals to stay competitive. A company might set a long-term goal of creating an
entirely new AI technology within 10 years.

Why You Need Business Goals

Every business needs to set clear goals in order to succeed. Business goals provide
direction, encourage focus, improve morale, and spur growth. We’ve gathered some common
benefits of goal-setting for your business.

Here are some benefits you can expect from setting business goals:

 More Clarity: Business goals ensure that everyone is moving toward a determined
end point. Companies with clear business goals have teams that agree on what is
important and what everyone should be working toward.
 Increased Focus: Business goals encourage focus, which improves performance and
increases productivity.
 Faster Growth: Business goals help companies expand and thrive.
 Improved Morale: Everyone is happier when they are working toward a tangible
goal. Companies with clear business goals have employees that are more motivated
and fulfilled at work. Plus, measuring progress toward specific goals makes it easier
to notice and acknowledge everyone’s successes.
 More Accountability: Having tangible goals means that everyone can see whether or
not their work is effective at making progress toward those goals.
 Better Decision-Making: Business goals help teams prioritize tasks and make tough
decisions

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

UNIT IV

WIREFRAMING, PROTOTYPING AND TESTING

Sketching Principles - Sketching Red Routes - Responsive Design – Wireframing - Creating

Wireflows - Building a Prototype - Building High-Fidelity Mockups - Designing Efficiently
with Tools - Interaction Patterns - Conducting Usability Tests - Other Evaluative User
Research Methods - Synthesizing Test Findings - Prototype Iteration

SKETCHING PRINCIPLES

 User experience (UX) designers use UX sketching as a tool for the design
thinking process.
 It’s usually a step early on in the process.
 And it’s an essential skill and common practice that can help individuals or teams.
 The practice of UX sketching brings creativity and teamwork to the table and inspires
motivation for the project at hand. 
 It also creates more purposeful solutions and increases usability which translates to
higher engagement and retaining users 

What is UX sketching?

UX Sketching is simply rough drawing by hand, commonly used for generating,

communicating and refining ideas. It can be for your own reference, or to be shared with co-
workers, team managers, or clients and stakeholders.

Sketches are:

 Quick: Don’t invest a long period producing them.

 Timely: Produce them when and as the need arises.
 Disposable: Rely on their usefulness to explore a concept and not on their production
costs.
 Plentiful: Produce sketches as a collection that explores different aspects of
interaction over time. 
 Minimalist: Use sketches to clarify one concept at a time.

Types of UX sketches:

1. Rich pictures

Rich pictures depicted with a mixture of doodles, words and symbols. Rich
pictures help designers to analyze and get an overview of a complex issue. The
structure, processes, people and issues are depicted in a mixture of doodles, words and
symbols.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

2. Storyboards

 Storyboards presented in frames to visualize use cases via Unsplash

 Sketching storyboards can be used to visualize the specific problem, a
situation of when the product is used, or the finalized solution.
 They are a sequence and flow of illustrations that can really play a big part in
storytelling and create compelling narratives for better impact.

3. Maps

Maps come in handy when you are trying to visualize a particular process, hierarchy
or timeline with different points. As a UX designer, these include mindmaps, information
architecture, site maps, user journey maps and empathy maps.

4. User interface (UI)

Some UX designers might work on the UI or work with UI designers to visualize

screen-to-screen interactions. While some designers might skip sketching to work on
wireframes or mockups, it is important for sketching to come before these steps to not lose
conceptual details and refinement. When sketching, it’s important to explore different
interface concepts. This can include quick notes of envisioning the animation, symbols, icons
and shapes to be used. This is not to be confused with wireframing where the placement,
sizing and order of elements are refined and clear.

The differences between sketching, drawing and prototyping

Sketching, drawing and prototyping may seem like similar activities. Even though
they are similar and related, they are different processes and sequential, where designers
should move from sketching to drawing, then to prototyping. Here are the differences.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

When and why

It is common to do UX sketching in the ideation process to brainstorm, propose and

communicate ideas. It is also a way to test out ideas. Drawings are done after the initial UX
sketch. They are more refined from sketches, picking on details such as colors and also stroke
weight to present a particular style, emotion and aesthetic. Prototypes are created as drafts of
the final solution based on the drawings created before.

Time and cost

Sketching is convenient, rapid, cost-efficient and fail fast. Drawing, however, takes
more time so it can be accurate. It also keeps you constraint on an art board or canvas.
Prototypes require a lot more investment and focus towards the end product, with little
flexibility for change as the foundations may be difficult to alter.

Quality and detail

Sketching is more often of low quality, and it can be messy, with a little amount of
detail. Drawings would have more intricate details, with higher accuracy and precision in the
sizes or colors of different elements. In terms of prototypes, they hold the highest amount of
detail and accuracy, making sure everything is pixel perfect. It is ready for the developers to
create the solution in code, and very much similar to the actual product.

Benefits of UX sketching:

 Generate ideas
UX sketching helps you and your team generate ideas by being able to visualize the
problem or idea. You can also use it for planning how the flow or process will go, narrating
the scenarios of the problem and brainstorming.

 Communicate ideas
UX sketching allows you and your team to align on ideas. Being able to visualize the
process can help get the designs right. It’s useful to document the successes and failures so
that others in the team can learn lessons from them, or as a reference to come back to.

 Refine ideas
With UX sketching, you and your team can also validate your ideas and make any
improvements before you get to the details. It is a fast way of getting feedback and evaluating
the practicality of the solution.

 Fast iterations
UX sketching is done fast, cheaply and the idea is to fail fast. It’s not ideal to keep
iterating on one specific idea but rather to generate as many ideas as you can. Failing fast
makes sure you would not be overly committed to one idea and generate the most ideas
possible. That way once you pick the best ideas you won’t wonder “what if” later on.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Requirements:

 People:
First off, gather up the people if you are working in a team! It’s a team activity to
brainstorm and generate better and more creative ideas. It’s also more fun and keeps
productivity high.

 Stationeries
The real basics are simply just pen and paper. You can also gather different colored
post-its and pens, markers, highlighters and anything else you want to use to differentiate
priorities or categories of what you are working on.

 Digital software
If you are working remotely, there are options for digital sketching like Figjam
by Figma, Invision Freehand, Jamboard, and AutoDraw, which utilizes artificial
intelligence technology that turns your rough sketches into drawings fast.

Tips for UX sketching:

 Practice!
As with any other skill, the best piece of advice is to practice, and keep
practicing.

 Write clearly
It might get messy when you try to scribble something fast when UX
sketching. Nevertheless, your handwriting should be clear enough to be legible for
others and yourself.

 Avoid getting caught up with fine details

UX sketches are meant to be rough drawings and it’s meant to be messy. It’s
recommended to leave them at that and focus on the goal rather than perfecting that
star symbol you have drawn. Remember to go for breadth and keep expanding your
ideas instead of going too in-depth or they will stick and limit your creativity.

Enhancing Sketches — Annotations, Arrows and Notes

Annotations, arrows and notes increase the communicative power of your sketches.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Annotations – These are names, labels and explanations located next to different
parts of a sketch to expand and clarify the meaning of any element depicted. Tie
annotations to different elements in your sketch using arrows, braces, numbering and
spatial proximity. Write your annotations using a different color that contrasts with the
sketch proper.
 Arrows – Apart from pointing to specific elements in a sketch, use arrows to illustrate
interaction flow, a sequence of events, movement and direction.
 Notes – Any text, long or short, that provides additional insight into your sketch is a
note. Use notes to do the following:
 Provide detailed explanation of the action or sequence illustrated.
 Describe an idea derived from an illustration.
 List unresolved issues.
 Explore design elements not depicted in the sketch.
 Clarify the purpose of each element you present, especially non-static ones.
 Keep a record of your thought process when you first draw a sketch.

SKETCHING RED ROUTES:

The red route is one of the UX methods that help you to identify the most essential
user tasks that your team needs to focus on. This will provide you with an incredible insight
into what people want to do most within the product as well.

Within the red routes method, the tasks you need to focus on can be simply identified by
2 criteria.

 “How many of your users carry out the task” and

 “How often your users carry out the task”.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

The benefits of using the red routes method are,

 Red routes help us solve a common problem like “We’ve got so many users, they
want to do so many things, how can we possibly deal with tons of need?” by
designing for the most common use case.

 A second great thing about red routes is they produce actionable results. It affects
the feature within the product and focus on a few critical functions that are needed
by most of the user.

 Focusing on red routes helps us decide on the important decision based on a user-
centering mind and reduces the number of choices.

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

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.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Benefits of Identifying Red Routes

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

RESPONSIVE DESIGN
What is 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 (%).
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.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Ensure brand and design consistency across devices, as there is no chance to

modify guidelines to fit different design boxes.
Responsive design has three core principles:
 Fluid Grid System
o 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.
o 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.

In this image, you can see that the fixed version of the content has the same width
regardless of the device whereas in the fluid version the content fills the available
space depending on the device size.
 Fluid Images:
In responsive design, fluid images are images that scale to fit their container,
meaning that when the browser reaches a breakpoint, the image will scale up or down
to the current window size.

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.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 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.

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 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.
 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

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

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.

WIREFRAMING:
What is Wireframing?
 Wireframing is a process where designers draw overviews of interactive products to
establish the structure and flow of possible design solutions.
 These outlines reflect user and business needs.
 Paper or software-rendered wireframes help teams and stakeholders ideate toward
optimal, user-focused prototypes and products.
 Wireframing is a fundamental step in UX design.
 They're the blueprint for digital projects.
 These sketches provide a visual guide to the layout of a website or app.
 It shows where elements will go before detailed design work starts.
 They save time, reduce errors, and ensure a clear vision.
 Good Wireframes are Skeletons for Powerful Prototypes & Delightful Designs

Wireframing is the Art of Efficiency:

The aim is to communicate the structure of a possible solution so your team can
identify solid user experience (UX) design foundations to build on and stakeholders can offer
feedback on a visual item.
Different platforms have specific wireframe sizes. These are:

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Smartphone screen: 1080 px x 1920 px

 8” Tablet screen: 800 px x 1280 px
 10” Tablet screen: 1200 px x 1920 px
 Desktop screen: 768 px x 1366 px
To begin, you should:
 Focus on functionality, accessibility, layout and navigation to make a design
easier to use, produce and sell – Leave nice-to-have features out.
 Structure a hierarchy with a list of prioritized elements for each page – Determine
the information architecture early so you can categorize information clearly.
 Divide the screen into large blocks for content.
 Fine-tune these blocks with details – links, placeholders for images, etc.
 Maintain a clean grid-oriented view of all content – Apply best practice design
principles to maximize ease of use.
 Use annotations to help others understand your wireframes faster.
 Put mobile first – When you start wireframing for the smallest screens, you can
achieve better consistency across devices.
 Keep your wireframes concise – Don’t worry about finer details such as aesthetic
appeal.
The Elements of a Wireframe
 The logo signifies brand identity. It usually sits at the top corner of a page and
anchors the brand's presence.
 Navigation helps users explore different parts of the site or app. Commonly seen
as a menu bar or sidebar, it directs users to primary sections or features.
 Search fields allow users to find specific content or features. It's especially useful
for content-heavy sites.
 Text blocks on a wireframe represent the content placement. It can be headlines,
paragraphs, or bullet points.
 Buttons prompt users to take actions like "Submit," "Read More," or "Buy Now."
 Image placeholders show where you will place your visuals. They help in
understanding the content-to-visual balance on a page.
 Videos mark the areas on the wireframe where multimedia content, such as
videos or animations, will appear.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Different Types of Wireframes

1. Low-fidelity Wireframes
Low-fidelity wireframes are the first you create. They provide the basic visuals
of the design, but lack scale, grid, or pixel accuracy. The main aim is to strip away
distractions. You’ll find simple images, block shapes, and placeholder text in this
wireframe. An example is sketching an app layout on paper. This approach is
beneficial for initial tests.
2. Mid-fidelity Wireframes
Among the three, mid-fidelity wireframes are the most prevalent. They offer a
clearer layout view, though they still omit visuals like images or
specific typography. But, components have more precision, and features stand out.
Designers might use varied text weights. It helps distinguish between titles and
body text. They don't use colors, but different shades of gray can indicate elemental
importance. While suitable for early product stages, designers usually craft these
using digital tools like Miro or Figma.
3. High-fidelity Wireframes:
High-fidelity wireframes are detailed. They provide pixel-specific layout
views. Unlike the low-fidelity version, which might use placeholder text and
symbols, these wireframes present actual images and relevant content.
Their intricate detail makes them apt for exploring and recording complex
ideas. Think of detailed menu systems or dynamic maps. Designers reserve high-
fidelity wireframes for the design cycle's advanced stages. They refine and finalize
design concepts using these.
When to Use Wireframes?
Wireframes play a role throughout a project. They're essential for clarity, feedback,
planning, and testing. But they serve a specific purpose. Here are the scenarios where
creating wireframes can help.
Explore the initial idea: At the start of a project, wireframes help visualize rough ideas.
They bring abstract concepts to life.
Collect meaningful feedback: Before you get into the details of a design, wireframes help
you gather initial feedback. Stakeholders, members of the design team, and potential users
can provide valuable insights before you move on to the next step.
Plan functionality: Wireframes map out where you will place functional elements like
buttons or interactive features. It helps you understand how to create an interaction design
for usability.
Structure content: Wireframes help plan where content will appear. For instance,
positioning text, images, or multimedia is easier.
Customer journey mapping: Wireframes are tools to plot user journeys. They enable
designers to envision how users will navigate a site or app.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Usability testing: Before final designs, wireframes can undergo usability tests. It helps
identify and rectify usability issues early.

Benefits of Digital Wireframing

 Precision: Digital tools offer accurate measurements. This ensures elements align and
match the intended design.
 Efficiency: Speed up the wireframing process. Features like copy, paste, and
templates save time.
 Collaboration: Many digital tools have built-in collaboration features. Teams can
review, comment, and iterate together in real time.
 Version control: Digital wireframing can help you track changes. Most tools offer
version history and allow designers to revert or compare versions.
 Easy sharing: You can share digital wireframes with a link. It eases the process of
gathering feedback.
 Interactivity: Some tools enable clickable wireframes. This simulates user
interactions by offering a dynamic preview.
 Scalability: Adjusting wireframe sizes for various devices is straightforward. It
ensures designs are responsive.
 Integration: Many tools integrate with other design software. This streamlines the
transition from wireframing to high-fidelity designs.
 Asset management: It’s easy to organize and store assets. Icons, components, and UI
elements remain at your fingertips.
 Professional presentation: Digital wireframes look polished. Presenting them to
stakeholders or clients gives a professional impression.

Wireframing tools and software

Wireframing tools help you map out the user experience, layout, and overall flow.
1. Figma
Figma is a top-tier, cloud-based design tool. It's a favorite among solo designers and
teams alike. Even free users benefit from its comprehensive feature set.
FigJam, an online whiteboard, integrates with Figma, and you can use it
for brainstorming and user flow mapping.
Best Features
 Generous free plan
 Online whiteboard companion (FigJam)

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Seamless team collaboration

 Vector-based pen tool
 Integrated team conversations

2. Mockflow
MockFlow is an online wireframe tool with real-time collaboration. Its clean, intuitive
interface makes wireframing simple with many UI packages. The platform has design
controls placed on the left, which maximizes the space for the design. Beginners find it easy
to use due to the precise placement of its diverse elements.
The platform offers unique features, like organizational functionality. It allows you to create
separate spaces for each project. You can also export in various formats, including Word and
PowerPoint.
Best Features
 Intuitive interface
 Multiple project management
 Diverse design elements
 Slack and Microsoft Teams integration
 AI image and text generators

3. Lucidchart
Lucidchart is a diagramming tool accessible via web browsers. It empowers users to
draw, do revisions, and distribute charts and diagrams collaboratively. This platform is ideal
for enhancing organizational structures, systems, and various workflows. With a user-friendly
interface, it's a top choice for those seeking visual collaboration tools.
The platform’s strength lies in promoting teamwork through real-time collaboration, in-app
chats, and extensive integration capabilities. Lucidchart syncs with popular tools, including
Microsoft Office and Google apps, and connects with its virtual whiteboarding product,
Lucidspark.
Best Features
 Vast wireframe template library
 Drag-and-drop functionality
 Real-time collaboration
 In-app chat
 Automatic sync and save

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

4. Miro
Miro is a dynamic AI-powered virtual whiteboard platform. It fosters real-time team
collaboration with features like sticky notes, wireframe libraries, and mind-mapping tools.
With diverse integrations and templates, Miro provides a holistic solution for brainstorming
and design. The free version is generous, and additional perks come with the team plan.
Best Features
 Collaborate in real-time on whiteboard
 Extensive wireframe library
 Versatile mind-mapping tools
 Diverse built-in templates
 Seamless integration options (Slack, Dropbox, etc.)
 Realistic sticky notes for brainstorming
How to Create Wireframes: A Step-by-Step Guide
Step 1: Do Your UX Research
Before sketching, you need to have a good understanding of your audience and business.
Start your UX research from the perspective of your target audience.
Utilizing tools like user personas or the jobs-to-be-done (JTBD) framework can be
invaluable here.

Step 2: Define Requirements and Prioritize Features

After you complete your UX research, the next step is narrowing down what to build.
At this stage, involve stakeholders or the product owner. They will help translate broad user
needs into specific features.
This step is crucial for deciding what elements will make it to the wireframe. Make a
list of prioritized features to guide the design process. This ensures you focus on what’s most
important for users and the business.

Step 3: Map the User Flow

User flow is the blueprint of a user's journey on your platform. Taking an e-commerce
site as an example, a user's path might start from the homepage, leading to a product search,
then product selection, payment, and finally, order confirmation.

Step 4: Sketch the Layout and Features

With the user research and project requirements in hand, sketch your wireframe.
Select an appropriate canvas size and start positioning elements. Piece together a puzzle; you
can shift components to achieve an intuitive, user-friendly design.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Step 5: Review and Iterate

Now, share your wireframes. Gather input from stakeholders, including business
professionals and developers. Consider guerrilla usability tests, which involve testing the
wireframe with users to gather insights.
When you collect feedback, frame your questions to include broad insights and
specific details. If you have varied wireframe versions, let reviewers pick their favorites.

Step 6: Build on It
Upon reaching a mutual agreement on the wireframe design, progress to the next
stages. Create detailed mockups and interactive prototypes and transform them into minimum
viable products. This progression helps refine the user experience so that the final product is
functional and user-centric.

CREATING WIREFLOWS:

What is a Wireflow?

A wireflow is a visual representation of the screens and interactions a user

follows to complete specific tasks. It combines aspects of a basic wireframe, task flow,
and flowchart to advanced screen flows that depict multiple navigation paths in one
diagram.

A wireflow is a hybrid design document that combines wireframing with flow

diagramming. They are essentially wireframes showing user and system flow.

Simply adding arrows and annotations between wireframes on a single canvas will
indicate the paths a user may take while using your product. These small changes to your
wireframes will communicate the visual changes in the interface while simultaneously
describing state changes and sequences in the user interaction.

Comparing wireframes with flow diagrams

Wireframes
Wireframes are good for representing static interfaces. Data and layout in an interface
commonly change as users interact with a product, however, so the single static wireframe
may not represent the complexity of those changes well.

The example below shows a page for a product on a shopping site.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

This wireframe gives a good idea of what elements should appear and where they
should be laid out on product pages for a store. However, some of these interface elements
trigger actions.

Flow diagrams

Flow diagrams may be used for designing interactions.

There are several types of flow diagrams that are useful in designing software products —
task flows, user flows, and flowcharts. The lines between each of these have become
blurry, and we’ve seen the term user flow used interchangeably with both task flows and
flowcharts. This class of diagrams is great for showing directional flow and/or decision-based
logic.

Task flows

Task flows are useful for designing how a user will complete a task.

Task flows are usually shown as a linear sequence of steps, and can be designed at a high
level, or be very detailed, dividing a task into sub-tasks. They may be the result of task
analysis activities, which are designed to observe how users complete tasks.

Task flows are also useful in planning the optimal paths for task completion, particularly
since they can be easily expressed in natural language. You might also think of them as visual
answers to user stories, because they’re written in a similar way.

If your user story is: User would like a fast way to buy single pieces of apparel, you might
propose a task flow such as this:

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

While task flows are suited to predicting how the user completes a task, they usually don’t
explore deviations from those ideal paths.

Flowcharts

Flowcharts are good diagrams for indicating the path the user takes when
interacting with the system (the user task flow), decisions they make on that journey, and
the reactive back-end processes they may trigger.

The diagrams include starting and endpoints, decisions points, the directional flow of the
system, and the reaction of the system as it responds to the user’s input, including how data is
handled and transported.

Flowchart example

This type of flow diagramming is good for indicating the user/system flow more thoroughly,
showing the branching of paths at decision points and how data flows through the system.
While they’re good at representing this complexity within the product, they do not show the
design of the interface at different points. This is where wireflows help to bridge the gap
between wireframes and flowcharts.

Wireflows

Wireflows combine the benefits of wireframes and flow diagrams. Wireflows

visually show how parts of the interface change, as the user interacts with the application.
Additionally, annotations may be added to indicate such factors as transmission of data
within the system.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Wireflows can be thought of as simply being an extension of your wireframing

practice to add user flow information directly into your interface design.

How to approach wireflow creation

Product designers have been using hybrid methods for wireframing for a long time. Most
commonly, we see people breaking out of the single view to show what happens to the
dynamic portions of the view.

Another common wireflow practice we see repeatedly is in the design of mobile applications.
Because mobile viewports are small compared to desktop applications and websites, it is
common to reproduce entire key screens and show state changes.

Here are 3 simple steps to think about when wireflowing:

1. Start with words

2. Define key screens
3. Connect screens

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

1. Start with words

A good way to start is to work with words to think through sequences. Often times,
we start from describing the need and problem in a user story. Then, express a solution in
words, or using a simple task flow.

2. Define key screens

Next we might start to think of key screens in the interface. A good way to
approach this is to think in terms of starting and ending points.

The goal is to identify screens where the interface changes its state, for instance when data is
dynamically updated during a process like checking out of a store. You might see a form that
progressively asks for more input, e.g. contact information, shipping information, and billing
information in one view. Each of those would need design.

3. Connect screens

Next we might start to think of connecting the key screens. Draw arrows between the
boxes to define the space between the key screens and move the user forward through
their task. We might include decision points and show what happens in different cases if the
user chooses one option, and what happens if they choose another.

An example

Let’s say we are designing a cat photo-sharing app and we want to design the sign-up and
first-time user experience. Let’s break this approach down:

1. Tasks: Sign Up and First Time Experience

 Sign Up: User signs up, setting a username, email and password.
 First Post: User's first task is to take their first picture right after sign-up
confirmation.
2. Key Screens:
 Unregistered starting page
 Sign Up Screens
 Sign Up Confirmation
 Sign In Screens
 First Post
 Feed (Confirmation)

3. Wireflow

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

BUILDING A PROTOTYPE:
What is a prototype?
 A prototype is a preliminary model of something from which later iterations are
developed or copied. It’s essentially a way to show design intent.
 In UX design, a prototype is usually some sort of simulation that shows developers,
stakeholders and other team members how users will interact with the final product.
 A prototype is not wireframes or mockups.
 In UX Design, prototypes are expected to have some level of interactivity.
 Mockups and wireframes are considered static, non-interactive design assets..
Purpose of prototyping:
Prototyping allows for testing before development for maximum efficiency
throughout the building process. Effective testing during the research phase will save the
product’s reputation. Plus, it’ll make the time and money spent on developing the product
much more efficient.
What is fidelity?
Fidelity refers to how precisely a prototype lines up with the final product. The
fidelity of a prototype might vary in its functionality, visual design or content.
Benefits of Prototyping
 We can overview the working system early in the process.
 It can be used to test each component of the finished product before it is constructed.
 Results in higher user satisfaction
 Problems are detected before launch of the product.
 Reduces development time and cost.
 Missing functionality can be identified prior to the launch of the product.
 Scope of considering new requirements

Types of Prototyping:

1. Low-fidelity prototyping:
 A product that is not autonomously interactive, has an incomplete visual design
or lacks content would be considered a low-fidelity or lo-fi prototype.
 Lo-fi prototypes are an easy method to communicate a high-level design
concept tangibly.
 Lo-fi prototypes are generally used for testing functionality rather than visual
design.
 Lo-fi prototypes are affordable, speedy and helpful for team collaboration.
2. Medium-Fidelity Prototyping:
 Medium fidelity prototyping has limited functionality but clickable areas which
present the interactions and navigation possibilities of an application.
 It is a more detailed and realistic prototype than Low-fidelity prototyping.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

3. High-fidelity prototyping:
 High-fidelity or hi-fi prototypes are essentially functional prototypes.
 They look and act as closely as possible to the final product.
 A hi-fi prototype is realistic, detailed, dynamic and functional.
 They look like a real app or website, have the same content that will appear in
the final design and are interactive.
 Once a team has tested, iterated and clarified their designs, they create a hi-fi
prototype.
 Generally, hi-fi prototypes are more expensive because they take more time and
work to develop.
 They’re great for usability testing with real users.
 They allow designers to test very specific aspects of their design choices like
animated transitions, stages of the user’s journey.
How are prototypes made?
Prototypes can be made analog – on paper – or digitally. Digital prototypes are
typically made using wireframe software and prototyping tools like Figma, Sketch, Framer or
Adobe XD.
Paper prototype
Paper prototyping is when a digital product or interface is sketched out on paper. This
is a low-fidelity form of prototyping. Usually, designers create hand drawings of the different
screens they want to explore.
Linked wireframe prototype
To create a linked wireframe prototype, designers create digital mockups of each part
of an app or website and link them together. When users click on something, they will be
taken to another corresponding wireframe, mimicking how the final product will work.
Digital prototype
Digital prototypes are high-fidelity mockups of an entire app. They can be created
with prototyping software.
Coded prototype
Coded prototypes are typically a hi-fi mockup of the proposed final product. They are
the closest thing you can get to the ready-to-launch design.
Prototyping: Steps from Concept to Reality:
Step 1 (Requirements analysis): A prototyping model begins with requirement
analysis. In this phase, the requirements of the system are defined in detail and gives a brief
idea of the system to the user.
Step 2 (Quickly Designing the Prototype): A rapid and straightforward design of the
entire product is made at this stage. It is not a complete design and gives a brief idea of the
system to the user.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Step 3 (Creating a Prototype): It is a small working model of the required system.

This should be very close if not exactly like the final product that is meant to be developed.
Step 4 (Testing the Prototype): In this step to validate the design decisions before
mass production, real users will be needed try the product and identify issues that might
arise. It finds out any flaws and mistakes in the working model. Comment and suggestion
will be collected from the customer and then provided to the developer.
Step 5 (Prototype refinement): Prototype will be refined according to the feedback
and suggestions in this stage. A final system is developed after receiving all the suggestions
and feedback.
Step 6 (Launching your test): Before launching the test, it’s important to do a trial
run with a colleague or friend to check if the set-up works as expected or not.
Step 7 (Sharing the results): After receiving the responses it is time to analyze the
test results. It will help in improving the product and will give direction to adjust the UI and
UX, and iterate to get closer to the product launch.
Step 8(Implementation of the product and Wrap up): The final product will be
developed according to the final prototype model and this will be tested thoroughly. After
launching of the product, remember to conduct Live Website Testing.

Best Practices for Prototyping:

 Define goals and criteria: Before starting prototyping and testing, make a clear idea of
what you want to achieve and what are the specifications needed.
 Prototype only what is needed: Don’t put all the details in an attempt to build the
perfect prototype. Sometimes adding too many details can be act as a negative asset in
the Prototype.
 Only build the essential functions: It is not necessary to create a flawless and
comprehensive product. Start with the fundamental components, such as menus, CTA
buttons, and crucial links.
 Understand users and their needs: Use various methods, such as user research,
personas, scenarios, and user journeys, to gain insights into users’ behavior,
preferences, and expectations. These insights will help to define the main tasks and to
organize them in a logical and meaningful way.
 Design for different devices and screen sizes: UI navigation should adapt to different
devices and screen sizes, such as desktops, tablets, and smartphones. Use responsive
design principles and techniques to ensure that UI navigation is usable and accessible
on different devices.
 Test and Iterate: Testing and iterating are the core activities of UI prototyping. Check
usability testing, analytics, and take feedback, how well UI navigation works for
users. Identify and fix any issues or problems that users encounter, and improve the
navigation and functions accordingly.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

DESIGNING EFFICIENTLY WITH TOOLS:

1. ClickUp
ClickUp is a productivity platform designed to provide wall-to-wall solutions for any
teamor product roadmap. From daily tasks to complex projects, ClickUp offers hundreds of
features to help facilitate the various stages of the design thinking process. Whether your
team works asynchronously or in real-time, you’ll have the context and tools needed to keep
projects moving!
ClickUp best features
 Image, video, and PDF annotation tools to centralize feedback and expedite approval
processes
 Collaborative Whiteboards, Docs, and Mind Maps to develop ideas in real-time
alongside the team
 Flexible time tracking from any device, window, app, or task with the global timer
 Over 15 project views, including Calendar, Board, and the unique Workload view
 A vast Template Library for every use case, from creative briefs, design
briefs to customer journey maps
 Multiple assignees on tasks for total transparency into all progress
 Visual collaboration features available on every pricing plan
ClickUp limitations
 So many powerful collaboration tools can pose a learning curve
 Not all views are available in the mobile app—yet!
2. Hotjar
Hotjar is a design thinking tool helping businesses gain a better understanding of their
customer’s behavior and preferences. It provides a suite of tools for user research data and
heatmaps to identify pain points, optimize user experiences, and drive conversions. One of
the key features of Hotjar is its ability to create visitor recordings, which allows businesses to
see exactly how users are interacting with their website or application.
In addition to visitor recordings, Hotjar also offers a variety of other tools for
collecting feedback, including surveys, polls, and forms. This allows businesses to gather
insights directly from their users and get a better understanding of their needs and
preferences.
Hotjar best features
 Visitor recording and session replay
 Heatmaps to track user behavior on web pages
 Conversion funnel analysis to optimize sales funnels 
 Feedback polls and surveys to gather user input
User behavior analysis and segmentation

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Hotjar limitations
 Limited filtering capabilities on the free and lower-tier plans
 Custom charts are only available for teams on the Scale plan
3. Figma
Design consistency is a critical aspect of any successful design project, and Figma
makes it easier for teams with searchable assets and shareable styles. Figma allows designers
to create a centralized library of assets, including icons, logos, and other design elements.
Everyone can use the design-approved assets and maintain a consistent look and feel across
their designs!
Figma also comes with features to create and share styles for typography, color, and
other design elements. Designers can apply consistent styles across all their designs,
regardless of the designer working on them. These styles can be updated in one place and
automatically applied to all designs.
Figma best features
 Cloud-based design collaboration and sharing
 Component and style libraries for efficient design workflows
 Version history and file backup
 Team management tools and user permissions
 Integration with third-party tools like Slack and ClickUp
Figma limitations
 Limited offline functionality, as it is primarily a cloud-based tool
 Limited plugin library compared to other design thinking tools
 No mobile application
4. Make My Persona
MakeMyPersona is a design thinking tool developed by HubSpot to help businesses
create detailed buyer personas. Buyer personas are fictional representations of an ideal
customer and are essential for businesses to understand their target audience better.
But the fact of the matter is MakeMyPersona allows businesses to create detailed
personas by answering a series of questions related to the customer’s demographic, interests,
goals, and pain points. The tool then generates a detailed persona report that includes the
customer’s name, age, job title, and more.
Make My Persona best features
 User persona templates for market research and user-centered design
 Customizable persona templates and questionnaires
 Collaboration tools for persona creation and the design thinking process
 Unlimited online personas to support user testing

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Make My Persona limitations

 Limited functionality beyond persona creation
 Limited customizability of persona templates compared to other persona creation
tools
 Lacks design project management features to support every design thinking stage
5. Optimizely
Optimizely is a website optimization platform for businesses to test and optimize their
website content for maximum impact. The platform offers a suite of tools for A/B testing,
personalization, and analytics so businesses can make data-driven decisions about their
website content.
With Optimizely, businesses can test and optimize everything from headlines and
images to entire landing pages, and user flows. The platform is cloud-based, making it
accessible from anywhere with an internet connection. Optimizely is a great tool for
improving website performance and increasing engagement and conversion rates!
Optimizely best features
 A/B testing and experimentation platform for website and app optimization
 Visual editor for creating and deploying experiments
 Personalization tools for tailored user experiences
 Experiment analytics and reporting for usability testing
 Integration with other analytics and marketing tools
Optimizely limitations
 Limited functionality for non-technical users who may need to rely on developers for
more complex experiments 
 Small library of integrations compared to other different design thinking tools
 Expensive pricing model, making it less accessible for smaller businesses
6. SessionLab
Sessionlab is a web-based design thinking tool that provides a range of features to
plan, organize, and run effective meetings and workshops. The tool is designed to help teams
build innovative solutions and reduce the amount of time producing events.
One of the key features of Sessionlab is its extensive library of pre-designed templates
for different types of meetings and workshops. These templates include agendas, exercises,
and facilitation tools. These can be customized to meet the specific needs of the event and
team. Sessionlab also provides a range of tools for managing participant feedback, capturing
and sharing meeting notes, and following up on action items.

SessionLab best features

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Facilitation and workshop planning tools for the design thinking process and Agile
methodologies
 Customizable agenda templates to create a user research platform
 Collaboration tools for team-based workshop planning
 Private templates on the paid plans
 Team activity overview
SessionLab limitations
 Limited customizability of agenda templates compared to other workshop planning
tools
 Limited functionality for project management beyond workshop planning
 No offline functionality
7. Stormboard
Stormboard is a cloud-based collaboration and brainstorming tool helping teams
generate ideas and turn them into actionable plans. The tool is built to collaborate in real-
time, making it an ideal solution for remote teams working on design thinking solutions.
Stormboard provides a range of features, including sticky notes, virtual whiteboards,
and drawing tools. The tool also offers a voting system, allowing team members to vote on
the best ideas, and a prioritization feature to help teams identify the most important ideas to
focus on.
Stormboard best features
 Digital brainstorming and collaboration tool for design thinking
 Real-time collaboration and voting for remote teams
 Integration with other project management tools
 Mobile app for on-the-go collaboration
 Security features for protecting data and ensuring privacy
Stormboard limitations
 Limited ability to customize templates or create custom workflows
 Limited functionality for project management beyond brainstorming and ideation
 Steep learning curve for new users unfamiliar with digital brainstorming tools
8. Miro
Miro is an online collaborative whiteboard platform offering a range of tools to help
teams collaborate effectively, including sticky notes, drawings, flowcharts, and wireframes.
Miro also integrates with other work tools, such as Slack, Jira, and Google Drive, making it
easy to share information and files across different platforms.
Additionally, Miro offers templates to help teams get started quickly, making it easy to
create a customized workspace for each project. With its user-friendly interface, robust

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

feature set, and powerful integrations, Miro is a valuable tool for any remote team looking to
collaborate effectively.
Miro best features
 Sticky notes, images, mind maps, videos, and drawing capabilities
 Variety of templates and tools for brainstorming and wireframing
 Real-time collaboration and shared spaces for remote teams
 Integration with other project management tools and apps
 Ability to upload and share images, videos, and other files
Miro limitations
 Lacks functionality to build an in-depth knowledge hub
 Pricing is steep for smaller agencies
 Limited offline functionality
9. Mural
Mural is a digital workspace and design thinking tool for teams to ideate and iterate
their ideas. The platform is designed to support a range of design thinking stages, including
problem-solving, brainstorming, mapping, and visualization. Mural provides a range of
features and tools to help teams work together effectively, regardless of their location.
Mural’s canvas templates provide teams with a structured way to approach different
design thinking stages, while its frameworks help teams to organize as many ideas and
identify patterns. Additionally, Mural provides a range of tools for sketching, annotating, and
commenting, making it easy for team members to communicate and collaborate in real-time.
Mural best features
 Flexible permissions to create view-only, edit, and facilitator permissions
 Hundreds of pre-built templates for collaboration sessions
 Advanced integration features on the paid plans
 Extensive file support for whiteboards
 Infinite & resizable canvas options
Mural limitations
 Expensive pricing plans compared to other design thinking process tools
 Lacks the option to create interactive charts, tables, or reports
 No video chat feature
10. InVision
Wrapping up our best design thinking tools list is InVision—a digital product design
platform for designers, product managers, and other stakeholders to create and collaborate on
different types of projects. It offers a suite of tools that simplify the design process, including
prebuilt templates organized by categories and role types.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

InVision best features

 Whiteboard Importer feature to directly import Miro or Mural whiteboards
 Unlimited public and private spaces on the free tier
 Interactive widgets and reactions
 Customizable smart workflows
 Task management features
InVision limitations
 Small integration library compared to other design thinking tools
 No feature to create a flowchart or sitemap for a prototype
 Lacks team management and workload capabilities

CONDUCTING USABILITY TESTING:

What is Usability Testing?

Usability testing is the practice of testing how easy a design is to use with a group of
representative users. It usually involves observing users as they attempt to complete tasks and
can be done for different types of designs. It is often conducted repeatedly, from early
development until a product’s release.

Usability Testing Leads to the Right Products

Through usability testing, you can find design flaws you might otherwise overlook.
Whenever you run a usability test, your chief objectives are to:
1) Determine whether testers can complete tasks successfully and independently.
2) Assess their performance and mental state as they try to complete tasks, to see how well
your design works.
3) See how much users enjoy using it.
4) Identify problems and their severity.
5) Find solutions.
While usability tests can help you create the right products, they shouldn’t be the only
tool in your UX research toolbox. If you just focus on the evaluation activity, you won’t
improve the usability overall.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

There are different methods for usability testing. Which one you choose depends on
your product and where you are in your design process.

Usability Testing is an Iterative Process:

To make usability testing work best, you should:
1) Plan
a. Define what you want to test. Ask yourself questions about your design/product.
What aspect/s of it do you want to test? You can make a hypothesis from each answer. With a
clear hypothesis, you’ll have the exact aspect you want to test.
b. Decide how to conduct your test – e.g., remotely. Define the scope of what to test
(e.g., navigation) and stick to it throughout the test. When you test aspects individually,
you’ll eventually build a broader view of how well your design works overall.
2) Set user tasks
a. Prioritize the most important tasks to meet objectives (e.g., complete checkout),
no more than 5 per participant. Allow a 60-minute timeframe.
b. Clearly define tasks with realistic goals.
c. Create scenarios where users can try to use the design naturally. That means
you let them get to grips with it on their own rather than direct them with instructions.
3) Recruit testers
Know who your users are as a target group. Use screening questionnaires (e.g.,
Google Forms) to find suitable candidates. You can advertise and offer incentives. You can
also find contacts through community groups, etc. If you test with only 5 users, you can still
reveal 85% of core issues.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

4) Facilitate/Moderate testing
Set up testing in a suitable environment. Observe and interview users. Notice
issues. See if users fail to see things, go in the wrong direction or misinterpret rules. When
you record usability sessions, you can more easily count the number of times users become
confused. Ask users to think aloud and tell you how they feel as they go through the test.
From this, you can check whether your designer’s mental model is accurate: Does
what you think users can do with your design match what these test users show?
If you choose remote testing, you can moderate via Google Hangouts, etc., or use
unmoderated testing. You can use this software to carry out remote moderated and
unmoderated testing and have the benefit of tools such as heatmaps.

Keep usability tests smooth by following these guidelines.

1) Assess user behavior – Use these metrics:
Quantitative – time users take on a task, success and failure rates, effort (how many
clicks users take, instances of confusion, etc.)
Qualitative – users’ stress responses (facial reactions, body-language changes,
squinting, etc.), subjective satisfaction (which they give through a post-test questionnaire)
and perceived level of effort/difficulty
2) Create a test report – Review video footage and analyzed data. Clearly define design
issues and best practices. Involve the entire team.
Overall, you should test not your design’s functionality, but users’ experience of it.
Some users may be too polite to be entirely honest about problems. So, always
examine all data carefully.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

OTHER EVALUATIVE USER RESEARCH METHODS:

What is evaluative research?
Evaluative research is a set of research practices aimed at assessing how well the
product meets its goals.
It takes place at all stages of the product development process, both in
the launch lead-up and afterward.
This kind of research is not limited to your own product. You can use it to evaluate
your rivals to find ways to get a competitive edge.
Why is conducting evaluation research important for product managers?
Ongoing evaluation research is essential for product success.
It allows PMs to identify ways to improve the product and the overall user experience.
It helps you validate your ideas and determine how likely your product is to satisfy the needs
of the target consumers.
Types of evaluation research methods:
There are a number of evaluation methods that you can leverage to assess your
product. The type of research method you choose will depend on the stage in the
development process and what exactly you’re trying to find out.
1. Formative evaluation research
Formative evaluation research happens at the beginning of the evaluation
process and sets the baseline for subsequent studies. In short, its objective is to assess
the needs of target users and the market before you start working on any specific
solutions.
2. Summative evaluation research
Summative evaluation research focuses on how successful the outcomes are.
This kind of research happens as soon as the project or program is over. It assesses the
value of the deliverables against the forecast results and project objectives.
3. Outcome evaluation research
Outcome evaluation research measures the impact of the product on the
customer. In other words, it assesses if the product brings a positive change to users’
lives.
4. Quantitative research
Quantitative research methods use numerical data and statistical analysis.
They’re great for establishing cause-effect relationships and tracking trends, for
example in customer satisfaction.
5. Qualitative research
Qualitative research uses non-numerical data and focuses on gaining a deeper
understanding of user experience and their attitude toward the product.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Best evaluative research data collection techniques

 User feedback surveys
User feedback surveys are the cornerstone of the evaluation research
methodology.
 A/B testing
A/B tests are some of the most common ways of evaluating features, UI elements,
and onboarding flows. That’s because they’re fairly simple to design and administer.
Usability testing
Usability testing helps you evaluate how easy it is for users to complete their tasks in the
product.
There is a range of techniques that you can leverage for usability testing:
 Guerilla testing is the easiest to set up. Just head over to a public place like a coffee
shop or a mall where your target users hang out. Take your prototype with you and
ask random users for their feedback. 
 In the 5-second test, you allow the user to engage with a feature for 5 seconds and
interview them about their impressions. 
 First-click testing helps you assess how intuitive the product is and how easy it is for
the user to find and follow the happy path. 
 In session replays you record and analyze what the users do in the app or on the
website.
 Eye-tracking uses webcams to record where users look on a webpage or dashboard
and presents it in a heatmap for ease of analysis. 
As with all the qualitative and quantitative methods, it’s essential to select a representative
user sample for your usability testing. Relying exclusively on the early adopters or power
users can skew the outcomes.
Beta testing
Beta testing is another popular evaluation research technique. And there’s a good reason for
that.
By testing the product or feature prior to the launch with real users, you can gather user
feedback and validate your product-market fit.
Most importantly, you can identify and fix bugs that could otherwise damage your reputation
and the trust of the wider user population. And if you get it right, your beta testers can spread
the word about your product and build up the hype around the launch.
Fake door testing
Fake door testing is a sneaky way of evaluating your ideas.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Usability evaluation questions

 How was your experience completing this task?
 What technical difficulties did you experience while completing the task?
 How intuitive was the navigation?
 How would you prefer to do this action instead?
 Were there any unnecessary features?
 How easy was the task to complete?
 Were there any features missing?
Product survey research questions
 Would you recommend the product to your colleagues/friends?
 How disappointed would you be if you could no longer use the feature/product?
 How satisfied are you with the product/feature?
 What is the one thing you wish the product/feature could do that it doesn’t already?
 What would make you cancel your subscription?

SYNTHESIZING TEST FINDINGS:

5 steps to properly synthesize your usability test findings:

You can run testing after you’ve done your initial sketches, after your basic
wireframes are done, after you add high fidelity content, or colours, or full UI elements, etc.

Usability testing validates organically derived functionality and usefulness or

identifies confusion — any pass/fail is a judge of the design and use of the product only, not
the user.

Who should participate in your tests?

 The target audience — so make sure you qualify your participants first.
 And you can test with your non-target audience, but they’ll have to “pretend” to be
your target audience
 You shouldn’t use the same people for each round of testing, because they’ll have
seen your product so their feedback won’t be as genuine.

How many tests should you run? And at what stage should you run them?

At each stage through the design process that you want to test your product, you
should do so with 5 different people. With 5 people you’ll identify 80% of the major issues,
so there are diminishing returns after that.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

How to properly synthesize test results

Record your test sessions (and take detailed notes)

Before we talk about the steps of synthesis, it’s worth noting that you should record
your test sessions. Make sure to ask your test subjects if it’s ok to record them and tell them
what the recordings will be used for — likely just to provide abstracted feedback that will
shape your product going forward. No personal information or auditory sound (or video) will
be shared, transparency is important.

Step 1: Identify the findings from each test

Use sticky notes (or a spreadsheet) to extract quotes that speak to pain points or
general confusion (we’ll call these “findings”) encountered during each test.

Step 2: Group your findings into themes

Now put all of your findings about similar topics together, creating clusters of
findings. You may find that as you cluster your findings that sub-clusters immerge, or that
you may want to re-cluster them in a different way and name them, we’ll call these “themes”.

Step 3: Consolidate finding and convert them into insights

Now that your themes are defined, you should see that the same pain points,
frustrations and confusion happen over and over again. Combine all findings that are about a
single thing into one and denote the issue (we’ll call this an “insight”).

Step 4: Identify the solutions for each insight

Now it’s time to start thinking about how to solve the problems that have come to
light. Review each insight and list possible solutions. In some cases, you may not be able to
visualize the fix and may need to go back to the drawing board. Much like how you designed
the original approach, you may need to sketch, wireframe and test any new approaches
depending on their complexity.

Step 5: Map out the solutions on a time vs value matrix

Of the solutions that are explored in step 4, you’ll likely be able to make some
assumptions on the perceived value of each one to the user (and the business), and how much

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

time each one will take to design (and build!). Some solutions that involve going back to the
drawing may turn out better, but they may equally not yield an improvement. The simple
truth is that you may not have time to design the ideal solution for everything now — also,
some things are just better solved only after you have real users using your product. So, you
need to decide which solutions to attempt, and which to defer or ignore.

Anything that fell in the top right I focused on (fast and high value). If I had time for
items in the top left (fast, but low value) or bottom right (lengthy, but high value), I’d choose
to tackle them next. Anything in the bottom left was unlikely to get tackled (lengthy, and
minimal value)

PROTOTYPE ITERATION:
Iteration is the technique of testing and refining the prototypes based on user feedback
and evaluation. Iteration allows you to identify and solve problems, improve usability, and
enhance user satisfaction. Iteration can occur at any stage of the design process, from the
initial concept to the final product.

Why are UI/UX prototyping and iteration important?

 Prototyping and iteration are important for UI/UX design because they help you to:

 Explore different ideas and solutions in a fast and cost-effective way.

 Prototyping allows you to experiment with various features, interactions, layouts, and
styles without investing too much time and money in development.

 Prototyping also helps you to communicate your ideas more clearly to stakeholders,
developers, and users.

 Validate your assumptions and hypotheses with real users. Prototyping enables you to
test your designs with actual users in realistic scenarios and contexts. This way, you
can gather valuable feedback and insights on how users perceive, understand, and use
your product.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Prototyping also helps you to measure the effectiveness of your designs in terms of
user goals, needs, preferences, and expectations.

 Improve your designs based on user feedback and evaluation. Iteration allows you to
incorporate user feedback into your designs and make changes accordingly. Iteration
also helps you to refine your designs by eliminating unnecessary or confusing
elements, adding missing or desired features, enhancing usability and accessibility,
and optimizing performance and aesthetics.

How to create UI/UX prototypes and iterations?

There is no one-size-fits-all approach to creating UI/UX prototypes and iterations.
However, there are some general steps that you can follow:

 Define the problem and the goal. Before creating any prototype, you should have a
clear understanding of what problem you are trying to solve and what goal you are
trying to achieve with your design. This will help you to focus on the most important
aspects of the product and avoid unnecessary distractions.

 Choose the appropriate level of fidelity. Depending on the purpose, scope, and
stage of the design process, you should choose the appropriate level of fidelity for
your prototypes. For example, low-fidelity prototypes are suitable for exploring
different concepts and ideas, while high-fidelity prototypes are suitable for testing
specific features and interactions.

 Select the appropriate tools and methods. There are various tools and methods
available for creating UI/UX prototypes, such as sketching, wireframing, mockuping,
prototyping software, HTML/CSS/JavaScript coding, etc. You should select the tools
and methods that best suit your needs, skills, budget, and time constraints.

 Test the prototypes with users. Testing is an essential part of prototyping and
iteration. You should test your prototypes with real or representative users in realistic
or simulated environments. Testing can be done in various ways, such as interviews,
surveys, observations, usability tests, A/B tests, etc. Testing should aim to collect both
quantitative (e.g., metrics) and qualitative (e.g., feedback) data from users.

 Analyze the results and iterate. After testing the prototypes with users, you should
analyze the results and identify the strengths and weaknesses of your designs. You
should also prioritize the issues that need to be addressed and decide on the actions
that need to be taken. Based on the analysis, you should iterate your prototypes by
making changes or creating new versions until you reach a satisfactory solution.

5 Benefits of Iterative Design and Prototyping

There are five major benefits of iterative design and prototyping:
1. Greater Efficiency and Faster Time to Market
Iterative design and prototyping is typically more efficient than a traditional design
process because creating new designs and prototypes is fast and simple. The initial design
process only lasts a few days to a few weeks depending on the complexity of the design. The
goal is to get a working prototype of the design as quickly as possible so that engineers can

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

identify and fix potential mechanical problems, material challenges, or other details that can’t
be easily foreseen during the design stage.
2. Lower Product Development Costs:
Iterative design and prototyping relies on cost-effective tools like CAD software and
rapid prototyping technology, such as 3D printers or CNC machines. These tools make it easy
to produce multiple prototypes at relatively little cost. This is often more cost-effective than
pooling most of your resources and labor into a single prototype, especially if that prototype
ultimately doesn’t meet your end-users’ needs.
3. Thorough Product Testing:
One advantage of iterative design and prototyping that can’t be overlooked is its
impact on the quality of the products you create. This process relies on thorough testing and
feedback with every new iteration.
4. Fewer Redesigns:
A full redesign slows your product development process down significantly and adds
to the total cost of the project. Iterative design helps prevent this by encouraging designers
and engineers to iron out serious flaws in the design as early as possible.
5. More User-Friendly Products:
Because end users are typically involved much earlier in the process, you’re more
likely to create an end product that they actually find useful. Sometimes it’s quite difficult to
know what end users’ pain points are, and if you overlook these pain points, your product
will be less effective.

UI AND UX DESIGN Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

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

Many great business ideas begin with a crucial problem that needed solving. One of
the best ways to properly diagnose and solve problems is to write a problem statement.
What is a problem statement(also known as a Point Of View (POV))?

Problem statements summarize a challenge you want to resolve, its causes, who it
impacts, and why that’s important. They often read like a concise overview managers can
share with stakeholders and their teams.

Why are problem statements important?

Problem statements help you share details about a challenge facing your team. Instead
of rushing to a solution, writing a problem statement enables you to reflect on the challenge
and plan your response.
The high-level perspective a problem statement offers lets teams focus on the factors
they need to change. Managers also use this top-down vantage to oversee their teams as they
work out solutions.
When to use a problem statement?

Any time you face a challenge is an opportunity to write a problem statement. You
can write a problem statement to improve operations in different contexts. For example, you
might use a problem statement to:

 Refine project proposals: Managers write project proposals to solve user issues.
Problem statements inform these proposals, shaping their goals, plans, and approaches.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Develop your product offering: Many startups build their business model on solving a
long-standing problem. Problem statements help clarify a company’s mission and
core product design.
 Clarify the outcome of solving a problem: Problem statements point out the long-term
benefits of solving the issue, which can help you put the problem into context for
stakeholders and secure necessary resources.
 Collaborate with multiple teams: You can rally teams around a common goal if you
frame it as a shared problem. Collaboration ensures you examine the problem and reach
solutions from all possible angles.
 Improve the user experience: Problem statements can identify pain points and ways to
enhance a product. When teams act on problem statements, this can improve UX.
What are the elements of a problem statement?

You can break problem statements into a few core elements. While the format of a problem
statement is flexible, aim to include the following:
 Gap: the challenge, issue, or pain point you currently face
 Orientation: a description of when and where you found the problem and the trend it
creates or follows
 Impact: a measure of your problem’s consequences in cost, time, quality, environment,
or personal experience
 Importance: why this problem matters to your organization and customers

How to write a problem statement

Now that you understand the elements of a problem statement, you can write your own in
five key steps.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

1. Identify the problem

Start by pointing out an issue and gathering data. Put yourself in the support or
production environment where the problem arises and try to experience it firsthand. When
gathering data, look for trends or overarching themes—they may help you find the root cause
of your problem later.
After seeing the problem for yourself, interview others who know about it. Start with
employees who run into the problem or offer support for it. In some cases, they may have
a design brief with more information on the issue. Beyond that, customer testimonials and
stakeholder interviews can lay out the full scope of your problem.

2. Put the problem into context

Describe how the problem impacts customers and stakeholders. Avoid personal bias
and focus on developing a clear perspective. This approach helps prioritize the issue and
explain why you need to solve it. If customers can't reach the benefits of your product
because of an issue, that's a high-priority concern.

You can put a problem into context by asking:

 Does the problem lead to a reputational, financial, or logistical cost?

 Is the main issue a symptom of a greater challenge?
 Has your team already tried to solve this problem? Why didn’t past solutions work?
 What do you and your team definitely know about the current problem?

3. Find the root cause

Ask yourself "why" questions about the problem to find its origin point. Your initial
assumptions about a problem might stand in the way, so as you learn more about the issue,
don’t be afraid to change how you look at it. You'll get closer to the root cause as you
reframe your understanding around these discoveries.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

4. Describe your ideal outcome

Now that you understand the problem, think about your ideal outcome. Whether
you're solving a problem with your product or an internal process, remember to avoid
scenarios where you put a Band-Aid on the issue. Even if you can avoid specific symptoms in
the short term, letting a core problem go unsolved can lead to other setbacks later.

5. Propose a solution and outline its benefits

Finally, your problem statement should include solutions to the problem. Including
more than one solution gives stakeholders and your team options for deciding your approach.
Note the benefits of each solution, highlighting why it stands a chance of working or how it
can save on time and costs.

To ensure you arrive at the best solution, be sure to:

 Ask your team if the proposed solution matches their understanding of the problem.
 Consider more than one solution. Sometimes, you can choose between multiple options or
apply more than one solution at once.
 Include long-term financial, intangible, and operational benefits the solution provides.
 Consider whether your solution has blind spots or causes changes that could lead
to more issues.
Problem statement examples
Now that you know how to write problem statements, here are some examples.

Example 1: Support ticket wait times

Suppose you’re a support manager at a midsize SaaS company. Ideally, you want to respond
to every support request within a few hours. However, your team can’t reach turnaround
times fast enough to meet customer expectations. Start by breaking down the elements of
your problem statement:

 Gap: Customers have long wait times for their support tickets to get a response.
 Orientation: This problem began in the last few months and has only worsened.
 Impact: Customers aren't happy with their quality of service, and your teams feel burnt
out from trying to keep up.
 Importance: Retaining customers with support is essential for sustaining your business.

Now that we’ve laid out the details, we can format it as a problem statement:
1. Identify the problem: You have high support ticket turnaround times. Gather data by
tracking how the time has lengthened in the past few months and talking to customers about
inconsistencies in wait times.
2. Put it into context: Customers upset about their wait could switch to competitors. You
initially assumed it was seasonal demand rising, but wait times haven’t tapered off, which
could cause reputational and financial problems.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

3. Find the root cause: You initially assumed demand had increased. Support tickets have
remained steady, but your AI support designed to solve minor problems has had fewer
tickets. This lack of AI support has your teams stretched thin.
4. Describe your ideal outcome: AI support should be able to handle more advanced queries.
This way, your service teams can focus solely on tickets too advanced for AI.
5. Propose a solution: Choose between assigning devs to revamp your AI or investing in a new
solution to handle tickets. You can also consider reworking support agents' workflows to
focus more on direct customer contact.

IDENTIFYING APPROPRIATE RESEARCH METHODS

After defining your objectives and planning your research framework, it’s time to
choose the research technique that will best serve your project's goals and yield the right
insights
What are UX research methods?
A UX research method is a way of generating insights about your users, their
behavior, motivations, and needs. You can use methods like user interviews, surveys, focus
groups, card sorting, usability testing to identify user challenges and turn them into
opportunities to improve the user experience.

The most common types of user research

Qualitative vs. quantitative
All research methods are either quantitative or qualitative. Qualitative research
focuses on capturing subjective insights into users' experiences. It aims to understand the
underlying reasons, motivations, and behaviors of individuals. Quantitative research, on the
other hand, involves collecting and analyzing numerical data to identify patterns, trends,
and significance. It aims to quantify user behaviors, preferences, and attitudes, allowing for
generalizations and statistical insights.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Qualitative research also typically involves a smaller sample size than quantitative research (40
participants, as recommended).

Attitudinal vs. behavioral

Attitudinal research is about understanding users' attitudes, perceptions, and beliefs. It
delves into the 'why' behind user decisions and actions. It often involves surveys or
interviews where users are asked about their feelings, preferences, or perceptions towards a
product or service. It's subjective in nature, aiming to capture people's emotions and opinions.
Behavioral research is about what users do rather than what they say they do or would do.
This kind of research is often based on observation methods like usability testing, eye-
tracking, or heat maps to understand user behavior.

Generative vs. evaluative

Generative research is all about generating new ideas, concepts, and insights to fuel
the design process. You might run brainstorming sessions with groups of users, card sorting,
and co-design sessions to inspire creativity and guide the development of user-centered
solutions.
On the other hand, evaluative research focuses on assessing the usability,
effectiveness, and overall quality of existing designs or prototypes. Once you’ve developed a
prototype of your product, it's time to evaluate its strengths and weaknesses.

11 Best UX research methods and when to use them

There are various UX research techniques—each method serves a specific purpose
and can provide unique insights into user behaviors and preferences.

Research technique Description When to use it Best for gathering

User interviews One-on-one open-ended Start and end of Qualitative

and guided discussions your project Generative

Field studies All stages Qualitative

Observe people in their
Behavioral
natural environment
Focus group Start and end of Qualitative
Group discussions
your project Generative
facilitated by a moderator

Diary studies Users keep a diary to track Start of your project Qualitative
interactions and experience Evaluative
with a product

Surveys All stages Qualitative

Asking people open or
Quantitative
closed questions
Attitudinal
Generative
Evaluative

Card sorting Users sort information and Start of your project Qualitative
ideas into groups that Generative
Attitudinal

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Research technique Description When to use it Best for gathering

makes sense to them

Tree testing Assess the findability and Start of your design Quantitative
organization of or redesign process Behavioral
information as users Evaluative
navigate a stripped-down
IA

Usability testing Users perform a set of All stages Qualitative

tasks in a controlled Behavioral
setting Evaluative

Five second testing Collect immediate During initial Attitudinal

impressions within a short ideation and Evaluative
timeframe throughout design

A/B testing Compare two versions of a All stages Quantitative

solution Evaluative

Concept testing Evaluate the feasibility, During initial Qualitative

appeal, and potential ideation, design, Generative
success of a new product and before launch

1. User interviews
User interviews are a qualitative research method that involves having open-ended and
guided discussions with users to gather in-depth insights about their experiences, needs,
motivations, and behaviors.
Typically, you would ask a few questions on a specific topic and analyze participants'
answers. The results you get will depend on how well you form and ask questions, as well as
follow up on participants’ answers.

 Start with a wide context: Make sure that your questions don’t start with your
product
 Ask questions that focus on the tasks that users are trying to complete
 Invest in analysis: Get transcripts done and share the findings with your team
2. Field studies
Field studies are research activities that take place in the user’s environment rather than in
your lab or office. They’re a great method for uncovering context, unknown motivations, or
constraints that affect the user experience.
An advantage of field studies is observing people in their natural environment, giving you
a glimpse at the context in which your product is used. It’s useful to understand the context in
which users complete tasks, learn about their needs, and collect in-depth user stories.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

3. Focus groups
A focus group is a qualitative research method that includes the study of a group of
people, their beliefs, and opinions. It’s typically used for market research or gathering
feedback on products and messaging.
Focus groups can help you better grasp:
 How users perceive your product
 What users believe are a product’s most important features
 What problems do users experience with the product
 As with any qualitative research method, the quality of the data collected through
focus groups is only as robust as the preparation. So, it’s important to prepare a UX
research plan you can refer to during the discussion.

4. Diary studies
Diary studies involve asking users to track their usage and thoughts on your product
by keeping logs or diaries, taking photos, explaining their activities, and highlighting things
that stood out to them.
A diary study helps you tell the story of how products and services fit into people’s
daily lives, and the touch-points and channels they choose to complete their tasks.
 Open, ‘freeform’ diary: Users have more freedom to record what and when they
like, but can also lead to missed opportunities to capture data users might overlook
 Closed, ‘structured; diary: Users follow a stricter entry-logging process and answer
pre-set questions

5. Surveys
Although surveys are primarily used for quantitative research, they can also provided
qualitative data, depending on whether you use closed or open-ended questions:
 Closed-ended questions come with a predefined set of answers to choose from using
formats like rating scales, rankings, or multiple choice. This results in quantitative data.
 Open-ended questions are typically open-text questions where test participants give their
responses in a free-form style. This results in qualitative data.

6. Card sorting
Card sorting is an important step in creating an intuitive information architecture (IA)
and user experience. It’s also a great technique to generate ideas, naming conventions, or
simply see how users understand topics.
In this UX research method, participants are presented with cards featuring different
topics or information, and tasked with grouping the cards into categories that make sense to
them.
There are three types of card sorting:
 Open card sorting: Participants organize topics into categories that make sense to them
and name those categories, thus generating new ideas and names
 Hybrid card sorting: Participants can sort cards into predefined categories, but also have
the option to create their own categories
 Closed card sorting: Participants are given predefined categories and asked to sort the
items into the available groups
You can run a card sorting session using physical index cards or digitally with a UX
research tool like Maze to simulate the drag-and-drop activity of dividing cards into groups.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Running digital card sorting is ideal for any type of card sort, and moderated or unmoderated
sessions.

7. Tree testing
During tree testing a text-only version of the site is given to your participants, who are
asked to complete a series of tasks requiring them to locate items on the app or website.
The data collected from a tree test helps you understand where users intuitively
navigate first, and is an effective way to assess the findability, labeling, and information
architecture of a product.
We recommend keeping these sessions short, ranging from 15 to 20 minutes, and
asking participants to complete no more than ten tasks. This helps ensure participants remain
focused and engaged, leading to more reliable and accurate data, and avoiding fatigue.

8. Usability testing
Usability testing evaluates your product with people by getting them to complete tasks
while you observe and note their interactions (either during or after the test). The goal of
conducting usability testing is to understand if your design is intuitive and easy to use. A sign
of success is if users can easily accomplish their goals and complete tasks with your product.
There are various usability testing methods that you can use, such as moderated vs.
unmoderated or qualitative vs. quantitative—and selecting the right one depends on your
research goals, resources, and timeline.
Usability testing is usually performed with functional mid or hi-fi prototypes. If you
have a Figma, InVision, Sketch, or prototype ready, you can import it into a platform like
Maze and start testing your design with users immediately.

9. Five-second testing
In five-second testing, participants are (unsurprisingly) given five seconds to view an
image like a design or web page, and then they’re asked questions about the design to gauge
their first impressions.
According to data, 55% of visitors spend less than 15 seconds on a website, so it’s
essential to grab someone’s attention in the first few seconds of their visit. With a five-second
test, you can quickly determine what information users perceive and their impressions during
the first five seconds of viewing a design.

10. A/B testing

A/B testing, also known as split testing, compares two or more versions of a webpage,
interface, or feature to determine which performs better regarding engagement, conversions,
or other predefined metrics.
It involves randomly dividing users into different groups and giving each group a
different version of the design element being tested. For example, let's say the primary call-
to-action on the page is a button that says ‘buy now’.
You're considering making changes to its design to see if it can lead to higher
conversions, so you create two versions:
 Version A: The original design with the ‘buy now’ button positioned below the product
description—shown to group A
 Version B: A variation with the ‘buy now’ button now prominently displayed above the
product description—shown to group B

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

11. Concept testing

Concept testing is a type of research that evaluates the feasibility, appeal, and
potential success of a new product before you build it. It centers the user in the ideation
process, using UX research methods like A/B testing, surveys, and customer interviews.
There’s no one way to run a concept test—you can opt for concept testing surveys,
interviews, focus groups, or any other method that gets qualitative data on your concept.

Which is the best UX research type?

The best research type varies depending on your project; what your objectives are,
and what stage you’re in. Ultimately, the ideal type of research is one which provides the
insights required, using the available resources.
For example, if you're at the early ideation or product discovery stage, generative
research methods can help you generate new ideas, understand user needs, and explore
possibilities. As you move to the design and development phase, evaluative research methods
and quantitative data become crucial.

CREATING PERSONAS
What are Personas?

Personas are fictional characters, which you create based upon your research in order
to represent the different user types that might use your service, product, site, or brand in a
similar way. Creating personas helps the designer to understand users’ needs, experiences,
behaviors and goals.

Personas Are More Than “People”

Personas are distilled essences of real users. In user experience (UX) design, you use
personas to build empathy with target users and focus on their world. You should always
create personas from observations about real users, personas should never be invented out of
your assumptions about your users. Because you must map your users’ needs to your design’s
functionality, you must first clearly define both the needs and the users.

As designers, we shape personas iteratively. We divide users into manageable groups

and represent each with a typical embodiment – a persona. For instance, for an app that helps
students budget, “Amy” represents 18-year-old females who must adapt to college life.
Through Amy, we see how our app helps these users in their day-to-day activities. We
imagine Amy has just started banking online, lives in shared housing and works weekends.
Her goal is to save money. Her scenario: she stretches $70 to cover her week’s groceries.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Create Effective Personas

Personas are deliverables in design thinking’s Define phase. As they’re extremely helpful
in ideation, they should feature early in design processes. To create them, you:

1. Collect extensive data on target users.

2. Determine the qualities of and differences between users.
3. Develop a hypothesis from the research, determining the qualities of and differences
between users.
4. Ensure stakeholders agree on the hypothesis about the users.
5. Determine a number of personas – more than one per project, but focus especially on
one.
6. Name and describe each persona in 1-2 pages, including:

a) A picture.
b) User’s values, interests, education, lifestyle, needs, attitudes, desires,
limitations, goals and behavior patterns.
c) Extra details about the persona (e.g., interests) – anything to make him/her
more real and relevant and help build empathy. A written story is
better than bullet points.
7. Describe several situations/scenarios prompting the persona to use your product – put
him/her in contexts with problems to overcome.
8. Include everyone involved in the project so they’ll accept the persona or advise
revisions.
9. Send them the persona to use in their work.
10. Ensure everyone develops scenarios – these should expose the persona optimally to
potential use cases.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

11. Make continuous adjustments – revisit the persona; add new features; add required
new personas; discard outdated personas.

How to Use Personas in Design Projects:

When you bring personas into projects, you help prevent stakeholders from designing for
themselves. It also keeps them from stretching generic users to fit designs. Personas help in
quick prototype testing, too. You’ll confirm a persona works well when you ensure that
“he/she”:

1. Stays in context – What specific points about his/her situation can you map to how
he/she can use your product now?
2. Reflects a target user’s real behavior patterns, attitudes, skillset, motivations and
goals within the product’s domain.
3. Has an end-goal – What does the user want to achieve? What features would help
him/her do that best?
4. Faces realistic, relevant scenarios—written from the persona’s perspective—to
envision how users would find they’d use the product to attain a particular goal.
5. Occupies a clear setting – a day-in-the-life approach that shows what he/she
encounters in what environment.
6. Has visible pain points – What’s the hardest/most frustrating aspect of his/her
situation/context?

SOLUTION IDEATION

What is Ideation?

Ideation is the process where you generate ideas and solutions through sessions such as
Sketching, Prototyping, Brainstorming, Brainwriting, Worst Possible Idea, and a wealth of
other ideation techniques. Ideation is also the third stage in the Design Thinking process.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Ideation is often the most exciting stage in a Design Thinking project, because during
Ideation, the aim is to generate a large quantity of ideas that the team can then filter and cut
down into the best, most practical or most innovative ones in order to inspire new and better
design solutions and products.

Ideation Will Help You:

 Ask the right questions and innovate with a strong focus on your users, their needs,
and your insights about them.
 Step beyond the obvious solutions and therefore increase the innovation potential of
your solution.
 Bring together perspectives and strengths of your team members.
 Uncover unexpected areas of innovation.
 Create volume and variety in your innovation options.
 Get obvious solutions out of your heads, and drive your team beyond them.

How to Prepare Before You Start Ideating

An ideation process such as Brainstorming or Challenging Assumptions is no

different. Wandering into a Brainstorm without preparation is asking for trouble.

Even though Design Thinking is not a linear process, it is crucial to take into account
the first two stages or modes in Design Thinking before you start ideating. If you neglect to
take these two modes and their guidelines into account before an Ideation session, you risk
becoming lost. The Empathize and Define guidelines will help you develop the sufficient
background knowledge and set a clear goal for your ideation sessions.

1st Mode: Empathize

Design Thinking’s first two modes or stages can help us prepare for the Ideation
session. The first part of the preparation is the Empathize mode, which is all about
researching and observing in field studies – and watching, engaging with and listening to
your users:

The Empathy mode will help you conduct relevant research and become an instant-
expert on the subject and gain invaluable empathy for the person you are designing for.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

2nd Mode: Define

The next stage, which you should to take into account when preparing an ideation
session, is the Define mode, which is all about making sense of the widespread information
you have gathered in the first mode.
Defining involves synthesizing and making sense of all the available information you
gathered during the Empathize mode, by discovering connections and patterns. You will
often want to use methods such as Affinity Diagrams, and Sharing Inspiring User
Stories and Personas. By the end of the Define mode, your goal is to construct a meaningful
and actionable problem statement, also known as a Point Of View (POV).

A good problem statement will allow you to ideate in a goal-oriented manner. Your
POV defines the RIGHT challenge to address in the ideation sessions. In the ideation process,
POV should be your guiding statement that focusses on your insights about your users and
their needs.

How do you define your Point Of View?

Step 1
 You define the type of person you are designing for – your user. For instance, you can
develop one or more personas, use affinity diagrams, empathy maps and other
methods, which help you understand and crystallize your research results –
observations, interviews, fieldwork, etc.

 You extract and synthesize your users’ most essential needs, which are the most
important to fulfill. Remember that needs should be verbs.
 You work to express insights you developed through the synthesis of information that
you gathered during your initial Empathize mode. The insight should typically not
simply be a reason for the need, but rather a synthesized statement that you can
leverage in your design solution.

Step 2

Write your definitions into a Point Of View template like this one:

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Step 3 – POV Madlib

You can articulate a POV by combining these three elements – user, need, and
insight – as an actionable problem statement that will drive the rest of your design work. It’s
surprisingly easy when you insert your findings in the POV Madlib below. You can articulate
your POV by inserting your information about your user, the needs and your insights in the
following sentence:

[User . . . (descriptive)] needs [Need . . . (verb)] because [Insight . . . (compelling)]

Example: An adult person who lives in the city… needs access to a shared car 1-4 times for
10-60 minutes per week … because he would rather share a car with more people as this is
cheaper, more environmentally friendly, however it should still be easy for more people to
share.

Step 4 – Make Sure That Your Point Of View is One That:

 Provides a narrow focus.

 Frames the problem as a problem statement.
 Inspires your team.
 Guides your innovation efforts.
 Informs criteria for evaluating competing ideas.
 Is sexy and captures people’s attention.
 Is valid, insightful, actionable, unique, narrow, meaningful, and exciting.

3rd mode: Ideate

When you’ve developed your POV it’s time to start ideating. Begin with your Point
Of View or problem statement. Break that larger challenge up into smaller actionable pieces.
Look for aspects of the statement to complete the sentence, “How might we…?”

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

“How Might We?” Questions Frame and Open Up Your Design Challenge

You start using your POV by reframing the POV into a question: Instead of saying,
we need to design X or Y, Design Thinking explores new ideas and solutions to a specific
design challenge. It’s time to start using the Ideation method that involves asking, “How
Examples of How to Generate HMW Questions

When you’ve defined your design challenge in a POV, you can start opening up for
ideas to solve your design challenge. You can start using your POV by asking a specific
question starting with, “How Might We?” or “in-what-ways-might-we?”. For example: How
might we… design a driverless car, which is environmental friendly, cheap and easy for more
people to share?

You then break the POV into smaller and actionable pieces as follows:

1. You might start coming up with too narrow questions, such as: “HMW create a taxi
which does not need a chauffeur”.
2. Or you questions might become too broad: “HMW redesign transportation”.
3. “HMW design a car which has a digital code as a key which is safe to share among a
lot of varying users.”

1. Begin with your Point of View (POV) or problem statement. Start by rephrasing and
framing your Point Of View as several questions by adding “How might we?” at the
beginning.
2. Break that larger POV challenge up into smaller actionable and meaningful questions.
Five to ten How Might We questions for one POV is a good starting point.
3. It is often helpful to brainstorm the HMW questions before the solutions brainstorm.
4. Look at your How Might We questions and ask yourself if they allow for a variety of
solutions. If they don’t, broaden them. Your How Might We questions should
generate a number of possible answers and will become a launch pad for your
Ideation Sessions, such as Brainstorms.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

5. If your How Might We questions are too broad, narrow them down. You should aim
for a narrow enough frame to let you know where to start your Brainstorm, but at the
same time you should also aim for enough breadth to give you room to explore wild
ideas.

Characteristics Required for Successful Ideation

 Adapting: Be able to switch how you see, understand, and extend thinking as new
input gets generated.
 Connecting: Be able to connect seemingly unrelated concepts, attributes or themes in
order to create new possibilities.
 Disrupting: Be able to overturn commonly held beliefs, assumptions or norms in
order to re-think conventional approaches.
 Flipping: Turn dead-ends or deadlocks into opportunities by flipping them over or
rapidly changing direction towards greater viability.
 Dreaming and Imagining: Be able to visualize a new picture of reality by turning
abstract needs into tangible pictures or stories, thereby allowing the space required for
inventing bridges to that reality.
 Experimental: Be open and curious enough to explore possibilities and take risks; be
willing and eager to test out ideas and eager to venture into the unknown.
 Recognize Patterns: Seek to spot common threads of meaning, and ways of seeing,
doing and behaving; be able to recognize attributes or shared values across a spectrum
of influence and input; and finally be able to utilize these commonalities to build
solutions.
 Curiosity: Be willing to ask uncomfortable, silly or even crazy questions. Be willing
to explore and experience, in order to understand and learn something new and
different.

CREATING USER STORIES

What are User Stories?

User stories are short statements about a feature, written from a user’s perspective. A
well-defined user story does not spell out the exact feature, but rather what the user aims to
achieve, to give agile teams the freedom to identify the best possible way to implement the
feature.

Ideally, the team should draft the stories in collaboration with all stakeholders, and be
informed by research. While there is no standard format for creating user stories, teams
commonly write them as single-line statements. Some teams may also include design

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

deliverables such as personas, storyboards or short movies and include details about the
users’ activities, thoughts and emotions.

User stories are commonly used in agile teams to facilitate planning. Each story
should be small enough to fit into one sprint. The most common format for framing the story
is:

“As a [user], I want [goal or action] so that [outcome or reason].”

User stories are descriptions of features—not the feature requirements.

The User

While user stories are mostly written from the end users’ point of view, that’s not
always true. Teams can write them from the perspective of business stakeholders, partners
and even employees and team members.

The Goal / Action

User stories are problem- or goal-oriented and do not include specific solutions or
features. Instead, they aim to serve as a springboard for teams to ideate and arrive at the most
optimal solution to solve the problem for the user.

Example 1: An online gamer

“As an online gamer, I want to have a multiplayer option so that I can play online with
friends.”

Example 2: A design team lead

“As a design team lead, I want to organize assets, so I can keep track of multiple creative
projects.”

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Example 3: An e-commerce shopper

“As an e-commerce shopper, I want to filter my searches so I can find products quickly.”

The Outcome

The best stories are ones that lead to measurable outcomes. Examples of good
outcomes are an X% increase in profile completion rates or an N% drop in payment flow
errors. Outcomes that are tied to users or business goals free up the team to think about
solutions to problems instead of churning out features for the sake of shipping something.

When the team begins work on a user story, they need not always understand the full
scope of work since user stories are vague about what features the team should implement.
To ensure that all team members are on the same page about what the user story should
accomplish, product managers, designers and researchers often include acceptance criteria—
what conditions the feature should fulfill to consider it done.

Step 1: Outline acceptance criteria

The definition of done is the set of criteria that needs to be fulfilled for your user story
to be considered complete. Define the specific acceptance criteria and use it as a checklist.

Step 2: Decide on user personas

Conduct extensive user research by creating surveys, hosting focus groups, and
reading user forums. Analyze your data and search for patterns to identify your key personas.

Step 3: Create tasks

Break your story down into numerous tasks to make it more manageable. If it is a
complex requirement, you can also add subtasks. Include detailed descriptions, so your team
is aligned on what each task requires.

Step 4: Map stories

Use user story mapping to structure work in a large process. In this case, your stories
will take the form of ordered steps.

Step 5: Request feedback

Speak to users and potential customers to find out what they want. Ask them for their
opinions on existing products or if they have suggestions for new features. Incorporate this
feedback into your user story.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Benefits of user stories

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

eliminates confusion and makes it easier to grasp what the customer is looking for.
 Increased flexibility: Because user stories don’t go into technical detail, they can be
molded to fit changing situations.
 Improved collaboration: When team members are aligned on one goal, they can
work better together and collaborate easily with other project stakeholders.

Disadvantages of user stories:

 Incomplete stories: Though the language is intended to be informal, sometimes user

stories are far too vague and exclude necessary details.
 Insufficient time: Writing a good story takes time. It requires extensive research and
regular communication with stakeholders, a fact that is sometimes overlooked.
 Narrow vision: Because user stories focus on one single requirement, they can be
hard to scale, and teams can sometimes lose sight of the bigger picture (in this case,
an epic).

CREATING SCENARIOS
What are User Scenarios?

User scenarios are detailed descriptions of a user – typically a persona – that

describe realistic situations relevant to the design of a solution. By painting a “rich picture” of
a set of events, teams can appreciate user interactions in context, helping them to understand
the practical needs and behaviors of users.

User scenarios help you understand the user and how they interact with the product.

Designers need to understand their users if they want to make products that people
will use. By understanding them, you can help create solutions that help them achieve their
goals. And when users are able to achieve their goals, they will want to use your product
again – but for that, you need to truly understand the user.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

One way to understand the people you’re designing for better is to map out and create
user scenarios. On a more practical side, a user scenario tends to include who the user is and
what their goal is at that moment. Generally, scenarios are concise and represent a snapshotof
the user experience.

There are different takes on user scenarios, with some designers going for more task-
focused scenarios while others prefer a more complete and detailed scenario. The right fit for
you will depend on how much you know about your users, and how you prefer to organize all
that information.

Some prefer short and sweet user scenarios that focus only one the user goal or task.
Others claim we can obtain even more benefits from a more complete scenario, with
additional information about users that adds value – like their main source of income. Like
many aspects of UX design, there’s plenty of wiggle room to make user scenarios that fit well
for your team and project.

The benefits of user scenarios

Like we mentioned before, the biggest plus of having user scenarios is that they can
give us quite a bit of insight into the user’s mind, needs and wants – but many different
research tools do that too. User scenarios are all about getting the context of use right and
tailoring the experience to the user’s needs and motivations.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

How to write a user scenario?

Before you can actually write anything about the possible scenario, there’s a
fair amount of user research needed. You’ll want to have a clear definition of who your users
are by the time you start wondering when they’ll use your product or what they’d do with it.
Most teams tend to have a clear user persona (or two) before they start creating user
scenarios, for example.

The process of writing user scenarios can be described as scenario mapping.

This means that in order to have a realistic user scenario, the design team has to consider the
possible goals and tasks, along with what that means for the user experience. This process
doesn’t have to be complex but it does require a lot of consideration on possible scenarios
and outcomes.

Here’s a few things you can find in user scenarios:

 Who the user is

 The situation that drives users to seek the product
 A specific task or goal the user has
 Information regarding user’s income and spending
 The path to completion of a task
 Points of friction or stress in daily life or in the user experience

User scenario example

1. Social Security platform user scenario

This is a long and detailed user scenario that includes much more information
than a user’s identifying trait and final goal. Depending on the project, this type of user
scenario can add a lot of value in setting the right environment and context of use for the
product.

“Mr. and Mrs. Macomb are retired school teachers who are now in their 70s.
Their Social Security checks are an important part of their income. They’ve just sold their big
house and moved to a small apartment. They know that one of the many chores they need to
do now is tell the Social Security Administration that they have moved. They don’t know

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

where the nearest Social Security office is and it’s getting harder for them to do a lot of
walking or driving.

If it is easy and safe enough, they would like to use the computer to notify the
Social Security Administration of their move. However, they are somewhat nervous about
doing a task like this by computer. They never used computers in their jobs. However,
their son, Steve, gave them a computer last year, set it up for them, and showed them how to
use email and go to websites. They have never been to the Social Security Administration’s
website, so they don’t know how it is organized. Also, they are reluctant to give out personal
information online, so they want to know how safe it is to tell the agency about their new
address this way.”

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Scenarios are a useful UX design artifact that can help you cultivate empathy
for your user and design the best solutions for them. They can be used to figure out where to
do usability testing and understand key tasks in a product.

When you map your scenarios intelligently to your users’ journey, you can
create a user experience that they’ll want to repeat. And in the end, that’s what it’s all about.

FLOW DIAGRAMS

A User Flow Diagram is a visual representation of the path a user takes while
interacting with a product. The diagram maps out each and every step the user takes, from
the entry point to the final interaction. User flows help designers understand and anticipate
the cognitive patterns of users in order to create products that enable a state of flow.
User flows, UX flows, or flowcharts, as they are sometimes called, are diagrams that
display the complete path a user takes when using a product. The user flow lays out the user’s
movement through the product, mapping out each and every step the user takes—from entry
point right through to the final interaction.
The flowchart begins with the consumer’s entry point on the product, like an
onboarding screen or homepage, and ends with the final action or outcome, like purchasing a
product or signing up for an account. Depicting this process allows designers to evaluate and
optimize the user experience and therefore increase client conversion rates.

Each touchpoint on the user’s journey is represented by a node in the flow chart.
These nodes are characterized by shape, and each shape indicates a particular process.

For instance, a diamond means a decision is being made and is therefore followed by
“Yes” and “No” arrows. A rectangle indicates a task or action that needs to be taken, like
“Log in” or “Purchase”.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Why do we use user flows in UX design?

Now that we’ve established what UX flows are, we can look into why they are so
beneficial to the design process. Studying the user flow of a website or app can prove useful
whether you are designing a brand new product or revamping an old one.

User flows are extremely useful if you need to:

 Create an intuitive interface
 Evaluate existing interface
 Present your product to clients or colleagues

Types of user flow charts

UX flows can be used for all kinds of interface and web design, but certain types of
flowcharts are more valuable than others depending on what you are creating. Here we
describe a few of the user flow variations and when to use them.

1. Task flows

Task flows focus on how users travel through the platform while performing a
specific task. They generally show only one path and don’t include multiple branches or
pathways like a traditional user flow might. These are best used when the task being analyzed
is accomplished similarly by all users. When using task flows, it is assumed that all users will
share a common starting point and have no variability in the way the task is carried out.

2. Wire flows

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Wireflows are a combination of wireframes and flowcharts. They utilize the

layout of individual screens as elements within the diagram.

Wireframes on their own help convey the layout and design on each individual page,
but lack the ability to communicate the page-to-page flow of heavily dynamic interfaces.
Wireflows add page context to UX flows, since what users see on each screen greatly impacts
their experience through the app or website.

Wireflows are especially great when creating mobile screens. The relatively small size of the
mobile screens are easily used to replace the more abstract shapes of flow charts.

3. User flows

User flows focus on the way your target audience will interact with the product. They
emphasize that all users might not perform tasks the same and may travel in different paths.
They are typically attached to a specific persona and entry point. Therefore, when
using this type of flowchart, you may have many different scenarios that start at different
places. However, the main task or accomplishment is usually always the same.

Where do user flows fit into the UX design process?

UX flows are synthesized early, during the planning stages of your design—after user
research has been conducted. They form an important part of the foundation on which your
product is built, and can serve as a reference for other designers.

Once you have gathered your data from user testing, user flows help determine how
many screens are needed, what order they should appear in, and what components need to be
present. By the time you get to creating a user flow, your affinity diagrams and empathy
mapping as well as persona development have all been completed. Flowcharts can also be
made for existing interfaces to enhance the user’s experience or clear up any trouble users are
having with the interface.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

FLOW MAPPING

Flow mapping is a visual representation technique used to illustrate the flow of

various elements, such as information, materials, or processes, within a system. It provides a
clear and easy-to-understand diagram of how these elements move or progress through
different stages or components. Flow mapping is widely used in various fields, including
business process management, user experience design, supply chain management, and project
planning.

How to create a flow map:

Creating a flow map is simple and can be done on paper or using workflow
management software and templates. The steps below explain how to create a process map
from scratch.

Step 1: Identify a problem or process to map

Step 2: List the activities involved
Document all the tasks required to complete the process. At this stage, the order
doesn’t matter. Make a list of all the activities involved, as well as who is responsible for
each.

Step 3: Write out the sequence of steps

Now that you’ve compiled a list of all the activities, the next step is to arrange these
activities in the proper sequence, until the full process is represented from beginning to end.
This is a good place to check if there are any gaps you may have missed in the previous step.

Step 4: Draw a flowchart using flow mapping symbols

Select the appropriate mapping format and draw out the process, representing the
steps with process mapping symbols. There are around 30 standard symbols you can use to
represent different elements of a process, but we’ll cover the most common ones in more
detail later on in this article.

Step 5: Finalize and share the flow map

Once you’ve finished drawing your process map, review it with other stakeholders
involved in the process to make sure everyone understands it and agrees with how the process
is mapped. Make sure no steps have been left out and there are no redundancies or
ambiguities.

Step 6: Analyze the map to find areas of improvement

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

After you establish that the process map accurately describes the process workflow, your
completed process map now serves as a tool you can analyze to discover ways of improving
the process.

Why use a flow map?

Flow mapping allows you to solidify ideas and streamline processes by visually
communicating the steps needed to execute an idea.

Here are some ways that flow mapping can be useful for you and your team:

 Identify inefficiencies: Helps you identify bottlenecks, gaps, and other issues in
a process flow.
 Simplify ideas: Breaks down complex ideas into smaller steps.
 Increase comprehension: Promotes thorough understanding of a process.
 Plan for contingencies: Allows for contingencies and provides problem-solving
guidance.
 Delegate responsibilities: Coordinates responsibilities between various individuals or
entities.
 Create documentation: Provides documentation of the process.
 Communicate clearly: Simplifies communication through a user-friendly, visual
format.
 Make decisions faster: Enables faster decision making due to faster communication.
 Assist employees: Improves employee performance and job satisfaction.
 Meet standards: Helps businesses comply with ISO 9000 and ISO 9001 standards.

Types of flow maps

Flow maps come in all shapes and sizes. They all serve the same purpose, but certain
types of process maps may be better suited for particular projects. Here are some of the most
common types of process maps.

 Flowchart

The simplest form of a process map is a basic flowchart. The basic flowchart uses
process mapping symbols to illustrate the inputs and outputs of a process and the steps
included in completing the process.
Basic flowcharts can be used to plan new projects, improve communication between team
members, model and document processes, solve problems in a current process, and analyze
and manage workflows.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 High-level process map

A high-level process map, also known as a top-down map or value chain map,
provides a high-level overview of a process. Steps are limited to the essentials of the process
and the map includes minimal detail.

High-level process maps can be used to define business processes and identify the key steps
involved. These process maps are also useful for discussing processes with superiors or third
parties who don’t need to know the specifics of the operation.

 Detailed process map

In contrast with the high-level process map, a detailed process map provides all the
details of each step and includes sub processes. It documents decision points and the inputs
and outputs of each step. This process map provides the most thorough understanding of the
mapped process and is most effective in pinpointing areas of inefficiency due to its high level
of detail.

 Swimlane map

A swimlane map, also known as a cross-functional or deployment flowchart,

delegates process activities into “swimlanes” to designate who is responsible for each task.
The map is divided into channels for each stakeholder in the process and lists each activity in
the channel of the appropriate stakeholder. This type of process map highlights the different
roles involved in the process and the interaction between stakeholders.

 Value stream map

A value stream map is a lean management tool that visualizes the process of bringing
a product or service to the customer. Value stream maps tend to be complex and use a unique
system of symbols to illustrate the flow of information and materials necessary to the
process.

 SIPOC diagram

The acronym SIPOC stands for Suppliers, Inputs, Process, Outputs, Customers. A
SIPOC diagram is not so much a process map as a chart identifying the key elements of the
process, which may be created as a precursory step to crafting a detailed process map.
As the acronym suggests, the SIPOC chart should feature five columns which include
the basic steps in the process, the outputs of the process, the customers, the inputs of the
process, and the suppliers of each input. In addition to preparing for a more detailed process
map, a SIPOC diagram is also useful for defining the scope of complex processes.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

Flow mapping symbols

Process mapping uses symbols from the Unified Modeling Language (UML) to
represent key elements on a process map, such as steps, decision points, inputs and outputs,
and participating team members.
Here are the most common process mapping symbols and their usage:

 Terminator: Ovals denote the beginning and end of the process.

 Process step: A rectangle represents an activity or task in the process.
 Flow: Arrows connect steps in the process and show directional flow.
 Decision: A diamond illustrates a point where a decision needs to be made, usually
with “yes” or “no” options branching from this point.
 Delay: A D-shaped symbol indicates a delay in the process.
 Document: A rectangle with a wavy bottom line represents a document or information
that people can read. Multiple documents are indicated by a symbol resembling
multiple stacked wavy rectangles.
 Data: A parallelogram represents data that is an input or output of a process step.
 Manual input: A rectangle with a slanted top line indicates a step in which data must
be manually entered.
 Subprocess: A rectangle with double vertical lines indicates a subprocess which is
predefined elsewhere. 

Process mapping techniques

You can customize process maps to match your needs and preferences, but there are
also general tips to keep in mind when process mapping to maximize effectiveness. Here are
a few process mapping best practices to apply as you get started:

Planning your process map:

 Establish the boundaries of the process so that only necessary information is included.
 Set clear objectives for the process.
 Only map processes that have a defined, objective output.

Drafting your process map:

 Work backward from output to input.

 Keep subprocesses simple.
 Include all necessary details, no more and no less.
 Use standardized notation so everyone is on the same page.

Reviewing your process map:

 Get feedback from everyone involved in the process.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

 Detail alternative routes to meeting a preferred condition where applicable.

 Map the process in its current state, not necessarily a perfect or idealized state, and
make improvements from there.

INFORMATION ARCHITECTURE

What is Information Architecture?

Information architecture (IA) is the discipline of making information findable and

understandable. It includes searching, browsing, categorizing and presenting relevant and
contextual information to help people understand their surroundings and find what they’re
looking for online and in the real world.

IA is used in physical spaces like museums or department stores, as well as in

websites and applications. For instance, in a natural history museum, you will find fossils
from the Jurassic period exhibited together, just as your favorite packet of chips will always
be in the snack aisle of your supermarket.

Information architecture operates from two perspectives:

 People perceive information, products and services as places made of language.

 These places or information environments can be arranged for optimal findability and
understandability.

Language in this instance means visual elements, labels, descriptions, menus, content.

Good information architecture is informed by all three areas, all of which are in flux
depending on the information environment.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

8 Principles of information architecture

1. The principle of objects: Content should be treated as a living, breathing thing. It has
lifecycles, behaviors, and attributes.
2. The principle of choices: Less is more. Keep the number of choices to a minimum.
3. The principle of disclosure: Show a preview of information that will help users
understand what kind of information is hidden if they dig deeper.
4. The principle of exemplars: Show examples of content when describing the content of
the categories.
5. The principle of front doors: Assume that at least 50% of users will use a different
entry point than the home page.
6. The principle of multiple classifications: Offer users several different classification
Schemes to browse the site’s content.
7. The principle of focused navigation: Keep navigation simple and never mix different
things.
8. The principle of growth: Assume that the content on the website will grow. Make sure
the website is scalable.

The IA of a website needs to address different user needs.

They distinguish 4 main types of needs as:
 Known-item seeking: Users will come to the website to search for something
desirable and known.
 Exploratory seeking: Users will come to the website looking for inspiration. They’re
looking for something desirable but not sure what exactly.
 Exhaustive research: Users are in a process of an extensive research. They want to
find as much information as possible.
 Re-finding: A user needs desired items again and are trying to find it.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

What are the key processes for information architecture?

1. Define the company goals

In order to determine goals of creating IA you can ask yourself two questions: why do
you want to do it, and what do you want to achieve with it? Work with all key stakeholders to
determine that. You want them to feel involved and agree on the final version.

2. Define the user’s goals

Who are the people that will be using the website? Follow UX practices:
conduct user interviews, create personas, create scenarios and answer the questions:

 What are these users going to do on the website?

 What are their goals?

3. Analyze competitors

Sometimes inventing hot water all over again is very unnecessary and can actually
hurt you. Go all out and make sure you know your competition.

Think about their information architecture.

 Where do they display information?

 Which information is common denominator?
 Is the website easy to navigate?
 What makes is good and what makes it bad?

4. Define content

If a website already has content, go through that first and decide what to keep
and what to get rid of. If the website is new, start from scratch. You need to have a clear
understanding of the content.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

How to design the information architecture of your site

Step 1: Group and label the content
Once you have a list of all content, prioritize it and group. Use card-sorting techniques
to help you group the content.

Card sorting is a participatory design technique, which we use to determine how users
group different items into different categories. They are given cards with printed terms,
features, or concepts and are asked to sort them into groups.
In the end group names can be refined into a menu and sitemap.

Step 2: Define navigation and create site map

Before you can create sitemap and navigation, your IA needs to be defined.
The navigation is most of the times just the tip of the iceberg.

Information architecture isn’t really visible to the visitors, but it presents a backbone
of the website, and can be visually presented in spreadsheets and different types of diagrams
and is then called a sitemap.

To create a sitemap, you need to have content, which is grouped and labeled, and then
presented in a diagram.

Once that is done, you can create navigation – collection of UI elements that are
connected in a meaningful way. Those can be anything from global navigation – menu, to
local navigation, breadcrumbs, filters, footer…

Step 3: User testing

Test early and test often.

There are a couple of ways how to test to see if the information architecture works.
The Nielsen Norman Group suggest four different types of testing, depending on the design
phase and goals:

 Tree testing
 Closed card sorting
 Click testing
 Usability testing

The test is used to determine how and why users use a website (or a product). It is one
of the qualitative testing techniques.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)

 lOMoARcPSD|43432534

CCS370
UI AND UX DESIGN NOTES

What tools do information architects use?

1. Pen and paper

Pen and paper is all too often underused, although it’s very cheap, simple to use, and
effective.

2. Realtimeboard.com
Cheap and easy to use, Realtime Board is my daily go-to tool. You can use it to create
charts, agile boards, customer journeys, personas, empathy blueprints, mind maps,
organizational charts and more. It’s focus is in supporting collaboration and offers good
integration with Slack, Jira, Google drive, Dropbox…

3. Lucidchart.com
Lucid chart is a flowchart maker and online diagram software. They offer different
sorts of charts and diagrams, and support creation of mind maps, and wireframes. Their price
for a single user is pretty low and the enterprise prices are not bad at all. It’s definitely a good
competitor to the Realtime Board.

4. Xmind.net
Xmind is a mind mapping web software is the only one in the selection that doesn’t
offer a subscription, but a one time purchase option, which could be a good choice in the time
of subscriptions. They offer mind mapping, business charts, and brainstorming support. With
your purchase you also get free templates, clip arts, a useful presentation mode, and more.

5. Coggle.it
Simplest of all 5, except for the pen and paper, Coggle’s collaborative mind maps web app is
definitely a good choice if you need to get lots of people involved, and collaborate to create
useful diagrams.

Downloaded by Rafikhan lukman (rafikhanlukman@gmail.com)