The way we interact with the plethora of devices surrounding us and filling our lives is different from years ago. Simply put, those times that we interact with a single device only through touches, presses, and gestures are long gone.

Connectivity between and integrations among devices are a given. Think of Handoff among your Apple devices, turning off your Philips Hue lights through Siri because you’re in bed already and you put your phone on the nightstand that’s just a little too far away, seamlessly switching devices when listening to the new Discover Weekly playlist on Spotify, or the 170+ voice commands you can use while keeping your eyes on the road in that sweet Tesla Model S.

New technologies drive us to interact differently with each other and subsequently differently with our products and devices. One of these technologies is voice. It’s foreseeable that voice will play a more essential role in your everyday lives. We grew up with the rise of the iPod, iPhone, and the world of e-commerce, but we have a whole new generation, Gen Z, that has a fairly different experience. They grow up ordering pizza and buying movie tickets using Alexa — 

 voice-enabled personal assistants compared to older demographic cohorts.

It’s our job as creators and designers to be ready for a generation of users that interacts differently. We should design as well as prototype meaningful experiences tailored to this. As we believe that many don’t think about incorporating voice in their products (yet) or have a hard time turning voice-focused ideas into actual working prototypes, we would like to stand up for an era where voice prototyping beyond a single person and device becomes more democratized.

Hence, we’d like to share a set of voice prototype examples, 

, showcasing that we, designers, can absolutely prototype immersive, interactive experiences like these and don’t have to be bound by single user-screen experiences only.

We mentioned Tesla and its 170+ voice commands earlier. They are definitely not the only company; various others, e.g., Mercedes Benz, Continental, and Bosch have been making an effort on including voice as part of the driver experience.

In this example, we made an interactive prototype of the center screen display of a car that runs on a tablet. What would an in-car experience be without a steering wheel? So, we hooked up the tablet to a steering wheel. As you can see in the video, you can control the prototype with the buttons on the steering wheel to activate the voice assistant.

Try out the in-car voice control prototype.

Voice can make it a lot easier to access a certain feature more directly compared to having to navigate through a bunch of menus to get there, especially when it comes to smart TVs.

We bet you don’t know anyone who has a pleasant experience searching content on a TV with a remote. Voice search has been making this so much easier.

We have a smart tv prototype running on a computer that we connected to an actual TV. The remote control that you see isn’t connected to the TV directly but to the computer instead. As ProtoPie allows for keyboard input, we made sure that the computer recognizes the remote as a Bluetooth keyboard. And voilà, you got voice magic.

Try out the smart TV voice search prototype.

We did mention “beyond a single person” before. A great product offering a multi-person voice experience is Google Translate that supports bi-lingual conversations.

Hence, the example that we came up with is a bilingual translation app prototype translating an English-Spanish conversation between my colleague Adri and myself over Zoom. See for yourself how that played out.

Try out the voice translation app prototype.

One of the accessibility features Google added to Google Docs years ago is Voice Typing which has been incredible for people who can’t or prefer to use voice rather than typing actual text.

The voice typing feature enhances the overall experience of how someone can produce text in their Google Doc. What you also can tell is that the voice typing feature needs visual feedback to let someone know the progress of what has been typed. This shows that we shouldn’t approach voice and visual as two separate things, but instead, design the experience as a whole.

Try out the Google Docs voice typing prototype.

These are just 4 examples. As we live in a more connected world, there’s so much more out there and possible. All in all, it’s time for designers to care more about immersive experiences involving voice rather than voice and visual design as two separate things.

Adding voice to interactive prototypes (realistic ones, not your average click-through prototypes) used to be utopian as a designer. Not anymore. With 

, you can blend interaction and conversation design and prototype for a voice-ready future.

Getting ready for a new era. Voice prototyping examples that go beyond a single person and screen.

Prototyping for Voice - Blending Interaction & Conversation Design

Touchscreens revolutionized the technology industry since its first apparition and until today are widely use it in different fields. There are many types of 

In the old days, the resistive touchscreen was major for its low cost and durability, being used in GPS navigation devices and Nintendo DS family devices. The downside is the necessity to apply sufficient pressure by using anything rigid as a finger substitute for the touch to be sensed, as well as the poor screen contrast.

“Surface acoustic wave (SAW) technology uses ultrasonic waves that pass over the touchscreen panel. When the panel is touched, a portion of the wave is absorbed”. It can be usually found on large size applications such as kiosks, arcade games, automated cash dispensers, and so on.

Now let’s talk about the star of this article, the capacitive touchscreen. This touch screen panel is coated with a material that stores electrical charges, and it is typically used in most consumer products like tablets, laptops, and smartphones.

But how does the capacitive touchscreen work?, “As the human body is also an electrical conductor, touching the surface of the screen results in a distortion of the screen’s 

But, the human body isn’t the only electrical conductor. Amazingly, various fruits and foods such as orange, apple, and even 

 are electrical conductors as well. In the following demo, you can observe how a prototype reacts to the touch of different fruits being placed directly on the smartphone touchscreen.

After making the Scale app, I started wondering, ‘Is there anything else we can make utilizing capacitive touchscreen’s characteristics?’ and was there when the idea came up to my mind to make a digital loupe.

First, I wanted to adjust the level of magnification somehow. Eventually, I came up with rotating using two fingers. But then, I started thinking of how to make a loupe having two touch points substituting of fingers.

I tried it on the iPad Pro 12 inch, and it worked well so I decided to take it forward. I explored different ways to build the loupe device at first using two touch pens.

The next try was to make a ring and wrap it with aluminum cooking foil.

Finally, I built an aluminum foil wrapping device for testing, as it is cheap and can turn any material in a conductor by simply wrapping it. (Friendly advice, foil can scratch your touchscreen, so I recommend to put a screen protector on it before testing.)

For just prototyping purposes, you can use the foil wrapping device. However, I wanted to make an even more polished solution. So, I shaped the loupe made of aluminum using a 

. In order to secure more stable touchpoints, I painted 

 on two tips. The white two points on the top and bottom of the device are supporters, which prevent it to shake while moving on the touchscreen.

You can try the prototype by yourself in 

With the above device, you can also try to make a more complicated and expensive device in a much easy and cheaper way.

Like this, I made a Knob on Display, which is a physical knob attached to the touchscreen (e.g., Knob control on the center display of Range Rover) by making a ring part (the black one) working as an axis attached to the touchscreen.

You also can try the prototype by yourself in 

Understanding the touchscreen characteristics to free your interaction ideas.

Touchscreen Prototyping in a Way You Haven’t Before

As a result of the global rise of COVID-19, colloquially known as the Coronavirus, many companies have been making the shift to remote working and encouraging their employees to evade any avoidable close contact with other people.

Working remotely or working from home is not a new phenomenon in the design community. Many designers have been working remotely for years and shown to be huge advocates.

But you might not be one of them (yet). If this is your first time working remotely or from home, or struggling to make the transition from the office life to the non-office life as a designer, we’d like to share some tips on how to go about prototyping remotely or from home.

Disruptions to routines can be hard to deal with. However, there are many known solutions to increase overall productivity for designers working remotely: Slack for messaging, Zoom for video calls, Notion for notes and documenting, and Figma for design.

With the tips below, we’d like to shed some light on how 

 can boost your prototyping productivity and make your new remote life more comfortable.

1. Show, don’t tell. Let people experience.

If you don’t get your prototype into the hands of (potential) users, your audience, your colleagues or stakeholders, then what’s the point, right?

To do so, it’s super easy to share your prototyping work with the people that should experience the interactive ideas you came up with. 

 allows you to upload your prototypes to the cloud and generates a link that you can share with others.

There is no need for your colleagues to be right beside you or stuck in a meeting room for them to see your prototypes and understand your interactive design ideas.

Getting your prototypes into the right hands is very easy.

People can immediately try out your interactive prototypes in the browser on their computers, or on their smart devices.

How to customize the ways you share your prototypes through the cloud?

