WebExpo Talk #2: Elis Laasik

Beyond Design Tools: Prototyping in code

In this second post, I want to recap the talk of Elis Laasik at WebExpo 25, where she discussed the topic of design prototyping in code. Elis, with her extensive experience in the field, explained how prototyping using basic HTML, CSS, and JavaScript—along with some JavaScript frameworks—can be an efficient way to approach web development. She highlighted that this method is especially valuable in professional contexts, where prototyping plays a crucial role in shaping the user experience, testing ideas, and ensuring that the final product aligns with business goals.

One of the main points that Elis emphasized was that these prototypes don’t require a backend or a database. Instead, the focus is entirely on the front-end elements, like the user interface and customer journey. This approach allows teams to test how the website or app behaves in real time, which can be much more useful than static design mockups. Since the prototype is coded directly, it is much closer to the finished product, giving stakeholders a more accurate sense of how the final product will look and function. The fact that it’s interactive and responsive adds another layer of realism to the process, which can be especially valuable in understanding the user experience.

This approach to prototyping really stood out to me, as it closely mirrors the way I work on personal projects. When I’m building a website on my own, I tend to start coding right away, rather than creating a design in tools like Figma first. I find that coding a prototype feels more “real” because I can see the project develop as I work on it. It also allows me to directly address how the website will behave, rather than just looking at a static design. I could relate to what Elis was saying because, for me, starting to code early gives a more authentic sense of the project’s progress and helps me figure out how the website will work from a functional perspective.

Elis also mentioned that prototyping in code can be particularly useful when dealing with complex user interactions or when there is no shared vision across the team. By coding the prototype, it’s easier to explore different solutions and test how users will actually engage with the site or app. This kind of flexibility and control can be crucial in situations where the design needs to be flexible or constantly evolving.

That said, Elis pointed out that there are certain scenarios where using code for prototyping might not be the best approach. For smaller projects or when branding design is a significant focus, she suggested it might be better to start with a traditional design tool like Figma. In these cases, the need for high-fidelity visuals or design accuracy might take precedence over functionality in the early stages. I completely understand this perspective, especially when the main goal is to define the visual identity of a brand before diving into the technical aspects.

In conclusion, Elis’ talk provided a lot of valuable insights into the practical use of code-based prototypes. It was interesting to see how this approach is applied in professional environments and how it can be a useful tool for creating realistic, interactive designs. For me, it reinforced the idea that prototyping with code isn’t just about creating something functional—it’s about exploring possibilities, improving user experience, and aligning the product with business objectives.

Prototyping a Data Visualisation Installation

In this second part of the IDW25 recap I want to talk about the prototype I created of my CO2 project. The goal for me was to build an installation to interact with the data visualisation. For this I chose makey makey and built a control mechanism with aluminium foil and a pressure plate. To send the data from processing to the projector I used Arena Resolume. My concept was based on the CO2 footprint. So you activated the animation with steping on the pressure plate. Here are first sketches of my idea.

I thought about making an interactive map where you step on different countries and realease fog in a glas container. But that was too much to create in one week so I reduced the concept to projecting the boundary I showed in my last blog post. I kept it simple and connected the makey makey to aluminum foil to control the time line with a finger tap. The processing output is being projected on the wall.

Conclusion

It was interesting to get to know the possibilities of the used technology to visualise data and therefore I had a lot of fun during production. I will definitly keep working on this project to see where it can go. Also expand the data set to compare more countries. In the first part of the blog post I mentioned that there are probably better programs to make more visually appealing animations for such a topic. But for a rough protoype this was completly fine.

Prototyping VI: Image Extender – Image sonification tool for immersive perception of sounds from images and new creation possibilities

New features in the object recognition and test run for images:

Since the initial freesound.org and GeminAI setup, I have added several improvements.
You can now choose between different object recognition models and adjust settings like the number of detected objects and the minimum confidence threshold.

GUI for the settings of the model

I also created a detailed testing matrix, using a wide range of images to evaluate detection accuracy. Due to that there might be the change of the model later on, because it seems the gemini api only has a very basic pool of tags and is also not a good training in every category.

