GenUi blew my mind – WebExpo Day 1

One the first day of WebExpo 2025, I listened to a talk from Tejas Kumar named “From GenAI to GenUI – Codify your UI on the fly”, during his live demo he went through the history of adding Ai to webpages, from 2022 to 2025 and beyond.

Starting with the basics, he showed how Ai chatbots were created, back when ChatGPT was still new and people didn’t know, how to best use it yet. Interfaces were simple, just a textfield to write a query into and a search button, afterwards, one would have to wait (in the dem it was about 15 seconds) until the answer arrived. As we all know, waiting, especially if its longer than ten seconds, sucks.

To combat this he implemented streaming, which means instead of waiting for the whole message before it is displayed, small parts of the Ais reply are shown, which makes the user experience much better. In addition, he parsed through the response to display different objects in a list. Making not only the wait time shorter, but also the readability better. But wait, there is more! If text can be streamed, so can html or css, since it is just a stream if text, converted into images by your browser.

He proceeded to show how asking an Ai to display a list of movies with a strong female lead could change, by adding generative UI. Instead of displaying just a list of movies, the Ai could display Netflix like panels, that are interactive and which take you directly to a page about the movie. The Ai could even embed trailers directly into the chat and not just provide a link. Last, he asked the Air Force to show him where he could watch the movie, the Ai asked for his location via a popup and then embedded a map with the correct rout right into the chat room. Amazing! Additionally all created Ui can be created by designers, which adds a layer of control about what the Ai actually generates, since it could also generate bad things.

He proceeded to demo, how he gave tools to an Ai, which would get information from an API (in this case an API containing all WebExpo talks), understand it and interact with it. “You don’t have to browse the web, it comes to you.” Using this he can now ask the Ai about the schedule of the conference, but not searching for specific things, asking the Ai about certain topics. Last he incorporated his own google calendar into the Ai model, enabling it to understand his calendar and even add events. This way he could tell the Ai to all an event to his calendar at the time of his friends talk at WebExpo, and it did. It even provided additional information about the talk.

If you got interested in the talk, here is a recording of it:
(Use the slider to increase & decrease the size of the video/Screen recording)

embed = new SlidesLiveEmbed(“presentation-embed-39043153”, { presentationId: “39043153”, autoPlay: false, verticalEnabled: true, });

Also, here is all other talks from this years WebExpo:
https://slideslive.com/webexpo

12 First Steps with Arduino

It’s not knowing that drives you mad. ~ Jenny Valentine

I read this quote somewhere on the internet and thought, this would be a great start to a new blog post, since it describes my struggles to start doing prototypes. I had no idea, where I should start or what I should do. With no clear direction in mind, I just started doing something. Since the start of this semester I have gotten really interested in Arduino. After the Arduino was introduced to us during class, I took one home and I have been wanting to create/ do something with it.

Developing a first Idea

Being a scout for over a decade, I have encountered multiple ways of encoding a message, mainly as riddles though. So the first idea I had was to create a device, that lets you encode a message. And the easiest one I thought of was morse code. I started, by attaching Modulino modules, pre-built circuit components like sensors or displays, to an Arduino. I used a three button module and the “pixel”, a board housing eight LEDs, one at first.

The idea was simple, by pressing the first button, the Arduino would receive a dot. Pressing the last one would send a dash and the middle one would be used to stand a slash, which is used in written morse code to communicate a break between letters, words and sentences. The first part was very simple, I created a sketch, that wrote the received button pushes as symbols into a string. I created this very easy and very fast.

Since I could write messages now, I needed a way to actually send the message and clear the message, so people could send a new one. First I tested if the Arduino would recognise multiple buttons being pressed at the same time, but it doesn’t. So I came up with the idea of incorporating an end signal, in my case, sending four consecutive pauses would result in the message being “send” or for now displayed and cleared.

Next, I wanted to be able to also display the message, at first I tried to attach the pixel Modulino and use its LEDs to display the message. This would make it easy to decipher between dots, dashes and breaks since each sign could be displayed clearly. Sadly, I couldn’t figure out, how to make the LEDs light up in the way I wanted them to. During most of the tests, they wouldn’t turn on at all or all of them would show the same color, with no difference between dot and dash. So I turned to a different solution, the buzzer, a Modulino that makes buzzing sound, with varying frequencies. Using the buzzer to output the message was much easier and I didn’t have any problems implementing it.

Current State

This was a lot of text now, since I forgot to take pictures I could attach here, but to showcase the first prototype, her is a short video showing the functionality of the current model. The video is in german but I think it will help illustrate, what I did and what the prototype does.

What’s next?

Developing this simple concept further I would want to make use of the wifi capabilities that the Arduino board I am using provides. This way a wireless connection between two Arduinos could be used to send and receive message. As an extra the LED Matrix of the Arduino could display the received letters in clear text so the person receiving doesn’t even have to know morse code, to decipher it.

A setup like this could be used in an escape room, in which two teams of kids have to work together, to open the door, but their only way of communication is to use morse code and send it using the two Arduinos. That way they could share information and complete the next riddle.

Instructions

For this first version, you don’t need a lot, for hardware you would need:

  • an Arduino (capable of using Modulinos)
  • the three button Modulino
  • the buzzer Modulino

