Principles of UI and UX Design

PIXD5112

“People ignore design

that ignores people.”
– Frank Chimero

Lecturer 3
 Objectives
• Administration: -

• Recap:
- The Fundamental Elements of UX Design

• Today: A user-centred design process

- Explain the meaning of the term user-centred design.
- Distinguish between the various phases of the Double Diamond Design Process.

• Starting your POE

The Fundamental Elements of UX Design

LO3: Discuss the notions of an application as a functional software interface and an

application as digital information system.
LO4: Distinguish between the fundamental elements of UX Design.
LO5: Explain the dynamics between the various elements of UX Design.

PM: Part 1 – Lessons 2 and 6

As a UX designer, your job is to create value—from the user’s perspective.
Some parts of the UX process create more value than others.

Source: Marsh, J. 2015. UX for Beginners: A crash course in 100 lessons. Sebastopol: O’Reilly [eBook]
What are the five elements of UX design?

(existing in a material or physical form)

(existing in thought or as an idea but

not having a physical or concrete
existence)

Source: https://www.educative.io/answers/what-are-the-five-elements-of-ux-design
What are the five elements of UX design?

(existing in a material or physical form)

1. Strategy
The first layer is strategy. In this phase, the
designer gathers information and lays the
foundation while keeping in view the needs of
the users and business objectives.

The designer researches who the users and

the end-users are, as well as their needs, pain
points, etc.

(existing in thought or as an idea but

not having a physical or concrete
existence)

Source: https://www.educative.io/answers/what-are-the-five-elements-of-ux-design
What are the five elements of UX design?

2. Scope
In the next layer, the designer decides on the
idea and type of content they are designing.
They set their requirements and goals.

Functional requirements include functions

and features that need to be added.
Content requirements explain the theme,
images audio, videos that will help in
creating value and fulfilling requirements.

Source: https://www.educative.io/answers/what-are-the-five-elements-of-ux-design
What are the five elements of UX design?

3. Structure
The third layer is structure. Here the designer
decides the organization of the design, and how
the system will behave when the user interacts
with the product.

Interaction design builds upon the functional

requirements to define the function of the
product and user interaction.
Information architecture builds upon the
content requirements to define how the
content will be structured and arranged.

Source: https://www.educative.io/answers/what-are-the-five-elements-of-ux-design
What are the five elements of UX design?

4. Skeleton
This is the fourth layer. The designer puts
together the previous pieces to determine the
visual form of the design.

Here, the designer decides the flow of

information and movement from one screen to
the next.

The designer makes sure that navigation is

smooth and the presentation of information
facilitates user understanding.

Source: https://www.educative.io/answers/what-are-the-five-elements-of-ux-design
 What are the five elements of UX design?

5. Surface
This is the final layer. It is the combination of
the layers below.

The designer decides on the layout of the

visuals, typography, styling, and colors.

The designer finalizes the final ‘surface’ that

the user is going to interact with to make it
easy to use and navigate.

Recap Video:
https://www.interaction-design.org/literature/topics/ux-design

Source: https://www.educative.io/answers/what-are-the-five-elements-of-ux-design
Class Activity
List:

1. Read through the description of the above business. Highlight everything that gives you clues about the reasons why
the business needs the website.
2. Write down a list of the reasons (product goals) the business needs the website or app.
Class Activity
List:

1. Carefully look at the two user personas provided for the business. Highlight everything in the
persona description that you think provides clues as to what the user may want to find out or do
when using the website.
2. Make a list of the things the user may want to find out or do (user goals) when using the web site.
Objectives:

A user-centred design process

LO6: Explain the meaning of the term user-centred design.

LO7: Distinguish between the various phases of the Double Diamond Design Process.

PM:
• User Centred Design.
https://www.interaction-design.org/literature/topics/user-centered-design

• Design Thinking: A quick overview.

https://www.interaction-design.org/literature/article/design-thinking-a-quick-overview

• How to apply a design thinking, HCD (Human-centered design), UX or any creative process from scratch.
https://uxdesign.cc/howto-solve-problemsapplying-a-uxdesigndesignthinking-hcd-orany-design-process-froms
cratch-v2-aa16e2dd550b

• Part 2 – Lessons 7
User Goals
Users always want something because they are people, and people always want something.

Business Goals
Every organization has a reason for creating a site or app in the first place.
Typically, it’s money, but it might be brand awareness, or getting new members for a
community, etc.

The specific type of business goal is important. If you want to show more ads, your UX
strategy will be a lot different than if you want to sell products or promote via social media.