2. Get feedback. Synchronously or asynchronously.

As a company that makes a prototyping tool, we do use our own prototyping tool to prototype ProtoPie’s latest features. (Confused yet?)

Sometimes, we use Zoom to do some real-time discussions about the new interactions a designer comes up with for any new features or improvements while everyone has access to the prototype.

Feedback can be provided asynchronously too. We have another solution for this.

More often, we collaborate on prototypes and our interactive ideas in ProtoPie itself. We find it important that we can iterate quickly by getting ideas out of our head into prototypes as fast as we can, turn them into better ideas, and move to the next one if necessary.

 helps us to achieve this. We can share our feedback by leaving our comments right beside one’s prototype and access previous versions of a prototype on the left side.

Some designers like to provide an additional written explanation to the interactive prototypes they make, before receiving any feedback. Notion is a note-taking and documenting tool that has risen in popularity throughout the years.

Like your Figma designs, you can embed your prototypes made in ProtoPie in your Notion documents. This way, someone could play around with your prototypes directly within Notion.

You now know how easy it can be to share your prototypes with others using the cloud. It doesn’t have to stop here. There are many user testing and recording platforms that enable you to gain insights into how users interact with your prototypes.

One of these tools is Lookback. You can easily set up a test (moderated or unmoderated), include a link to your prototype in the ProtoPie Cloud, and write some instructions. Then it’s a matter of sending your test to your audience and see the insights flowing in.

You don’t have to invite people to your office to conduct any user testing as you most probably used to do. It’s a discussion on its own whether in-person user testing or remote user testing is better. But being able to validate your design ideas through remote user testing does give you more flexibility as a designer these days when working remotely or from home.

COVID-19 contingency plans pushed many to shift to remote working.

How to Maximize Your Prototyping While Working Remotely

Imagine having full control over your shareable prototypes and interaction recipes, and not having to worry about them falling in the wrong hands?

Exactly this is possible with the all-new features for you to share your works worry-free.

Let’s deep-dive into these all-new features!

vailable for the Team & Enterprise plan only.

We released interaction recipes last year—one of ProtoPie’s hot features. Record a scenario of your prototype’s interactions and its specs, e.g., durations, delays, easing, layer properties, and other important details.

No need to invest in creating separate documents with explanations to illustrate your intended concept. Simply, an interaction recipe contains every single detail of your prototype.

Designers often face difficulties when trying to communicate their ideas and intentions. With this, convey all your intended interactions to engineers and just let them follow the recipe.

Before, you could share interaction recipes with team members only. Not anymore. 

Share your interaction recipes with anyone now.

At ProtoPie, we always think about what to simplify next? The obvious would be to remove this inconvenience.

Avoid asking your team admin to invite Engineer A and B.

Skip the whole sign-up process for Engineer A and B.

Anyone with the link can access your interaction recipe without creating a ProtoPie account.

Change the access settings and make your interaction recipe public:

 Click on the overflow menu (the 3 dots in the upper part, right next to your name) and click on Access Settings.


Quick tip: you can also click on the lock icon to access your settings.

 Change “Only team members” to “Anyone with the link”.

: Copy the interaction recipe link by clicking on the link icon.

Share the link and let engineers follow the recipe.

Rather share your interaction recipes (and prototypes) with password protection? That’s possible too.

Share your prototypes and interaction recipes safely with a select few people. With password protection. Happy stakeholders, happy you, right?

Find the password protection option in the access settings.

: Activate the Password Protection option.

Tip: you can change your Password later if needed.

Now you are ready to share your prototype with your stakeholders. Whomever you share the link with needs to enter the password to get access.

Share your prototypes and interaction recipes with anyone. Or safely with a select few people.

New in ProtoPie Cloud? Public Interaction Recipes & Password-Protected Prototypes

2020 was a hard year for everyone due to COVID-19, but there were still lots of talented designers who have been making incredible prototypes with ProtoPie. They made use of brand new features perfectly, from interaction recipes to ProtoPie plugin for Figma, taking their designs to the next level. Let’s start off 2021 with the 10 most inspirational interactive prototypes. Certainly, they can serve as a source of inspiration for your own interactive prototyping work this year.