Test of images for the object recognition

It is still reliable for these basic tags like “bird”, “car”, “tree”, etc. And for these tags it also doesn’t really matter if theres a lot of shadow, you only see half of the object or even if its blurry. But because of the lack of specific tags I will look into models or APIs that offer more fine-grained recognition.

Coming up: I’ll be working on whether to auto-play or download the selected audio files including layering sounds, adjusting volumes, experimenting with EQ and filtering — all to make the playback more natural and immersive. Also, I will think about categorization and moving the tags into a layer system. Beside that I am going to check for other object recognition models, but  I might stick to the gemini api for prototyping a bit more and change the model later.

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

#11 Prototyping – Trial and Error

Prototyping Multisensory Data – From Spaghetti Mountains to Shadowed Insights

The task was to create three quick lo-fi prototypes related to our Master’s research—ideally 5–10 minutes each, with a maximum of 20. The goal was to sketch out ideas, test tangible concepts, and move away from screen-based representations. I managed to create two prototypes. Neither went exactly as planned—but both taught me something valuable.


Prototype #1 – The Spaghetti Schlossberg

For this prototype, I attempted to reconstruct the topography of Graz’s Schlossberg using spaghetti. I had a map with Höhenlinien (contour lines) and snapped pieces of spaghetti to match the elevation levels. The plan was to poke them through holes in a cardboard base to create a physical, touchable model of the hill.

The idea:

To offer a tactile experience of elevation, allowing users to feel the form of the mountain. My long-term vision included vibration feedback: depending on which level the user touches, the surface could respond with different intensities or patterns of vibration—giving sensory feedback about height, slope, or perhaps historical or environmental data.

What didn’t work:

  • The holes had to be the exact right size—too big, and the spaghetti would fall through; too small, and it would snap trying to insert it.
  • The spaghetti broke. A lot.
  • I only managed about half the model before deciding to stop.

What I learned:

  • Spaghetti is a fragile material—not ideal for tactile prototyping.
  • Still, the concept of a vibrotactile elevation model is worth pursuing, maybe with more durable materials like wires, foam, or layered acrylic.
  • There’s something powerful about physically feeling data—especially when it’s enhanced with feedback.

Prototype #2 – The Cardboard Box of Shadows

This idea was more experimental. I took a cardboard box, cut one side open, and inserted a slot for sliding a sheet of paper inside. I placed a light behind it, allowing shadows to appear on the back wall of the box.

The idea:

To explore how data can be made visible through shadows—revealing patterns not through direct representation, but through effect and contrast. Initially abstract, the idea grew into something more tactile and layered.

I then thought: what if you could slide two pieces of paper inside the box—each with different shapes, data patterns, or cutouts? Their overlapping shadows would form a dynamic visual, representing the interaction between two datasets.

What this could evolve into:

  • A lo-fi ambient display where the position and layering of paper affects the final output.
  • A metaphor for data complexity—how meaning emerges not from a single source, but from relationships, intersections, and light.

What I learned:

  • Sometimes we build without a clear purpose, and ideas emerge through doing.
  • Light and layering can be compelling tools in multisensory data design—especially when paired with motion, tactility, or time-based changes.

Reflections

These fast prototypes pushed me to translate data into form—without overthinking or refining too early. Both attempts reminded me that multisensory design is not about perfection—it’s about perception. What does data feel like? Sound like? Look like when it hides, flickers, or resists being seen?

Even though I didn’t finish all three, I left with two ideas I might revisit, refine, or completely rethink—successes in their own right.

Documentation & Reflection of the Speed-Dating/Sharing session

Lo-Fi Prototyping: A Hands-On Experiment with Everyday Materials

In one of our recent classes, we were given an interesting assignment:

Create three lo-fi prototypes of a project idea related to your Master’s research and bring one to class for testing. These prototypes could be iterations of previous work, early drafts of a new concept, or entirely different ideas. The key was to keep the process quick and experimental, spending no more than 20 minutes on each prototype.

