Lisa-Marie Rapp
Helen Frank
4 months
2024
Research, Ideation, Wireframes, Design, Coding, Prototyping
UI (Figma, Adobe Illustrator), Model construction
Why Distortions and folds?
The aim of the project was to make knowledge tangible and accessible by presenting facts in a way that is not only informative, but also exciting, appealing and easy to understand.
Research & First Sketches
Our task was to develop an interactive application based on an encyclopaedia page that would be presented as part of an exhibition, museum or trade fair.
Besides creating a large visual board with various images and illustrations of Earth's layers, we also gathered informational texts about tectonic plates in general, as well as different types of plate movements and examples. This helped us filter out the most relevant content and served as the basis for our first sketches.
Visual design development
Throughout the project, our visual design underwent several changes. Since the main theme distortions needed to be clearly communicated, we revised and simplified the original model. The main screen design shifted from a bright, information-heavy interface to a more reduced and dark visual style. The indicator, which aids user navigation, was initially fixed in the bottom right corner, was temporarily removed, and eventually reintroduced in a minimal form. In the final version, it was placed around the model to present information more clearly and in direct proximity to the object.
As an example, you can see a slideshow on the left showing the development of our visual design for the San Andreas Fault, along with the evolution of our slider below. The last image, placed next to the slider visualization, also shows the development of our physical model, which illustrates different types of distortions.
Exhibition
The main idea is to let users experience changes in the Earth's layers in real time through sound and vibration. Our aim is to:Make invisible processes visible
We want to visualize tectonic shifts and distortions beneath the Earth's surface.
Build meaningful connections
By linking scientific explanations to familiar real-world examples, we help visitors understand the relevance and impact of these geological processes.
Simplify complexity through visuals
Our goal is to translate complex data into clear and intuitive visual forms that are easy to grasp and invite exploration.
The exhibition invites interaction in various ways. Panels are moved. Insights into the hidden are granted. Distortions can be compared and you gain a deeper insight into the subject.
The making of the physical model
From the beginning, we decided that users should receive information through a screen by physically interacting with the model in front of them, specifically by moving one of the tectonic plates.The first prototype, made from lightweight boards, aimed to represent all fault types from our research.
In the second stage, we used StyroCut to shape polystyrene panels, added handles, and tested basic interactions.
Testing revealed mismatches between model and screen content, which led us to revise both for better consistency.
For the final prototype, we used carefully cut wooden beams to better represent the weight and feel of tectonic plates. The model was painted and detailed with arrows, numbering, and color-coded elements to match the screen design.
Finally, we installed the technology inside the frame, ensuring alignment between model and screen for a coherent user experience.
Technology integration
The technological development began with a simple slider to move the plates, which was quickly implemented but initially limited in range. Later, we upgraded to a longer slider and added a second one to enable more complex interactions. Installing the technology was straightforward: the Bass Shaker, responsible for sound and vibration, was integrated into the model, while the sliders were mounted beneath the moving plates. The Arduino board was fixed to the base and connected to the computer through an opening in the back. An amplifier and screen were also connected to the computer and controlled directly.
To coordinate all components, we used Blokdots to set up the technical logic and linked it with Protopie for animations. The interaction between both programs runs through Protopie Connect, ensuring a smooth response between physical input and digital output.