After attaching the Modulinos tho the Arduino, you would just have to plug it into a computer and upload this sketch:

#include <Modulino.h>

ModulinoButtons buttons;
ModulinoBuzzer buzzer;

int frequency = 1000;
int duration = 1000;

int countB = 0;

bool button_a = false;
bool button_b = false;
bool button_c = false;

String message = String("Saved Message:");

void setup() {
  Serial.begin(9600);
  Modulino.begin();
  buttons.begin();
  buzzer.begin();
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  if (buttons.update()) {

    if (buttons.isPressed(0)) {
      message = String(message + ". ");
      Serial.println(message);
      countB = 0;
    } else if (buttons.isPressed(1)) {
      message = String(message + "/ ");
      Serial.println(message);
      countB++;
    } else if (buttons.isPressed(2)) {
      message = String(message + "- ");
      Serial.println(message);
      countB = 0;
    }
  }

  if (countB >= 4) {
    pushMessage();
    message = String("Saved Message:");
    countB = 0;
    Serial.println("Message cleared!");
  }
}

void pushMessage() {
  for (int i = 0; i < message.length(); i++) {
    if (message[i] == '.') {
      digitalWrite(LED_BUILTIN, HIGH);
      buzzer.tone(frequency, duration);
      delay(150);
      digitalWrite(LED_BUILTIN, LOW);
      buzzer.tone(0, duration);
      delay(250);
    } else if (message[i] == '-') {
      digitalWrite(LED_BUILTIN, HIGH);
      buzzer.tone(frequency, duration);
      delay(500);
      digitalWrite(LED_BUILTIN, LOW);
      buzzer.tone(0, duration);
      delay(250);
    } else if (message[i] == '/') {
      delay(1000);
    }
  }
}

Lastly, I wanted to share some takeaways from my first “prototype”. Just starting to do something, with no clear goal in mind at first really sparked my motivation, to develop other little projects using the Arduino. Furthermore, I made small “prototypes” of code, that I test before incorporating them into the real thing. Aiming to understand how something works first, before using it. Lastly, I really need to take more pictures, so future blogposts are more interesting. ;D

Co-creating Music with the Magical Musical Mat (NIME Paper Review)

During the interaction design classes with Josef “Seppo” Gründler, we discovered different ways of creating sound. Put simply, we explored how interactions can shape sounds. As part of the course, we were tasked to deepen our knowledge in this domain and check out one NIME Project Paper plus write a review.

What’s NIME?

NIME (New Interfaces for Musical Expression) is a research community exploring innovative ways to create and interact with sound. It brings together artists, designers, engineers, and researchers who develop new musical instruments, interactive sound systems, and experimental performance tools. They blend technology, interaction design, and artistic expression, often incorporating DIY hardware, software, and unconventional interfaces to push the boundaries of musical experience. 

The Magical Music Mat (MMM)

The paper I read was about the Magical Music Mat (MMM), a prototype of two yoga mats, lined with foil, that are connected to an Arduino, which sends MIDI signals to a laptop. The laptop then plays pre determined sound samples or generates sound waves. The idea is, to have two dancers perform on top of the mats, which generates sound, if they touch each other. This way unique performances, connecting sound creation and choreography together, can be created. (see picture below)

To make it easier to understand and comprehend, what the two dancers actually did using the MMM, check out the video below.

The two dancers were given complete freedom when “playing” with the mats and sound. They didn’t know each other nor the sound samples, that were played, beforehand. They made up everything on the spot, letting the sound influence their ideas on how to work with the sounds, they created them selves. The researchers highlighted four key themes:

  1. Choreographer as Composer – Dancers take on a compositional role, treating movement and sound as intertwined creative expressions.For example one dancer played the MMM while the another moved outside.
  2. Playfulness – Play becomes a tool for exploration, breaking rigid structures. The dancers engaged in playful activities like a thumb war or feigning surprise at static sounds, which allows them to discover new movement qualities.
  3. Finding Origins of Movement – Instead of seeking predetermined movements, dancers explore how movement emerges naturally from contact. One dancer positions another’s limbs by touching joints, while another example involves dancers shifting their bodies away from contact points.
  4. Partnering – Interaction and connection between dancers are key. Mirroring movements and communicating through touch (even with closed eyes) deepens their sense of collaboration.

If you want to learn more, her is the link to the Project.

Considerations

In the video it seems like the prototype of the MMM functions more like a button, basically stopping and starting the playback of different sound samples or playing a one shot sound effect. For a performance, that includes dancers influencing sound and being influenced by sound, this should be more “responsive”. Like different levels of sound depending where on the mat a performer stands or how many touch points there are. In the video you can see a performer brushing along the foil, which doesn’t seem to influence the sound that is being generated. Additionally the zig-zag pattern of foil on the mat lead to the performers stepping on a non conductive spot, not creating a sound. For further exploration, this would have to be addressed. Since this is a prototype after all, those “problems” can be surely be fixed.

