large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="https://blog.prototypr.io/the-sound-of-paper-3c6b2ee7689a?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Edwin Toh 
Everyone knows the smell of a new paperback that you’ve just bought, the sensation of flipping through the pages, and the sound that fresh paper makes. But what about what it sounds like?
With that thought, Jonathan Yuen — founder of <a href="http://www.whererootsare.com/">Roots</a>, Victor of <a href="https://www.facebook.com/Affixen-100769770025690/">Affixen</a> and me embarked on what would become my favorite interactive digital installation I’ve done in my career.
The installation was for <a href="https://www.spring.gov.sg/newsevents/events/pages/SingaPlural-2015-Celebrating-Design-20150310.aspx">Singaplural 2015</a>, an annual art exhibition held in Singapore, and is a collaboration between <a href="http://www.rjpaper.net/">RJ Paper</a> and Roots.
<h4>The Vision</h4>
One of Jonathan’s requirements early on is that ideally, there should be no wires that a user can see when interacting with the installation — something that I 100% agree with and was striving to achieve. What we wanted to achieve was to basically create an “A-ha!” moment for the user.
<blockquote>A user would walk up to a seemingly normal looking table that has a few pieces of paper on it.</blockquote>
<blockquote>Once a user touches the paper on the table, sound will fill the room based on the kind of paper the user touched.</blockquote>
<h4>Development</h4>
When Jonathan came to me with the idea, my first idea of how to execute it was to find specific kinds of paper that can become a conductor which was inspired by a product which I got a hold of a while back — <a href="https://www.youtube.com/watch?v=rfQqh7iCcOU">Makey Makey</a>.
However, with some early research and prototyping I quickly dismissed the idea as unfeasible due to the poor conductivity and the amount of possible wires that will appear behind the table.
After some brainstorming sessions, I remembered a piece of technology that I’ve used in the past that might be just what we were looking for. Since our budget was quite low, we borrowed the device from a kind ex-colleague from the industry who readily loaned it to us.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FVfFSB1WvQbY%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DVfFSB1WvQbY&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FVfFSB1WvQbY%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="https://medium.com/media/938277ae071024e01b8f1ba4bb5474d7/href">https://medium.com/media/938277ae071024e01b8f1ba4bb5474d7/href</a></iframe>
As you can see from the prototype above, we have absolutely zero wires connected to the paper, but we achieved what we needed to do!
Okay, so I skipped a little ahead and forgot to explain how we made the sounds. Victor of Affixen actually spent some time studying the 8 different kinds of paper that Jonathan selected from RJ Paper and imagined how they would sound like. Eg. rough paper would sound more harsh, and smooth paper white paper reminded him of snow.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FuIfF80Iq1Mg%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DuIfF80Iq1Mg&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FuIfF80Iq1Mg%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/007c5cf6bc74440dd4b3c606ee540c92/href">https://medium.com/media/007c5cf6bc74440dd4b3c606ee540c92/href</a></iframe>
Once that was done, I wanted to create a smooth transition between the sounds as a user move from one paper to another, so I experimented with some overlaps.
<iframe src="https://cdn.embedly.com/widgets/media.html?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DQlJKd-nQADg&amp;src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FQlJKd-nQADg%3Ffeature%3Doembed&amp;type=text%2Fhtml&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;schema=youtube" width="640" height="480" frameborder="0"><a href="https://medium.com/media/1ffaea766fc359fd4a7b593549e3c567/href">https://medium.com/media/1ffaea766fc359fd4a7b593549e3c567/href</a></iframe>
With that, I achieved what I needed to do and all we needed to do was to build the table!
Even though we don’t need wires exposed and connected to the paper, we actually need a computer to power the digital installation. This means that we need to construct a special kind of table that will house this experience as well as hide the computer.
This is where RJ Paper and Jonathan worked really hard to design and construct this:
<img alt="" src="https://cdn-images-1.medium.com/max/640/1*10HaeU3Zj6hcDpOs8pArew.jpeg">
One of the table legs is actually hollow so we can pass the PQLabs frame’s USB cable down to a corner of the raised platform, where a hidden slot keeps the laptop.
The launch day!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*TI1aVaFAK_TeKuWWYPVW2g.jpeg">Jonathan demoes the installation to media
<h4>User Experience</h4>
One of the things that really concerned me initially with our vision and idea was that since this installation is going to be part of an art exhibition, how do we convince users that they can step onto our raised platform AND actually touch our “artwork”.
<blockquote>how do we convince users that they can step onto our raised platform AND actually touch our “artwork”.</blockquote>
However, we realized the problem was solved by itself as users noticed footprints on the white raised platform and realized that they can step onto the platform.
Next, most users will look around a little bit more, read the description of what our installation was about on one of the walls, and then venture to touch the paper.
<h4>The A-Ha! moment!</h4>
Looking at the users interact with the installation is always my favorite part of the process.
Almost all users who touched the papers and heard a sound got surprised and started almost immediately to look up and over the table and below the table to find something like a Kinect or camera that was powering our installation.
I’m proud to say no one during the installation found out how we did it. Can you venture a guess?
PS: I left a hint in the article!
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3c6b2ee7689a" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/the-sound-of-paper-3c6b2ee7689a">The Sound of Paper</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Sound of Paper

The Sound of Paper

Top Stories