From Keystroke to Brushstroke

Case Study: Muji - An Imersive Pop-Up Celebrating the Art of Communication

Responsibilities

UI/UX Design
Sketching
Signal Engineering
Visualization System

Tools

TouchDesigner, VSCode, Python, Discord, Notion

Timeline

May 2024 - August 2024

Disciplines

User Interface Deisgn
Experiential Marketing
Media Arts

Challenge

Muji, known for its minimalist philosophy and timeless designs, aimed to celebrate the simplicity and durability of its pen lines through an experiential pop-up event.

Our Vision

An integrated typewriter that combines analog and digital elements, allowing users to draw brushstroke on a digital canvas by pressing the keys

Concept Development

  • Muji is known for its minimalist approach, and this project is centered around the simple yet profound act of writing. The experience focuses on the purity of communication through tactile interaction, aligning with Muji’s core value of stripping away the unnecessary. Just like Muji pens, the pop-up experience is straightforward, functional, and doesn’t overwhelm the user.

  • Muji pens are celebrated for their longevity, and this project highlights that same durability through the interactive installation. The typewriter, a tool of the past, is given new life by seamlessly integrating with modern technology, reflecting how Muji products are designed to last over time. This mirrors Muji’s commitment to creating products that stand the test of time in both function and design.

  • The evolution of communication from typewriters to digital platforms mirrors the evolution of Muji’s design philosophy. This project captures that transition by blending analog (typewriter) with digital (canvas), showcasing how timeless tools can evolve without losing their essence. Muji’s products, like the pens, are designed to bridge simplicity with innovation, and this experience aligns with that fusion of old and new.

  • The first step was all about understanding Muji’s brand identity and finding a creative way to bring their minimalist philosophy to life in a pop-up format. We focused on the user experience from the ground up—how could we engage people while staying true to Muji’s principles of simplicity and functionality? The key idea was to create an interactive experience where technology didn’t overpower the human touch. By combining an analog (typewriter) with digital (canvas), we created a clear narrative that mirrored the evolution of communication, allowing users to experience the timelessness of Muji's design.

  • In this stage, I focused on the UI design and the interactive visuals. To ensure the pop-up experience was aligned with Muji’s aesthetic, I created the visuals using TouchDesigner, a node-based visual programming language. The key challenge was replicating the ink texture that would flow on the digital canvas with each keystroke. It took me a few iterations to perfect the visual, ensuring it had the right level of fluidity and organic flow, much like real ink. I worked on achieving that authentic feel of tactile interaction, where every user input would leave a unique, flowing mark on the screen. The result was a seamless and satisfying interaction design, where the digital output was a direct reflection of the physical input, enhancing the overall immersive experience.

  • In the execution phase, I collaborated closely with the hardware engineer to design the analog-to-digital interaction. The typewriter was modified with hidden custom buttons that would send an OSC (Open Sound Control) message to my device whenever a key was pressed, along with the corresponding character. My role as the software engineer was to parse and process these messages in real time, ensuring that each keystroke triggered the appropriate response on the digital canvas. I coordinated these messages with a trigger hook that initiated the flowing brush stroke effect and printed a “receipt” of the character on the screen, visually connecting the physical input with the digital output.

    The result is a responsive system.

the installation setup
(users type and hold on a key to watch a brushstroke generated on the canvas and the corresponding character appearing at the top of the canvas)

One of the prototyping typewriters

Ink Simulation art from TouchDesigner

The Result

The pop-up received positive feedback from visitors. Users were particularly drawn to the tactile nature of the experience, with many commenting on how the interaction between the typewriter and the digital brushstroke felt intuitive and satisfying.

To measure engagement, we tracked the number of interactions, with an average of 3-5 interactions per visitor during their visit. Over 1 months of display, the installation saw approximately 85% repeat visits from initial users, indicating high engagement.

User Interaction