IDEO Labs

For halloween, each IDEO location held a one-hour pumpkin carving competition. I thought it would be interesting to see how much tech I could jam into a pumpkin within the time limit. Luckily, I had an old pneumatics kit under my desk and recently stumbled upon an incredibly simple way to get my iPhone to talk to Arduino. I was able to conceptualize, build, and program this wirelessly-controlled-pneumatic-eye-popping pumpkin in just over an hour, barely missing the deadline but experiencing how powerful these low fidelity prototyping tools could be.

Learn more after the jump…

(more…)

Every fall the San Francisco chapter of AIGA, the professional association for design, hosts a gala to celebrate a community of over 1,600 students and professionals in the Bay Area under the umbrella of communication design, ranging from graphic design to interactive design and experience design. Each gala has a theme that is most evidently expressed through the auctioning of custom-designed objects by design firms and independents. This year’s event was a masquerade, and appropriately titled “Mask Appeal.”

IDEO was asked to participate again this year, so, of course, we took up the challenge. It didn’t take much convincing to recruit fellow communication designer Wilfred Castillo to help imagine what a contribution from IDEO could be. After a week of remotely brainstorming how to transform a $3 mask structure into something awesome, we finally landed on the concept of a wooden toy maze. It’s interactive, nostalgic and who didn’t love this game as a kid?

Click through for more photos and build details.

(more…)

At the beginning of the summer, our intern cohort was told that IDEO has a history of summer pranks.  Inspired, we got together, threw around a few ideas, and settled on building a musical staircase, one that would play different sounds when you walk up and down the steps.

Over the course of three weeks, we brainstormed and prototyped a variety of implementations and consequently took over the Toy Lab over the weekends to build, solder, and assemble.  We tried to be stealthy and keep the project a secret, though it soon became clear that designers in the Toy Lab had been thinking about building something similar for a few years.

Click through for build details and source files for building your own!

(more…)

Watch the first chapter.

The process of making one or hundreds of Illustrator files pixel perfect is a pain in the arse, so here are a few tips to put ointment on that owie. For digital screen based design, I highly suggest using Photoshop or Fireworks over Illustrator. However, there are times when you have no choice but to use Illustrator…and that’s what these tips are for.

1) Move selected items to whole pixels
I created an Illustrator script for moving selected items to the nearest whole pixel (top / left).
Download the script: MoveItemsToNearestPixel.jsx

To install, move the script to your Illustrator scripts folder:
OS X: Applications/Adobe Illustrator CS5/Presets/en_US/Scripts
Windows: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\Scripts

2) Make selected items look like they are on whole pixels
Select any or all items you want to look like are on whole pixels and check the Align to Pixel Grid checkbox in the Transform Panel (Shift + F8). This makes things look like they are on whole pixels, even though they might not be.

3) Set up your grids
— Open Illustrator Preferences/Units and set everything to pixels
— Open Illustrator Preferences/Grids & Guides and set Gridlines every to 10 px and Subdivisions to 10
— Enable grid snapping (Command + Shift + “)
— Remember that Preferences are saved on a per-file basis, so get used to checking these

4) Pixel Preview
Pixel Preview is a handy way to see how vectors turn into pixels when you’re zoomed past 100%. Turn this on from the menu View/Pixel Preview (Command + Option + Y).

5) Check Artboards
Artboards are a great for managing pages for flows, but when creating they sometimes are not on whole pixels themselves. Enter Artboard Edit Mode (Shift + O) and check them.

6) Check Symbols & Swatches
Make sure all artwork is on whole pixels before creating Symbols and Swatches. If the original artwork is not on whole pixels during the creation process, than those symbols or swatches will not look pixel perfect when you use them.

7) Pixel pushing windows workflow
If you have to get nitty gritty, open a second window (menu Window/New Window) for the same file, turn Pixel Preview on (Command + Option + Y) and zoom way in. This way, you have the 100% view and a super zoomed in view side by side. It free’s you up from having to zoom in and out so often.

I’m sure by now everyone in the world has seen some ‘hack’ involving a Microsoft Kinect and some clever programming. Microsoft’s Kinect is a computer-vision dream come true; an infrared depth sensor with impressive resolution and a standard RGB video camera. Throw in some microphones for sound capture and you have a force to be reckoned with.

Released in 2010, the Kinect was developed for the Xbox 360 with the technology and legwork done by PrimeSense who wrote the libraries and on-board processing for the vision data. However, soon after it’s release, the Kinect’s USB protocol was hacked and libraries were written for pretty much every programming language under the sun and coders got to work.

With all of the crazy possibilities that the Microsoft Kinect offers, we got a Kinect for the Palo Alto office to play around with and learn about the possibilities it offers for storytelling, prototyping, and straight-up awesome.

I wanted to give a shot at a simple program to demonstrate the basics of the Kinect for a workshop. I thought it’d be fun to make the most bare-bones interaction possible to get peoples’ brains going on the possibilities with this rich of data. The program is a demonstration of the ease of dynamically filtering moving objects based on depth and using these objects to interact with non-physical objects of our choice. You can see the grayscale depth data in the silouhetted person + couch outline in addition to the noisy outline along with some smoothed outlines. The IDEO boxes have their own physical characteristics (weight, friction, etc) and use the person + couch outlines as boundaries for interaction.

All in all, it took a whopping 2-3 hours of coding, most of which was library and driver issues at the beginning, to code this quick demo, so you get a sense of how easy it is to work with in terms of developing.

