Smart IxD Lab


Thoughts, observations and experimentation on interaction by: Smart Design

Check us out

On several CE projects we’ve designed light sequences to communicate states and emotions, like starting up, shutting down, busy, happy, etc etc. But working with circuits and microcontrollers can be a daunting task if one doesn’t know programming or a bit of electronics.  So we’ve created this tool that will translate animations created in Flash to BlinkM modules. You control color, brightness, fades, on and off by tweening the tint property of each LED object in Flash.  Have a look at these examples.

Our example is available for download, which includes the Arduino code, Flash examples, and serproxy (used to relay commands from Flash to Arduino).  Right now we only have two blinkM’s hooked up, but it could be extended to hundreds of lights.

To use tool, you’ll need to set addresses for each BlinkM you want to use on the system.  BlinkM’s documentation provides instructions on how to do this.  You’ll also want to name each of your LED object on the Flash stage as led_xx, where xx is the network address of the BlinkM.

Happy tinkering!

For a recent project we had to come up with different animations for a dot matrix display. Although we could do all this in Flash, After Effects, or Processing, we thought it would be fun to build an animation tools specifically for dot matrices.

After a couple of weeks head deep in jQuery and HTML, we came up with our very own Dot Matrix Animator.  Give it a try We built this as an internal tool (hence the bare bone interface), but thought it would be a fun toolto share.  If you’re a code ninja feel free to download the source from Smart Interaction Lab’s github respository and extend, fork, and hack away!

Basic Instructions:

  • Use mouse to toggle pixels on and off
  • Hold Shift to turn on pixels continuously
  • Hold Ctrl to turn off pixels continuously
  • Press + button to add a frame to animation squence
  • Press the Animate button when you have few frames and watch your animation run!

The screen cast below goes over the in’s and out’s in greater detail.

Every year before Earth Day, we at Smart take a moment to consider our everyday actions and come up with ways that we can do our part to keep our planet sustainable. We share these with each other in the form of Earth Day pledges that can be posted in the studio and revisited every year.  Pledges include things like “I will always carry my bag to the grocery store” and, “Stop drinking bottled water”.

In 2010 before a Smart Salon evening event with Jeffrey Hollender, sustainability expert, author and co-founder of the ecologically-minded brand, Seventh Generation, we decided to come up with a unique way to display our pledges. Since we use a lot of LED matrices in our product prototyping work, we thought it would be great to display them in bright lights, but knew that LED displays require energy consumption, and would be counter-productive to the larger sustainability effort. Our solution? Human power!

We hacked an emergency radio, tweaked our LED display and programmed our Arduino boards. The end result was a two foot wide sign that scrolls through our pledges when a crank is turned. It’s a fun way to see the messages, and offers an element of surprise: you have to wait until you’ve generated enough power to light it in order to see what it says.

Check out the video to see the Human Powered Earth Day Pledge Sign in use. Pictures of the experiment in progress are below.

At Smart, we spend a lot of time in the kitchen, both for design projects but also because we love to eat. Next to great food, we also love great digital products. And like a lot of people, we’ve been using our smartphones and tablets for as many things as we can think to try. However, bringing our two great loves together has proven deeply dissatisfying. With such ground breaking technology like the iPad, why haven’t the design of recipes been reinvented?

After trying a bunch of different recipe apps and becoming increasingly dissatisfied, we decided to design our own. It’s clear that most recipe apps are designed for reading, not cooking. The type is small, the ingredients are separate from the instructions, you have to navigate a bunch to get through it. They’re designed for the content viewing experience, not the cooking experience. None of this makes sense when you’re deep in the kitchen, pots boiling on a hot stove and your hands covered in the makings of your tasty meal. In this moment, the moment of real cooking, you want your iPad far from the flaming stove and spattering grease. You want something that you can ‘tap’ with your elbow not your spice-encrusted fingers. You don’t want something you read, you want something you can use.

In short, you want a recipe app that’s designed for cooking in the kitchen, not for reading on the couch. You want a design that helps you through the recipe while you’re cooking, not one you study in advance and then try to remember while cooking. You want a design that actually helps you engage with the cooking experience. That’s what we made. Take a look and let us know what you think!

Introduce the recipe – this is what you read on the couch, but then swipe to start cooking!

Chunking ingredients by the main activity helps you through each step

Tap each ‘card’ for instructions, tips, etc

Photos are a big part of studio life here at Smart Design, especially when they’re pictures of food or people having fun. While emailing our snaps around the office was a fast way to share them, they were clogging our inboxes with large file attachments, and we knew there was a better way.

After a bit of brainstorming, we decided to create a custom application that would show pictures from all three Smart locations–NYC, San Francisco and Barcelona–in one coherent view, and be  publically displayed and accessible in all our studios. Using Google maps in conjunction with Flickr and wrapped in a Flash interface, we built the application to alternate between map view and snapshot view. Anyone in the office can post by emailing a photo to Flickr. Through geo-tagging on their smartphone, the photos are automatically placed on the map in the location where the image was shot. Adding a tag for New York, San Francisco or Barcelona places it in an album for the corresponding studio. While waiting to be used, the app runs a slideshow of the most recently added photos.

The photo sharing app has saved our servers from the nightmare of large email files floating around, but more importantly has given us a fun way to peek into what’s happening with Smarties all over the planet. There’s usually a large cluster of images on the map right around the three studios, but it’s also fun to see all the other places in the world where pictures pop up.

Here at Smart Design we use a lot of Flips.  They are great for recording process, user research, field study, just about anything where one might need video documentation.  However, using all these Flips also mean we use a lot of batteries.  So what would every eco-friendly and sustainability-minded smartie do? Make their own USB-powered batteries of course.

Note: before we started we tested that Flips could take 5V with a bench-top power supply.  You should too if you don’t want your consumer electronic device turning into a brick.

The first order of business is to find a dowel with comparable diameter to AA batteries. Luckily we found this plastic dowel in our shop that was perfect for the job. After cutting and trimming them to battery size, its time to insert some screws as the cap for batteries.  This is also where we will connect the actual power and ground to the USB jack.  You could just use a power drill to drill a hole, but since we have a lathe in our shop we’ll use that instead.  If you have one of those Heli-Coil set handy you should definitely use it to set the threads for the screw.

Next thing we need to do is get the power and ground out of the USB.   We cut through a USB cord and soldered the power and ground to wires, but you could also solder onto usb receptor if you happen to have one.  Check here if you’re not sure which one is power and ground on the usb connector.  After some glue and heat shrink, tighten the wires onto the battery, put the batteries in your flip, and power on!

In 2008, Smart Design collaborated with Art and Technology center Eyebeam to create Little Bits, a system of simple, intuitive plug-and-play blocks that enable designers to quickly mockup interactive experiences.

Visit the Smart Design website for more information about the Little Bits project: