Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Design Thinking article #4

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 117 additions & 1 deletion stories/Fundamentals/1.Design Thinking.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,119 @@
import { Meta } from '@storybook/blocks';

<Meta title="Fundamentals/Design Thinking" />
<Meta title="Fundamentals/Design Thinking" />

# Design Thinking

Going directly from [the previous article](/docs/fundamentals-user-centered-design--docs) to this one, you might get the impression that the topic of Design Thinking has already been covered there - and that's not incorrect! In my view, Design Thinking is a kind of crystallization of the ideas behind User-centered Design, framed within a list of specific steps and techniques that enable practical implementation.

The origins of Design Thinking are dated back to the 1990s and since then, it has been gaining popularity as an effective method for designing products, services, and experiences tailored to the real needs of users. However, Design Thinking is not only a set of practical tools but also a kind of "social technology" - its power lies in its ability to change the mindset and actions of those involved in the innovation process. As noted by an author from Harvard Business Review, Design Thinking has the potential to revolutionize innovation processes in a similar way that Total Quality Management (TQM) transformed the face of manufacturing in the 1980s: it helps break down mental barriers, unleash team creativity, and fundamentally change the way new solutions are developed.

## Key principles of Design Thinking

Design Thinking is based on five key principles:

- **Empathy** - a deep understanding of the user's perspective and needs
- **Defining the Problem** - precisely identifying the design challenge based on insights into the user's situation
- **Ideation** - generating a variety of potential solutions to the defined problem
- **Prototyping** - building prototypes to test ideas in practice
- **Testing** - gathering feedback from users and continuously refining the solution

While seemingly focused on understanding and meeting customer needs, each of these stages also profoundly impacts the innovators themselves. Design Thinking changes their way of perceiving problems, communicating, and collaborating within the team, as well as their approach to generating and evaluating ideas. It teaches empathy, openness, and a love for experimentation, thereby fostering a new culture of innovation within the organization.

From the perspective of our company, implementing Design Thinking principles may present a slight challenge - if only one person on the team handles UX, and we don't have access to actual end-users, how can we effectively generate ideas or test them based on feedback? Nevertheless, even under such conditions, it is worthwhile to keep these principles in mind and attempt to incorporate them, even to a small extent. Ideation can be conducted with a smaller team: for instance, with developers or clients. Testing prototypes can also be done within a limited group. The most important point is to change our approach to design: keeping in mind that truly great solutions are born from understanding needs and iterating on ideas.

## Stages of the Design Thinking process

The Design Thinking process consists of five stages, each corresponding to one of the key principles:

#### Empathizing

Emphatizing means deeply understanding user needs through observations, interviews, and surveys. The goal is to step into the user's shoes and see the problem from their perspective. Traditionally, customer research relied on data analysis by experts, which was always filtered through their own assumptions and experiences. In contrast, Design Thinking urges us to experience things as the user does. This approach reveals needs that users may not be aware of or cannot articulate. The designer must let go of personal beliefs and hypotheses to see the problem with fresh eyes, as the user would.

#### Defining

By defining we mean analyzing insights gathered from the field, pinpointing the core problem to solve, and developing design criteria. Empathizing yields a lot of unstructured, qualitative data and thus teams not accustomed to working with such information often feel overwhelmed and struggle to extract key insights. Design Thinking provides techniques for organizing and making sense of these observations. These methods help identify truly significant findings and frame the problem from a human, rather than business, perspective. Additionally, diverse team perspectives become an advantage, creating a fuller picture of the challenge.

#### Ideating

Ideating means generating many potential solutions to the problem as a team, without evaluating their feasibility. The focus is on quantity and diversity of ideas. Traditional approaches often limit ideas to what's perceived to work or not within the company, and unhealthy competition can stifle creativity. Design Thinking creates a space for sharing concepts freely, without fear of judgment. It encourages building on others' ideas and creating seemingly impossible solutions. Participants feel a sense of co-creation and shared responsibility for the outcome and the result is a rich pool of potential innovations that go beyond the current state of affairs.

#### Prototyping

In this stage, we are aiming at creating simplified, low-cost models of solutions to enable early testing with users. Companies often view prototyping as refining a product that's nearly final. In Design Thinking, prototypes are created much earlier to gain user feedback on the proposed innovation: they can take various forms, from sketches and physical models to enacting a new service step by step. These prototypes are always kept general, allowing for easy and inexpensive modifications based on user reactions - for example, Figma prototypes - and using them lets the team “feel” the innovation and test core assumptions with minimal investment, reducing the natural fear of change.