I paid attention to the following in particular:

: Are the UI designs proper and following the latest trends?

: How interactive are the prototypes? What kind of micro-interactions are there?

: How realistic do these interactions feel and look and how feasible are they?

 How creative and unique are the solutions the designers came up with?

: Good mix of prototypes for all kinds of digital products, e.g., mobile, web, desktop, and IoT?

The selected prototypes have been listed in random order. If you click each link, you can check how they were made. For some of the prototypes, you can even try them out yourself and download the files.

1. Gamified Health App Interactive Prototype by 

For this voice prototype, turn the sound on before play! 

You can check the detailed design process in the 

There is no limitation with ProtoPie. We are ready to enhance your design skills with new features. If you’d like to know more about our tool, which these designers used to create advanced interactions easily that go beyond imagination, try it for free 

A curated list of inspirational prototypes and interactions with brand new features for 2021.

10 Most Inspirational Interactive Prototypes for 2021

About 3 years ago, we proudly released the first integration for Adobe XD. A ton of designers have been importing their designs into ProtoPie and creating amazingly realistic prototypes on top of their XD designs ever since—A tremendous success.

Today, we are delighted to show you a better, more flexible, and tight-knit workflow between Adobe XD and ProtoPie.

The Adobe XD + ProtoPie workflow has been a game-changer for digital designers who like to begin their creative process in XD. Starting from scratch to actually having a tangible (& realistic!) prototype that you can hold, touch, and fully experience—all in less than a day’s work.

We learned that there were plenty of productivity gains to be made regarding bringing your designs from XD into ProtoPie. There were little flexibility and many import options you didn’t need.

We went back to the drawing board and built a solution that gets you from design to interactive prototyping faster than before.

What we learned is that importing your designs should be straight-forward, fast, and easy—A no-fuss process.

Importing is a breeze. Import multiple artboards as scenes at once, and objects with the same layer hierarchy, positioning, and constraints as in Adobe XD.

The ProtoPie plugin for Adobe XD requires ProtoPie 5.3 or higher.

The new import experience is completely different from the previous one, which we now call the legacy Adobe XD import. Note: the legacy import is only available in ProtoPie 5.2 or lower.

Differences with the legacy Adobe XD import?

Import one or multiple artboards and objects.

Import text layers as SVG that can be converted to text layers.

Try the ProtoPie plugin for Adobe XD with this 

The perfect duo to have in your design stack

Having a design stack that empowers you to do your best work is half the battle.

With ProtoPie, add another level of realism to your already high-fidelity designs. Consider dynamic interactions involving conditions, formulas, and variables to prototype beyond a single scenario. Express your interaction design ideas with features like text input, camera, and media playback at your disposal.

With Adobe XD & ProtoPie, design and prototype like you always imagined.

ProtoPie 5.3—Other features and improvements

New device sizes, e.g., iPhone 12 & Google Pixel 5

Design like you always imagined with Adobe XD. Add a touch of magic with conditional and dynamic interactions in ProtoPie.

Adobe XD + ProtoPie: The Perfect Duo in Your Design Stack

The last but not least of our series of articles dedicated to the winners of ProtoPie’s very own Dribbble Playoff contest. Edmund Boey - Twilio’s senior visual designer graces us with his abundance of design experiences, ideas, and the story behind ‘Signal Pong’ (the video game prototype concept which raised him to the top).

Check out our previous interviews with the

Briandito Priambodo, who redesigned an app that has been a long-lasting pain point

& Ahmed Amr, the man who prototyped a prototyping tool with ProtoPie.

Working at the revolutionary company, Twilio

A veteran at Twilio, Edmund Boey describes himself as a “Senior Visual Designer at Twilio by day, moonlighting as a hacker of clothing, and a highly enthusiastic casual gamer living multiple virtual lives by night”, he jokes.

