Principles of UI and UX Design

PIXD5112

“People ignore design

that ignores people.”
– Frank Chimero

Lecture 5
 Objectives
• Administration: -

• Today: Unit 2 - Theme: Conducting User Research

- Distinguish between different user research tools and methods and their appropriate use.
- Apply appropriate tools to conduct user research.

• Working on your POE

Completing: Question 1.2
Objectives:

Unit 2

Theme 1: Conducting User Research

LO4: Distinguish between different user research tools and methods and their appropriate use.
LO5: Apply appropriate tools to conduct user research.

PM:
• Part 4, Lessons 22 to 29
There is never a bad time to do user research.
Do it early, do it often.
Always ask, “what are you trying to learn about your users?”

Subjective
There are two main types of information that
you can get from research that involves people:

Objective
Subjective
The word “subjective” means that it is an opinion of something.
The feeling it gives you. The expectations it creates. Not a fact.
“What is your favorite color?”
“Do you trust this company?”
Objective
The word “objective” means a fact. Something true. Something you can prove.
Your opinion doesn’t change it, no matter how hard you wish.
“How long did you spend using our app?”
“Where did you find the link to our site?”
Sample Size
As a general rule, more people makes for more reliable information, even if it is
subjective.
You Are Not Testing the Users; They Are Testing You

The users are testing your design.

And if you lead them to the right answers by asking leading questions, the test is ruined.
Your job is to listen to what the users say, watch how they try to get things done, and
understand how and why they get lost in your designs.

Then go find solutions to those problems.

If users think the button should be blue,

But, if it doesn’t help you achieve your UX goals, it probably isn’t valuable right now.

Ideas and solutions are different things.

The less obvious the problem, the more people you need to find it
1. Open Questions— “How would you describe me?”

2. Leading Questions— “What are my best features?”

3. Closed/Direct Questions— “Which is better, my smile or my frown?”

Different types of research methods:
Observation*
Give people tasks or instructions and watch them use your design, without help. Afterward, you can ask them
questions.
Interviews*
Get somebody and ask them a set of questions, one-by-one.
Focus Groups
Get a bunch of people in a room together and ask them to discuss your questions.
Surveys*
A form, which people answer on paper or online. These can genuinely feel anonymous, which is useful.
Card-Sorting*
Each person gets a set of ideas or categories (on cards or post-its or online), which they sort into groups
that make sense to them
Google
It’s amazing how many useful opinions you can find online, for free, right now.
Important:

• Ask the same questions, the same way, to everyone.

• Avoid interpreting questions or suggesting answers.
• People might lie to avoid embarrassment or if it seems like you prefer a particular answer.
• Take notes or record the interview. Do not rely on your memory, ever.
Don't rely on Remembering: use video, take notes.
Do Not Help: The moment you help a user, or give them a hint, or point to something
useful, the test is ruined
People Will Lie to Get Your Approval: people will lie to cover embarrassment, or act
helpless to get your help, or tell you the design is great when it isn’t—just because you’re
sitting there.
What Is an Interview?
An interview is a set of questions, created by you before the interview, asked to a user, in person.

Interviews are good because…

You can ask follow-up questions; find out if your questions are confusing. You can also
watch users and get nonverbal clues.
Interviews are bad because…
You are there, so testers might adjust their behavior and opinions to get approval from you.
Introverted users probably can’t imagine anything worse than a face-to-face interview.
What Is a Survey?
A survey is a set of questions that a user answers by filling out a form on paper or online,
privately, and sometimes anonymously.
Surveys are good because… • They allow users to participate privately and therefore be more
honest. • Every user gets precisely the same questions, and you (the designer) can’t mess it up by
asking the questions wrong. • It is easy and cheap to get thousands of people to answer a survey.
Surveys are bad because… • You can’t ask follow-up questions. • It’s easy to accidentally influence
the results by how you ask the question or the order you choose for the options. • People are lazy, so
the longer you make the survey, the fewer people will complete it.
What Is Card Sorting?
You give each user a set of topics or ideas written on “cards”—maybe types of content or
features you’re considering—and ask them to organize the cards into categories that make
sense to the user.
Card sorting is good because… • Designing big, complex sites like
eBay can seem overwhelming at the beginning. Card sorting helps you get
started. • You can discover structure within a pile of ideas that seem random or
unrelated, or learn about the priorities of your audience without asking them
directly
Card sorting is bad because… • It is definitely a bit tedious to set it up, and the
answers are more of a guide than a solution. • Card sorting is only as good as the
material you put into the experiment.
Different types of research methods:
Observation*
Give people tasks or instructions and watch them use your design, without help. Afterward, you can ask them
questions.
Interviews*
Get somebody and ask them a set of questions, one-by-one.
Focus Groups
Get a bunch of people in a room together and ask them to discuss your questions.
Surveys*
A form, which people answer on paper or online. These can genuinely feel anonymous, which is useful.
Card-Sorting*
Each person gets a set of ideas or categories (on cards or post-its or online), which they sort into groups
that make sense to them
Google
It’s amazing how many useful opinions you can find online, for free, right now.
Objectives:

Unit 2
Theme 3: Analysing and interpreting user research

LO6: Identify appropriate methods and tools for analysing and interpreting user research findings.
LO7: Compile an effective user profile.

PM:
• Dam, R. and Siang, T. 2020. Affinity Diagrams – Learn how to cluster and bundle ideas and facts. [Online]. Available at: https://www.interaction-
design.org/literature/article/affinity-diagrams-learn-how-to-cluster-and-bundle-ideas-and-facts [Accessed 12 August 2022].
• Lessons 30
• Veal, R. 2021. How to Define a User Persona: https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/ [Accessed 8 August 2022].
• Creating personas from user research results https://www.interaction-design.org/literature/article/creating-personas-from-user-research-results
[Accessed 8 August 2022].
 Affinity Diagrams: How to Cluster Your Ideas and Reveal Insights

Resource: Dam, R. and Siang, T. 2020. Affinity Diagrams – Learn how to cluster and bundle ideas and facts. [Online]. Available at:
https://www.interaction-design.org/literature/article/affinity-diagrams-learn-how-to-cluster-and-bundle-ideas-and-facts [Accessed 12 August 2022].
 Affinity diagrams are a great method to use when
you want to make sense of a large volume of mixed
information and data—facts.

They help you synthesize information and, for this

reason, they are used in many phases of design
thinking.

They help in not becoming overwhelmed by the

sheer volume of data you’ve gathered.

They’ll help you navigate through and organize

your data in an incredibly effective way.

Resource: Dam, R. and Siang, T. 2020. Affinity Diagrams – Learn how to cluster and bundle ideas and facts. [Online]. Available at:
https://www.interaction-design.org/literature/article/affinity-diagrams-learn-how-to-cluster-and-bundle-ideas-and-facts [Accessed 12 August 2022].
 What is an Affinity Diagram?
An affinity diagram is a collection of large amounts of data that is organized into groups or
themes based on their relationships.

Resource: Dam, R. and Siang, T. 2020. Affinity Diagrams – Learn how to cluster and bundle ideas and facts. [Online]. Available at:
https://www.interaction-design.org/literature/article/affinity-diagrams-learn-how-to-cluster-and-bundle-ideas-and-facts [Accessed 12 August 2022].
 How to Create an Affinity Diagram
- you will likely find the process more valuable if you have other design-minded individuals around to
discuss aspects of it with.

Part 1: Group Similar Pieces of Data

1. Write pieces of data such as small documented facts, drawings, ideas, quotes, and observations down on separate Post-it
notes, cards or pieces of paper—one piece of data per Post-it or piece of paper.

2. Put them up on a wall or lay them across a table. Post-it notes are preferable at this stage as they allow the design team to
easily stick up and move pieces of data around to cluster similar pieces of information together.

3. Choose a Post-it at random and make it the first Post-it of a first group.

4. Take another Post-it and ask, “Is this similar to the first one or is it different?” Place it in the first group if it’s similar or in its
own group if it’s not. It can be similar in any way that makes sense to you. However, this is best where you have a team and
can ask others if they agree or disagree.

5. Continue Post-it by Post-it as you place similar ideas together and create new groups.

Resource: Dam, R. and Siang, T. 2020. Affinity Diagrams – Learn how to cluster and bundle ideas and facts. [Online]. Available at:
https://www.interaction-design.org/literature/article/affinity-diagrams-learn-how-to-cluster-and-bundle-ideas-and-facts [Accessed 12 August 2022].
 How to Create an Affinity Diagram
