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
- Current version:
- Supports 32 components
- made it to #4 on hackernews
- won a core77 design award
- Go to project website ↱
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.
Touchpoints
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
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.
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.
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.
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.