Information on how it works and links to the source code are provided after the jump.

(more…)

After requests for the Arduino Mini Shield to be made available for purchase, I spoke with SparkFun to see if they could produce and sell the board.   This way people won’t have to go through the hassle of making a board run and populating them themselves.

Today I was pleasantly surprised to see the “Mini FET Board” on the SparkFun new product page!

The new board is almost identical.  It’s missing the battery charger and the jumper that allows you to reroute a button to pin 2 for wakeup from sleep.  However, it’s easy to get and only $20.

We love seeing when our work gets used or repurposed.  It’s part of the reason we started IDEO Labs.  If there are any other projects out there please let us know in the comments!

Buy it here

The original post along with source files can be found here.

The C60 Concept

In April of 2009 my colleagues Martin Bone and Kara Johnson published a collection of 12 design experiments in the book “I Miss My Pencil”.

Experiment #11, C60, examines the experience of listening to music.  In addition to listening, we used to see and touch our music. Now we download, point and click.

Gone are the hours spent in the record store on a Saturday, leafing through the racks in search of that hidden gem. Replaced with sitting in front of your computer in your underpants… trolling through the iTunes store…

-Martin Bone, “I Miss My Pencil”

The C60 concept was created to bring tangibility to the digital music experience.  A card represents a song or a collection of songs. Placement of a card on the C60 table causes the music represented by the card to be played. Multiple cards placed on the table form a clockwise ordered playlist.

An earlier “quick and dirty” prototype and process details after the jump:
(more…)

Although it was produced for 30+ years and in quantities of millions, this handset is now a relic.  My eight year old nephew has never seen it before.  Technology has progressed and phones are now designed to facilitate ever increasing levels of functionality.  As is often the case, with all that is gained, something is lost. 

Everyone who gives the phone a try immediately cracks a smile.  The nostalgia is fun but there are also functional benefits.   First, the proximity of the microphone to your mouth and the large speaker make it drastically better at capturing and outputting audio.  Secondly, the face enveloping form creates a more focused and intimate conversation. Somehow this small change in device shape causes the user to stop multitasking and focus on the conversation.

This electronics mash up combines the retro handset with a standard Bluetooth headset, a headphone amp, a few RadioShack components, and some bespoke parts. 

The existing microphone and speaker were scrapped in favor of the Bluetooth headset’s microphone and RadioShack speaker.  The Bluetooth headset is mounted to a custom rapid prototyped carrier in the microphone side of the headset.  The speaker and amp are mounted to another custom carrier located on the other side of the phone.  The headphone amp was used because the Bluetooth headset couldn’t provide enough power for the larger RadioShack speaker.  A pair of digital switches allow the single external button to manage the amp power and headset power. 

The bespoke power/answer button needed to have the right look to really emphasize the irony.  The button was created from an acrylic tube, aluminum rod, snap dome switch, and white LED.   The LED color was tinted yellow with Kapton tape to give the illusion of a filament based lamp.

The end result is playful, surprisingly functional, and draws many second looks from passersby. 

The next revision will employ an accelerometer to allow the user to answer a call by simply picking up the phone, further emulating the original experience.

Components:

• Vintage ITT phone handset – Removed from late 1970’s Princess phone. No, I’m not joking.
• Samsung WEP 460 Bluetooth headset – The cheapest one sold at RadioShack.
• FiiO headphone amplifier – Available through eBay and shipped straight from Hong Kong.  The battery from this devices is used to power the phone.   
• STG719 SPDT Switch – There are lot of options out there but I had these lying around.
• Cree XP-E LED – Serious overkill but, again, I had it lying around.
• RadioShack 8 Ohm speaker
• 3/8” OD, ¼” ID Acrylic Tubing
• ¼” OD Aluminum Rod

Technical Notes:

Although the Bluetooth headset and headphone amp share a battery, the switching circuit is required because of the differences in how the power button is wired in the two devices.  In one of the devices the button closes a circuit to ground while the other closes a circuit to the positive battery lead.  Ideally a speaker that makes the most of the headsets modest output would be used and the amp would be omitted.  This would make the entire device much less complex.

Update: Nicholas Zambetti has updated LiveView to support the iPad. If you’re a developer looking to create pixel-perfect iPad creations this is a no-brainer must-have. Look for landscape support coming soon!

—-

January 2009: Well, our Nicholas is at it again. This time he’s taken up iPhone application development, and has released a very cool (and, for a limited time, free!) little app intended to help interaction designers and other would-be iPhone software developers easily test pixel-perfect prototypes on their iPhones.

The system has two parts: the LiveView ScreenCaster and the LiveView iPhone application. The ScreenCaster is a simple application that puts a virtual iPhone skin on your screen, its dimensions corresponding to a real iPhone such that the pixels inside of the virtual skin are precisely as many as on a real iPhone display.

Once you’ve got the ScreenCaster running on a mac, all you need to do is make sure your iPhone is on the same wifi network and launch the LiveView iPhone app. Instantly you should see the name of your mac (and any others running ScreenCaster at the time). Clicking on your machine instantly brings up just the portion of the screen that you’ve ‘highlighted’.

But wait – there’s more! The ScreenCaster has an option to interpret touches as mouse clicks. Turn this feature on and your screencast becomes a two-way interactive prototype. Virtually any application on your mac, from the Finder to custom Flash apps, can quickly be ‘launched’ on your iPhone.

If you’re even thinking about building iPhone apps in the future we highly recommend grabbing this little app. Kudos, Nicholas!

LiveView for iPhone