There’s plenty of literature out there on how to brainstorm lots of ideas, but unfortunately, the hard part still remains: how to pick the right ideas from a wall of sticky notes and actually turn them into something real? Should that wild idea for a “toaster with wings” really stick around (retro screensavers aside)?

For a handful of internal projects, we’ve been experimenting with a completely different approach. We call it creationstorming, and we’ve found it to be super useful when timelines are tight, resources are scarce, and our heads are otherwise stuck in the clouds.

Fundamentally, creationstorming is about making concrete decisions. Ideas are critically debated in the moment, balancing feasibility and impact with respect to the project’s timeframe and goals. Best of all, the team walks out with something that has actually progressed and become closer to real, not a scattering of ideas that demand regrouping after-the-fact; creationstorming uses thinking and debate as a way to start making in-situ.

We’re still tooling the basic structure, but here’s our approach so far.

RULES FOR CREATIONSTORMING

In addition to the rules, we’ve also been sure to include three other components on a cheatsheet in each creationstorming session: the overall project goal, a list of constraints, and some brief background information to keep the dialog moving.

There is certainly a time and a place for blue-sky generation leading to studio walls full of wild ideas, but for everything else — when there are real-world constraints and complex problems to sort out — consider creationstorming as a productive step forward.

Working with the interaction design team, a bunch of us at Teague have been tinkering with measuring water, analyzing usage data in realtime to affect behaviors, and storing it to see patterns over time.

At the heart of the exploration was a need to cheaply measure water from the tap.  Water meters vary quite drastically in price (from $250+ for industrial grade sensors to $6 for garden hose attachments that limit total usage based on rough estimates).  We settled on a $20 water meter used for PC cooling systems (the INS-FM17N by Koolance) due to its accuracy, low price, small size, and electronic sensing method that could be easily measured by a microcontroller (such as an Arduino).

The meter comes with an electronic control box, but we found that integrating directly with the sensor was simple enough and saved us some additional wiring and space.  As water passes through the flow meter,  an impeller rotates and toggles an output line which can be used to calculate the amount of water used.  In addition to measuring the quantity, we also included a thermister (thermally-controlled resistor) to sense temperature.

Since we  wanted to have an internet connected data-stream of our water usage, we decided to try out the YellowJacket Arduino with built-in WiFi.  Data was then sent to the server at regular intervals when the water source was in use (from 1-15 seconds depending on the wireless setup and resolution desired).  Using a GET request with ID and usage information, the server was then able to store and retrieve sensor data.  The complete circuitry and code (see download link below) were both conceptually straight-forward and easy to implement.

Over a quick 2-hour build session with the team, we created 4 working units.  Each consisted of the WiFi Arduino, temperature sensor (shown on the right connected to the yellow wire), the flow meter, and two fitting adapters (for use in the shower).  We also hooked one up to our kitchen faucet, which ended up providing the most interesting data due to its frequent usage throughout the day.

To visualize the data and make sense of water usage patterns over time, we also put together a simple HTML5 graphing tool, called Flow.  Using a modular design, we were able to dynamically layout the content to fit screens of all sizes, from iPhone and iPads to laptops and projectors.  This allowed us to place a small display next to the faucet for immediate feedback, while still offering us a more holistic view to compare multiple sources and look at first-order trends.

And finally, to try it out yourself, here’s a ZIP file with the Arduino project, Eagle circuit schematic, and PHP/HTML5 code.  The files are tuned for our quick prototype setup, but should also be helpful if you’re just getting started with hooking up a flow meter or Arduino WiFi data connectivity.

Here’s a video that shows the entire system in action.

Photos and video courtesy of our very own IxD guru, Brian Monzingo.  Also, be sure to check out Teague’s Give Water initiative.  Enjoy!

On Wednesday, October 13, 2010, Fast Company will be holding the Masters of Design 2010 event at Industria Superstudio in New York. Check out the Masters of Design 2009 to preview the past year’s event http://www.fastcompany.com/tag/masters-design-event. Teague will be exhibiting the Radioball.

