WHY WE'RE DESIGNING WITH DATA
At Topp we believe the earlier real data is integrated into the design process, the better the process and result will be. In early design work we find that an interactive prototype helps answering many questions, but also serves as a catalyst for uncovering new directions and making key decisions.
In a growing number of products today, we see that core elements of the experience are tied to real world physicality and data or cloud services - of course, these are widely recognised as pillars in the Internet of Things.
Traditionally data and physical interactions have been difficult to work with, often requiring the availability of early hardware or by constructing mockup data. However, to achieve quick iterations and a higher fidelity experiences for projects involving data, sensors, cloud, and other things typically unavailable to designers early on in projects, we've developed a tool called Noodl to help support a better way of working. We're using Noodl as a foundational tool when we hack our night light.
HACKING SPÖKA TO PROTOTYPE IOT EXPERIENCES
During a one day workshop, Topp set out to try to see how quickly we could create a platform for experimenting with design and data. The idea we had was to take an existing product and retrofit it with IoT capabilities.
We found the IKEA Spöka (Swedish for ghost) night light, a wonderfully playful kid’s lamp, to be ideal for this exercise. With all parts of the experience open for iteration we set out to see how a team of designers and prototypers could hack the Spöka lamp.
The team built a connected system with this real world lamp. The lamp reacts to the environment around it through sound, motion, and light with a real app to monitor and control it.
Physical movement controls the color of the lamp and the app controls light intensity. We ended up having a platform for a product that could be used as a baby monitor, home lighting control and infinite possibilities to build more experiences around it.
What we found was that with this platform for end to end rapid prototyping, opening up for a new creativity and speed in design and prototyping iterations, we could now work with experiences extending far from the screen and pixel realm, making full use of cloud and IoT data. Having the ability to prototype with real physicality (interactions, data input and output) makes a huge difference to traditional tools and methods.
Any part of the experience is now open for innovation. Feel free to try it yourself, play around with it and improve it! We´d love to see your hack.
If you're interested in other thoughts about data, check out another initiative of ours the Design + Data Lab.
INSTRUCTIONS: DO THE HACK YOURSELF!
SETTING THE STAGE
Wouldn’t it be great if designers could sketch on the complete IoT system, rather than on the individual parts? Build their own prototypes, end-to-end, seamlessly working with both screen and physical interactions? Having the ability to use both static data and real world, live data sets from cloud services and IoT devices?
At Topp we use Noodl to build and prototype UI/UX. Recently we added functionality to Noodl to easy connectivity to both cloud data (through the REST API node) and to IoT clouds (through MQTT).
Knowing that data and contextual design are key elements to IoT experiences, we wanted to challenge the Noodl tooling and way of working in an open ended IoT retro fit hacking workshop.
What could a creative team do in less than a day that includes hardware, cloud data and design? Starting with an IKEA Spöka night light (that was quickly disassembled by the team), we started looking at different hands-on “what if” exercises:
- What if the lamp knew the weather forecast for this location?
- What if the lamp was a tactile controller for other lamps in the house?
- What if the lamp was able to reflect the situation in the room (sound, light levels and movement) and provide local feedback and remote awareness (a phone app)?
Moving forward we decided to build the last alternative. To make this happen a couple of key technology factors were needed.
1 - DECIDE ON THE ARCHITECTURE
A key function for this hack is to have the lamp and the phone connected to an IoT cloud broker. Bluetooth or other non-routable communications would not work with remote presence, so by using Wifi and a public broker we could build a prototype that also works with multiple clients in a true IoT fashion.
This sounds quite complex but since Noodl has support for MQTT we knew we could keep the programming effort to a minimum.
2 - CHOOSE HARDWARE
Looking at hardware, the market is full of viable alternatives - it’s only a matter of picking the right variant that meets the needs for inputs, outputs and connectivity. Since we needed analog inputs for some of the sensors and Wifi for connection the choice fell on an Arduino MKR1000.
3 - CONNECT THE COMPONENTS
Using existing sensor break-out boards and pre built software libraries we could easily set up an Arduino node that acted as an I/O proxy - reading and writing the IoT cloud data to the hardware.
4 - A SIMPLE ARDUINO SKETCH
Since we use well established components we could quickly get this running with Arduino. The idea with the Arduino program is that it holds no logic, it is just a transparent I/O proxy. We do the rest in Noodl. Basically, we sample the sensor data and send it to the cloud every 500 ms. We also subscribe to an MQTT topic for the RGB led ring.
The code can be downloaded here.
5 - DESIGNING THE EXPERIENCE
Now, with sensor data and actuators available in Noodl, we started sketching non-screen interaction design behaviours, like letting rotation angle controlling the color of the LED array. Since we could do all this without traditional software development we could easily try and tweak different variations.
Having access to ambient light level, ambient sound level and 3-axis movement as inputs gave us the possibilities to toy with how the lamp could react to it’s environment. The accelerometer made it possible get movement and orientation of the the lamp.
This became the platform for our design iterations.
The availability of this in combination with a highly design driven process, allowed us to (in less than a day) try out connecting various data sources, such as using cloud weather data as one of the design parameters.
THE HARDWARE SHOPPING LIST
Arduino MKR 1000 https://store.arduino.cc/product/GBX00004
Microphone module https://www.adafruit.com/products/1063
RGB LED array https://www.adafruit.com/products/1643
Photo resistor https://www.adafruit.com/products/161
Small bread board https://www.adafruit.com/products/64
You will also need a resistor to work with the photo resistor, something like this should do the trick.
Here are links to the Noodl project and Arduino code. Please note that we recently updated a new Noodl version, make sure it includes built-in MQTT.
The Noodl project is here.
The Arduino project is here.