Thinking about possible uses for this technology I consider this to be an excellent pice of tech to use during a dance performance. I could imagine a whole floor made from MMMs with different connections between performers make different sounds. This could even be used as a new form of instrument to create a new type of orchestra, that uses them selves as instruments. Also this could be incorporated into an acrobatic choreography, with multiple people creating a connection across a long distance, by stacking on top of each other. This could also enable people, who aren’t able to make music with their hands, to make music just using their feet.

11 First Prototypes and Speed Dating

Th first new task I got this semester was to write six more blog posts and create (3) prototypes, of a possible project for my masters thesis. So naturally I asked myself, what could be a possible masters thesis and four different possible themes came to mind: 1. I could continue my bachelors thesis about digital mental health support programs. 2. I recently got into workshop facilitation & meeting facilitation, I thought the combination of being able to run workshops could be a great asset to every designer. 3. I could continue my research from last semester and deepen my knowledge in the understanding of biases. 4. Lastly I may get the opportunity to work together with a company to write about Design Systems.

Brainstorming

Naturally I couldn’t figure all of this out in one week, so I just started brainstorming, to figure out what problems I could solve with a quick prototype. On the picture below, you can see my ideas.

Four topics stuck with me: An app or similar digital solution that reminds you to go for a walk and motivate you to go outside. A drinking tracker, so you know how much you drank last night. A meeting maker, to help make meetings less confusing and draining. Lastly a solution for not finding a room at FH that is not occupied, to eat and work in.

Prototype 1

The last topic really stuck with me so I started a 20 minute timer and started sketching. After a quick research I found a way to see unoccupied rooms using Joanneum Online, but it’s confusing. So I tried a new approach, what if the process of checking a rooms schedule could be easier. My idea was to stick QR codes, next to every rooms sign, that lead to the rooms schedule. I started by sketching first ideas, of the signs and had just enough time to also create a first “mockup” of a sign. Later funny quotes or memes could be added to the signs, to make them more interesting.

Prototype 2

After creating the first prototype I got stuck on the idea of having an easy way to check for free rooms at our FH building. So continuing with the previous idea, I started another timer and started to generate first ideas for a website, that could display the desired information in a better way. Faster and easier to understand for the users. Since I love the crazy eight method, I used it to create this prototype

Prototype 3

The last prototype went into a whole different direction, I still wanted to create something, that I could use for my masters thesis. So I just sat in my room thinking and then I had an idea. I could create a prototype for a card deck, that informs its owner about different work shop facilitation techniques. (Theoretically a card deck can be created for any topic, so I could also do one for biases and how to combat them) This is also the prototype I then brought to class, to discuss with my class mates.
The cards show what type of method you hold in your hands, if it can be used online or only live, how many people Ould participate, how long each activity takes, what you need to run it and of course the name and description of the method.

Speed Dating

So with my Prototype I headed to class, no clue, what was going to happen. In class we sat together, one on one and were given a task. Five rounds, each round with a new person and a new tasks. First we let the other person take a wild guess and describe the prototype to us. Next the partner had to give an idea for a new feature, without knowing the full potential of the prototype. This, was to create a dating profile for each prototype. Fourth, thinking big about the future and your prototype, maybe you are hosting a TED talk. Lastly we talked about the most unexpected feedback about our prototype. A very fun and insightful session, next I want to share my takeaways.

  1. Almost all of my “dates” mistook my playing cards, as wireframes for an app. Maybe, we all are a little biased towards digital solutions. But thinking about it makes something clear, my playing card prototype, doesn’t look like playing cards. Maybe it’s the size, the material or the way I drew on the paper.
  2. When I didn’t explain the prototype all of my partners needed the “instructions” to understand what the prototype was about and for what it could be used. This was also feedback I received, to add more and better instructions. ;D
  3. Additionally, most of them didn’t know, what to do with these flimsy pieces of paper. I figured, they didn’t want to break it.
  4. One “date” suggested to add QR codes to make the instructions on each card more accessible.
  5. I saved the best for last: When talking about the future of the prototype, I said I would have sold or given out a lot of decks and would be holding a TED Talk about a second version. Everything would be Creative Commons and open source, for everyone to use. The Interview partner then called me “the new Mark Zuckerberg, but with a conscious mind”.

10 Bias Recap

After one semester of bias research, I want to do a short recap, on everything I came across. So here is a condensed version, of all things, I found out:

What is a Bias?

Bias refers to a tendency to favor or oppose something based on personal opinions rather than objective reasoning. While biases can be explicit (conscious and intentional) or implicit (unconscious and automatic), they often stem from cognitive shortcuts known as heuristics. These shortcuts help our brains process information efficiently but can also lead to misinterpretations and irrational decisions. Cognitive biases, in particular, shape how we perceive reality, causing individuals to interpret the same facts differently. They develop early in life through personal experiences, societal influences, and media exposure, reinforcing both positive and negative associations.

Bias subtly affects decision-making in various aspects of life, from personal interactions to professional settings. Research shows that even trained professionals, such as scientists and hiring managers, exhibit unconscious biases, leading to disparities in employment opportunities. Implicit biases influence perceptions of competence, trustworthiness, and fairness, often without individuals realizing it. Acknowledging these biases is essential for reducing their impact and fostering more objective and equitable decision-making.

The Cognitive Bias Codex