ProtoPie landed on Boey’s radar during the Dribbble contest while he was browsing the website, it was there he saw videos that introduced him to the nifty program. At that moment, he felt this urge and motivation to build the prototype that would ultimately land him in the finals. “Turns out I might’ve been a little overconfident, but I dug into the documentation, referenced existing prototypes, and found all the elements I needed for what I was trying to achieve,” he continues, “Building the prototype was actually pretty easy when I got the hang of it, allowing me to focus on the intersection between the emotional and functional aspects of a product.”

Twilio is a well-known cloud communications platform that virtualizes the world’s communications infrastructure through APIs that are simple enough for any developer to use. But what role does visual design play at Twilio? “Visual works best when it is able to create an emotional connection, to find a memorable way to deliver a message that’ll resonate with the audience.”

Boey further elaborates that there are quite a few visual designers at Twilio — each with different expertise and in different teams within the brand team. “Personally, I’ve worked on the 

 back in 2018, and designed the guidelines for interiors across our 26 offices. Right now I’m working on something unreleased yet that has me in front of my sewing machine a lot!” he emphasizes.

The senior designer emphasizes that regardless of the project that he and the team are working on, it is no secret that the developer’s needs take precedence on how they build their projects in order to serve them, “our role is to speak their language — whether it’s a spoken language or a programming language.”

So how does prototyping fit into the scheme of everything at Twilio? “Prototyping is built into the workflow of every project, simply to test if the product fits in the environment it was designed for. After countless strategy and content meetings, I still find aspects that have not been accounted for, where prototyping has been especially effective at identifying.” he continues.

 in 2018, I created a new experience with no existing framework as a reference. I could do a lot of research to learn from other similar experiences, but at the end of the day, I had to start designing prototypes before the hardware and user experience could even be implemented.”

Enthusiastic gamer who turned his idea into a highly interactive prototype

We must say that Edmund Boey’s video game concept really garnered the attention of the audience and judges, needless to say, we are all curious as to what sparked this design concept? “I do my best to approach every project from an unexpected non-traditional perspective. I wanted to create something delightful and interactive for the ProtoPie Dribbble contest, so I decided to make a game! I’m in the camp that video games can be one of the immersive mediums of art today, allowing the audience to experience a story rather than just reading or hearing about it.”

He explains more in detail that his submission is a part of a larger idea he has for reimagining the 

 as a mobile app. “The Hackpack is a piece of physical swag that used to be a part of 

’s annual customer conference. There have been four versions of them, but the one thing that all have in common was that they’re always hackable by developers!” he emphasizes.

“With the pandemic affecting conferences worldwide and Signal being virtual this year, I was exploring a Hackpack that everyone could have access to from the safety of their home. While the Hackpack as a whole is a gaming experience, I redesigned 

 for my submission in the ProtoPie Dribbble contest as it was my favorite of the activities I witnessed at Signal 2018.” He explained.

From work influences to the latest trends

Boey has worked on a number of projects that have yielded amazing results. Curious to say the least, we asked the designer to describe his work ethics and influences, “My work is exploratory, I always try to experiment with new mediums and concepts. I never subscribe to a distinct style and don’t feel the need to do so. This has come in especially useful when I worked in advertising agencies and design studios with multiple clients; it allows me to adopt and then evolve existing visual styles.”

Boey also pointed out that the consistent goal for his work is to be delightful, especially for the specific audience he is designing for. “I love it when someone discovers an Easter egg or reference in my work that speaks directly to them. I always try to fully immerse myself in the audiences’ world and find inspiration there, interviewing them for their experiences, or temporarily adopting their personas if I can.”

He went on to explain that outside of the office, inspiration strikes him in any form. It is becoming more frequent., especially with traveling and “to see new cities and countries, to see what the communication and design norms are is totally fascinating. I’m often surprised how differently grocery stores around the world approach packaging and labeling from the products to signage.” He continues, “wandering is also really exciting for me; I do find that in nature on a hike or trail run allows me to better fully turn off parts of my mind to explore and start noticing interesting things in the abstract.”

