• Build a minimalistic platform for ongoing IoT experiments
• Prototype interactions between people, things and software
• Solve a real world problem in our office with the help of this platform
• Learn along the way

This is what we came up with …

The result: PeeNode  – A JeeNode powered toilet laser

Click here to view the embedded video.

PeeNode is a system we’ve set up in our office space. It indicates if the bathroom is currently occupied. The status of the toilet is visualized via laser. Yes, a real laser!

Behind the scenes: Goals, insights and findings

In order to be able to reuse the code and to build a simple platform that would allow us further experiments we set ourself a few design goals:

• Use JeeNode modules for simple wireless communication
• Allow realtime interactivity between products, sensors, native apps and web applications
• Allow rapid mobile prototyping with HTML5 front-ends
• Leverage the most interesting and exciting web frameworks in order to build a framework that’s actually fun to prototype with

Insight: Our favorite tools

Meet node.js – A multipurpose toolkit for network applications

node.js is one of the current rising stars of the Open Source web community. It’s a framework that allows you to create scalable web applications in Javascript that can easily be extended by a whole range of contributed modules. Matthias is actually in love with it and might write another article on this topic.

Pusher – The glue for realtime applications

Using node.js enables you to use a bunch of great realtime frameworks – see socket.io for a rock-solid example. Nevertheless we decided  to leverage a service called Pusher as our realtime platform. It is a pre-built and solid realtime service one can build upon. It takes advantage of the new Websocket API to open up an ongoing connection with web frontends. This programming model allows us to keep a persistent connection between intefaces and to trigger realtime events.

Mongodb – It’s like a database for human beings

As Javascript is the main weapon of choice and the consistent language from backend to frontend we decided to extend this design conecpt to the database. Mongodb is a NoSQL database that natively talks Javascript and seemed like a perfect fit for us.

To be continued …

Now that we have a setup that we can use to build further experiments we’ll keep on evolving the platform. Please let us know what you think about our findings so far – we’re always curious about having a chat. Last but not least we’d like to thank Max Williams from Pusher for the instant beta-support, Jean-Claude Wippler for creating the great JeeNode devices and providing the easy-to-use RF12 library and Alex of tinkerlog for helping us to fight our way through converting low level data-types like ints and bytes.

Team – We created this thing together

• Martin (Chief of soldering department and JeeNode lover)
• Matthias (Head of backend fumbling and Javascript weirdo)
• Sven (Front end artist and pixel perfectionist)
• Jonas (Musical meastro and retro-keyboard collector)

Interaction designers develop our digital everyday life. They concept, sketch and create new possibilities of interaction, which are evaluated with functional and technical prototypes. The book “Prototyping Interfaces – Interactive Sketches with VVVV” covers the applied handling of interactive sketches with the visual programming language VVVV. The book is the result of the bachelor thesis by Jan Barth, Roman Stefan Grasy, Mark Lukas and myself. As three of us recently became part of the Intuity team, we wanted to take the chance to introduce ourselfs and to share the outcome of our project.

Examples (Video)

Click here to view the embedded video.

Chapter I: Theory

The book is divided into two main chapters, a theoretical and a practical part. The theoretical part concerns the definition and the meaning of the term “prototype” in the design process. Furthermore, the theoretical part creates the definition of an “interactive sketch” and how we as designer can use technology creatively. The theoretical part is completed by various interviews in which design agencies, research institutes and artists give an insight in their design process and explain single projects based on
the prototypes used.

Chapter II: In practice

The practical part of the book is divided into the basics of the visual programming language VVVV and how to control different electronic components with Arduino
and VVVV. Beginning from the use of different sensors and actuators to new tracking technologies like the xBox Kinect, various examples are explained within a wide range of tutorials.

Website

In addition to the book, a website is launched where the user finds the patches for every single example described in the book. Also the website provides technical support and a playground which can be used to upload and share private projects.

Contact

Became curious? Then drop a line to hello@prototypinginterfaces.com. You can also visit www.prototypinginterfaces.com for further information or follow the project on Twitter.