We’ve been working on a more polished and capable version of the Radioball in our Seattle studio. By adding a digital gyroscope to the control board, a slow twist on any facet will turn the volume up or down. We also added a larger battery and easy accessible mini USB slot for recharging the device.

We created a closed compartmental structure to house the components to allow the sound quality to resonate through the two speakers. This was a huge difference compared to the original prototype.

In considering the hardware development, we’ve been exploring a couple possibilities and printed a SLA central structure with two cast urethane parts for the outer “mesh” material. To get the parts accurately printed, we started with a classic 3D print; the resolution isn’t fantastic but allowed us to verify technical details.

Then the fun stuff began. As you can see, we’ve been exploring different material durometers, colors, and transparencies for the outside mesh. The internal structure is in SLA and then polished and painted —everything is held together with magnets.

As of today, we are finalizing Radioball 2.0 for the Masters of Design 2010. However, this little prototype-to-finish project shows the potential for a small production product. Here are links to the original Radioball project.

Stay tuned …

Today we’re releasing an Alpha version of Patchwork, our super-light image sharing service, free (as in beer) and open source (as in freedom).

Installation should be pretty painless and we have a very early user management and administration system in place based on OpenID. Be sure to follow the included Read Me and you should be up and running in no time.

SO, WHAT CAN I DO WITH IT?

We built patchwork to share images, but it’s certainly a little different than a blog. We love ours since it’s projected on our wall for everyone to see it. Which gets people in the office to share and respond to interesting things going on. But we would love to see what you come up with for it.

Own a coffee shop? turn a static display into a living, community fed wall for your customers. Running a project? Start a quick Patchwork and invite team members to share inspiration and ideas. Have multiple offices, but want to share one culture? Show a single patchwork in both offices and bring your employees together through a shared, indirect communication space. Photographers, designers, business owners, boutiques, classrooms, teams: what can you do with Patchwork?

THAT’S GREAT, BUT _________ IS BROKEN…

It’s true, Patchwork is a work in progress, and not everything’s done. The basics are there (we’ve been using it!), but not all of it works yet. For example, you can’t easily delete posts yet. But these things are coming. If you’d like to see something sooner than later, let us know! Just skip over to Get Satisfaction to post ideas, feature requests, or bugs and we’ll see what we can do. And since all of the code is open, you’re welcome to get your hands dirty (if you like that sort of thing) and change things directly.

Let us know what you do with Patchwork–whether you put it up on your own wall or write your own features–let us know in the comments below.

Be sure to keep your eye on your admin page, or follow this blog to be notified of any updates!

patchwork.teague.com

Let’s cut right to the chase: we like pretty things. Better yet, we like sharing pretty things with other people.

It’s this basic premise that led us to create Patchwork. Realizing that email was a cumbersome, intrusive, mildly annoying way of letting people know about things they wouldn’t find on their own, we set out to find a new way to share things we like, with people we like. And now, here we are, sharing pictures like popcorn at the movies.

Go on, have a look: labs.teague.com/projects/patchwork

Now, you might be wondering how we’re different in a world full of tumblrs and ffffounds. Well, really, we’re not all that different, but for us image is king, so we went ahead and made the image as big as we possibly could. So each new post, what we’re calling a patch, is the largest, most important thing you see. So big we decided to project it on our studio’s inspiration wall. Patches are easy to make anytime, either on the Patchwork itself or using our versatile, image grabbing bookmarklet.

Responses (stitches) can be other images, text or even YouTube videos. Stitches show up in real-time as comments are made, saving you all that hassle the internet calls reloading.

We’ve also added a couple simple image related features in a handy tools dropdown right beside the stitches. You can grab the full size image, go to the source page, find similar images, or generate a sweet (and useful!) swatch palette on the spot.

At any time, click anywhere on the left hand side to see a history of all the patches made so far.

Now, bear with us: Patchwork is young. We just got up and running and things are changing all the time (when we have a spare moment or two).