Part 2: Discuss and Clarify Your Clusters
1. You should now have some groups of related data, and so it’s time to talk about each one of the clusters in more detail.

2. Discuss any controversial pieces of clusters and pieces of data in each cluster and reorganize them into different clusters if
appropriate.

3. When all team members are satisfied with the groupings, give the group a name that captures the meaning of the group of
Post-its it represents.

4. Optional: Use lines to connect related groups, and combine clusters to create super groups if necessary.

Resource: Dam, R. and Siang, T. 2020. Affinity Diagrams – Learn how to cluster and bundle ideas and facts. [Online]. Available at:
https://www.interaction-design.org/literature/article/affinity-diagrams-learn-how-to-cluster-and-bundle-ideas-and-facts [Accessed 12 August 2022].
 Affinity Diagrams: How to Cluster Your Ideas and Reveal Insights

The last stage:

• connect related groups of data so that related insights and/or ideas remain linked
throughout the rest of the design process.

When you finish your affinity diagram, your data will be in a much more
organized state and you will be in a better position to:

• synthesize your data further,

• define a problem statement and/or
• move on to the next phase of the design process.

Resource: Dam, R. and Siang, T. 2020. Affinity Diagrams – Learn how to cluster and bundle ideas and facts. [Online]. Available at:
https://www.interaction-design.org/literature/article/affinity-diagrams-learn-how-to-cluster-and-bundle-ideas-and-facts [Accessed 12 August 2022].
Resource: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
Examples (Tattoo Shop)
Examples (Gym)
What Is a User Profile/Persona?
A user persona is a fictional representation of your ideal customer.
They describe the goals, expectations, motivations, and behavior of real people.
Example:

Resource: Veal, R. 2021. How to Define a User Persona:

https://careerfoundry.com/en/blog/ux-design/how-to-define-a-
user-persona/ [Accessed 8 August 2022].
Example:
 Why do you need a User Profile/Persona?

Whether you’re developing an app or a website, you need to understand who will be using the
product.

In order to solve a real user problem, you need to have a clear problem statement in mind; in
order to write this problem statement, you first need to understand your users and their needs.

• Why do they come to your site?

• What are they looking for?

• What makes them nervous? And so on.

Resource: Veal, R. 2021. How to Define a User Persona:

https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/ [Accessed 8 Augus
Personas help with strategising and making smart design decisions.
They make real users memorable for the product team,
helping to focus efforts and build empathy.

Resource: Veal, R. 2021. How to Define a User Persona: https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/

[Accessed 8 August 2022].
How do you define a user persona?
A well-defined user persona contains four key pieces of information:
•Header
•Demographic profile
•End goal(s)
•Scenario

Step 1: Add a header Step 2: Add a demographic profile

The header includes a fictional name, image, and quote that While the name and image can be fictional,
summarizes what matters most to the persona as it relates to your demographic details are factual and based on user
product. research.
These features aid in improving memorability, keeping your design
team focused on the users they are building the product for. The demographic profile includes four main sections:
Let’s imagine you’re designing a travel app. Personal background,
Professional background,
The foundations of your user persona could look like this: User environment, and
Name: Savannah Rodriguez Psychographics (this is psychological characteristics and
Summary quote: “Take me to undiscovered holiday destinations traits such as values, desires, goals, interests, and lifestyle
away from the tourist traps.” choices. Understanding the consumer's emotions and values,
so you can design more accurately).

Resource: Veal, R. 2021. How to Define a User Persona: https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/ [Accessed 8 August 2022].
 Personal background
The personal background includes details such as age, gender, ethnicity, education, persona group (e.g. working moms),
and family status (e.g. single, married with children, widowed, etc.).

Savannah’s personal background might be described as follows: Savannah, 52 years old, divorced mother of two, has a
Master’s degree in chemistry.

Professional background
The professional background includes details such as job occupation, income level, and work experience. Here we might
add that Savannah works full-time at a pharmaceuticals company and earns around $65,000 per year.

User environment
The user environment represents the physical, social, and technological context of the user. This section is used to
answer questions like: What technological devices do users have access to? Do they spend most of their time in a
corporate office or a home office? And how often do they collaborate with others? So, Savannah’s user environment
could be in her office, mostly on a laptop, but also on her iPad when commuting to and from work.

Psychographics
Psychographics include details such as attitudes, interests, motivations, and pain points. Creating a psychographic profile
enables you to better understand why your user behaves in a certain way—including why they use your product.
Let’s continue to imagine you’re designing a holiday-booking app. Some useful psychographic information to include in
your user persona could be:
• Savannah enjoys luxury spa retreats, hates tourist traps

Resource: Veal, R. 2021. How to Define a User Persona: https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/ [Accessed 8 August 2022].
How do you define a user persona?
A well-defined user persona contains four key pieces of information:
•Header
•Demographic profile
•End goal(s)
•Scenario

Step 3: Add end goal(s) Step 4: Add a scenario

The end goal is the motivating factor that inspires A scenario is a “day-in-the-life” narrative that describes how a
action, and answers the question: persona would interact with your product in a particular context
- what do users want or need to accomplish by using to achieve his or her end goal(s).
your product? The scenario usually defines when, where, and how the narrative
takes place. They are typically written from the perspective of the
End goals are the main driving forces of your users and persona.
determine what the persona wants or needs to fulfill. For example, Savannah’s scenario could start off like this:
“At least once a year, I like to go away on a luxury holiday. I try to
In Savannah’s case, her end goal when using your discover places I’ve never been to before, and to stick to
holiday-booking app is to discover and book luxurious, destinations that aren’t yet overrun with tourists. I work full time,
off-the-beaten-track holiday destinations. so I don’t have that much time to browse and book each individual
element of my holiday. Ideally, I’ll find some kind of package deal
that comes with local restaurant recommendations…”

Resource: Veal, R. 2021. How to Define a User Persona: https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/ [Accessed 8 August 2022].
Aurora Harley, User Experience specialist at the Nielsen Norman Group, explains that there
are six common pieces of information that make up a persona:
• Name, age, gender, and an image of the persona, preferably including some context in the background.

• A tag line (a catchphrase or slogan), indicating what the persona does or considers relevant in his or her life.

• The experience and relevant skills the persona has in the area of the product or service you will be
developing.

• Some context to indicate how he/she would interact with your product or service (e.g., the voluntariness
of use, frequency of use, and preferred device).

• Any goals, attitudes, and concerns he/she would have when using your product or service.

• Quotes or a brief scenario, that indicate the persona’s attitude toward the product or service you’re
designing. If the persona already uses an existing product or service to meet his or her needs, you might
describe the use of that here.

Resource: Creating personas from user research results

https://www.interaction-design.org/literature/article/creating-personas-from-user-research-results
Getting started with your POE
Business A:
List:
a) A website for a South African musician, DJ or band of your choice
who needs a platform to promote their brand, encourage fans to
purchase their music, attract bookings and sell merchandise online.
Event organisers should be able to easily check their availability and
contact them for quotes and bookings. Fans should be able to click
through to their social media platforms to:
 Interact with them,
 Navigate to all major streaming platforms to download their music,
 Navigate to ticket sales portals to book and buy tickets for events.

They want to grow their fan base and establish an interactive

community where fans can sign up to listen exclusively to new
music releases, participate in the production of new songs and
comment. Whatever information or interaction fans desire should
be easily and seamlessly accessible and contribute to an engaging
experience.
Business B:
List:
a) A mobile application for FreshCafe, a provider of canteen services for a large private higher
education institution. FreshCafe wants to increase sales and build customer loyalty by
establishing a relationship with and sense of community around food among students studying
at the institution. They are fully inclusive, catering to students from all religions and students
with different food preferences or allergies. They offer a diverse yet reasonably priced menu,
and to support students in making informed food choices, they provide nutritional information
about all items on their menu on the application. In addition to the usual staples, they also
have a daily special and offer a seasonal menu that is updated every three months. They want
to communicate and promote menu changes as and when they occur. Students can:
 Pre-order and specify the time they want to collect and pay for their meal on the app.
 Create a pre-paid, top-up account into which they can deposit a lump sum against which they
can purchase food at discount prices and top up as needed.
 Sign up for their loyalty programme, which can earn them points and discounts.
 Interact with Freshcafe, rate meals, make suggestions, give feedback and share food selfies on
social media.
*References – include a reference list at the end.
 POE Layout (in MS Word)

Name and Surname:

Student No:
Lecturer: Mr B. v.d. Merwe

HAW Group 1 (or 2)

Principles of UI and UX Design

