Day 1

Part I

Design Thinking

Do the right thing to enhance your product digital

Design Thinking
Design Thinking
Design Thinking
Design Thinking
What it is?
Design Thinking is a philosophy and methodology that provides a solution-based approach to
solving problems. It’s particularly useful in addressing complex, ill-defined, or unknown problems
by understanding the human needs involved, re-framing the problem in human-centric ways,
brainstorming ideas, and adopting a hands-on approach in prototyping and testing.

Human-Centered Focus:
At its core, design thinking is about deeply understanding and empathizing with the people you
are designing for.
Problem Reframing:
Design thinking encourages looking at problems from different perspectives. By reframing
problems, it opens up new avenues for innovative solutions that may not be immediately
apparent.
Iterative Process:
The methodology is inherently iterative, involving repeated cycles of ideation, prototyping,
testing, and refining. This allows for continuous improvement and adaptation based on real user
feedback.
Design Thinking
The Process
Empathize—Research Your Users' Needs
This stage involves immersing oneself in the users’ world, conducting
interviews, observations, and engaging with them to understand their
needs, challenges, and experiences deeply.
The Process
Define—State Your Users' Needs and Problems
Similarly, in the define stage, the insights gathered during empathy are
synthesized to clearly articulate the problem. This reframing helps focus efforts
on addressing the core issue, setting the foundation for innovative solutions.
The Process
Ideate—Challenge Assumptions and Create Ideas
iverse ideas are generated through brainstorming sessions, mind mapping, and
other techniques. This phase values quantity over quality, encouraging wild ideas
and exploring a wide range of possibilities.
The Process
Prototype—Start to Create Solutions
he prototype stage involves creating tangible representations of ideas. These
prototypes are basic versions of the solution that allow for hands-on
experimentation and user interaction. It’s about making ideas real and visible.
The Process
Test—Try Your Solutions Out
In the test stage, prototypes are tested with users. Feedback is gathered to understand
what works, what doesn’t, and why. This stage is crucial for validating assumptions and
making necessary adjustments.
Sample cases
Why Design Thinking Matters in Digital Tech
For digital tech experts, design thinking offers a structured yet flexible approach to
innovation. It bridges the gap between technical feasibility and human desirability.
Here’s why it’s impactful:

Enhances User Experience:

By focusing on user needs, design thinking ensures that digital products are intuitive, engaging,
and effective, leading to higher user satisfaction and adoption rates.

Drives Innovation:
It encourages creative problem-solving and out-of-the-box thinking, leading to innovative solutions
that stand out in the competitive digital landscape.

Reduces Risk:
Early prototyping and testing help identify potential issues and user pain points before full-scale
development, saving time and resources.

Fosters Collaboration:
Design thinking promotes cross-functional collaboration, ensuring that diverse perspectives are
considered, which enhances the overall quality of the solution.
Design Thinking
Design Thinking
Design Thinking
Design Thinking
Design Thinking Implementation
Cases: Improving Checkout Page
Reduce Average checkout first load 5.6s to 2-3
Which translate to increase in creation rate conversion from 37.50% to 43.5%
Design Thinking Implementation
Process 1: Empathize
Align with the entire key stakeholder to understand background of the theme -
Why & what? -, Can include aligning with the PRD that come from product team,
mostly to tell the problem or even POC.
Design Thinking Implementation
Process 1: Empathize
Understand current situation based on Data: Research and Data Panel.
Design Thinking Implementation
Understand Problem
Do some activity such as brainstorming or workshop session with the team to
get many POV and clear problem statement - Intent Statement
Design Thinking Implementation
Prioritized Assumptions
Hence, your team will have a ton of thought that maybe align with the problem
or even maybe not at all.
Design Thinking Implementation
Process 2: Define Process
Describe in detail the users problem causes, users goal and make a state what
the outcome for the user
Design Thinking Implementation
Heuristic Evaluation
Analyzed & evaluate current design page to find out the particular problem
Design Thinking Implementation
Heuristic Evaluation
Define each problem
Design Thinking Implementation
Process 3: Ideate
Define each problem
Design Thinking Implementation
Process 3: Ideate
Define each problem
Design Thinking Implementation
Process 4: Prototype
Concept design based on the ideation
Design Thinking Implementation
Process 4: Prototype
Concept design based on the ideation
Design Thinking Implementation
Process 4: Prototype
Concept design based on the ideation
Design Thinking Implementation
Process 4: Prototype
Concept design based on the ideation
Design Thinking Implementation
Process 5: Validate
Concept testing & Usability testing
Design Thinking Implementation
Re-iterate
Concept design based on the ideation
Research
Understand your users
UX Research

What it is?
UX Research (User Experience Research) is a systematic investigation into users and their
needs to inform the design process of digital products. It involves collecting and analyzing data
about users’ behaviors, needs, motivations, and pain points through various methods and
techniques. The goal is to gather insights that can guide the creation of user-centered designs,
ensuring that products are both useful and usable.

Understanding the User:

• Demographics: Age, gender, location, etc.

• Psychographics: Attitudes, interests, lifestyle.