Each student approached this task differently. Instead of focusing on my research from last semester, I decided to take a completely fresh perspective. My goal was to experiment with rapid prototyping using only materials readily available at home, creating something practical and functional.

Prototype 1: The DIY Charger Holder

My first prototype was a cardboard charging holder, designed to serve as a portable phone and charger station. The idea came from a common inconvenience—when outlets are located far from tables or shelves, leaving devices on the floor while charging is not ideal. This prototype aimed to solve that issue, especially for travel or spaces with limited furniture.

Using an empty cookie box, I cut out sections to create an opening where the phone and charger could be placed. The structure allowed the box to hang securely on a plugged-in charger, keeping the phone elevated and safe from potential damage.

Prototype 2: The Allergy Pillowcase

The second prototype was a pillowcase designed for people with allergies or colds. The concept was simple: integrating a small pocket or compartment to store tissues. This would allow users to access tissues quickly during the night without having to get up or search for them in the dark. While the design was basic, the idea addressed a real pain point and could be refined further.

Observations from the Class Testing Session

For the testing session, I brought my first prototype—the cardboard charging holder—to class. What surprised me the most was how difficult it was for my classmates to identify its purpose. Since I had designed it with a clear function in mind, I assumed it would be immediately recognizable. However, when I asked my peers to guess what it was and how it worked, many had no idea.

Only after I provided a small hint—mentioning that it was related to phone chargers—did they start to piece it together. This experience highlighted an important lesson: as designers, we often assume our ideas are obvious because we are deeply familiar with them. However, what seems intuitive to us may not be clear to others.

Key Takeaways

This experiment reinforced a critical principle in design and product development:

  • Early user testing is crucial. By involving users from the beginning, we can uncover misunderstandings and refine our designs based on real feedback.
  • Imperfect prototypes are valuable. It’s better to test a rough, quick prototype than to wait until a product is ‘perfect.’ Iterative design allows for improvements based on actual user insights rather than assumptions.
  • Context matters. A design that seems simple and logical to its creator may not be immediately clear to others. Communicating ideas effectively is just as important as the functionality itself.

Through this rapid prototyping challenge, I realized that testing, even with basic materials, can lead to unexpected insights. Moving forward, I plan to integrate more user feedback earlier in my design process to ensure that my ideas are not only practical but also easily understandable.

This assignment proved that sometimes, the simplest ideas can spark the most meaningful discussions about usability and design thinking

2.1. Prototyping & Reflection of the Speed-Dating

My previous topic focused on the physical and digital worlds surrounding museums. Currently, my research does not provide any concrete ideas on what this entails. So, for this task, my thought process has led me to consider creating something that doesn’t rely on technology for its primary function. As a result, I created a collection of three prototype pencil holders. I chose to work with cardboard as my primary material because it is lightweight, easy to cut and shape, and allows for quick iteration. This choice allowed me to try out different structures and improve my ideas without the limits of more rigid materials.

Prototype 1: The House
The first prototype takes the form of a small house, featuring a hole in its roof for storing pens, pencils, markers, and other writing instruments. This was the most complex design of the three, and due to its complexity, it took the longest to construct as I had to experiment with the angles of the roof and the positioning of the storage opening to achieve the right balance between aesthetics and usability.

Prototype 2: The Cube
The second prototype is a simple cube with five holes on one side, designed to hold pens and pencils perfectly. Its geometric structure made it the easiest to assemble, as I only needed to ensure that the holes were the right size for standard writing tools.

Prototype 3: The Abstract Shape
The third prototype differs from traditional forms, featuring a curved plank resting on a cylindrical base. Unlike the first two, which have clear, recognizable shapes, this design leans toward abstraction. Although this was the fastest prototype to construct, it required the most conceptual thinking. I spent a lot of time considering its form and how it could function as a pencil holder. The final piece is a sculpture that sparks interest while also being useful.

Observations from the Speed-Dating Session
For the in-class speed-dating session, I decided to bring Prototype 3. Given its abstract form, I was particularly interested in seeing how people would interpret it without any prior explanation. As the session began, people appeared uncertain about its intended function. Instead of immediately revealing its purpose, I encouraged them to make guesses based on its shape and structure.

