You are on page 1of 19

The Process of UI/UX

Design
Understanding the process and the
heart of UX Design
The Process in UI/UX Design
https://xd.adobe.com/ideas/guides/ux-design-process-steps/

What does the UX process look like? The answer to this question is: it depends. Your
process will depend on the type of product you’re designing. Different projects require
different approaches; the approach to a corporate website differs from the way we
design a dating app, for example.

Most designers are familiar with the concept of “design thinking” as a UX process. This
process has five stages in it: empathize, define, ideate, prototype, and test. Most
design processes originate from this concept.

Beside design thinking, there is another framework called design sprint similar
concept with design thinking but it is already customized and the process is designed
to be shorter and quicker.

We will go through each framework 1 by 1.

Design Thinking
Disalin dari:

https://designthinking.ideo.com/

https://static1.squarespace.com/static/57c6b79629687fde090a0fdd/t/5b19b2f2aa4
a99e99b26b6bb/1528410876119/dschool_bootleg_deck_2018_final_sm+%282%29.pd
f

https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf
Intro:

“Design thinking is a human-centered approach to innovation that draws from the


designer’s toolkit to integrate the needs of people, the possibilities of technology, and
the requirements for business success.”

—TIM BROWN, EXECUTIVE CHAIR OF IDEO

This approach, which is known as design thinking, brings together what is desirable
from a human point of view with what is technologically feasible and economically
viable. It also allows people who aren't trained as designers to use creative tools to
address a vast range of challenges.
We live and work in a world of interlocking systems, where many of the problems we
face are dynamic, multifaceted, and inherently human. Think of some of the big
questions being asked by businesses, government, educational and social
organizations: How will we navigate the disruptive forces of the day, including
technology and globalism? How will we grow and improve in response to rapid
change? How can we effectively support individuals while simultaneously changing
big systems? For us, design thinking offers an approach for addressing these and
other big questions.
The Design Thinking process has five stages in it: empathize, define, ideate, prototype,
and test. Most design processes originate from this concept.
If we apply design thinking to product design, we would follow a UX process with the
following five key phases:

● Product definition
● Research
● Analysis
● Design
● Validation

1. Product definition

One of the most important phases in UX design is actually done before the product
team creates anything. Before you can build a product, you need to understand its
context for existence. The product definition phase sets the foundation for the final
product. During this phase, UX designers brainstorm around the product at the
highest level (basically, the concept of the product) with stakeholders.

This phase usually includes:

Stakeholder interviews: interviewing key stakeholders to gather insights about


business goals.

Value proposition mapping: thinking about the key aspects and value propositions of
the product: what it is, who will use it, and why they will use it. Value propositions help
the team and stakeholders create consensus around what the product will be and
how to match user and business needs.

Concept sketching: creating an early mockup of the future product (can be


low-fidelity paper sketches of the product’s architecture).
This phase typically ends up with a project kick-off meeting. The kick-off meeting
brings all the key players together to set proper expectations both for the product
team and stakeholders. It covers the high-level outline of the product purpose, team
structure (who will design and develop the product), communication channels (how
they will work together), and what stakeholders’ expectations are (such as KPIs and
how to measure the success of the product).

2. Product research

Once you’ve defined your idea, the product team moves to the research phase. This
phase typically includes both user research and market research. Seasoned product
designers think of research as a good investment—good research informs design
decisions and investing in research early in the process can save a lot of time and
money down the road.

The product research phase is probably the most variable between projects—it
depends on the complexity of the product, timing, available resources, and many
other factors. This phase can include:

Individual in-depth interviews (IDI). A great product experience starts with a good
understanding of the users. In-depth interviews provide qualitative data about the
target audience, such as their needs, wants, fears, motivations, and behavior.

Competitive research. Research helps UX designers understand industry standards


and identify opportunities for the product within its particular niche.

3. Analysis

The aim of the analysis phase is to draw insights from data collected during the
research phase, moving from “what” users want/think/need to “why” they
want/think/need it. During this phase, designers confirm that the team’s most
important assumptions are correct.

This phase of the UX process usually includes:

● Creating user personas. Personas are fictional characters that represent the
different user types for your product. As you design your product, you can
reference these personas as realistic representations of your target audience.
● Creating user stories. A user story is a tool that helps designers understand the
product/service interactions from the user’s point of view. It’s usually defined
with the following structure: “As a [user] I want to [goal to achieve] so that
[motivation].”
● Storyboarding. Storyboarding is a tool that helps designers connect user
personas and user stories. As the name suggests, it’s essentially a story about a
user interacting with your product.
4. Design

