Archive of published articles by

Back home

Eight weeks

3/07/2011

I like to encourage students to move the design process out of software as soon as possible, and into the real world. This means test early and often: test your real work with real users. I believe it’s best to implement your ideas to learn how to make them better, rather than trying to get it all right in your head or on-screen. Because the work depended so heavily on function, the prototype process began early and was demanding.

A stellar evening

1/07/2011

The opening was a great success! It was so great to see all the curiosity and participation, with even better response and feedback than any of us expected. Perhaps the greatest learning opportunity for the students was to watch the show in action, and observe the patterns of indivdual and multi-user interaction. No matter how much you test… it’s never quite what you expect! It was an amazing effort, and I was extremely proud of the work the team did in such a relatively short time. Now on to the next one…

Cooperation is key

8/06/2011

This installation was a new kind of request at the campus, so it came with some additional challenges. Occupying and transforming spaces outside the designated departmental areas for the CCS Student Exhibition had not been done before, and so it required flexibility from all involved. Due to time constraints, one of our biggest challenges was to continue working on designs and technological solutions before having final approved spaces to work in. Some projects had to adjust to these constraints more than others.

Of course none of this would have been possible without a great deal of interdepartmental and administrative cooperation. Sincere thanks to all the individuals and groups who lent a willing hand, including but of course not limited to: Doug Kisor, Sue LaPorte, Chad Riechert, Kristin Koch, Jamie Laessle, Greg Fraser, Laurie Evans, Matt Clayson, Bethany Betzler, Sandra Olave, Robert Sheffman, Sean Evans.

Intro Wall

7/06/2011

Team: Paolo Catalla, Jennifer Barrett, Alex Poterek

Because it was likely to be something visitors hadn’t experienced before, one of the key challenges was to quickly communicate our idea, and get people to participate. We wanted to make sure that visitors would understand that the QR codes they were seeing throughout the show weren’t just decoration, but had a function. Because our audience was coming to an art opening to have fun and attend a party, their expectation was to be social, casually peruse the artwork, and consume food and drink. So our goal was to engage visitors without overwhelming them with too much information. The solution we arrived at was a signage design near the entrance to the show, which could both educate and demonstrate the concept for the installation. This would enable users to recognize the work throughout the show. (In the end, we found the most successful introduction to the idea was often simply through watching other people interact!) This wall signage also established the visual identity for the work, as well as provided the first chance to interact, via the accompanying Interactive Windows.

The vinyl signage was a challenge to apply, with very fine detail and 3 sections to align.

Codes From Space from Nevercool on Vimeo.

Interactive framework

24/05/2011

We were looking for a way to create interactions in the natural spaces of the building, on the walls, in the windows, and to avoid the “kiosk” interface as much as possible. By choosing the QR, we elected to leverage the user’s smartphone as the main user interface for the installation.

By now, most people at least recognize the form of the QR code, but many don’t yet know what they are used for. The QR code is most commonly used as a hyperlink to product or service information, and that’s how most people currently understand their usage. Our goal was to create a new context for the QR code for those users with prior experience, as well as introduce this use of the QR to a new audience.

teamwork_collaborate1

We did know that the amount of show-goers with smartphones might be somewhat limited, but accepted the constraint. To simplify development, we limited support to touchscreen devices running Android and iOS. We attempted but found it difficult to support Blackberry devices, so they were only partially functional. (It’s worth noting that it was surprising to see how many designers/creatives use Blackberry devices; my stereotype of the Blackberry user has been shattered!)

Normally this kind of real-time interaction is easier to accomplish via a device-native solution like an iPhone or Android application, but we chose the web application instead, for its compatibility across platforms. Those without smartphones didn’t seem to be any less engaged, as each interaction would draw as many onlookers as participants. Perhaps the most interesting aspect to the SEO event was watching the discovery process, having conversations with curious people, and witnessing the “A-ha” moments first-hand.

Identity exploration

24/05/2011

Team: Paolo Catalla, Jennifer Barrett, Amanda Matzenbach