Title font: Calibri, 14 (size)
PIXD5112 – POE PART 1 Text font: Calibri, 12 (size)
BUSINESS A (or B) No border
29 August 2024

For your title page you may decide on

your font/size.
You may include a border and a picture.
 POE Layout

Part 1.1

Title font: Calibri, 14 (size)

Text font: Calibri, 12 (size)
Spacing: no spacing

No border

Page No
Page No
2 of 15
1 of 15
 POE Layout
References

Harvard
Alphabetical order

Page No
15 of 15
 Part 1.2 – Create a user persona (30 Marks)
1. Decide what type of people might be prospective users. Make a list of the things a user may typically
want to find out or do (user motivation/user goals) when using the website or app and what the user
might typically find irritating (pain points) during this process.
2. Create your own free Figma account at https://shorturl.at/IqL55.
3. Use one of the user persona templates available on the Figma community at https://shorturl.at/qls5W
to create an authentic user persona that reflects the user you will be designing the experience for and
what their goals, needs and expectations are.
4. Export your persona as a high-quality JPG image.
Business A:
List:
a) A website for a South African musician, DJ or band of your choice
who needs a platform to promote their brand, encourage fans to
purchase their music, attract bookings and sell merchandise online.
Event organisers should be able to easily check their availability and
contact them for quotes and bookings. Fans should be able to click
through to their social media platforms to:
 Interact with them,
 Navigate to all major streaming platforms to download their music,
 Navigate to ticket sales portals to book and buy tickets for events.

They want to grow their fan base and establish an interactive

community where fans can sign up to listen exclusively to new
music releases, participate in the production of new songs and
comment. Whatever information or interaction fans desire should
be easily and seamlessly accessible and contribute to an engaging
experience.
Business B:
List:
a) A mobile application for FreshCafe, a provider of canteen services for a large private higher
education institution. FreshCafe wants to increase sales and build customer loyalty by
establishing a relationship with and sense of community around food among students studying
at the institution. They are fully inclusive, catering to students from all religions and students
with different food preferences or allergies. They offer a diverse yet reasonably priced menu,
and to support students in making informed food choices, they provide nutritional information
about all items on their menu on the application. In addition to the usual staples, they also
have a daily special and offer a seasonal menu that is updated every three months. They want
to communicate and promote menu changes as and when they occur. Students can:
 Pre-order and specify the time they want to collect and pay for their meal on the app.
 Create a pre-paid, top-up account into which they can deposit a lump sum against which they
can purchase food at discount prices and top up as needed.
 Sign up for their loyalty programme, which can earn them points and discounts.
 Interact with Freshcafe, rate meals, make suggestions, give feedback and share food selfies on
social media.
 Part 1.2 – Create a user persona (30 Marks)
1. Decide what type of people might be prospective users. Make a list of the things a user may typically
want to find out or do (user motivation/user goals) when using the website or app and what the user
might typically find irritating (pain points) during this process.
2. Create your own free Figma account at https://shorturl.at/IqL55.
3. Use one of the user persona templates available on the Figma community at https://shorturl.at/qls5W
to create an authentic user persona that reflects the user you will be designing the experience for and
what their goals, needs and expectations are.
4. Export your persona as a high-quality JPG image.
List of References:
Filipiuk, M. 2021. UI Design Principles - Learn to create beautiful and usable interfaces from scratch. [eBook].

Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook] Available at:
https://ezproxy.iielearn.ac.za/login?url=https://search.ebscohost.com/login.aspx?direct=true&db=nlebk&AN=1135545&site=eho
st-live&scope=site&ebv=EB&ppid=pp_iv [Accessed 19 July 2022].

Interaction Design Foundation. (n.d.) User Centred Design. [Online]. Available at:
https://www.interaction-design.org/literature/topics/user-centered-design [Accessed 19 July 2022].

Dam, R and Siang T. 2020. Design Thinking: A quick overview. [Online]. Available at:
https://www.interaction-design.org/literature/article/design-thinking-a-quick-overview [Accessed 19 July 2022].

Nessler, D. 2018. How to apply a design thinking, HCD, UX or any creative process from scratch — Revised & New Version [Online]. Available
at: https://uxdesign.cc/howto-solve-problemsapplying-a-uxdesigndesignthinking-hcd-orany-design-process-fromscratch-v2-aa16e2dd550b
[Accessed 19 July 2022].