When users’ wants, needs, and expectations from a product are clear, product
designers move to the design phase. At this step, product teams work on various
activities, from creating information architecture (IA) to the actual UI design. An
effective design phase is both highly collaborative (it requires active participation from
all team players involved in product design) and iterative (meaning that it cycles back
upon itself to validate ideas).

The design phase usually includes:

● Sketching. Sketching is the easiest and fastest way to visualize our ideas. You
can do this by drawing by hand on a piece of paper, on a whiteboard, or in a
digital tool. It’s very useful during brainstorming sessions because it can help
the team visualize a broad range of design solutions before deciding which one
to go with.
● Creating wireframes. A wireframe is a tool that helps designers visualize the
basic structure of a future page, including the key elements and how they fit
together. Wireframing acts as the backbone of the product, and designers
often use them as a foundation for mockups and prototypes.
● Creating prototypes. While wireframes are mostly about structure and visual
hierarchy (the look), prototypes are about the actual interaction experience
(the look and feel). A prototype is like a simulation of the product and may be
low-fidelity (clickable wireframes) to high-fidelity (coded prototypes).
● Creating a design specification. Design specifications contain all of the visual
design assets required for developers to turn prototypes into a working
product.
● Creating design systems. For large projects, designers typically create a system
of components, patterns, and styles that help both designers and developers
stay on the same page regarding the design.

5. Validation (Testing)

Validation is an essential step in the design process because it helps teams


understand whether their design works for their users. Usually, the validation phase
starts after the high-fidelity design is ready, since testing with high-fidelity designs
provides more valuable feedback from end-users). During a series of user testing
sessions, the team validates the product with both stakeholders and end-users.

The validation phase of the UX process may include the following activities:

● “Eat your own dogfood.” Once the design team has iterated the product to the
point where it’s usable, it’s time to test the product in-house. Team members
should try using the product on a regular basis, completing routine operations
to uncover any major usability flaws.
● Testing sessions. User testing sessions with people who represent your target
audience are very important. There are many different formats to try, including
moderated/unmoderated usability testing, focus groups, beta testing, and A/B
testing.
● Surveys. Surveys are a great tool for capturing both quantitative and qualitative
information from real-world users. UX designers can add open-ended
questions like “What part of the product do you dislike?” to get user opinions
on specific features.
● Analytics. Quantitative data (clicks, navigation time, search queries, etc.) from
an analytics tool can be very helpful to uncover how users interact with your
product.

Design Sprint
Disalin dari: https://www.gv.com/sprint/

Intro:

While Design Thinking is popularized by IDEO, Design Sprint is popularized by Google


UX Team. The goal of Design Sprint is to actually try to adapt Design Thinking but in a
quicker manner. This approach is good to work with if the development team doesn’t
have much privilege to do an in depth understanding of the user. The main difference
that we can take is that Design Thinking requires us to do a big research first to build
something, meanwhile Design Sprint is to build something in a quick first then do
What research (validation) from there. Both processes are still iterative, in term to get
the solution that fits with the user needs it still needs to do both approaches
repeatedly.
What is design sprint

The sprint is a five-day process for answering critical business questions through
design, prototyping, and testing ideas with customers. Developed at Google Venture,
it’s a “greatest hits” of business strategy, innovation, behavior science, design thinking,
and more—packaged into a battle-tested process that any team can use.

Working together in a sprint, you can shortcut the endless-debate cycle and
compress months of time into a single week. Instead of waiting to launch a minimal
product to understand if an idea is any good, you’ll get clear data from a realistic
prototype. The sprint gives you a superpower: You can fast-forward into the future to
see your finished product and customer reactions, before making any expensive
commitments.

The Design Sprint process has five stages in it: understand, sketch, decide, prototype,
validate. If we take a look at it, the steps are actually pretty similar with design
thinking, as it originated from there. But the understanding step in Design Sprint
starts from by gathering the problem and context from the key stakeholders.
Let’s us dig deeper on each steps, but I will the daily basis steps as how the design
sprint titled it self as “five days process”

1. Understanding/Monday

Monday’s structured discussions create a path for the sprint week. In the
morning, you’ll start at the end and agree to a long-term goal. Next, you’ll make
a map of the challenge. In the afternoon, you’ll ask the experts at your
company to share what they know. Finally, you’ll pick a target: an ambitious but
manageable piece of the problem that you can solve in one week.
2. Sketch (Tuesday)

