40

How Today’s Prototyping Tools Enable a Holistic Design Approach

Carla Diana

When I was a student in the late nineties, my classmates and I were passionate about exploring concepts for physical objects that had some kind of digital or electronic component. As designers, we could see that these objects rely heavily on their interfaces to communicate. Though the products on the market at the time exposed little beyond segmented displays made of postage-stamp-sized dark grey rectangles, it was clear that a new future of physically expressive objects was just around the corner and that we would eventually have the opportunity to design beautiful, colorful, and dynamic interfaces that would glow, buzz, and dance.

image

We toiled at our drawing boards and computer stations, carefully crafting renderings of sweeping forms and glowing crevices, then went off to the shop to create the most realistic models possible, expertly pasting decals of the lights and interfaces we imagined, though never quite being able to properly see them come to life. At the time, design history taught us that we could make models of products and interfaces, but that these efforts would never go beyond static representations; they would remain fake models with fake interfaces. If we were thinking of proposing a medical device, for example, we could design a series of paper printouts to affix where the interface would be, or perhaps create a screen-based slide show of what the system might look like, but crafting any real time, interactive versions of what we envisioned was unthinkable. Design tools for this type of work didn’t exist, and investing time and effort in trying to hack it together was highly discouraged since it could easily result in a distraction that would take us away from our focus on design aspects of the work.

Nonetheless, as a person with a tinkering mind and a technical background (my first degree was in Mechanical Engineering), I spent a good deal of my time as a student seeing if I could break the rules in order to model real-time interfaces that allowed people to get a sense of the “fourth dimension” of a product, or how the user experience unfolded over time. I went back through the notes from my electronics courses and revisited computer programming. I found that there were some tools that were starting to offer a dynamic approach. I used Macromedia Director, a program that allowed me to code screen-based interactive graphics and I learned of a new tool called Basic Stamp that would allow me to create some forms of physically interactive systems. Nonetheless, it soon became clear that the advice from design advisors to leave things at “fake” models was well founded. The effort it took to source, build, and accurately craft a functional interface on a 3-dimensional object would take so much effort and planning that the design work would surely take a back seat.

Today’s design students find themselves in a completely different situation, as the last decade has produced an astounding array of design-focused tools to allow people to quickly mock up systems that involve lights, sound, motorized movement, and embedded screens. I have been thrilled to be able to redefine methods in my professional design practice, and in turn have created new courses focused on what I call “Smart Objects” that introduce students to techniques for holistic interactive design of things that are both physical and digital. In my courses, students learn through hands-on experience with an emergent set of tools for mimicking up real time interfaces, and the prototyping platforms at their disposal have enabled a wide variety of new and emerging design methods.

Three main developments that are enabling the new methods are:

Physical electronics prototyping platforms that are easy to set up and program: Arduino is an electronics platform in the form of a playing-card-sized circuit board that easily allows people to program a smart circuit. It can read physical world inputs such as light, sound, and temperature while also controlling outputs such as fans, motors, and speakers. The board alone represents a significant change in available tools, making the creation of dynamic electronic devices much more accessible, but perhaps the most important aspect of it is the online community of tips and resources that allow almost anyone to begin making the kind of sophisticated prototypes that were once only produced by expensive research laboratories.

image

Online retailers with accessible catalog listings for technical components: Sparkfun and Adafruit are two online retailers that offer the boards, kits, and components needed to craft compelling physical prototypes. When I was a student, many of the parts in these catalogs existed, but they could only be ordered well in advance from very technical retailers and required engineering-level knowledge of specifications to even know what to order. Sparkfun and Adafruit provide friendly, online step-by-step examples and tutorials as well as rapid shipping options.

A culture of hacking exiting products: Years ago, hacking an electronic device was something that a design student did only at her own peril. Now, it is encouraged and well-documented. Many case studies of new visual design experiences that grew from hacking exiting products, such as the EyeWriter, an interface based on tracking eye movements that allowed an almost completely physically paralyzed artist to draw using just his eyes.

It’s most exciting to use approaches that I would have discouraged years ago (for fear that the learning curve for the tools would eclipse any creative spark) as the core foundation of the courses I teach. Even graphically-inclined students are required to produce physical mockups of their ideas all along the way, and are encouraged to think of designing experiences rather than artifacts.

The newly introduced tools and community-supported information sources allow students to try out a variety of designs and think in a holistic way. Rather than restricting themselves to traditional discipline-based definitions of ways of working such as graphic or industrial design, new methods enable them to envision solutions that are most appropriate for the design situation at hand, whether they are physical objects, brochures, or mobile device apps.

Some examples of what my students have created in recent years include:

•   A recipe and cooking instruction helper that is projected directly on the kitchen counter and connected to an online delivery service.

•   A contemporary take on the “swear jar” that uses voice recognition to listen for a pre-programmed “forbidden” word and scold the user whenever it’s uttered. The vessel will lean towards the user, eject a cork, and repeat the word until it’s silenced with the cork.

•   Swim goggles that communicate through voice commands and bone conduction. This student group explored a number of very visual solutions such as lights and screens at poolside, and ultimately found that a sound-based design was most appropriate given a swimmer’s needs and restrictions.

•   A music player interface that can be used to navigate six different playlists by flipping a cube onto one of its sides, or by tossing it to randomize the selection.

image

The biggest challenge designers face now is understanding the role of prototypes, and being careful not to fall down the rabbit hole of trying to build working versions that address every single detail. Encouraging students to think of physical models as illustrations or explorations of a specific question is helpful. Ultimately, design of any kind always comes down to decision-making, and real-time, interactive models can help us make more informed decisions, as long as we’re asking the right questions. It’s up to educators to work alongside students to figure out what those questions are and lead them to the tools that can guide them towards exploring answers.