• Behavior: How users interact with similar products, their routines, and habits.
Identifying User Needs:
• Goals: What users want to achieve.

• Pain Points: Challenges or frustrations users face.

• Preferences: Features or experiences users like or dislike.

Evaluating the Product:
• Usability: How easy and efficient it is to use the product.

• Accessibility: How accessible the product is to users with disabilities.

• Satisfaction: How satisfied users are with the product.

UX Research
UX Research
UX Research
UX Research
UX Research
UX Research
UX Research
 UX Law
To create useful product digital
UX Law

What it is?
UX (User Experience) Law refers to a set of principles that guide
the design of user-friendly and effective interfaces. These laws
are derived from research in psychology, human-computer
interaction, and cognitive science, and they help designers
create more intuitive and efficient digital products
UX law
UX law
UX law
UX law
UX law
UX law
UX law
UX law
UX law
UX law
UX Law
UI Principles
To create useful product digital
UI Principle

What it is?

Guidelines that will help you create visuals that optimize the user

experience.

The visual design principle tells us how design elements such as

lines, shapes, colors, grids, or spaces are combined into a visual

that is coherent and pleasing to the eye of the user.

Scal

Visual hierarch

Balanc

Contras

Gestalt
UI Principle

Scale
Using relative size to signal importance and rank in a
composition.

In other words, when this principle is used properly, the most

important elements in a design are bigger than the ones that are
less important.
UI Principle

Visual Hierarchy

Guiding the eye on the page so that it attends to different design

elements in the order of their importance.

Visual hierarchy controls the delivery of the experience. If you

have a hard time figuring out where to look on a page, it’s more

than likely that its layout is missing a clear visual hierarchy.

UI Principle

Balance

A satisfying arrangement or proportion of design elements.

Just like when balancing weight, if you were to have one small

design element and one large design element on the two sides of

the axis, the design would feel a bit unbalanced.

UI Principle

Contrast
The juxtaposition of visually dissimilar elements in order to
convey the fact that these elements are different (e.g., belong in
different categories, have different functions, behave
differently).
UI Principle

Gestalt Principle
Principles that explain how humans simplify and organize
complex images that consist of many elements
Visual Principles
To create useful product digital
Style Guide
Elevation
In design systems, elevation provides hierarchy, separation, and give visual
feedback. This can be achieved through various styling techniques, like using
colors, shadows, transparency, and overlays.
Style Guide
Layouts
We often need to design experiences that work across a range of devices and
screen sizes. To create the best experience, our designs need to respond to a
device’s dimensions in a way people expect.
Style Guide
Function over hierarchy
It's common to see a type scale presented in a hierarchical format. This type
scale includes fonts for headings, subtitles, body text, and elements.
Style Guide
Color
Color is a powerful tool in design. It can evoke emotions, create visual interest, and guide
people’s attention. When selecting colors for your design system, aim for a balanced palette
that’s not too limited, but also not overwhelming.
Color Guide
Finding a solution with the help of color science
First we wanted to understand why these colors were visually pleasing, to uncover any
properties they had which could translate into rules
Color Guide
A color can be described by its hue, tone, and chroma.
This harmony can be explained by color theory. For any color, its hue corresponds to one’s
perception of it as red versus blue, or yellow versus green
Typography
Implemented Typography
A strong typography system creates consistency, personality, and readability across your
product.
Type could account for 85-90% of any given screen. Typography is often one of the
foundational components you will want to get a handle on as it will need to work harmoniously
with other elements like icons and UI controls.
Typography
Line length
Line lengths for body text are usually between 40 to 60 characters. In areas with
wider line lengths, such as desktop, longer lines that contain up to 120 characters
will need an increased line height from 20sp to 24sp.
Typography
Leading
To have a perfect leading is essential for a good readability. Making it too close or
too far will affect the quality of the reading experience.

Do Don’t

Do Don’t
Component

Why create components?

Components are interactive building blocks for creating a user interface. They
can be organized into categories based on their purpose: Action, containment,
communication, navigation, selection, and text input.
Button
Overview Button
Each screen should contain a single prominent button for the primary action. This
high-emphasis button commands the most attention.
Button
Specs
Each screen should contain a single prominent button for the primary action. This
high-emphasis button commands the most attention.

Enabled
Disabled
Hovered
Focused
Pressed
Design Case Study
Do the brainstorming
Empathize
Problem statements are concise descriptions of design problems

Design teams use them to define the current and ideal states, to freely find
user-centered solutions. Then, they use these statements—also called points
of view (POVs)—as reference points throughout a project to measure the
relevance of ideas they produce.
Empathize
Empathize
Empathize
Empathize
Empathize
Empathize
Empathize
Define
Define
Define
HMW
Ideate
Vote
Prototype
Affinity Mapping

Why Affinity Mapping?

Affinity diagrams are ideal for sorting large amounts of data or long lists of ideas
into related groups. You can use affinity diagrams to
Organize the results of a brainstorming session
Improve processes
Mediate professional conflict
Develop innovative solutions
Drive group consensus.
Affinity Mapping
Affinity Mapping
Affinity Mapping
Affinity Mapping
Affinity Mapping