The Cognitive Bias Codex by Buster Benson provides a comprehensive overview of over 200 cognitive biases, grouped into four categories to help us understand how our brains process information. One bias worth highlighting is the Bias Blind Spot, which refers to our tendency to think we’re less biased than others. This is especially relevant for UX design, where designers might overlook their own biases and assume their design decisions are universally valid. Other biases like Confirmation Bias, which makes us favor information that supports our existing beliefs, and Availability Heuristic, which makes us judge the likelihood of events based on what comes to mind most easily, can also influence how users engage with design elements.

In addition to these, biases such as the Mere-Exposure Effect, where familiarity breeds preference, and Anchoring, where initial information anchors subsequent judgments, can significantly shape how users make decisions. These mental shortcuts help us navigate the world more efficiently, but they can also distort our thinking. By understanding these biases, we can better design user experiences that acknowledge these cognitive filters, creating interfaces that allow for more informed, balanced decision-making. Ultimately, the Codex is a reminder that recognizing our biases is the first step towards making better choices—both in design and in life.

Common Biases in (UX) Design

Biases in UX design can subtly influence how designers create, research, and test products. Common biases include Confirmation Bias (seeking data that aligns with assumptions), False-Consensus Effect (assuming users think like designers), and Recency Bias (overweighting recent feedback). Anchoring Bias occurs when initial information overly influences decisions, while Social Desirability Bias can distort user research, and Sunk Cost Fallacy keeps designers committed to failing ideas.

To spot biases, review your assumptions and ensure decisions are based on data, not personal opinion. Involve diverse perspectives and conduct usability tests with varied users to uncover blind spots. Documenting your reasoning can also help identify biases. By recognizing and addressing these biases, designers can create more inclusive, user-centered designs.

Advantages of Biases

Biases are often seen as negative, but they serve important cognitive functions. They help us make quick decisions by filtering information efficiently, improving focus, and enhancing productivity in work and learning. Biases also support social connections by fostering trust and teamwork, aid in pattern recognition for faster learning, and boost motivation by reinforcing commitment to long-term goals. Additionally, they play a key role in survival, helping individuals assess risks and stay cautious in uncertain situations.

While biases can lead to errors, they also provide valuable benefits. By enabling efficient decision-making, strengthening social bonds, enhancing learning, and ensuring safety, they function as essential mental shortcuts. Recognizing their advantages allows for a more balanced perspective on their role in daily life.

Bias in Ai

AI is transforming industries, including UX design, by automating processes, analyzing user data, and enhancing efficiency. However, AI is only as unbiased as the data it learns from. If datasets contain historical biases, AI models can perpetuate them, influencing critical decisions in areas such as healthcare, hiring, and search engine results. For example, algorithms have been found to favor certain demographics in medical treatment recommendations, reinforce gender stereotypes in search results, and discriminate against female job applicants. These biases stem from underrepresentation in training data, flawed problem framing, and algorithmic design choices that prioritize overall accuracy over subgroup fairness.

Addressing AI bias requires proactive governance, ethical oversight, and diverse, representative training data. Organizations must implement fairness-focused frameworks, employ transparency practices, and incorporate human oversight to refine AI-generated outputs. Ethical considerations should also be integrated into science and technology education, ensuring interdisciplinary collaboration and regulatory measures to promote accountability. While technical solutions can mitigate bias, broader societal discussions are necessary to address the ethical implications of AI-driven decision-making.

Examples of Bias in Design

“Life can only be understood backwards, but it must be lived forwards.” ~ Soren Kierkegaard. This applies to biases in design—often, they’re only recognized after decisions are made. Here are a few examples:

  1. Spotify Shuffle Button: A Reddit user pointed out that the shuffle button was hard for colorblind users to distinguish. About 8% of men have red-green color blindness, and a simple design tweak could improve accessibility.
  2. Cars and Seat Belts: In the 1960s, crash tests used male-bodied dummies, neglecting the safety of women and children. This is sampling bias, where the sample didn’t represent the full population.
  3. Facebook’s “Year in Review”: Facebook’s 2014 feature, which showcased popular posts, sometimes included painful memories for users, due to optimism bias—assuming all top moments are joyful.

These examples show how majority bias—focusing on the majority and neglecting minorities—can shape designs that overlook important user needs.

How to combat Bias

The first step in addressing unconscious bias is recognizing it exists. Tools like the Designing for Worldview Framework by Emi Kolawole or Harvard’s Project Implicit tests can help identify biases. Understanding your biases is key to overcoming them and making design more inclusive. Once biases are spotted, the next step is to take action. Consciously designing with diverse users in mind and using tools like Perspective Cards can guide you to consider various experiences. Listening to clients and users, while letting go of assumptions, is essential to create designs that truly meet everyone’s needs.

Building diverse teams is critical to fostering inclusive design. Teams with varied backgrounds bring fresh perspectives, which are essential in a profession that thrives on challenging existing ideas. Overcoming bias is a lifelong commitment, so keep learning and remain open to feedback. Reflect on who might be left out and seek ways to make your designs more inclusive. Additionally, don’t just focus on the “happy path” in design; consider unhappy paths to address potential issues early on. Finally, when creating personas, challenge assumptions by focusing on real user experiences rather than demographic stereotypes. Designing for a global audience requires understanding diverse cultural insights, ensuring that inclusion is integrated into every step of the design process.