#### Testing

This final stage is all about gathering feedback on prototypes from users and other stakeholders, drawing conclusions, making improvements, and re-testing. Experimenting with solutions in the real world allows teams to verify hypotheses and see what needs improvement: after all, one can never know how an innovation will perform until it's placed in the hands of the customer. Test results often surprise and lead to significant product changes, but that doesn't necessarily have to be a bad thing: Design Thinking celebrates failures as opportunities to learn and refine solutions. The testing and iteration process is considered complete when both satisfactory business outcomes and enthusiastic user feedback are achieved.

An equally important outcome of testing is its impact on the project team and decision-makers within the organization - seeing positive customer reactions helps them deeply believe in the new solution, allowing them to spread this enthusiasm throughout the company. The shared experimentation builds their commitment to implementing the innovation they feel they co-created.

## Design Thinking in Practice - Designing a Food Delivery App

Let's see how Design Thinking can be applied in practice with the example of a mobile food delivery app project.

1. **Empathizing**

The team begins by deeply understanding the problems and needs of people who order food online. They conduct interviews with existing customers, analyze their feedback and complaints, and observe them during the ordering process, noting any difficulties and frustrations. They also talk to food delivery drivers to get their perspective. All of this helps the team put themselves in the users' shoes.

2. **Defining the Problem**

After analyzing the gathered information, the team identifies that the biggest challenge for users is finding the right restaurant with their preferred cuisine and dish, especially when they're hungry and in a hurry. Additionally, many restaurant menus lack accurate descriptions and photos of the dishes, which makes choosing harder. The team defines the design problem as: "How can we make it easier for busy people to quickly find and order food that they'll enjoy?"

3. **Ideation**

During a brainstorming session, the team proposes various app features that could solve the problem, such as an advanced dish search by ingredients and name, recommendations based on previous orders, enhanced restaurant filters, and detailed dish pages with photos and customer reviews. A long list of potential solutions is created without evaluating their feasibility.

4. **Prototyping**

The team selects the most promising ideas and translates them into a series of prototypes, from interface sketches to clickable wireframes. They pay special attention to a smart dish suggestion feature based on preferences and context (time of day, weather, location). For the prototype, they prepare a series of screens with different recommendation variants for user evaluation. They also create a dish page model with a detailed description, a photo board, and a review section. The prototypes are simple but realistic enough for users to get a feel for how they would work in the app.

5. **Testing**

The team invites a representative group of food delivery app users to test the prototypes. They observe interactions, collect feedback, and note ideas for improvements. It turns out that the suggested dish recommendations are accurate and useful, but users want customization options, such as accounting for allergies. Additionally, while the dish page contains useful information, some users also want to know delivery time and track their order on a map. After several iterations of prototyping and testing, the team has a clear vision of the app's key features and design, tailored to real user needs.

With this information, the team can move on to the actual development phase of the app, confident that they are creating a product that meets customer expectations. By involving users at each stage of the Design Thinking process, the chances of the app's market success significantly increase.

As this example shows, Design Thinking shifts the focus from assumptions about “what people should like” to a deep understanding of their real problems and desires. It changes the perspective from “ours” to “theirs.” It encourages experimentation instead of following conventional paths and engages users well before the final development, saving time and money. While it requires effort, it increases the likelihood of creating a product that people will love and readily adopt.

## Benefits of Design Thinking

As always, you can think to yourself: *Why should I bother with all of this?* So, here are some of the key benefits of Design Thinking:

- **Deeper Understanding of User Needs** - Design Thinking shifts the perspective from "ours" to "theirs." Using methods like interviews, observations, and experience mapping, it allows for a thorough understanding of users' problems, desires, and motivations. It avoids assumptions by focusing on real human needs. As a result, products are created that genuinely improve customers' lives.

- **Faster and More Cost-Effective Idea Testing** - prototyping plays a crucial role in Design Thinking. Instead of immediately creating a final product, the team can test its concepts with inexpensive and simple prototypes—sketches, mockups, scenarios. This approach allows for gathering valuable user feedback early on and making necessary adjustments before investing significant resources in development, saving both time and money.