After a full day of understanding the problem and choosing a target for your
sprint, on Tuesday, you get to focus on solutions. The day starts with
inspiration: a review of existing ideas to remix and improve. Then, in the
afternoon, each person will sketch, following a four-step process that
emphasizes critical thinking over artistry. You’ll also begin planning Friday’s
customer test by recruiting customers that fit your target profile.

3. Decide (Wednesday)

By Wednesday morning, you and your team will have a stack of solutions.
That’s great, but it’s also a problem. You can’t prototype and test them all—you
need one solid plan. In the morning, you’ll critique each solution, and decide
which ones have the best chance of achieving your long-term goal. Then, in
the afternoon, you’ll take the winning scenes from your sketches and weave
them into a storyboard: a step-by-step plan for your prototype.

4. Prototype (Thursday)

On Wednesday, you and your team created a storyboard. On Thursday, you’ll


adopt a “fake it” philosophy to turn that storyboard into a prototype. A realistic
façade is all you need to test with customers, and here’s the best part: by
focusing on the customer-facing surface of your product or service, you can
finish your prototype in just one day. On Thursday, you’ll also make sure
everything is ready for Friday’s test by confirming the schedule, reviewing the
prototype, and writing an interview script.
5. Validate (Friday)

Your sprint began with a big challenge, an excellent team—and not much else.
By Friday, you’ve created promising solutions, chosen the best, and built a
realistic prototype. That alone would make for an impressively productive
week. But you’ll take it one step further as you interview customers and learn
by watching them react to your prototype. This test makes the entire sprint
worthwhile: At the end of the day, you’ll know how far you have to go, and
you’ll know just what to do next.

Empathize with the People You Design For


The heart of the UX design is the people, or specifically the user of our later solution
generated by the process of designing UX. So empathizing with people is so
important. The question is how do we empathize with them and make the result of
empathizing works for building the solution? Let’s answer the question below

What can we do to empathize with people?

Disalin dari:
https://www.interaction-design.org/literature/article/stage-1-in-the-design-thinking
-process-empathise-with-your-users

The first stage of the Design Thinking process involves developing a sense of empathy
towards the people you are designing for, to gain insights into what they need, what
they want, how they behave, feel, and think, and why they demonstrate such
behaviors, feelings, and thoughts when interacting with products in a real-world
setting.

To gain empathy towards people, we as design thinkers often observe them in their
natural environment passively or engage with them in interviews. Also, as design
thinkers, we should try to imagine ourselves in these users’ environments, or stepping
into their shoes as the saying goes, in order to gain a deeper understanding of their
situations. In the following sections, we will outline some methods from d.school
Bootcamp Bootleg that will allow you to gain empathy towards your users.

Below are few things we can do as design thinkers to gain our empathy to the people:

1. Assuming a Beginner’s Mindset

If we are to empathize with users, we should always try to adopt the mindset
of a beginner. What this means is that, as designers (or design thinkers), we
should always do our best to leave our own assumptions and experiences
behind when making observations. Our life experiences create assumptions
within us, which we use to explain and make sense of the world around us.
However, this very process affects our ability to empathize in a real way with
the people we observe. Since completely letting go of our assumptions is
impossible (regardless of how much of a checkered reputation the word
“assumption” has!), we should constantly and consciously remind ourselves to
assume a beginner’s mindset. It’s helpful if you always remind yourself never
to judge what you observe, but to question everything—even if you think you
know the answer—and to really listen to what others are saying.

2. Ask What? How? Why?

By asking the three questions — What? How? Why? — we can move from
concrete observations that are free from assumptions to more abstract
motivations driving the actions we have observed. During our observations, for
instance, we might find separately recording the “Whats”, “Hows” and “Whys”
of a person’s single observation helpful.
In “What”, we record the details (not assumptions) of what has happened. In
“How”, we analyze how the person is doing what he/she is doing (is he/she
exerting a lot of effort? Is that individual smiling or frowning?). Finally, in “Why”,
we make educated guesses regarding the person’s motivations and emotions.
These motivations we can then test with users.

3. Photo and Video User-based Studies

Photographing or recording target users, like other empathizing methods, can


help you uncover needs that people have which they may or may not be aware
of. It can help guide your innovation efforts, identify the right end users to
design for, and discover emotions that guide behaviors.

In user camera-based studies, users are photographed or filmed either: (a) in a