Bachelor Thesis
University of Applied Sciences Schwäbisch Gmünd
Winter term 2011 / 2012

Students
Jan Barth
Roman Stefan Grasy
Mark Lukas
Markus Lorenz Schilling

Academics
Prof. Hartmut Bohnacker
Prof. Ralf Dringenberg

Thanks.
Finally we´d like to say thanks to everyone involved in the project and especially to Intuity who kindly gave permission to make this guest entry on their blog.

Ever wanted to connect low cost devices in realtime wirelessly to the Internet or simply building a sensor network? We too! This is why we started a little research initiative on possible solutions and their dis/advantages. Since this aim seems to be like a big piece of cake, we decided to slice it into smaller bits and bytes – so the first thing we wanted to get familiar with was connectivity.

As a starting point, the Arduino world is still a good platform to have a fast and cheap setup including the variety of technologies out there.
Therefore we took a closer look on well known radio-modules like XBee and RFM12B, Bluetooth modems, the Ethernet shield and lastly Sparkfun’s WiFly shield.

Our insights and findings

Since Ethernet is bound to cables and the WiFly shield library couldn’t convince with stability, we decided to stop following these paths. Another reasons for killing especially the Wifi solution was pricing (around $90) and its high power consumption (even though the new WiFly version has a sleep-mode function). For sure there are cheaper modules out there, but still the fact that every sensor needs to obtain an IP address was quite scary – especially if you think about the low powered ATmega-fact.

Bluetooth is easy to implement and its range can go up to 100 meters on class 1 standard, but the modules are still a bit too expensive – around $40.

We stick to radio with two options left: the XBee and RFM12B. XBee is quite well known and provides a wide range of different modules and antenna options. On the other side the RFM12B offers a similar functionality including a lower price ($7).

The winner is…

Finally, the perfect match is called JeeNode by JeeLabs – a low cost combination of RFM12B and a microcontroller. Moreover the JeeNode is relatively cheap (18,50 Euros) and provides a very nice library for the RFM12B module. Since the JeeNode uses the ATmega328p, you can easily upload your Arduino sketch to it. Note that there is a demo sketch that enables communication with fs20-devices for home automation.

In terms of power consumption the JeeNode Micro archived some very astonishing results with 75 days uptime just powered by a little coin cell battery.

Assembled JeeNode v6

Ongoing thoughts and next steps

The connection between two JeeNodes worked out smoothly. But still the modules are not connected to the internet nor a proper sensor network is established. Anyways, we are looking forward to mix some promising approaches like websockets and node.js to come up with a nice solution to send and receive data from low cost and low powered devices.

Things are looking very good so far – so stay tuned, we’ll keep you updated!

corpus.e lightbeam This Software helps customers finding the perfect shoe

The advantages of mass customisation are obvious. Combining the approved qualities of mass production with the customer’s demand for individuality leads necessarily to better products and therefore to customer satisfaction. However, looking at some well known mass customisation failures (e.g. the custom computer) it might not work as simple as it seems. The basic recipe for mass customisation consists only of two main ingredients. But they need to be chosen carefully.

First, it is fundamental to understand the customers needs. Offering too many choices will ask too much of the customer. The alleged advantage of customisation choices causes confusion and will finally lead to frustration. The clue is to offer only a manageable variety of customisation choices. But it is crucial that these are the ones most customers are looking for.
During a cooperative project with corpus.e, a Stuttgart based startup company specialised in precise feet measuring and shoe customisation, we tried to address this issue. We found that it is essential to create a platform serving both the needs of customers as much as the retailers’ objectives are fulfilled. The project turned out to be quite a success, balancing needs on the one hand and the seller’s abilities on the other.
What we did sounds actually quite simple. Corpus.e is able to measure feet and shoes very precisely with their in house engineered foot scanner and shoe scanner. We developed and designed the UI of the scanner’s software which is used in shoe retailers and sports shops. The software is easy enough to be shown to the customers by the staff but also delivers all necessary settings needed to find a stock shoe that fits perfectly to the customer’s feet. So to speak it isn’t a custom shoe but a bullet proof custom way to find a shoe that really fits. Of course the scanning data is precise enough to manufacture real custom shoes. And that is what corpus.e does together with professional athletes at Ertl Renz using the same software.

