On my birthday in 2009, I bought myself one of the first IoT consumer devices – a cute electronic rabbit, called the Nabaztag.
It was brilliant – it could rotate its ears, read out messages, tell the weather and air quality forecast, play music, “sniff“ and recognize RFID tags, blink lights, and even act on voice commands. I consider the Nabaztag to be the great-grandfather of Alexa and Cortana.
This is part of a larger series, you might want to consider reading parts one and two first.
As promised, I will now discuss the parts of the platform in more detail – starting with the server.
The main job of the server is to connect the prototype’s HTML and the ESP devices via MQTT and WebSockets. In the first iteration, I used Node.js and Express to write it, resulting in about 600 lines of code. But since I am a UX designer and not a developer it’s probably best when I don’t write (a lot of) code.
The source code felt a bit crude and overly complex to me. It was hard for someone with little coding experience to get how the server worked. And that made maintaining and changing it hard for regular folks.
Here is the link to part one of this series, you might want to start there.
Based on the before stated principles and requirements for the prototyping platform I came up with the following architecture:
On the left, you see the web server where the HTML of the Prototyping tool will be stored. On the right, the different hardware components (sensors and actuators, e.g. buttons, rotary encoders, LEDs) are connected to ESP8266 microcontrollers. In broad terms, ESPs are similar to Arduinos but also offer WiFi connectivity for a low price. In between sits a server to broker and translate the information coming from both sides.
This is the first article of a series (parts: two and three), as this topic needs some more space and time. I have about half of the content written, so I will post updates as I go along.
Even though the Internet of Things (IoT) is a hot topic, with today’s tools it is really hard to prototype and test IoT products or services beforehand. Very few tools allow us to use hardware components (like buttons or knobs) together with software user interfaces (UIs). Most software prototyping tools are closed systems offering no or only very little outside connectivity. Most of them only allow us to link screens together and that’s about it.
Plus, hardware prototyping is more complex than software prototyping: In addition to software interfaces, you need to know something about hardware, of course. Programming skills are needed if you want to tinker with them. And some knowledge about IoT protocols and platforms is helpful, too. These are skills very few user experience (UX) designers possess since a lot of them focus on the design of digital-only products and services. Just google the evergreen argument whether UX designers should be able to code.
I thought that this was unfortunate since prototyping is such a crucial activity for creating successful products or services. We need to make your ideas tangible, test them with users and evaluate their feasibility before starting to build the real thing. And since I have some experience with software prototyping tools and tinkering with hardware I started looking for a way to create IoT prototypes.