09 Advantages of Biases

This may seem counterintuitive, since biases always have a negative reputation, but they can have some advantages as well. Before I end this line of blogposts, with a short recap, I want to go another way, to highlight some positive sides of biases.

Biases also have many benefits. Our brains use biases to make decisions quickly, focus on important information, and even stay safe. Let’s explore some of the advantages of biases and how they help us in daily life.

01 Biases Help Us Make Quick Decisions

In a world full of information, our brains cannot process everything at once. Biases help us filter information so we can focus on what matters. For example, the brain ranks and prioritizes information to help us act fast. This ability is essential when making quick decisions in everyday life, such as crossing a busy street or choosing what to eat. Without biases, decision-making would be slow and overwhelming (LinkedIn).

02 They Improve Our Focus and Efficiency

Biases allow us to focus on relevant details while ignoring distractions. This is especially useful in work and learning environments. For example, when searching for an object in a cluttered room, our brains use bias to guide our attention toward what is most likely to help us. Similarly, biases help professionals make better decisions by focusing on key information instead of getting lost in unnecessary details (Airswift).

03 Biases Support Social Connection

Humans naturally form groups based on shared interests, beliefs, or backgrounds. This is known as ingroup bias. While this can sometimes lead to discrimination, it also has benefits. Ingroup bias helps build trust and cooperation within communities. It fosters teamwork, strengthens social bonds, and encourages people to support one another. These social connections are essential for emotional well-being and personal growth (Harvard Business School).

04 They Enhance Learning and Adaptability

Biases help us learn new things by making patterns easier to recognize. For instance, our brains naturally categorize information to make sense of the world. This ability helps us identify risks, recognize familiar faces, and understand new concepts more quickly. Even in education, biases help students focus on the most relevant material and remember information more effectively (LinkedIn).

05 Biases Can Increase Motivation

Some biases, like confirmation bias, can motivate people to pursue their goals. Confirmation bias makes us focus on information that supports our beliefs. While this can sometimes lead to mistakes, it also helps people stay committed to long-term goals. For example, entrepreneurs often rely on positive feedback to keep going, even when facing challenges. This kind of bias can drive innovation, persistence, and personal success (Airswift).

06 They Enhance Survival and Safety

From an evolutionary perspective, biases have helped humans survive by guiding quick and instinctive reactions. For example, people are naturally more alert to potential dangers because of negativity bias, which makes us pay more attention to risks. This bias helps us stay cautious and avoid harm. Similarly, biases like familiarity bias encourage people to stick with what they know, which can be useful in uncertain situations (Harvard Business School).

Conclusion

While biases can sometimes lead to errors, they also provide many benefits. They help us make fast decisions, focus on important details, connect with others, learn efficiently, stay motivated, and protect ourselves. Understanding the positive side of biases can help us use them wisely while being aware of their limitations. Rather than seeing biases as flaws, we should recognize them as essential tools for navigating the world more effectively.

08 Most common Biases in (UX) Design

After talking a lot about biases in general, I want to put focus on biases, that affect the design discipline in particular. I wanted to find out, which biases are very common amongst designers and how they can be spotted.

Biases can creep into UX design in subtle ways, shaping how designers create and evaluate their work. These mental shortcuts or preconceived notions can distort user research, design decisions, and testing outcomes.

Common UX Biases

  1. Confirmation Bias:
    Designers often seek out data or feedback that aligns with their assumptions or expectations. For example, if you’re convinced users will love a feature, you might unconsciously focus on positive comments while ignoring criticism. This skews the final product toward the designer’s preferences rather than the users’ needs (cf. UX Team).
  2. False-Consensus Effect:
    This bias happens when designers assume users think like they do. For instance, just because a designer finds an interface intuitive doesn’t mean the average user will feel the same way. This misalignment often results in designs that alienate diverse user groups (cf. Toptal).
  3. Recency Bias:
    This occurs when designers give undue weight to the most recent feedback or user data they’ve encountered. While recent input can be important, over-relying on it can overlook broader patterns or trends that are crucial to creating balanced designs (cf. PALO IT).
  4. Anchoring Bias:
    Designers may fixate on the first piece of information they receive, such as initial user feedback or early test results, and let it heavily influence future decisions. This can lead to disregarding new, potentially more accurate insights that arise later in the process (cf. UX Team).
  5. Social Desirability Bias:
    During user research, participants might provide answers they think the researcher wants to hear instead of their genuine thoughts. This can lead to misleading data and decisions that don’t address real user needs (cf. Toptal).
  6. Sunk Cost Fallacy:
    Designers sometimes stick with a feature or concept they’ve invested a lot of time and effort into, even when it’s clear it’s not working. This bias prevents teams from pivoting to better alternatives (cf. PALO IT).

Spotting Biases

To identify biases in your work, start by reviewing your assumptions. Are you basing design decisions on data or personal opinions? Regularly involve diverse perspectives in your design process to uncover blind spots. For example, conducting usability tests with a variety of users can highlight mismatches between the design and user expectations (UX Team).

