How To Create Hardware & Software Integrated Prototypes

blokdots is a no-code software that lets you create interactive hardware prototypes easily. As the brainchild of designers, its mission is to help everyone envision their ideas and find solutions to problems that can change the world—even those without engineering or programming knowledge.

Sounds pretty great, right?

And it gets even better, as blokdots integrates with ProtoPie to bring your prototyping to the next level with hardware-software integration. Now, it is easier than ever to connect hardware to interactions with apps and services.

In our recent webinar, we heard from Olivier Brückner and Marcus Paeschke from blokdots, who spoke about how you can use blokdots and ProtoPie together to build prototypes for the connected future.

Sketching with hardware—as easy as cardboard.

To create great connected products, you need to get external feedback through hardware-software testing. But, today’s world has made it more challenging to prototype interactions between devices.

If you are a designer or part of a team working on the user experience of connected products, you may have experienced that:

• You work with products and hardware that are becoming more complex as time goes on.
• You don’t have access to the necessary expertise, lab space, or materials for hardware prototyping.
• You don’t have the time or resources to learn how to code or tinker with electronics.

There may be existing hardware prototyping tools like Arduino, but making Arduino hardware prototypes requires code and a basic understanding of electrical engineering. That means you need to hire developers, which of course, takes a lot of time and money.

Now, you don’t have to, as building interactive hardware prototypes with blokdots is as simple as making a cardboard model.

For some, that might ring a bell. You know how we say that ProtoPie makes building high-fidelity prototypes as easy as Pie?

Basically, blokdots is to hardware prototyping what ProtoPie is to software prototyping.

Both of these tools place the power of realistic prototyping into the hands of designers, allowing you to test elaborate concepts without programming knowledge.

And with the blokdots-ProtoPie integration, you can excel at hardware-software prototyping as easy as cardboard and Pie.

How blokdots works

So, how does blokdots actually succeed at simplifying hardware prototyping? Here is an overview of the three major steps.

1. Plug-and-Play Hardware

blokdots builds on the Grove System by Seeed Studio, which enables a simple solution to connecting hardware without manual wiring.

As you can see in the image below, there are small elements with a plug-and-play connection that allows you to use the hardware right away.

2. Simple-to-Use Software

The main part of blokdots is, of course, the software.

blokdots uses simple logic clauses that are easy to understand. Even if you are a total beginner who has never coded before, you will be able to build hardware sketches.

3. Seamless Extendability

blokdots is able to extend to all the tools you already know and love.

This makes it easy to connect your hardware to your user interface prototypes—like the ones you create with ProtoPie. Later on, you may even go into more elaborate sketches and connect them with WebSockets.

What can you build with blokdots?

Let’s look at the example of a scenario introduced in the webinar, which illustrates how you can use blokdots in practice.

Say hi to Great Products Studio, Inc, a company that has decided to build a CO2 sensor because:

• If COVID-19 has taught us anything, it’s that good air quality is really important for our health.
• One way to approximate air quality and whether you need to ventilate indoor spaces is to measure the CO2 content in the air.

You can iterate a design for such a CO2 sensor using blokdots. Here is how you get it set up:

1. Connect the CO2 sensor by plugging in the cable and adding it in the software.
2. Add a LCD display, which can tell the user if the air quality is good, a little bad or if the room needs to be ventilated immediately. By plugging it in with a cable, the display can grab data from the sensor.
3. Add colors, which allows the user to take the information at a glance instead of having to struggle to read information on the display.
4. Connecting a buzzer by adding an audio alert, which means the prototype can beep when the CO2 goes above a critical level.
5. Connecting a motion sensor, as having such an audio alert only makes sense if someone is already in the room.
6. Adding a servo motor connected to the window, which means the hardware itself can proactively manage air quality.

These are some of ways you can customize your products using blokdots.

However, as mentioned earlier, user testing and market validation is essential to creating good products that your target users will love. Which is what everyone wants, right?

So, for example, if you find out by talking to people in the field that they actually find the buzzer sound annoying, that would be something to fix in later iterations.

That’s what blokdots makes possible— sketching and testing hardware interactions to let you define your product.

But, that is only level one. Let’s bring it to the next level.

How does blokdots integrate with ProtoPie?

With blokdots and ProtoPie, you can connect hardware to interactions with apps and services.

By connected devices, we generally mean smart home appliances and other IoT devices.

There are two different integrations with blokdots and ProtoPie:

1. ProtoPie Connect: The Pro solution for orchestrating multiple prototypes with external hardware and other systems.
2. ProtoPie Player integration: Using the ProtoPie player on your mobile device, you can talk directly to blokdots. This one is available with the free version of ProtoPie.

Thinking back to the scenario from before, what can you do with ProtoPie?

Let’s imagine that you had a market evaluation and realize that the consumer market for this type of air quality product is already saturated. But, you discover there is a big opportunity in smart building management for larger offices.

Then using ProtoPie, you can create a dashboard and test it with facility managers. After making a design, you can put that into ProtoPie and add interactions and small animations to really bring it to life.

You can add the ProtoPie integration to blokdots and use a QR code to allow sensor data to flow easily between the two tools. This gives you the ability to work with realistic data in a functional prototype without writing any line of code.

After more rounds of user testing, you can adjust the iterations easily. You can also add new features by reusing the same prototype connected to the hardware from before.

Prototype for the connected future with ProtoPie

Tools like blokdots and ProtoPie are transforming the future of prototyping. Discover for yourself how we help you make better connected products here!