Because we knew some components of the installation might be located on different floors and areas of the building, our goal was to have all the components of the installation belong to one easily recognizable identity. The identity team worked through a few iterations and arrived at a system linked to the geometry and aesthetic of the QR code. Depth and implied perspective were applied, as a thematic nod to the exploration of space and multi-planar executions.

identity8
identity3
identity4
identity5
identity7

Interactive Windows

8/06/2011

Team: Alex Poterek, Paolo Catalla

windows_mobile

This team worked through a few iterations, working from a desire to create an interactive projection on existing architecture. The team eventually arrived at an idea that would utilize a grid of windows on the ground floor of the Taubman Center.

The Interactive Windows was the first piece visitors would see as they arrived at the Taubman Center for the Student Exhibition Opening. The installation was located at the front of the Detroit Creative Corridor Center, who were kind enough to permit us to house a large short-throw projector, the Galaxy Warp 5000. In turn, the team dedicated part of the piece to an exploration of the the organization’s identity and mission statement.

Interactive Windows from Nevercool on Vimeo.

Because the clients are all connected, the experience is multiuser; each user can see all other users on their own mobile screen. Photos and screens from the Colada and Pixel Pix are also sent to the Interactive Windows for display in the grid. The interface is a web application built using Javascript and CSS, optimized for the mobile screen. The display application uses Adobe Flash in combination with widgets from the NETLab Toolkit, a project from Philip Van Allen at the New Ecology of Things Lab at Art Center College in Pasadena.

The piece may be reinstalled for a DC3 event in September, more updates later.

The works: OSC, Node.js and socket.io

24/05/2011

Skip this part if you don’t like to see the innards.

We needed a means for the user to communicate with our interactive pieces, and a way for the pieces to chat amongst themselves. We decided to use a common “language” that applications could all speak, and a natural fit for this was the OSC protocol (Open Sound Control.) OSC was an easy learning curve with wide adoption and libraries for several interactive frameworks, like Processing, Actionscript, Arduino and Open Frameworks.

We then needed traffic control for all this communication, so we chose an open-source JavaScript framework called Node.js, in combination with Node modules Socket.io and Node-OSC. This server cocktail “made things talk”, and allowed us to write applications that receive real time input from smartphone clients, with the ability to sync and broadcast to all clients. The server can then serve/share OSC data with multiple interactive applications as needed.

The important part of this solution was that it allowed us to keep all the client interfaces web-based, allowing interaction from 20ft or 20 miles. And since the entire communication solution is written in JavaScript, it’s powerful and flexible.

code_snippet seo_functional_flow2

It’s worth noting that toward the end of the development cycle we discovered the value of high-level frameworks like Express and Now.js… these probably would have saved us a good deal of time, but we certainly learned a lot in the process anyway. It’s also not clear if the asynchronous nature of Node helped with performance or throughput, but it would be interesting to test in the future.

Next time!

Flash, Processing & Arduino

30/06/2011

These technologies allowed teams to create virtually-controlled physical displays. Mobile clients talking to servers via the internet, servers talking to computers on a local network running Flash and Processing, Computers talking (sans wires) to Arduino microcontrollers. All in all a pretty powerful and flexible system, I hope we continue to build on it!

arduino

Zigzag Wall

8/06/2011

Team: Lani Kercado, Cate Horn, Brian Hendrickson

p1000891_52_800

In early stages of the exploration, we discovered that a QR code could still function when it was “broken” or mapped onto multiple planes. Furthermore, we discovered that the code mapped in this way required the user to be located in a very specific space in order to scan it, because the perspective would only be correct from one position. This team used this idea of a broken plane to locate the user in space, and to highlight the spirit of the project. The mobile component also used the opportunity to explain some background on the overall project.

zigzag_mobile_design

Zigzag Wall from Nevercool on Vimeo.

Large scale prototypes were built, and in the process the team discovered there was a fair amount of accurate measurement and math required to get things right. Seemingly small miscalculations would result in a skewed or misaligned code, which would then be unrecognizable to the scanning software. After several conceptual iterations at different scales, the team concluded that the lines of sight required for the large-scale piece would be difficult to accommodate in the available spaces for the show. Space was at a premium, so the resulting solution was a more modular and smaller scale piece to suit a variety of possible spaces and sight lines.