Another tip is to document your decision-making process. Writing down why you chose a certain layout or feature can make biases easier to spot. If your reasoning is based on personal preference or limited data, you’ll know to re-evaluate that choice (Toptal).

Biases in UX design can hinder the creation of user-friendly and inclusive products. By recognizing common biases like confirmation bias, false-consensus effect, recency bias, and others, you can take proactive steps to create designs that truly meet users’ needs. Regularly challenging assumptions and involving diverse perspectives ensures a more balanced and effective design process.

07 How to combat Bias

I have talked a lot about what bias is and where it can occur, but not about how it can be mitigated. You will find some ideas on how to deal with bias in this blog post.

1. Spotting Unconscious Bias

The first step to overcoming unconscious bias is recognizing that it exists. For teams, tools like the Designing for Worldview Framework by Emi Kolawole or AIGA’s Gender Equity Toolkit, can help. If you want to find out, how biased you are towards a certain group of people, check out Harvard’s Project Implicit tests . Knowing your biases is the first step toward fixing them. (cf. UX Booth)

Source

2. Taking Action

Once you’ve spotted your biases, it’s time to do something about them. A great way to start is by consciously designing with different users in mind. Tools like Perspective Cards can help you imagine how your designs might feel to people with different experiences. When working with clients or users, take time to truly listen and understand their perspectives. Let go of your own assumptions—it’s the best way to gain new insights and create designs that work for everyone. (cf. UX Booth)

3. Build Diverse Teams

Diverse design teams are key to creating inclusive experiences. Diversity matters especially in design, a profession that requires professionals to think new thoughts and challenge existing ideas all the time. Different people think a different way, brining them together can result in a pool of new ideas, incorporating different (cf. UX Booth)

4. Keep Learning

Overcoming bias isn’t a one-time thing, it’s a lifelong process. Stay curious and open to feedback. Always think about who you might be leaving out and how you can make your designs more inclusive. By committing to continuous learning and embracing new perspectives, you’ll create better, more universal designs that truly work for everyone. (cf. Medium)

5. Explore the “unhappy paths”

When designing, don’t just focus on the “happy path” — consider the unhappy paths too. These are real-life situations where things break, go wrong, or are misused, and they shouldn’t be ignored as edge cases to fix later. Ask tough questions like, “How could people game the system?” or “Who could use it to harm others?” Addressing these issues early creates more robust and humane products that work for diverse users. While exploring unhappy paths may slow you down initially, it saves time in the long run by preventing costly reworks and ensuring you’re headed in the right direction from the start. (cf. Medium)

6. Make personas challenge assumptions

Personas are a hot topic, with debates on whether they’re necessary or useful, but when done right, they can be a powerful tool to challenge assumptions about users. Start by removing demographic details like age, gender, or income, which can introduce bias. Instead of generic stock photos, use real images of users who defy stereotypes, helping teams confront their unconscious expectations. If real user photos aren’t available, consider inclusive stock photo alternatives like tonl.co. You can also use names from underrepresented groups to further broaden perspectives. Remember, this isn’t about ticking a diversity box — it’s about reflecting real insights and challenging narrow views to design for a wider audience.
(cf. Medium)

7. Designing for a diverse global audience

t R/GA, we design for global audiences by leveraging diverse teams and cultural insights from the start. Our “Human, Simple, Powerful” design model ensures diversity and inclusion are baked into the process. The “Human” element focuses on addressing problems through a human lens, considering cultures, customs, and the context of users’ lives. We validate prototypes through user testing with a diverse audience that mirrors the anticipated end users. By mapping touchpoints and breakpoints across different backgrounds and conducting experience mapping globally and locally, we gain a well-rounded view of our users. This approach helps us create focused, inclusive solutions that eliminate ambiguity and meet the needs of diverse audiences. (cf. Medium)

Source

Although completely overcoming bias is probably impossible, you can try to minimize their impact on your work by utilizing some of the methods, I wrote about in this blog post.

06 How Bias effects (UX) Design

“Life can only be understood backwards, but it must be lived forwards” ~ Soren Kierkegaard
A quote that is also very fitting, when talking about bias in design. Most of the time you can only understand, that a decision could have been made due to a bias, after the changes have already been deployed. Looking a bit deeper into the topic of biases and how they affect (UX) design, here are some interesting stories, how products turned out biased towards or against parts of their user groups.

1 – Spotify Shuffle Button

In a reddit form, a user requested, that the shuffle button in the Spotify app would have a circle around it, since they are color blind and have a hard time seeing the difference between the active and inactive shuffle button. (see picture below) (cf. Reddit) Put simply, this might have happened due to a blind spot affecting Spotifys design team. Not all people perceive colors the same way, some have a hard time, especially seeing red and green. Approximately 8% of men and 0.5% of women are affected by this type of color blindness. (cf. the Guardian) This simple change could be a big difference for certain subsets of users.

Approximation of how a colorblind user with protanopia color blindness may see the Shuffle button in Spotify. Source

2 – Cars and Seat Belts 

Here is a fun one, in the 1960s, most crash test for cars were done with crash test dummy, modeled after an average male physique (height, weight & stature). Therefore safety design decisions were mostly tailored to men, neglecting woman, children, smaller or bigger individuals. Although crash test have been conducted with “female” crash test dummies, but they were only placed in the passenger seat. (cf. User interviews) When talking about safety, one hopes, that all possible users have been considered.