natural setting; or (b) during sessions with the design team or consultants
you’ve hired to gather information. For example, you might identify a group of
people who possess certain characteristics that are representative of your
target audience. You record them while they’re experiencing the problem
you’re aiming to solve. You can refresh your memory at a later time with things
people said, feelings that were evoked, and behaviors that you identified. You
can then easily share this with the rest of your team.

4. Personal Photo and Video Journals

In this method, you hand over the camera to your users and give them
instructions, namely to take pictures of or video-record their activities during a
specified period. The advantage is that you don’t interfere or disturb the users
with your personal presence, even though they will adapt and change their
normal behavior slightly as they know that you’ll watch the video or see the
photo journal later. In a similar way to using personas, by engaging real people,
as designers we gain invaluable personal experiences and stories that keep the
human aspect of design firmly in mind throughout the whole process. While
we probably know, deep down, what limits are involved when three people are
trying to use one phone, there’s nothing like the first-hand evidence of a live
(and recorded) performance to put this front and center in our awareness
from the outset.

5. Interviews

Interviews are an important part of the UX designer’s skill set for empathizing
with users. However, an interview will yield only minimal results if you are not
prepared to conduct it with genuine empathy.

One-on-one interviews can be a productive way to connect with real people


and gain insights. Talking directly to the people you’re designing for may be the
best way to understand needs, hopes, desires and goals. The benefits are
similar to video- and camera-based studies, but interviews are generally
structured, and interviewers will typically have a set of questions they wish to
ask their interviewees. Interviews, therefore, offer the personal intimacy and
directness of other observation methods, while allowing the design team to
target specific areas of information to direct the Design Thinking process.

Most of the work happens before the interviews: team members will
brainstorm to generate questions to ask users and create themes or topics
around the interview questions so they can flow smoothly from one to another.

6. Engaging with Extreme Users

Extreme users are few in number, but it doesn’t mean you should disregard
them and aim just for the main bulk of users instead. In fact, they can provide
excellent insights that other users may simply be unprepared to disclose.
By focusing on the extremes, you will find that the problems, needs and
methods of solving problems become magnified. First, you must identify the
extremes of your potential user base; then, you should engage with this group
to establish their feelings, thoughts and behaviors, and then look at the needs
you might find in all users. Consider what makes a user extreme and you’ll
tend to notice it’s the circumstances involved. A basic example is a grocery
store shopping cart and a shopper with five very young children in tow – there
are two fold-down seats in the cart, but the other kids (who are also too young
to walk) must go somewhere. Our shopper is, therefore, an extreme user of the
shopping cart design.

On the one hand, if you can manage to please an extreme user, you should
certainly be able to keep your main body of users happy. On the other hand, it
is important to note that the purpose of engaging with extreme users is not to
develop solutions for those users, but to sieve out problems that mainstream
users might have trouble voicing; however, in many cases, the needs of
extreme users tend to overlap with the needs of the majority of the population.
So, while you may not be able to keep everyone happy at all times with your
design, you can certainly improve the chances that it will not frustrate users.

7. Analogous Empathy

Using analogies can help the design team to develop new insights. By
comparing one domain with another, we as designers can conjure different
solutions that would not necessarily come to mind when working within the
constraints of one discipline. For example, the highly stressful and
time-sensitive procedure of operating on a patient in a hospital emergency
room might be analogous to the process of refueling and replacing the tires of
a race car in a pit stop. Some of the methods you might use in analogous
empathy include comparing your problem and another in a different field,
creating an 'inspiration board' with notes and pictures, and focusing on similar
aspects between multiple areas.

8. Sharing Inspiring Story

Each person in a design team will collect different pieces of information, have
different thoughts, and come up with different solutions. For this reason, you
should share your inspiring stories to collect all of the team members’
research, from field studies, interviews, etc. By sharing the stories that each
member has observed, the team can get up to speed on progress, draw
meaning from the stories, and capture interesting details of the observation
work.

9. Body Storming

Bodystorming is the act of physically experiencing a situation in order to


immerse oneself fully in the users’ environment. This requires a considerable
amount of planning and effort, as the environment must be filled with the
artifacts present in the real-world environment, and the general
atmosphere/feel must accurately depict the users’ setting. Bodystorming puts
the team in the users’ shoes, thereby boosting the feelings of empathy we
need as designers in order to come up with the most fitting solutions. Having
that ‘real-life’ experience will serve as a reference point for later in the process,
enabling us to stop, stand back and ask ourselves: “Remember when we tried
being the user? How would this new thing fit in with that?”

You might also like