Here is where it gets awesomer. The link above is just our Patchwork; only we can post and comment. But once everything is a little more stable (hopefully soon!) we’ll release the code to anyone and everyone to do with as you want. Create your own Patchwork for your class, your friends, your coworkers or add your own features or themes. It’s all about sharing, right?

In the meantime feel free to follow along on our Patchwork and get a glimpse into what shows up on our studio wall everyday.

Here is a quick model we made for an internal project, showing a proposed structure for a public space, made out of a folded structure. The model itself is made from a piece of letter-sized paper that we took from our printer’s recycle bin, a foam core base, and hot glue.

The fold pattern makes only triangular surfaces. When the feet of the structure are glued to the base, the triangulation is complete, and the surfaces are remarkably rigid.  No printouts or fancy guidelines were needed; we just started folding and experimenting with various configurations until it behaved appropriately.

This combination of architecture and origami has been around for a long time, but the possibilities of what can be made are practically endless.  And because the form can be created from a single flat piece of material, fabrication, transportation, construction, and reusability are all benefited.

We’re also thinking of a few different applications for this approach, including dynamic structures, robotics, and sustainable product lifecycles.

See Richard Sweeney’s work and Do It 101′s Origami Links for some more inspiration and ways to get started.  Why not grab some paper and try it out yourself?

We’re always on the lookout for cool new prototyping technologies to fold into our work.  Arduino-based tools are one of our staple platforms since they are fast to setup while still being easy to extend (there are currently more than ten different sizes and configurations of Arduino) and share with clients for further development.

We got our hands on a couple of Teensy and Teensy++ 2.0 development boards a few months ago, and these guys are incredibly small for all the functionality they provide.  They are Arduino-like (small, simple, can be programmed via Arduino software over USB with an add-on, and use an Atmel microcontroller), but also provide some additional features.  Instead of an off-board FTDI serial controller, the microcontroller has built in USB for programming; this frees up the chip’s serial port for other uses and also gives the Teensy the ability to emulate other USB devices (such as keyboard and mouse).  The Teensy still uses standard 0.1 inch pin spacing for breadboarding, but includes 25 I/O pins (and 45 on the Teensy++) within a very small footprint.  There’s also more PWM, memory, and analog inputs than the other small-form Arduinos.

Teensy is mostly open source (you can check out some code snippets, schematic, and PCB footprint, but not the full component layout or codebase), so you once you get your hand on some parts you can use them in new and unusual ways.  We’ve been experimenting with some add-ons for Teensy and look forward to sharing them with you in future posts.

In the meantime, we encourage you to check out Teensy (as well as other new microcontroller platforms) for projects that demand smaller sizes, higher pin counts, and USB device capabilities, but otherwise stick with Arduino (and keep that warm fuzzy feeling that hardware modifications are encouraged) when possible.

Physical devices make application development messy.  iPhones (including the iPad), Android phones, Zune players, Windows, Mac, and Linux machines all have their own development environments, support different programming languages, and run on many different hardware configurations.

Developing for the web, however, is quite different; the same site can function as an application across a very broad set of devices and platforms.  Sure, there are limits, but slowly those constraints are dissolving and the two worlds of desktop and web are undoubtedly converging via the WebApp.

HTML5 AND JAVASCRIPT

We think HTML5 has a big part to play in bridging that gap.  By giving web applications more power (via javascript integration, new HTML tags, CSS styles, multi-touch support, and local storage — see the html5demos), developers can build new tools and interfaces with connectivity at their core.  And, unlike the Flash era we’re currently in, the future will provide more openness for development environments, code, and media without needing dedicated players and proprietary plug-ins.

There are a couple of obvious constraints, such as needing an internet connection (although html5 storage helps with that) and developing workarounds for non web-standard integration, but with those comes a lot of strengths.  For example, there is never a need to install updates at the user’s expense since updating the website will cause subsequent users to see the changes immediately.  There’s also no need to download a dedicated application or copy it between machines; all that’s really necessary to ‘install’ an application is its URL.