This happened very likely due to the “sampling bias”: “Sampling bias occurs when a sample does not accurately represent the population being studied. This can happen when there are systematic errors in the sampling process, leading to over-representation or under-representation of certain groups within the sample.” (Simply Psychology)

3 – Facebooks “Year in Review” 

In 2014 Facebook introduced the “year in review” feature, which showed the user their best performing posts of the past year. The algorithm would identify the “best” posts/moments depending on the amount of likes. Now this is all fun and games, until you see a lost loved one in your year review. While the algorithm might work for most users, some will have a different, less satisfying experience. (cf. Forbes)

Who ever had the idea for this feature, handed their bias over to the algorithm who automatically creates these reviews. Due to the optimism bias people to believe that they are less likely to experience negative events and more likely to experience positive ones. This bias can lead to overly optimistic expectations about the future, underestimating risks, or failing to prepare for potential challenges. Designers assumed that users’ most engaged photos and moments would always be joyful, leading to a feature that unintentionally surfaced painful memories for some users.(cf. The Decision Lab)

Source

These are just three examples of how biases can affect design and there are many more, this was just the beginning. Although I have noticed, that a lot of bias related “fails” happened, because the designers or researchers focused on one part of their users. There is another bias, that might be the basis for all of this: The majority bias, cognitive bias where people focus on the larger or more visible part of a group, often overlooking minority perspectives. This bias assumes the majority is representative or correct, leading to the neglect of smaller groups or less common viewpoints. Which could lead to neglect of a bunch of smaller groups, which all together would form the majority. (cf Nature)

05 The Cognitive Bias Codex – Too much Information

Source: Wikipedia

The Cognitive Bias Codex, by Buster Benson, is a visualization of over 200 cognitive biases, offering an overview of how our minds work. Inspired by his childhood, Benson developed the Codex to help others understand and mitigate the influence of biases. The Codex encourages critical thinking and greater self-awareness, empowering individuals to make more informed and balanced decisions. (cf. Emergent Thinkers) It separates all biases into 4 problem groups: Too much information, not enough meaning, need to act fast & “What should we remember?”. This and the following blogposts will explain one of the four categories, reflecting on the different biases within them and their impact on UX work.

Each category shows a broad problem definition, which is then split up into different behaviors we show or have. Below these there are effects or biases that explain why we have these behaviors, since they are a combination of all our biases and influences from our surroundings. To make this shorter and easier to read, I will not go into detail on every single bias and effect there is. (At least not in this blog post. ;D)

01 Information Processing

This category of the cognitive bias codex highlights how our brains handle the massive amounts of data we encounter daily. These biases influence how we collect, interpret, and remember information, often simplifying them to help us make decisions faster. While these mental shortcuts can be useful, they also shape our beliefs, judgments, and actions in ways we may not fully realize. Exploring this category helps to uncover hidden filters in our thinking, enabling us to better evaluate information, recognize distortions, and make decisions with more clarity. (cf. Gust de Backer)

01.1 Primed or Repeated Information

Our attention is drawn to information that aligns with what we already know. This makes certain details seem more important than others. The list of biases is very long, so here are the five biases I consider most important for UX Design.

  1. Availability Heuristic
    People judge the likelihood of events based on how easily examples come to their mind. This can lead to skewed decision-making, as recent experiences are more easily recalled and seem more common than they actually are. In UX design, using familiar examples or well-known patterns can help users make quicker decisions. (cf. Beyond UX Design C)
  2. Attentional Bias
    People tend to pay more attention to certain types of information while ignoring others, based on personal preferences, emotions, or past experiences. This means users are more likely to notice and engage with elements that are emotionally charged, eye-catching, or familiar. (cf. Beyond UX Design D)
  3. Mere-Exposure Effect
    People tend to develop a preference for things because they are exposed to them repeatedly. This effect can be used by consistently presenting certain features or brand elements, making users more comfortable and familiar with them. Over time, familiarity can lead to greater trust and engagement. (cf. Beyond UX Design F)

  4. Empathy Gap
    People fail to predict how emotions and mental states affect their behavior, leading to misunderstandings. For example, when not hungry, we might rationally predict we would choose a healthy snack, but in a hungry state, we’re more likely to pick something unhealthy. Understanding this gap helps in designing user experiences that anticipate emotional states and provide supportive features or messaging.
    (cf. The Decision Lab B)
  5. Omission Bias
    Harmful actions are perceived as worse than harmful inactions, even if the consequences are similar. For instance, people may feel less guilty about allowing negative outcomes than if they actively caused harm. Users might prefer passive features, like automatic settings, that avoid perceived responsibility or failure. Designers can use this by considering user preferences for default options or avoiding overwhelming users with too many choices. (cf. The Decision Lab C)

01.2 Attention-Grabbing Details