- **Increased Creativity and Innovation in Solutions** - Design Thinking principles, such as deferring judgment during brainstorming and emphasizing the generation of multiple alternative options, stimulate creative thinking. They encourage challenging the status quo and seeking out-of-the-box solutions. Combined with a deep understanding of user needs, this results in groundbreaking innovations that stand out from the competition.

- **Improved Collaboration in Interdisciplinary Teams** - Design Thinking provides diverse teams—composed of, for example, designers, researchers, developers, and business people—with shared tools and language. The clear, iterative process helps to organize work and improve communication. Exercises like empathy mapping teach team members to view the problem from various perspectives, leading to better understanding and more effective collaboration.

- **Reduced Risk of Market Failure** - frequent prototype testing with users and iterative project refinement based on their feedback minimizes the risk of creating a product that does not address real needs. Involving customers at each stage ensures that the final outcome aligns with their expectations, increasing the likelihood of market success and return on investment.

- **Greater Customer Engagement and Satisfaction** - in Design Thinking, the customer is not a passive recipient but an active participant in the design process. They take part in research, test prototypes, and suggest improvements. This involvement gives them a sense of co-creation and shared responsibility for the product's shape. They see how their needs and suggestions shape the iterations, which fosters greater satisfaction and loyalty toward the final solution.

- **Transformation of Organizational Culture to be More Agile and Customer-Centric** - implementing Design Thinking is not only about adopting new methods but also about changing the mindset and work approach of the entire organization. It encourages experimentation, learning from mistakes, and challenging assumptions. It requires regularly going "into the field" to interact with customers, transforming the company towards greater agility, adaptability, and a deeper understanding of customer needs.

## Design Thinking and Figma prototyping

Design Thinking is widely applied in UX design, especially when creating interface mockups in tools like Figma. A key advantage of this approach is the ability to quickly and cost-effectively test ideas using interactive prototypes without needing to develop a final product. So, let's assume a UX designer is working on a new mobile app for booking hotels: after the empathy and problem definition phases, they have some ideas for key features and the app's look. So, they move on to the prototyping phase in Figma.

#### Prototyping phase

Instead of immediately creating detailed and refined mockups, the designer focuses on building the app's overall flow and designing basic screens. They can prepare a few alternative versions of the layout and navigation, differing in the arrangement of elements or the graphic metaphors used. At this stage, the priority is verifying the project's main assumptions rather than visual details. Using Figma's capabilities, the designer creates a prototype of the app by linking the designed screens. This simulates how the app works, showing how a user would move between views, fill out forms, or browse hotel offers. This interactive prototype allows the designer to "feel" the app, understanding its logic and flow.

#### Testing and iterating

The designer then collaborates with the client (product owner) and representatives of potential users. During a meeting, they present the prototype and observe how participants interact with the mockups. They encourage open commentary, questions, and expression of concerns. Perhaps it turns out that the proposed filter arrangement is too complicated? Or there's no option to compare selected offers? Or maybe the main menu should be at the bottom of the screen instead of the top? The gathered feedback is invaluable for further project development.

After the meeting, the designer returns to Figma and quickly implements the changes in the prototype, adapting it to the suggestions of the client and users. They can move interface elements, change an icon, or add a missing button—all within just a few minutes, without the need for time-consuming code rewrites. Moreover, they can prepare several versions of the updated prototype, showing different solutions to a given problem. In the next step, the prototype goes back to the client and users. Their reaction helps to assess whether the changes made have indeed improved the app experience. Perhaps there will be further improvement suggestions, which the designer can again address in the mockups. This iterative cycle of prototyping and testing continues until a satisfactory result is achieved.

So, in a way, Design Thinking transforms the role of the UX designer from a "deliverer of finished designs" into a "facilitator of the co-design process" and Figma provides an excellent tool for embodying this approach through agile prototyping and testing of interface concepts in close collaboration with the client and users. Together, these elements enable the creation of apps precisely tailored to the needs and expectations of users.

## Summary

Design Thinking is a powerful tool for anyone who wants to create innovative, human-centered solutions: through empathy, openness, creativity, and a willingness to experiment, it enables breakthrough results. Although the individual methods and techniques of Design Thinking are relatively simple, their proper and consistent use often requires a shift in mindset. Its structured, linear approach helps those without design experience step into a new role and overcome typical mental blocks, it also provides interdisciplinary teams with a common language and tools for effective collaboration, regardless of differences in skills or perspectives.

## Sources

- [Harvard Business Review - Why Design Thinking Works](https://hbr.org/2018/09/why-design-thinking-works)