Design Thinking Process for UI UX Designer

Pandu Budikusuma
7 min readSep 20, 2023

--

Design thinking process explains the thought process of a designer to create a valuable product. A valuable product is produced not only from one idea or one thought from one person, there is a process behind it so that it produces a product that is valuable, useful and has selling value.

5 phases of the design thinking process (Source: https://fahrizalbimantara.medium.com/design-thinking-3eadfa6b610b)

Design thinking consists of 5 phases:
1. Empathy
2. Define
3. Ideas
4. Prototype
5. Iteration

  1. Empathy

Empathy is obtained from observing all parties related to the product that will be built or designed by a designer. Starting from stakeholders, users, to competitor products.

  • Stakeholder

From a stakeholder perspective, designers must explore what problem they want to solve, what kind of product can solve that problem, what features and functions are needed in the product, what parameters are used to assess the product’s success, etc. The main key is to empathize with stakeholders.

  • Users

Just like how a designer observes stakeholders, designers must observe users who relate to the problem they want to solve, how potential users solve the same problem. Find out what complaints users have experienced because of this problem.

Don’t make this observation process a monotonous question and answer event that doesn’t explore the thoughts and feelings of potential users. Avoid yes no questions, add more questions that require prospective users to answer at length according to how the user feels. Develop questions from the answers submitted by potential users.

Take the user’s imagination into the future by assuming that the product you are planning exists, what features and functions the user would want to solve the problem. If there is a competing product, ask what the advantages and disadvantages of the product are from the perspective of potential users, etc.

  • Competitor Products

And finally, observe competitor products that are already on the market. Note down the advantages and disadvantages of each competitor’s product. What kind of design is used, what is the workflow, etc.

2. Define

From the results of observations made, starting from observations of stakeholders, users, and secondary competitor data, a lot of data was obtained, whether the data was related or not at all. From this data, draw a conclusion, what is the main problem experienced by the user. Is it related to the results of observations with stakeholders? Is it fulfilled by competitor products?

The steps we have to do are:

  • Familiar with the data obtained.

Read the observation data several times, train our empathy, find out what really happened, and why it happened.

  • Afinity Sorting

Using affinity sorting, write each observation result on a sticky note. Group observation results that have the same theme. The goal is to know the user’s mental model, the tools used, user needs, and user flow. And from there the book can get a broad overview of how users achieve their goals, or what we usually call a user journey map.

Afinity Sorting (Source: https://www.udemy.com/course/ultimate-guide-to-ux/)
  • User Persona

From the results of your observations, try to build a persona. A persona is a description of the target user for our product which will influence our decisions in designing the product. If taken as an analogy in a hospital operating room, the persona is an operating lamp that illuminates the doctor when carrying out the operation. So, without a persona, the designer cannot do what he is supposed to do. If it is true that he can do it, the designer does his work with his eyes closed and feels, without being able to see his work as a whole.

User Persona (Source: https://www.udemy.com/course/ultimate-guide-to-ux/)
  • Red Routes

Apart from producing user personas, this definition process also produces red routes. That is getting to the main of the problem that we are trying to solve. If a persona is likened to an operating table lamp, red routes can be likened to a scalpel. Red routes can provide things that can be used as input to a designer to do what he or she should do. So red routes are the main purpose for which the product was created. A designer must create a product design that is obstacle free so that users can easily achieve their goals as soon as possible. To create red routes, we could creates a graph of the relationship between how much a user uses a feature and how often the user uses the feature. From the results obtained, the feature that is most frequently used is red routes.

Red Route (Source: https://www.udemy.com/course/ultimate-guide-to-ux/)
  • User Stories

And the last one is user stories. In using each product, in general each user has the same red routes but with different contexts. To accommodate this, designers can do this by creating user stories. User stories have a particular structure, namely: “as a user I want to…, so that I can…”.

Image. User Story (Source: https://www.udemy.com/course/ultimate-guide-to-ux/)

3. Ideate

From the results obtained from the define stage, by using our empathy, we produce ideas that can be applied to a product. If we are in a team, collect the ideas of each member and review the existing ideas one by one, then focus on a small number of ideas that are worthy of execution. For initial execution, it can be done using the crazy 8 method. that is, each member draws a design from an agreed idea for several minutes. And so on until all the agreed ideas are successfully depicted on paper. From the many existing design sketches, eliminate designs that are not suitable, then vote for designs that are suitable and believed to be able to achieve the agreed goals.

Crazy 8

From oneor more selected sketch, you can continue with a solution sketch. A solution sketch is a sketch that can expand one solution design. it could develop one sketch or collaborate on one sketch with other sketch.

4. Prototype

From the sketch obtained from the previous ideation results, a designer builds a prototype ranging from low fidelity to high fidelity. This prototype helps a designer to communicate with stakeholders and users so they can immediately get feedback.

  • user flow

The steps that can be taken are building user flow. Namely building the most effective flow for users to achieve each desired goal. To build user flow, you must prioritize empathy by reviewing predetermined red routes, user charms and user stories.

  • Information Architecture

Start building Information Architecture, which is the method we use to turn piles of unorganized content into something more structured. So that users can complete their tasks and achieve their goals mindlessly. To build an information architecture, designers can consider the categories and hierarchy of each content.

  • Wireframe

Build a Wireframe from the results of the user flow and Information Architecte that have been obtained. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content are added. Additionally, the main goal of wireframing that we can obtain is to show the team and stakeholders which each page and component the application will have and how these digital product elements will interact with each other. The goal is again, to get feedback so that we can fix what should be fixed at the beginning and not do what shouldn’t be done.

From the wireframe that has been successfully built, the next step is to build a high fidelity prototype by considering aesthetic usability effects such as contrast, alignment, repletion and proximity (CARP).

Prototype High Fidelity

5. Test

Complete the prototype as soon as possible so that the prototype can be immediately submitted to developers, stakeholders or users to get feedback. Do the above repeatedly until you get a valuable prototype. Apart from that, testing can be done by measuring usability which consists of effectiveness, efficiency and satisfaction. From these results, feedback is obtained so that the design can improve what needs to be improved based on the results of the testing.

Learn, Build, Measure
Design Process

Here’s a quotation from a journalist who’s followed Apple closely. Before Steve Jobs died, the journalist studied Apple’s approach to design. The journalist says,

“It’s a process where they discover the product through constantly creating new iterations. A lot of companies will do six or seven prototypes of a product because each one takes time and money. Apple will do a hundred — that’s how many they did of the MacBook. Steve Jobs doesn’t wake up one morning and there’s a vision of an iPhone floating in front of his face. He and his team discovered it through this exhaustive process of building prototype after prototype.”

Source:

Wasil, 2023. Petunjuk memulai UX dari O. https://www.halodesigners.com/petunjuk-ux

Dr. David Travis, 2023. https://www.udemy.com/course/ultimate-guide-to-ux/

https://fahrizalbimantara.medium.com/design-thinking-3eadfa6b610b

https://medium.com/digital-experience-design/how-to-apply-a-design-thinking-hcd-ux-or-any-creative-process-from-scratch-b8786efbf812

https://designsprintkit.withgoogle.com/

--

--