Unusual or emotional things captivate us, our brains are wired to notice things that are out of the ordinary. These biases make us prioritize spectacle over substance, they show us how we can make important information stand out and make our users remember it.

  1. Von Restorff Effect (The Isolation Effect)
    When multiple similar items are presented, the one that stands out is more likely to be remembered. This can be applied in UX design by making important elements or actions visually distinct. However, it’s crucial to avoid overwhelming users by overusing emphasis and to be mindful of accessibility issues, such as color vision deficiencies or motion sensitivity.
    (cf. Laws of UX)
  2. Picture Superiority Effect
    People tend to remember pictures better than words, visuals are processed in two ways as images and as associated words, while words are processed only as text. In UX design, using clear, literal images can improve memorability and comprehension. Effective placement of visuals, using unique images, and avoiding abstract visuals are key strategies to take advantage of this effect.
    (cf. NN Group B)
  3. Self-Relevance Effect
    People are more likely to remember information that they relate to themselves. This bias enhances memory retention when we connect new knowledge to personal experiences. In UX design, leveraging this effect could involve personalizing content, such as customized recommendations or user-centered messages, to improve engagement and retention. For example, presenting content that users can relate to personally, such as reminders tied to their preferences or past behaviors, can make the experience more memorable.
    (cf. The Behavioral Scientist D)

01.3 Novelty and Change

Elements that are new to us or in motion naturally capture our attention. However, this can make us overlook stable, ongoing factors that are equally significant.

  1. Anchoring
    This bias occurs where initial information, such as a suggested value, influences subsequent decisions. While anchoring can guide users to make decisions that align with desired outcomes, it can also unintentionally restrict creativity and objective thinking. (cf. Beyond UX Design B)
  2. Distinction bias
    This means, that we evaluate options differently when we asses them together or separately. This often leads to misjudgments, when viewing options side-by-side minor differences may seem disproportionately important. For example, comparing two similar products might exaggerate their distinctions. (cf. The Decision Lab A)
  3. Framing Effect
    People react differently depending on whether the same information is framed positively or negatively, influencing decisions. For example, a product described as “95% effective” might be more appealing than one described as “5% ineffective,” even though both mean the same. This bias underscores the power of context and language in shaping perceptions and choices.
    (cf. The Decision Lab B)
  4. Weber–Fechner Law
    The Weber–Fechner law is about how we sense changes, like light, sound, or weight. It says we notice small changes when something is light or quiet, but bigger changes are needed if something is already heavy or loud. For example, if you’re holding a tiny feather and add another, you’ll notice the difference. But if you’re carrying a heavy backpack, adding one feather won’t feel like much. Imagine having a website in a very clean look with very little visual clutter, little changes will be noticed easier, than on a website with a lot of flashing colors and pictures. (cf. The Behavioral Scientist C)

01.4 Confirm Believes

Confirmation bias leads us to favor information that supports what we already think or feel, reinforcing existing opinions and blinding us to contrary evidence. There are a lot of effects and biases listed in this category here are the ones that I consider most important for UX Work:

  1. Confirmation & Congruence Bias
    The confirmation bias describes the tendency to favor information that aligns with existing beliefs, leading to overlooking or dismissing contradictory views. The congruence bias is very similar, it describes the inclination to test hypotheses through direct confirmation, neglecting alternative possibilities, which can result in flawed conclusions. Especially during user testing this could hinder the advance of products. Since the goal is to find the flaws and shortcomings of a product, this could lead to them being overlooked. (cf. Beyond UX Design B, Philosophy Terms)
  2. Expectation Bias (Experimenter Bias)
    This describes the tendency for researchers to unintentionally (or intentionally) influence their study outcomes to align with their expectations, potentially skewing results. Since UX designers have to work with a lot of data, this could once again lead to missteps during the design process and the need to redesign the product later. (cf. The Behavioral Scientist A)
  3. Choice-Supportive Bias
    The tendency to remember past choices as better than they were, often by attributing positive features to selected options and negative ones to rejected alternatives. This could, on a small scale influence, how users give feedback to researchers after a testing session. Highlighting what went well and neglecting frustrating experiences, which could make a product seem better than it actually is. Paying attention to what people do is important to later compare this to what they said. (cf. The Behavioral Scientist B)
  4. Observer Effect
    A phenomenon one is very likely to come across while doing user research. Individuals tend to modify their behavior due to being observed, which can impact the authenticity of observed actions. Which is totally understandable, you wouldn’t want to be perceived as stupid or incapable in front of another person. (cf. NN Group A)

01.5 Spotting Flaws

It’s easier to spot mistakes or biases in other people than our own, making us more critical of others and less about our own behavior. The codex depicts three biases in this subcategory:

  1. Bias blind spot & Naive realism
    (I have already written a blog post about this bias ;D)
    We tend to think, that we see the world objectively (as it really is) and others don’t. We are convinced or information is correct and others who don’t share our views are misinformed or biased. Recognizing naïve realism helps us appreciate diverse perspectives and approach disagreements with empathy. Which is a key ability for UX designers in my book.(cf. Jakob Schnurrer)
  2. Naive cynicism
    We mistakenly believe others are more selfish than they actually are, often misinterpreting their intentions. This bias can strain relationships, create mistrust, and hinder collaboration, especially in team settings. Practices like active listening, open communication, and team-building help prevent misunderstandings and promote a more supportive environment.
    (cf. Beyond UX Design A)