The second and final ingredient is a well designed and flexible manufacturing process. It enables a production of customised products with an efficiency comparable to mass production. Successful examples often apply a system based on modularity. Companies like “mymuesli” (modular production line) or “Freitag” are role models for implementing such an approach to their business models. They achieved to offer custom products by adjusting the right parameters. At Freitag for example the bag models do not change but you can choose the fabric (which is as is known truck tarps) it is made of which gives the bags their unique and individual style.

In the world of product customisation, business models as well as production technology evolve with incredible pace. Mass Customisation has just started as a method of efficient production and distribution, but the trend shows that in the not too far future it will feel normal to us. The growing demand for individuality in industrial products already exists today and will be continue to be the driving force.

And who wouldn’t buy into the idea of that affordable, yet precisely tailored outfit fitting like a glove?

The Illusion of Life by Frank Thomas and Ollie Johnston

Since publishing the article about applying emotions to interaction design I’ve been fascinated by this subject, tackling questions like: How do you design animations that trigger positive emotions? What does it take to create a transition that feels vivid and is fun to use? Today I would like to dig a little deeper into the subject of using animations to tell engaging stories. We would like to share our insights with you as well as a little bit of code: an animate.css powered plugin for jQuery that you can try and download down below.

1. Learning from Disney

Where can we find inspiration and principles that we can build upon when designing movement and behaviour? The book The Illusion of Life written by two of the greatest animators at Disney (Frank Thomas and Ollie Johnston) is a good starting point to answer these questions. While flipping through its pages I realized that actually a huge part of an interaction designer’s job is to create the illusion of life. Of course an interface needs to be usable – that’s the rational part to it. But it will only captivate us if it talks to us in a natural manner –it should feel alive. According to William F. Allmann our brain is hard wired to detect human behaviour and emotions everywhere around us. That’s because they help us to determine the intentions of our counterpart. Thomas and Johnston documented 12 principles of animation. Following their paths Johannes Tonollo did a great job in his thesis Meaningful Transtions in which he applied these principles to the context of interaction and transition design. To sum up the insights from both sources I’ve created a little check list for designing vivid UI animations:

• Slow in Slow out a.k.a. Easing:
  Real world objects don’t just stop at once. Let things ease in and out, let them bounce back. Check Robert Penner’s equations that have become a defacto standard in most programming environments.
• Squash and Stretch:
  Real word objects are not rigid, they’re flexible and they’re being distorted while moving.
• Arcs a.k.a. Paths:
  Real world objects don’t move on straight lines, let things move along paths.
• Anticipation:
  Real world objects don’t just start a movement immediatelly, for example you need to bend your knees before jumping. Indicate that a movement will start by a little animation before you actually start the main action.
• Timing
  This is the most important factor when designing animations, yet there’s no standard. Keep transitions short – don’t let people wait too long. But don’t shorten the animation too much, otherwise you’ll get a unrealistic behaviour. Finding the right timing for your transition involves a lot of testing and finetuning.
• Performance, costs and focus
  In contrast to a Disney movie the “special effects budget” is usually not that huge when creating interfaces. Also the device performance imposes limitations when finetuning animations. Use these constraints to focus on the important animations that support the story of your application.

2. Going further – Animating multiple objects on screen

In interfaces we often deal with animating a whole bunch of objects at the same time. In this case you can add some additional principles to the mix.

• Swarm behaviour
  In real life multiple objects usually don’t start synchronously. A swarm movement is initiated by an individual and is then adapted by the other members of the swarm. A very nice example of this is the startup animation of the Windows 8 start menu. The items acually fade in smoothly just like a wave.
• Randomness
  The movement of multiple real life objects isn’t congruent (military parades excluded). Each individual object might behave slightly different. So add some randomness when animating multiple objects. An example of this can be found in the shaking animation of the iPhone’s app icons when you’re about to delete some.

