Overview
Hyphe is an interactive theater experience initiated by onlinetheater.live. The online live game explores how close people can get digitally, tenderly inverting the principles of social media. While players build connections with each other through deep conversations, a network emerges and constantly grows. It's a mesh that feeds on biographical traces and demands open, radically honest communication. Don't judge. No likes, no dislikes.
Responsibility:
As part of Studio Minge+Schmidt, I supported onlinetheater.live, turning their concept into an online game experience. Therefore, I consulted the concept creation, led the UX and UI design of the game and online shop, and developed parts of the front end.
As part of Studio Minge+Schmidt, I supported onlinetheater.live, turning their concept into an online game experience. Therefore, I consulted the concept creation, led the UX and UI design of the game and online shop, and developed parts of the front end.
Tools & technology:
Adobe XD, Illustrator, JavaScript, p5.js, HTML, CSS
Adobe XD, Illustrator, JavaScript, p5.js, HTML, CSS
Background & story
The story behind Hyphe starts with Birder, a lonely guy tired of people's lives and increasing emotional distance. To counteract, he creates the platform Hyphe and eventually becomes the self-appointed head of the network. He watches and judges every interaction, guide, and comment, finally revealing the truth behind the mask.
The spectators become players and participate in Birder's twisted game. They are thrown into conversations that are as personal and intimate as possible. While the network of players is growing and evolving, they follow the reveal of Birder.
Challenge
The overall design challenge was to convert the story into a 90min lasting online game that players should experience on their private computers at home. Furthermore, the connections between players needed to be visualized through a generative design in real-time. On top, the look and feel of the game were supposed to tie in with the aesthetic approach of the main character, Birder.
Besides the actual game experience, a holistic technical environment to perform Hyphe was needed, including an online shop to sell tickets with personal access codes for specific showtimes and an admin panel for the theater team to interact with the audience.
Impression from working on the story and game phases
Process
To kick off the creation of the game, we led the team of Hyphe through a design sprint. First, we defined the game's goal – persisting in radical openness. Then, we structured the game into phases and integrated features that would guide the players to the ultimate goal.
The image of hype - a fungus tissue - became the inspirational image for the structure and visualization of the platform's network. We explored different aesthetic directions and possibilities to realize them through generative design. Subsequently, we started to create the other graphical interface elements around it. The overall look and feel as determined by Birder being a more or less unprofessional platform creator. This concept led to a somewhat unpolished and offbeat interface.
To ensure smooth usage of the game, we had to devise a good balance between the user interface convention and the story-inspired attempt. Through user tests and rehearsals, we approached a version of the interface which was easy to use and followed the overall aesthetic.
The image of hype - a fungus tissue - became the inspirational image for the structure and visualization of the platform's network. We explored different aesthetic directions and possibilities to realize them through generative design. Subsequently, we started to create the other graphical interface elements around it. The overall look and feel as determined by Birder being a more or less unprofessional platform creator. This concept led to a somewhat unpolished and offbeat interface.
To ensure smooth usage of the game, we had to devise a good balance between the user interface convention and the story-inspired attempt. Through user tests and rehearsals, we approached a version of the interface which was easy to use and followed the overall aesthetic.
Interface at an early game stage when the network is still weak
Result
In May 2020, actor Saladin Dellers and the Onlinetheater.Live team performed the interactive game Hyphe ten times, including a sold-out premiere. The experience of a new digital theater attracted wide attention as people in Germany suffered from Covid-19 restrictions at that time. While others used online experiences as a stopgap, Hyphe fully embraced its potential and made people question how we interact digitally.
The German newspaper Süddeutsche Zeitung, the Swiss newspaper Der Bund and other significant media reported the outstanding performance and the unique and ever-changing live experience.
Interface at the game's finale stage; Birder's live acting performance appears across the game's interface.
The organic motion of the network
Backstage: the theater crew interacts live with the players via chat.
Words from past conversations are clustered around players' profiles
A conversation between two players
In addition, I designed the online shop for buying tickets to the game and an admin panel for the team to create the performance events, control the game during the performance, and interact with the players.
The admin panel was created to control and manage the ticket shop and the entire game content and interactions with the audience.
Interface of the online shop
Backstage: the theater crew controls the game experience via the admin panel.
Admin interface to control the game phases and global parameters
Admin interface to manage game users
Credits:
Concept: Saladin Dellers, Sean Keller, Johanna Kolberg, Fabiola Kuonen
Direction: Johanna Kolberg
Text: Sean Keller
Dramaturgy: Fabiola Kuonen
Initiator, acting: Saladin Dellers
Music: Lorin Brockhaus
Game design, UX & Development: Toni Minge, Johannes Schmidt
Regie Assistant: Stella Schimmele
Livestream Technology: Wieland Hilker
Outside Eye: Caspar Bankert
Production: Barbara Boss, Michael Röhrenbach
PR & Press: Caspar Weimann
Press Graphic: Hana Yoo
Direction: Johanna Kolberg
Text: Sean Keller
Dramaturgy: Fabiola Kuonen
Initiator, acting: Saladin Dellers
Music: Lorin Brockhaus
Game design, UX & Development: Toni Minge, Johannes Schmidt
Regie Assistant: Stella Schimmele
Livestream Technology: Wieland Hilker
Outside Eye: Caspar Bankert
Production: Barbara Boss, Michael Röhrenbach
PR & Press: Caspar Weimann
Press Graphic: Hana Yoo