WEBAPPS FOR PROTOTYPING

All of this adds up to a bright future for digital prototypes.  Any modern device with a screen and a browser can immediately be commandeered for testing and exploration.  It works great for one-to-one device applications, but can also be easily extended to other experimental forms by taking apart existing devices and rearranging, combining, and altering their components.

And if you’re worried about your applications feeling too much like a generic bookmark on the web, rest assured there are easy ways to make your WebApp feel like it’s on your desktop.  Users can click on a desktop icon which loads a dedicated chromeless browser (a browser that opens a single URL and is void of any interface or decorations, such as a back button or window border; think one step further than Google’s Chrome OS) and feel like their opening up a local application (such as the PhoneGap approach). 

But even without a dedicated chromeless browser, you can still try out interactive ideas using your desktop or mobile device web browser. Allowing a webapp to get access to the entire screen is a bit of challenge, but with a few tricks and meta tags you can get pretty close without much hassle.

Although this approach doesn’t allow for native hardware use (such as accelerometer data or using a device’s camera), it’s a great way to try out dynamic, interactive ideas in very little time.  Dynamic graphical behaviors, multi-touch support, and location-based systems can all be created without the need for specialized browsers or data handling. Additionally, HTML5utils and libraries such as jQuery give more power to your webapps for manipulating elements and working with rich media such as video, audio, and computational graphics.

TRY IT OUT

After mocking-up a handful of webapps ourselves, we decided to create a basic HTML5/JavaScript framework for quickly getting interactive ideas off of the ground. With it, and just a bit of web know-how, you can build scalable webapps to prototype your ideas and test them on a wide range of web-enabled devices.

The WebApp UI prototyping framework we put together consists of three parts:

• teagueproto.js — This is an aggregate javascript library that combines jQuery, multi-touch handlers, gps navigation, and HTML5 utils; all rolled into one simple call.
• applications template — The template is the starting point that sets up some basic structure (javascript includes, static and dynamic code separation, and a loading screen) and allows you to immediately focus on developing interactive components.
• desktop viewers — You can try out your code directly on your device (it is, after all, a WebApp), but if you don’t have the device around or you want to use desktop debugging tools (such as FireBug), these little viewers can be super handy.

As an example, we mocked-up the iPhone OS with TeagueProtoJS, allowing us to create a simplified HTML5/JavaScript version of the operating system all within a browser. Try out the prototype yourself in the browser, on an iPhone, and on an iPad.

You can also try out the basic TeagueProtoJS template, and download the full TeagueProtoJS source code and examples to get started with your own WebApp UI prototypes!

A couple of us will be presenting at Puget Sound SIGCHI tonight to discuss the role of making in the way we think about and approach new ideas.  Detailed information can be found on the event page; here’s a summary of what we’ll be talking about:

And if you’re attending and want to follow along with our examples, here’s some helpful links.

• UI Bump Test, works on small devices in the browser.
• DIY Soft Touchscreen Stylus
• Links to the Processing and Arduino download pages.
• A very simple Processing example, and the code we used to parse data from Arduino over XBee/Serial.
• Sparkfun, a great place to get prototyping hardware.
• Tweak Processing Tool

Here’s another quick hack to add more physicality to touch screen displays.  Using a small to medium sized knob, you can modify it (or even use it by itself) to behave as a rotary input.

Similar to the soft stylus, the trick is finding a way to create a conductive path from your hand to the screen.  We started by using copper tape, conductive fabrics (see the soft stylus) and wires to simulate two touch points on opposite sides of the knob.  It takes some careful tuning to get the touch points spaced correctly and sized such that the screen reads them as a touch, but it does work with a little patience.

Alternatively, with a small knob, it’s natural to grab it such that your fingers actually touch the screen making it nothing more than a physical prop to provide some tactile feedback (as shown in the video).  It works great and doesn’t require much in terms of materials or time; just grab a small object and give it a try!