Many speculated that it might serve as a rest for the chin or arm, while others imagined it as a support for chopsticks or another type of tool. When I revealed that it was meant to be a pencil holder, people had mixed reactions. Some were surprised, while others wondered if it really worked well for that purpose.

The most valuable feedback from this session suggested refining the concept by focusing on holding a single, special object rather than multiple everyday writing tools. One person suggested that the design could be changed from a typical pencil holder to a display case for a special calligraphy pen or another important writing tool. This idea created new options for how the prototype could become a more meaningful object.

Overall Thoughts
The speed-dating experience proved to be a valuable exercise in the iterative design process. Observing how people engaged with my prototype, interpreted its function, and provided feedback allowed me to rethink my approach and the intended use of the design. I realized that the way something looks affects how people understand and use it. It’s important to create ideas that clearly show what they are for or, on the other hand, encourage people to engage with them through uncertainty.

#2.01 Prototyping and Speed Dating

Recap from last semester

In my last ten blog posts I researched about loneliness and social isolation, focusing on how we as interaction designers can combat loneliness and how we can design for connection. I started by defining loneliness and social isolation, discussing how they are measured, and sharing statistics on who is most affected and their impact on mental and physical health. I then introduced the Theory of Third Places, and how important public spaces are for well-being and social connectedness. This led to an exploration of Human-Centered Design for public spaces and how interaction design can help shape these environments to encourage social interactions. Since a large part of our lives takes place online already, I want to take a more analog approach but still does not forego a digital aspect. This brought me to interactive installations and how they can strengthen social interactions in public spaces. I looked at how to design engaging interactive installations and key factors to consider ensuring people participate and connect with each other.


Prototyping

The first task in Design & Research 2 was to create three lo-fi prototypes, ideally linked to our Master thesis. To be honest, I am not sure if I want to continue with this topic for my Master Thesis, but for now my three prototypes are connected to it.


Prototype 01 – COMMUNITY APP

Although I wanted to take a more analog approach to the topic of loneliness, I wrote down all ideas that came to my mind and the first one was a community app. An app where you can connect with people in your neighborhood. You can find people with the same interests and hobbies, borrow tools you don’t own, arrange pet sitters while you are on vacation, get help with household repairs and discover local events.


Prototype 02 – SMART SOCIAL BENCH

A bench equipped with a small display that lights up when someone sits down, signaling an invitation for others to join. The display offers small conversation prompts such as “Tell me about your day” or “What’s your favorite song?” to encourage interaction. Additionally, a two-player mini games are included to further facilitate engagement and interaction.


Prototype 03 – INTERACTIVE INSTALLATION

The last prototype is what I already thought about during the first semester – an interactive installation. A large screen installed in a public space, accompanied by two interactive tablets or screens that allow people to play mini games together, such as Tic-Tac-Toe for example. The setup is designed to encourage spontaneous social interactions among strangers or friends passing by. To make the space more inviting and inclusive, seating options are added nearby, providing a comfortable spot for people to watch the game, cheer on players, or even join in when a new round begins. This setup transforms the public space into a casual, engaging meeting point, fostering social connection through play and shared experiences.

Speed Dating

For the next class of Design & Research 2 we had to bring one of our prototypes. Since I already wrote about interactive installations, I brought my third prototype. We did a speed dating where we talked about our prototype with a different person every round to get more different insights, feedback and ideas. In the five rounds we got different task: guessing what the prototype was, suggesting additional features, describing it as if it is a dating profile, imagining a TED Talk about it, and reflecting about the most unexpected feedback.

Insights
  • Everyone I spoke with understood that my prototype is an interactive installation designed for two people to engage with each other.
  • One person suggested that instead of having a large screen with two control elements, I could use multiple small tables with built-in screens, allowing more people to interact rather than just two.
  • The description of the installation’s dating profile would be: Fun hanging out with.
  • Since I want to place the installation in a public space, I need to consider changing weather conditions and use waterproof materials. Additionally, the individual components should be securely built to prevent theft.