3. Prototyping animations with animate.css and jQuery

In recent projects our team has been using the browser as favorite runtime for Rapid Prototyping. You can use a lot of nice tools nowadays in order to make transitions and motion design effective and reusable. Animate.css for example is a great tool to get started with reusable transitions and behaviour. It’s a set of basic transitions that can easily be applied to objects in your interface.

Et voilà: A jQuery plugin for animate.css

We wrote a little plugin that makes animation of mulitple objects a lot easier and utilizes the power of animate.css. You can think of it as a helper that simplifies applying animate.css behaviour. Additionally you get a set of attributes that you can use to apply swarm behaviour and randomness to multiple elements. So with one little line of code you can actually create a quite complex animation:
$('.quad').animateCSS('fadeInLeft', {duration:500, delay:0, eachElement: {addDuration:30, addDelay:20}});
See what this line does in action (you should use a modern browser like Firefox, Chrome or Safari).  It’s beta and hosted on github – so feel free to remix!

Thanks to TrendONE for this great snapshot!

Wow, great news from Las Vegas! Last tuesday Mercedes-Benz CEO Dr. Dieter Zetsche delievered his first keynote at this year’s CES in Las Vegas and talked about Mercedes’ second generation of mbrace, the car-sharing service car2go and – car2gether!

“Some colleagues still think that car-sharing borders on communism, but if that’s the case, viva la revolucion!” Dr. Zetsche said onstage with a picture of Che Guevara behind him – generating quite a buzz in the press.

Since we helped Daimler Business Innovation shaping this innovative ride-sharing application, we’re really happy to see this being presented on the big stage. Dr. Dieter Zetsche even showed the car2gether promo video, that we produced together with our friends from playframe.

Here’s an article on CNET showing a still from the car2gether video onstage.

You can watch the whole keynote adress on the CES website, unfortunately the stream doesn’t include the slides and movies. He starts talking about car2go at around 16:00 minutes, and car2gether at 19:45 into the video.

Intuity is invited to present its approach to UX and design at the Mediacampus at the Hochschule Darmstadt. By giving insights in our three service levels, Designing for Experience – Creating Vision – Shaping Ventures, Markus Turber shares learnings from our daily work. We share our experience from a designers, but also from an innovators perspective in order to give an idea how designers can become enablers for change.

Last Friday, we released the new Intuity Website with our new corporate font FF Netto. That’s why we take part at this year’s Web Font Awards. Loads of other smashing websites are up for election, so just take a look and vote for your favourite!

Bild via Junkers

Bosch Thermotechnik und Intuity entwickelten gemeinsam JunkersHome, die Smartphone App zur einfachen und komfortablen Bedienung der Heizungssysteme von Junkers. Diese wurde nun vom Design Center Stuttgart mit dem Internationalen Designpreis Baden-Württemberg prämiert. Der renommierte Designpreis genießt im In- und Ausland hohes Ansehen und wird insbesondere für seine Seriosität und nicht kommerzielle Ausrichtung geschätzt. Das Projektteam konnte die Jury mit seiner Arbeit begeistern und sich unter 357 Bewerbungen durchsetzen. Wir sind stolz und freuen uns sehr über den “Focus in Gold”.

Mehr Details zum Projekt…

On 15th of October 2011 the Decoded Conference 2011 took place. The decoded conference stands for the crossover of design and code. It combines creative and technological aspects of our everyday life and brings them all together to a great event in the heart of Munich. International speakers from the field of generative design, computational art, information visualization and hardware tinkering are teaming up to share some insights of their work and tell their very own stories. My personal favorites: Kate Hartman and Jer Thorp. Kate is the host of Pothos, the twittering plant and teaches at the Digital Futures Program at OCAD University in Toronto. Jer Thorp did great work in visualizing New York Times archives.

Videos from last years conference are available for public. You can find a great talk from our Intuity fellows Benedikt Groß and Hartmut Bohnacker about Generative Gestaltung.