Perancangan User Experience

K Candra Brata
andra.course@gmail.com
Tim Ajar Mata kuliah PUX 2018-2019
What's more important,
fixing the customer's problem or
creating a good customer experience?
User eXperience
Deep understanding
UX Design is NOT usually noticed unless it’s BAD
BadUX GoodUX
BadUX GoodUX
The UX
Iceberg
The UX
Iceberg
UX
APPLICATION ARCHITECTURAL
UX ROLES ARCHITECTURAL
 UX UI

• Field studies • Interviewing • Content • Design • HTML • HTML

• Personas • Wireframe Inventory Principles • CSS • .Net
• Observation • Prototypes • Card Sorting • Usability • JQuery • Java
• Focus groups • Work Flow • Labeling • Typography • JavaScript • SQL/Database
• Usability (usability) • Navigation • HTML/CSS • Flash/Flex • Server
testing • Excel • Thesauri • Photoshop • ActionScript
• Morae • Silverback, • Search • Illustrator
• Ovo Studios Captcha • Controlled • Fireworks
• Excel • Omnigraffle, Vocabulary • JQuery
• Word Visio • Excel
• SPSS • InDesign, Axure • Optimal Sort
• PowerPoint • Fireworks,
HTML
UX Design Approach
 HCD
 Design Thinking
 Agile
 DesignSprint
Human Centered
Design
 Human Centered
Design
◎ ISO:
Approach to systems design and development that aims to
make interactive systems more usable by focusing on the use
of the system and applying human factors/ergonomics and
usability knowledge and techniques

◎ IDEO:
creative approach to problem solving that kept the people
you’re looking to serve at the heart of the process.
 HCD
Mindsets
 Listener
 Empathize
 Think
 Test
 Fail (early and often),
 Spend a surprising amount of time not knowing the answer to the challenge
 Optimists
 Maker
 experimenter
 learner
 iterate
 look for inspiration in unexpected places.

We believe that a solution is out there and that by keeping focused on the
people we’re designing for and asking the right questions, we’ll get there
together.
 HCD

Process :
 HCD
Process :

INSPIRATION

IMPLEMENTATION

IDEATION
HCD

i Inspiration id Ideation im Implementasi

 Reference on
HCD

• ISO 9241-210:2010 Ergonomics of human-system

interaction -- Part 210: Human-centred design for
interactive systems
http://hsevi.ir/RI_Standard/File/7436

• IDEO Field Guide to Human-Centered Design

newer version:
http://bestgraz.org/wp-content/uploads/2015/09/Field-Guide-to-Human-
Centered-Design_IDEOorg.pdf
Design Thinking
Design Thinking

IDEO:
Methods to match people’s needs with what is
technologically feasible and what a viable business
strategy can convert into customer value and market
opportunity.
Design Thinking

“Design thinking” is a methodology for problem solving

Design Thinking

EMPATHIZE IDEATE

DEFINE PROTOTYPE

Learn about the Brainstorm

people we serve and unleash
TEST
as many
Who is my user? creative
Create a point Buid a
What matters to solution as
of view based representation
this person? possible
on user needs of your ideas to
and insights show to others
What is your Share your
craziest idea? prototype and
What are their How can I show
get feedback
needs? my idea?
What is worked?
What didn’t?
Design Thinking

EMPATHIZE IDEATE

DEFINE PROTOTYPE

TEST

DEBRIEF ITERATE

SHARE
 Reference
Design Thinking
• An Introduction to Design Thinking: Process Guide
https://dschool-
old.stanford.edu/sandbox/groups/designresources/wiki/36873/attachments/7
4b3d/ModeGuideBOOTCAMP2010L.pdf?sessionID=1b6a96f1e2a50a3b1b7c3f
09e58c40a062d7d553

• Design Thinking Workshop by Prof Widom

https://doc-10-4s-
docs.googleusercontent.com/docs/securesc/r2hpioenh2ie7qpn8ffhe9hidukbln
rj/m5oqo56oba7pohckdp1pd8s1s2ss5bh6/1487512800000/13910233827087
585226/10945620357999277172/0B5tEq_Jf3-
6oOVk0SWkzM2xmOTg?e=download&nonce=k1ggqiqpqulg0&user=10945620
357999277172&hash=hn7dnmtqp95ilja5n0nvfpng6iv62nmf
Agile Development

▧ iterative and incremental product development

methodologies.

▧ Agile methodologies break the product down into smaller

pieces that undergo shorter cycles of requirements
definition, design, and coding.

▧ A key part of Agile is defining your product in a customer-

centric way with user stories.

