Introduction to Design Thinking

&

Visual UI
 Ezra Ravin Mateus
UI/UX Enthusiast

What is Design and Design Thinking?

since 2019

The meaning of design across different company may vary.

Member of UXiD,
Active Member in
Graduate of

an Open UX Community DesignJam ID Quix Bootcamp

uxidbdg ux_indonesia designjam.id quixds

Medium
What is Design and Design Thinking?
The meaning of design across different company may vary.

Medium
Evolution of Design

Medium
 Evolution of Design

Branding

Tech
&

Features Customer

Experience
Design Elements

Only

Business

Profitability

Old Times (Before 1990s)

Millenial Times

Medium
 Design Touches Heart

“We wanted to more richly experience why we were alive, not just make a better life…there was

definitely more to life than the materialism of the late 50’s and early sixties. We were going in search

of something deeper.”

Steve Jobs

Medium
Design from Apple’s Perspective
People want to feel as if they are involved in something bigger than themselves.

They want to be able to identify with the products and services they use.

People want to feel like that their lives have meaning.

Medium
Design Framework from Apple

What

How

Why

Marketing With Ethics

Design Framework from Apple

What

How

Why = Purpose, Belief, Values

Why How = Methods of how the business or product works

What = What the business do or sell

Marketing With Ethics

The Basic of Design Thinking

What

How

Why

Marketing With Ethics

 What is Design then?
“Design is not just what it looks like and feels like. Design is how it works.”

Steve Jobs

Medium
What is Design then?
Design is communication

Medium
What makes great design?

“Functionality + Aesthetics + Experience + Strong Voice”

Ezra Ravin
Design Thinking Process

Medium
Design Thinking Process - The Common

Medium
Design Thinking Process - Iteration

Interaction Design Foundation

Design Thinking Methods
Methods - Empathizing to Define Stage

User

User
User

Journey
Research Persona
Map

Value

Insight
User

Proposition

Categorizing Flow
Canvas

Design Heuristic
Usability

Sprint Evaluation Testing

Main
“How Might Competitive
Features
We” Analysis
Analysis

The “5 Why” Empathy

Interview Mapping
Methods - Ideate to Prototype Stage

Wire
Site
Crazy 8

Frame Map Rapid Paper

Sketch Prototyping

Mood
Design

WireFlow Boarding System


Analysis

UX

Writing
Empathy Map

Nielsen Norman Group

Empathy Map Example (Buying a TV)

Nielsen Norman Group

User Persona (Example)

Career Foundry
Value Proposition Canvas

[Your Company] Persona:

[Name]
Status:

[Low, Middle, High Class]

Income:

[Price]

Gender:

[Male or Female]

Value Proposition Customer Segment

Gain Creators Gains

Products and FIT! Jobs

Services

Pain Relievers Pains

Strategyzer
Value Proposition Canvas (Example)
Uber
Persona:

Juan Dela Cruz

Status:

Middle Class

Monthly Income:

40,000php

Gender:

Male

Peer-to-peer ridesharing

Value Proposition Customer Segment

Navigate
Ability to manage all
your trip
trip details on a
on the
single platform
map One-click
order/cancellation
Passenger
mobile App
Gain Creators Gains Contact a
Rating Automatic credit Zero time on
good taxi
system card payment Payment
service
Trusted Driver

Black cab
Control Wait for the
cost for a cab for some
ride amount of time
Products and FIT! Jobs
Services
Uber X Need to
Driver ratings book a cab
in advance Pay for the
Bad drivers trip
Flawless
happen
automatic
UberPop payment
24/7/365 Low cab
Pain Relivers Pains
availability of cab availability
Issues with
Arrival/Travel payment
time prediction

Strategyzer
User Journey Map

Nielsen Norman Group

User Journey Map (Example)

Nielsen Norman Group

That’s it for Design Thinking...
So we’ve covered the UX part, now

it’s time for the UI part.

UX vs UI

“UX is focused on the user’s journey to solve a problem; UI is focused on how a product’s surfaces look and

function.”

Ken Norton, Partner at Google Ventures, Ex-Product Manager at Google

CareerFoundry
They are both TOMATO SAUCE!

What was different though?

UX is a Mindset! Always Remember!
Why Do UI Design?
Due to COVID-19, there’s a spike usage in

apps, webs, online platforms.

Web, App, Online Platform UI Design

is increasingly needed wherever.

How important is it?
Visual Design is Communication
A bad visual design might give the wrong message.

plego.com
UI Principles
Hierarchy
Creates an order of which thing or which object or which information is important to the user.
Hierarchy based on Reading Patterns
F-Pattern
Your Content

Nielsen Norman Group

Contrast
Contrast also highlights which information you want to highlight.
Proximity (Data Organization)
Based on the cognitive tendency to perceive the objects close to each other as related, especially in comparison
with those which are placed farther.

Having the urge to organize the variety of data and objects around, people often group them this way automatically,
much quicker than they start real thinking about it.

UXPlanet
UXPlanet
UXmisfit
Whitespace
Always give room for your UI Design Elements to breathe!

Remember, a lot of information overwhelms your user.

Occam’s Razor
Reduce Visual Noise

The fewer the number of elements you use in your design, the better.

UXPlanet
Consistency
Always be consistent in your design in terms of :

- Typography

- Font

- Colour Palette

- Alignment

- Grid

- Decorative Elements

Too much inconsistencies causes distraction like the horrible web ui design page earlier and will make your user not
understand what your web, app or platform does for them.
Starting your UI Design Journey

with Figma

Figma
That’s a wrap guys!
 My Learning Journey

quixds
designjam.id
ux_indonesia
uxidbdg
 Keep In Touch

ezra.ravin
ezraravinmateus
Ezra Ravin Mateus

eXTalk Vol.2