Align the goals

The real test of a UX designer is how well you can align those goals so the business benefits
when the user reaches their goal.
If the goals are not aligned, you will have one of two problems: either users can
get what they want without helping the business (lots of users, no success), or
the users don’t get what they want (no users, no success).
Objectives:
LO6: Explain the meaning of the term user-centred design.

What is User Centered Design?

User-centered design (UCD) is an iterative design process in which designers focus on the
users and their needs in each phase of the design process.

In UCD, design teams involve users throughout the design process via a variety of
research and design techniques, to create highly usable and accessible products for them.
Why Is Design Thinking so Important?

In user experience (UX) design, it’s crucial to develop and refine skills to understand and
address rapid changes in users’ environments and behaviors.

Design teams use design thinking to tackle ill-defined/unknown problems (aka wicked
problems) because they can reframe these in human-centric ways and focus on what’s
most important for users.

With design thinking, teams have the freedom to generate ground-breaking solutions.
Objectives:
LO7: Distinguish between the various phases of the Double Diamond Design Process.

Double Diamond Design Process Framework

Double Diamond Design Process Framework
The terms " diverging " vs " converging"

Divergent thinking - unstructured, free-form way of problem solving in which participants

are encouraged to produce many innovative ideas or solutions to a pressing problem.
Divergent thinkers are often independent, curious and risk-takers.

Convergent thinking – when you're trying to define and deliver your solution you'll then be
thinking narrowly, focusing on a few ideas to try and solve your problem through solutions.
Double Diamond Design Process Framework
Double Diamond Design Process Framework
Double Diamond Design Process Framework
Stage 1 — Doing the right thing
(Diamond 1 — Discover and Define)
This phase is split into Discover/Research and Define/Synthesis.

Discover / Research
1. Rip the brief - try to question the brief by challenging
every part of it and evaluating fields of interests.
List as many elements as you can, find characteristics, define
areas of interest and extremes, list places, people
(personas), experiences that are related and can be
explored.

2. Before you dive into your research, cluster your findings

into topics to get an overview. This will help determine the
scope you want to research.

3. Dive into your research -apply primary (field)

and secondary (desk) research methods.

As a result, you ought to end up with a huge pile of

unstructured research findings.
Double Diamond Design Process Framework
Define / Synthesis
In order to make sense of your findings, you want to
synthesise your research by applying the following steps:

1. Download (summarise your raw findings and share them

with your team) all your research.

2. Cluster learnings and similarities to themes.

3. Find insights (insights are the dormant truth about the

consumer’s motivations, wishes or frustrations regarding a
specific topic) build opportunity areas (a phrasing of the
potential area of action).

4. Create HMW questions (A so called “how might we...”

question that makes a tangible statement of what is to be
done or solved within the area of action).

As a result, you ought to come up with a revamped brief (final

brief, HMW-question) that either clarifies or details the initial
brief challenge or even contradicts it.
Double Diamond Design Process Framework
Stage 2 — Doing things right
(Diamond 2 — Develop and Deliver)
This phase is split into Develop and Deliver.

Develop / Ideation
You have the actual question to solve, you start ideating.

1. Ideation
Part of a diverging phase. You should restrain from limiting
yourself and approach ideation with an open mind.
Do not judge during ideation. Build upon each other’s ideas.

2. Evaluation
Towards the end of an ideation phase, evaluate your ideas and
select your favourite ones. For example, each team member
votes for ideas.

As a result, you ought to end up with one or a small number

of ideas you want to later prototype and test, in order to find
the best answer or solution to your initial question or problem.
Deliver / Implementation
Once you have come up with potential solutions (set of
ideas), you want to evaluate the final one and the way it
needs to be implemented or executed.

In order to so, you may apply an agile approach consisting

of three steps:

1.Build/Prototype
2.Test/Analyse
3.Iterate/Repeat

Aim for MVPs — minimum viable products/prototypes,

that offer enough tangibility to find out whether they solve
the initial problem or answers the initial question.

As a result, you ought to be able to go “out” with your final

proposal, product, answer or solution.
Double Diamond Design Process Framework
Recap by watching these videos on the Double Diamond Design Process:

https://www.youtube.com/watch?v=w0_-1RqBK_0

https://www.youtube.com/watch?v=ExFeZaMJ6yA
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
ICE TASK 1
Due Date: 29/07/2024
On Brightspace complete Micro-assessment

o: te :
t le
Go m p
Co
ICE TASK 1
Due Date: 29/07/2024
On Brightspace complete Micro-assessment
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].