Project description

Digital Rams is a digital tribute to the legendary industrial designer Dieter Rams. This project was a fun exploration of how real world interactions can be directly translated to a digital form, to understand how users would interact with the same form factor but on a digital interface and to challenge the norms of conventional UI design. Digital Rams has a collection of products built by Dieter Rams which can be interacted with digitally. From the T3 pocket radio to the Braun Lectron system, this app is built with multiple micro interactions to allow users an experience as close to using the products in flesh. 

The brief

The brief for this project was simple - to design an interactive app experience that tells a story about something you’re passionate about. It prompted me to think about a story that can be told better through interaction from the user — how can you use interactivity and animation to tell a better story, or to engage a user with the subject matter more deeply. 

The solution

Having had prior UI design experience and knowing the usual norms of designing an app, Digital Rams on purpose was created with the sole motive of exploring gesture, micro interactions and haptic feedback. The app begins with a pulsating arrow that calls to be swiped up, as the user drags the arrow up, the size of the arrow increases and as it reaches the end, it unlocks the app with haptic feedback. Then, the app plays a 10 second video that introduces people to Dieter Rams and some trivia about him. Once you begin the interactive experience by clicking ‘Begin’, you see a list of his iconic products. Here the user is provided with two options, to interact with the product digitally or to view the product with a 360 deg view. This feature was to give the users an immersive experience of using the product. For example - clicking on the Braun T3 pocket radio will take the user to a page where the user can literally rotate the knob like on the real product to change the music. And similarly, users have to slide a lever to start or stop the Braun TP1 radio, where the vinyl rotates like how it would in the physical world. There are other Dieter Rams products which can be experienced in a similar way.

The technology

Digital Rams was designed using Figma and all the interactions were prototyped completely using Origami. The Origami prototype explored dozens of switch states, transitions and animations along with video and audio inputs, haptic feedback and the gyroscope feature to enable users to use the 360 view of the products. I also explored Framer to build this prototype in the initial stages of building Digital Rams.