▧ Agile Principle : https://www.agilealliance.org/agile101/12-principles-behind-the-agile-manifesto/

Agile Vs traditional ▧ Traditional SDLC
Agile Vs traditional

▧ Agile
Agile Development

Benefit Of Agile

▧ First, because you are planning in smaller increments, you

can react to changes in the market or other new information
more quickly.

▧ Second, your product reaches customers earlier—which

means that you start hearing feedback from customers on
your actual product sooner, which helps guide your
subsequent product development efforts.

▧ Third, teams can reduce their margin of error in estimating

scope by working in smaller batch sizes.
Agile Proses
UX Agile Stages

UX in Agile Software Dev

▧ UX in the early stages: User Research

▧ UX in the mid stages: Iterative Design
▧ UX at the late stages: Usability Evaluation
▧ UX in the development: Guidance and Support
Agile Stages
UX in the early stages :
User Research

▧ Heuristic Review
analyzing competitor or
current solution

▧ Contextual Inquiry
field observations

▧ Workflow and Task Analysis

user flows

▧ Personas – user profiles

UX Agile Stages

UX in the mid stages: Iterative Design

▧ “Low-fidelity” prototypes (wireframes) – define the information architecture.

▧ “Medium-fidelity” prototypes (color, icons, graphics, etc.) – define the visual

designs.

▧ “High-fidelity” product prototypes (HTML prototypes) – define the interactive

design
UX Agile Stages UX in the late stages:
Usability Evaluation

▧ Internal Evaluations -
stakeholders, subject matter
experts, and/or end-user proxies

▧ Remote Evaluations –
with external users

▧ Remote Unmoderated
Evaluation – usability tool

▧ Lab Evaluations –
formal evaluation

▧ Site Visit Evaluations

UX Agile Stages UX in the development: Guidance and Support

▧ Educate developers on the best practices of maintaining good UX design.

▧ Provide UX guidelines and design elements.
▧ Assist test engineers and System Team in UX testing and testing
automation.
▧ Attend Dev planning, backlog grooming, iteration demos and whenever
critical UX-related work is involved.
Reference UX Agile

• Agile Experience Design: A Digital Designer's Guide to

Agile, Lean, and Continuous
http://gen.lib.rus.ec/book/index.php?md5=C76451BC9C6CDD1BF54D1E0F
EA66FAF1
 Google :
Design Sprint

Google Design Sprint

https://developers.google.com/design-sprint/
 Design Sprint

Google:
a framework for teams of any size to solve and test design problems
in 2-5 days. The idea of sprints originates from design thinking and
agile development.
Design Sprint
6 Stages
 2. Define 4. Decide 6. Validate

Develop focus and Review all the ideas "Is this idea any
strategy by defining from the Diverge good?“. Test the
the central journey phase and vote for ideas. Watch users
they want to create the best options. interact with the
for their users. prototype and take
. notes.

1. Understand 3. Diverge 5. Prototype

Invite the right Generate as many Test out your ideas to

people to share on: ideas as possible know earlier what
Business goals, before they commit aspects of your ideas
Technology to the best option. fail and which have
capability, User potential.
need.
Design Sprint
Team
 Design Sprint

Sprint Master
A Sprint Master is the lead of the team.
The person who identifies the design challenge for the sprint, brings
the team together and takes them through all sprint stages.

This is a special role that requires deep understanding of UX methods,

strategy, facilitation and negotiation.

Typically, Sprint Masters are UX Researcher and Designers.

 UX Talk

Video tentang UX dalam industri IT

https://www.youtube.com/watch?v=BIc17PJ6CJ4&list=PLzMtIVEHDtNpyEFQR
P9gFqA0n082UJ3MQ

https://www.youtube.com/watch?v=XxDvhzg3nTk&index=2&list=PLzMtIVEHDt
NpyEFQRP9gFqA0n082UJ3MQ
Prepare the
supplies
 Prepare the
supplies
Post-it or other brand of sticky notes (approx. 6-10cm x 6-10cm)

minimum 3 pad (different color) of 50+ sheets per participant.

 Prepare the
supplies
voting dots ( 3 different colors)
 Prepare the
supplies
Large pads of white poster (A0) paper (approx. 50cm x 60cm):
minimum 4 sheets per group
 Prepare the
supplies
Magnet Button for Whiteboard (minimum 6)
 Prepare the
supplies
Snacks and coffee are useful 
Nothing is a mistake.
There’s No Win
and No Fail.

There’s Only MAKE..

ANY QUESTIONS? JOIN !!

You can find me at

A.1.2

http://bit.do/UXDesign