building a product

blokdots creates software that enables hardware prototyping for everyone.

My Role

I am one of the co-founders of blokdots, a company which started as my bachelor thesis 5 years ago.

My focus lies on design — and I’m also involved in development and product strategy.

Project ViewLive View
blokdots in use
[1] blokdots in use

TL;DR

blokdots is an intuitive software used for building interactive hardware prototypes without having to write a line of code.

Journey

It all started in 2017

Designers often cannot quickly express their ideas in hardware prototypes, since the hurdle for sketching in hardware can be daunting.

What started as a project idea eventually developed into a full-scale product. I presented blokdots at interaction design meet-ups and pitched the idea to companies. I faced a lot of challenges before getting to the current stage of the company: from development and strategy, to bringing it to the end-user.

Since the start in the summer of 2017, a lot has happened. Together with my team, I have created a highly functional software. We constantly test with users and collaborate with partners like ProtoPie to provide the best hardware prototyping tool for creating connected experiences.

Facts

BA Thesis “blokdots”
2017/07
Christoph joined
2018/08
Alpha release v0.1.0
2018/12
Beta release v0.1.1
2019/03
Figma plugin release v0.3.0
2020/03
Marcus joined
2020/12
Windows release v0.4.0
2021/02
ProtoPie integration release v0.4.8
2022/02
Refactor release v0.5.0
2022/05
2018
2019
2020
2021
2022

Our Core

Design

Design is a core-feature, which is showcased in the UX and UI design of blokdots. Every screen of the product, website, and asset of the company is designed with a great attention to detail. This can be seen across various touchpoints of blokdots down to its microinteractions, while always having the user in mind.

the blokdots App

Touchpoints

App
Website
Documentation

The core product is the application itself, which developed over the years from the initial design of my thesis.

The general monochrome styling allows the user to focus on the program itself. Color-coded dropdowns help distinguish what connections have been set up. The visual component icons allow for quick recognition of the connections without taking too much focus away from relevant content.

Design Details

Cards
Live Slot
Icons

The programming happens via cards. To make the connections as understandable as possible, every dropdown is color-coded to match the required input value. The bottom of the card displays the components that are selected, using clearly distinguishable icons.

For mapping, we worked on a simple understandable visualization slider, so that the users better understand the correlation between the components.

If this then that card
[1] If this then that card
mapping card
[2] mapping card

Development

Working With Code

Everything is handcrafted by my team and me. We learned a lot about product development and shipping. Since our team never lived in the same city and was building blokdots outside of our day jobs, the product was developed asynchronously and remotely. Building on state-of-the-art technologies and tools, our project management is set up to support our lives without being disruptive. With regular check-ins, divided tasks, and diligent use of GitHub, this turned out to be a wonderful journey for all of us.

I personally learned a lot about developing with React and Redux, code-signing, and shipping. Since this project started, I fell in love with GitHub — not only as a great tool for code, but also for project management.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Generated code from the blokdots app // ---- Setup the board ---- var five = require("johnny-five"); var board = new five.Board(); // -- Setup vars var led; // ---- IFTTT ---- // Project Start Signal function ProjectStartSignalReaction() { led.blink(); setTimeout(function() { led.stop().off() }, 5000) } // ---- Run ---- board.on('ready', function() { // -- Setup components led = new five.Led(2); // -- Run reaction when project starts // Project Start Signal ProjectStartSignalReaction() }); // ---- Stop ---- function stop() { // Remove event listeners if (led && led._events) { led.removeAllListeners(); } }
Ideation
[1] Ideation
A participant controlling their hardware using a ProtoPie prototype
[2] A participant controlling their hardware using a ProtoPie prototype

Workshops

Hands-on

We want everyone to sketch with hardware. In our workshops, participants start with no coding background. By the end of the day, blokdots enables them to bring their own ideas to life.

Our approachable solution gives them a complete toolkit at hand: including hardware, development, and even software prototyping. Users can go from zero to creating their own robot prototype, controlled from their phone, in just one day.

Learn more about blokdots by visiting the

bachelor thesis

How It Started

blokdots started as my bachelor thesis at HfG Schwäbisch Gmünd. I discovered that fellow students took days or even weeks to create a simple blinking LED prototype, only for them to realize it didn’t fit their project. They lost a lot of valuable time due to that.

Often, designers need to learn the basics of electronics, soldering, and programming, to make use of tools like Arduinos. This can be a big hurdle for someone who has never used any of those elements before.

In my thesis, I wanted to bridge the gap between between design and physical computing. This led to creating a hardware toolkit, consisting of simple-to-use interfaces and plug-and-play components, along with the software interface. The result was a working hardware prototype with manually created PCBs and a use-case software demo.

The hardware prototype
[1] The hardware prototype
The original PCBs
[2] The original PCBs