Boey has proved himself to be an experienced visual designer who possesses great abilities to turn ideas into reality. He believes that a good visual design prototype should represent the final product and its functionality, as well as provide an emotional impact on the user. “As a visual designer I’m focused on how the product makes the user feel, and it can be very difficult to measure how much of an emotional connection I can create. By using a prototype I’m able to put something in front of a user, and observe their interactions, see where they run into obstacles and where they might find an element that connects with them.” He explained

With the constant change in the world which is moving at a fast pace, we believe that it poses challenges for designers to stay up to date with the latest design trends. So how does the Twilio designer keep up? “Whenever I’m looking for inspiration I start scrolling Dribbble and Instagram. I also have a good group of fellow designers that I chat with regularly and we share cool things that catch our eye. I’m lucky that I know designers of many different disciplines, which really helps broaden the range of work I’d be exposed to on my own.”

Augmented and virtual reality as the future of design

Last but not least of the questions for today’s interview, What would you say will be the future of design? Or the next big thing and why?

With an ever-changing environment, it’s hard to pinpoint what the future will look like for design. Boey believes that “the future of design is in augmented and virtual reality, and the global pandemic we’re in right now has been a catalyst for me and many others to dive deeper into virtual worlds while we’re all stuck at home.” Needless to say “It’d be hard for me to predict the future of design, I couldn’t imagine the things I’m designing today when I was still in school; new facets of design are constantly being created.”

Meet Edmund Boey, a senior visual designer at Twilio, and find out how he put his passion for gaming to his advantage in the ProtoPie Dribbble Playoff.

From a Passion for Gaming to Prototyping His Own Game

The past July, ProtoPie held its first Dribbble Playoff contest in which many designers across the world participated showing their greatest prototyping skills. After an intense judging period, 

Khonok Lee was crowned as the Grand Prize Winner. 

However, Khonok Lee was not the only one who proved to be a worthy challenge, three designers raised up among the contestants for their impressive prototypes.

We had the pleasure to chat with one of the runners-up, Briandito Priambodo, a senior designer in an online travel company called Wego, located in sunny Singapore.

Although his first encounter with ProtoPie was in 2017, it wasn’t until early 2018 while exploring various prototyping tools that he really delved into the ProtoPie world and experimented with all the features. “I wanted to find a tool that can help me improve my workflow, and also is widely used by other companies too. So I don’t have to learn different tools,” Briandito mentions. After spending 2 weeks on each software to create a couple of side projects.., fast forward a few months Briandito found himself juggling between ProtoPie and Framer as both fitted his workflow. “I ended up subscribing to Framer, the only reason was that a lot of companies were into Framer back then. I think ProtoPie was still new, so not a lot of people have heard of it yet.”

Curious to know why Briandito didn’t subscribe post-trial, our team reached out to the senior designer with a follow-up survey. Receiving comprehensive feedback and half-jokingly said: 

“Ps. If you give me a 50% discount for a year then I promise you I’ll buy the license. No harm in asking, right?”

. And just like that, a beautiful collaboration began between ProtoPie and Briandito which resulted in the creation of 

 “From there on, my go-to prototyping tool is ProtoPie. The lesson of the story: ask, and you shall receive,” he says.

So how does ProtoPie fit seamlessly into the senior designer’s workflow? “I am using Sketch and working with Protopie… My team and I had no hassle creating prototypes to fulfill our needs. If we get stuck and need to learn something, there’s always the ProtoPie documentation to the rescue!”

Product design has been widely used in several industries and has a broad definition, but Briandito simply defines it as: “In general, I think of design as problem-solving, product design is using a product as the medium to help people solve their problems.” So how does it contribute to the success of Wego? “The core of our services depends on our websites and mobile apps. So product design is essential in our line of work. Product design is needed to help us build products that are simple, usable, and helpful.”

Briandito’s design process consists of 4 steps: Find the problem, validate the problem, find solutions, and validate those solutions. In which, ProtoPie helps him in two important aspects, user testing, as well as to present and sell his ideas to stakeholders. “With ProtoPie I can mimic real-app interactions and do proper usability tests without having to worry about the prototype being janky or unusable,” says Briandito. “On the other hand, it is easier to explain concepts and ideas when I am presenting a prototype. I like to give the stakeholders some time to play around with my prototype — most of the time, they’ll buy the idea.”

Regarding the characteristics of any good prototypes, he considers that it doesn’t have to behave like a real app, or designed with some nice and fancy interactions but should help you move closer to your goal. “It could be getting user feedback, or convincing stakeholders, or even as simple as proving concepts. Basically, it should help you make better products.”

Dribbble: Wireframe explorations for news app

Briandito chose to enter the ProtoPie 5.0 Playoff contest by redesigning the classic, widely used, and well-known, email app. Inspiration struck him with nothing more than his own struggles with emails, “ I’ve always had trouble with emails. The emails that I think are important are basically from the same senders. So I thought, let’s take a stab at this. What if there’s a smart email app that collects the emails that users usually read?”

Amazingly he pulled out his idea from scratch to create an impressive and workable interaction that placed him among the winners, just a few days prior to the deadline. Briandito says, “To be honest, it was not a well-planned design project. I started the project just around 2 days before the deadline. It was more like a spurt of ideas that came all of a sudden — I didn’t even plan to make the card interaction that way.”

A future where many mundane and tedious task can be taken care of by just speaking seems very plausible, “I think voice interaction would be used more widely in the future. People have already utilized Alexa & Google Assistant to control their homes and if you are using an Apple Watch, Siri is already on your wrist.”

Briandito also mentions the possibility where the 3D apps that integrate 3D models would become common, “so designers need to upgrade their skills and normalize designing 3D models in their process. It would be great if prototyping tools work with 3D models right out of the box. The reason is that in the future I think people would use a lot of Augmented Reality and Virtual Reality products daily. And also because flat/2D illustrations are starting to get boring."

Meet Briandito Priambodo and learn how he views product design and redesigned something that’s been a long-lasting pain point.

Reimagining, Redesigning & Reinventing Email App Interactions

Those times that people only interact with their digital products by touches, presses, and gestures are long gone. Technologies such as haptic feedback, sensors, audio & video, text input, camera, etc. have made the experience of interacting with products already much richer and more immersive.

Another technology that’s been making its way into our daily lives is voice technology–Google Assistant is already available on more than 1 billion devices while Facebook is working on its own voice assistant. With this increasing importance of voice across the spectrum of digital products, we continue down the path that we have been on since day 1: empowering designers to free their ideas with the highest expressiveness.

Until today, there was no way without code or bugging your engineers to easily add voice to your already very realistic prototypes. With the 

, you can finally combine interaction design and conversation design.

It’s very easy. Add voice to your prototypes in the same way you have been making interactions already. Hence, we are introducing 1 new trigger and 2 new responses for you to use.

Prototypes can listen to what you say, turn it into text, and trigger responses. This is what we call speech-to-text. Then there’s the opposite, text-to-speech. Prototypes would be able to “speak”, as a response, by reading text out loud.

There are 2 interaction pieces for speech-to-text.

By default, a prototype does not pick up any speech. Use the Listen response to make the prototype start listening to any speech. To make the prototype stop listening to speech, just use the same response.

Make interactions in which responses are triggered based on the actual incoming speech using the Voice Command trigger.

You can set the Voice Command trigger to work either while someone is speaking or after someone finished speaking. Optionally–this is where the real fun starts–include and exclude phrases as commands.

In the example above, once you tap the oval, the prototype starts listening. When someone says “ProtoPie” or “Prototyping Tool” while speaking, the opacity of the ProtoPie logo would change.

Speech-to-text interactions work in/on the following:

ProtoPie Cloud (Google Chrome on desktop & Android)

There is one other interaction piece we introduced in ProtoPie 5.1.

You can make your prototype “speak” by reading a text out loud.

Editorial

Prototyping for Voice - Blending Interaction & Conversation Design

Latest posts

Touchscreen Prototyping in a Way You Haven’t Before

How to Maximize Your Prototyping While Working Remotely