Geeking-out with Arduino at CIID Summer School

Sensing and Responding to the Analogue World
Have you ever wondered how motion sensors in a gallery installation or museum exhibit work? How does your movement trigger a video to play, or the lights to dim, or make things move? I’m always curious about the mechanics of interactive and immersive experiences, and in the final week of summer school at the Copenhagen Institute of Interaction Design I found out how action gets mapped to data and how data triggers motion. I know, sounds like a wild ‘n’ crazy week, huh?

A pressure sensor test on the Arduino platform

Experimenting with a pressure sensor, two copper strips on foam, and an Arduino board.

Let’s Get Physical, Physical!
The focus of the third week’s course, Physical Computing, was to look at computation using Arduino. What is Arduino, you ask? Used as a way to work with microcontrollers, Arduino is an open-source prototyping platform that enables physical interaction with technology and objects. It uses sensors and microcontrollers to translate analogue input to a software system, which in turn controls electro-mechanical devices. Arduino is used for art installations, communication devices, costumes, medical equipment and a multitude of interactive environments that you probably encounter everyday. Some great examples of projects using physical computing are Danny Rozin’s Wooden Mirror, Fabrica’s Tuned Stairway and the Melody Man Electronic Designer Toy by Carla Diana.

Our instructors David A. Mellis and David Cuartielles (two of the founders of Arduino), began the week by posing a few big questions: how do we map from action to data by using input to computation to output? In the context of building products, what do we as Interaction Designers need to sense and actuate interactions? How do we power them? Communicate with them? build them? We were going to discover the answers to these questions while making things spin, beep, blink, vibrate and propel using our laptops, Arduino and electrical hardware.

Projected Arduino Code

It’s gonna be a geeky week. Arduino code for making a LED bulb blink endlessly.

Following a crash course in electronics, we began tinkering with the Arduino board and software, playing with motion and pressure sensors, and servo and stepper motors. Although the learning curve for me was steep, I don’t come from a science or computing background, as I explored the connection between code, algorithms and interaction I began to get excited about the potential for using Arduino in personal projects, exhibit design and prototyping.


This is a video of our final radio prototype, Chi Sounds.

Hacking the Radio
After completing a few small projects over the first few days, our final project brief was to reimagine the radio, to rethink the radio user interface and build a prototype of the radio as an electronic device. We had three days to invent, test, and prototype our designs. We split into small teams, and my partner Peng and I spent the first afternoon brainstorming, sketching and making rapid-prototypes of our initial ideas. Our final design, an interactive radio named Chi Sounds, is shown in the video above, but I’ll tell you a little bit about the design process.

Sketches from a brainstorming session reimagining the radio

Sketches from our brainstorming session. Some of our early ideas explored a two-station radio in the form of a shaker or hourglass, and a base station with opposing switches. A dice, or cube, with a unique station on each side also seemed cool at the time.

Peng and I began to explore the idea of a personalized radio, where the user could customize the receiver to a few favourite stations. We were thinking that interaction with today’s radio should be minimal and intuitive, involving just a few basic gestures such as pulling, tapping and flipping. We started to think about an elegant object in the home or office that was easier to use than a digital player.

Radio prototype showing two stations

One of our rapid prototypes for a programmable two-station radio based on an hourglass shape and turning motion. You could program, say, a jazz station on one side and a news or rock station on the other. Once we held the prototype it suggested a barbell, not the look or feel we were going for, although we did joke about switching to a workout radio concept.

The most compelling of our ideas was a kind of radio cube, where the user could select a station for each side of the cube. We could incorporate an accelerometer to sense the rotation of the cube, and an infra-red sensor for adjusting volume. The cube could be made as a mitred wooden box with a friction-fit lid, and any detailing could be made with the laser-cutter. We divided up tasks. Peng, a UX designer at Nokia, took on the computing work, and I delved into making a mitred wooden box so that I could build on skills I’d learned during the previous week’s Physical Prototyping class.

Chi Radio physical and computing prototype

Clockwise: Peng works through an Arduino challenge. The coloured circles and the speaker “mesh” were cut on the laser cutter. The mesh pattern allowed the infra-red sensor to fit into one of the openings. The Radio workings – microcontroller, sensors, amplifier, speaker and battery – were zap-strapped together and glued onto the speaker mesh, which doubled as the box lid.

Using the hot wire cutter and some glue, I quickly made a styrofoam box with a fitted lid. Meanwhile, Peng tested several options for sensors that would bring the radio to life. Using the prototype, we were able to quickly adjust the size of the radio so that the hardware would fit inside and it was comfortable to hold. A couple of days of design intensity followed, but we referred again and again to the foam prototype to develop the radio concept, discuss usability problems and solve construction glitches. From the computing side, challenges with determining numeric inputs for the sensors, tuning the FM chip and the delicate work of soldering were an all consuming task for Peng.

Chi Radio electronics

Revealing the Chi Sounds innards. Photo by David A. Mellis.

By Friday afternoon we put the finishing touches on the radio, zap-strapped the electronics and battery together and fitted the lid onto the box and made our final presentation to the class. My classmates radio projects were incredible, some of them were Raydio, and a radio that you throw balls at to switch stations, a colour-sensitive radio, to keep pests away try Random Radio, and one with long-distance vision was Telescope Radio, and a few others here and here. Thanks to all my classmates and to the two Davids for an action-packed week.

Demonstrating the Chi Sounds volume control.

Peng and I demonstrate our Chi and play with the volume control at the final presentation. Photo by David A. Mellis.

Learning About Physical Prototyping for Interaction Design

Wooden Mitred boxes

These wooden mitred boxes tested our sanding and painting skills.

Warmed up by the previous week’s Exploring Interaction Design course, the second week at the Copenhagen Institute of Interaction Design Summer School introduced us to physical prototyping, with a course led by Richard Shed and David Gauthier.

This was the week that we ditched our laptops, rolled up our sleeves and switched on the power tools. This the course I was really looking forward to, the week where I kept telling my friends, “I get to make stuff”. During the week I was reminded that creating physical prototypes of ideas is a central component to the design process as a whole and that by iterating early and often I am able to come to much better final results. This talk on prototyping the mouse by IDEO’s David Kelley, and the following quote from the stanford d.school are great acknowledgements of the usefulness of prototyping.

Physical Prototyping is the process of making a physical representation of an idea. Early in the process physical prototypes can be made of all kinds of materials. Physical prototypes allow the designer and users to interact with the idea. By building an idea designers are challenged to ‘build to think’ and thus gain deeper insights.

We spent much of the week building skills in the well-equipped workshops. On the lathe we shaped out styrofoam cones, then explored the laser cutter by making press-fit assembly characters and geometric folded shapes, and rounded out the day with a session on the hot-wire cutter.

Laser cut geometric shape

Extreme origami. One afternoon we explored polyhedra and tessellation and practised making shapes on the laser-cutter. This mind-bender is Marten’s dodecahemiododecahedron with laser-cut foldlines and etched text.

Woodworking workshop at CIID

Marten and Richard sand and lathe in the CIID workshop.

For our final project we were asked to “invent and construct a physical retro-futuristic interface presenting functionality of an online service or application”. We were to use an existing interface such as a plane cockpit or an old radio and define functionalities from a software or web service such as Spotify, Skype, Instagram and map them to the physical affordances of the retro object. The final prototype software didn’t have to function, the focus was on the idea, design and making of our retro object.

With an interest in photography and online photo sharing services, I was intrigued by how Flickr could be mapped to an object such as a camera, projector, cinemascope or goggles. Online research and making quick prototypes helped refine ideas so that I could eliminate options and focus on developing a handheld viewer.

Two foam prototypes of the Flickr View Master

Two quick foam prototypes explored wireless connectivity and a smart phone slot, and physical affordances like navigation buttons, dials and grips.

Prototype glasses for View Master

Not Ray Bans. Richard and David see the world through View Master goggles. This early prototype based on a wearable viewer revealed problems such as a lack of capacity and need for universal sizing (although the blue bits were quite flattering, dontchya think?).

My classmate Mereike and I designed a hand-held viewer for personalized Flickr photo pools. Based on an early version of the View Master, we made our new viewer 3D capable and compatible with large screen smart phones. We kept the signature hand lever and painted it bright yellow. The prototype was made by laser cutting and glueing layers of wooden sheets to obtain basic form. We then puttied and sanded the surface, aggressively sanded down the body to refine the shape, drilled holes for the viewfinder and sprayed a finishing coat of paint.

Sanding in the CIID workshop

After laser cutting a series of layers, glueing and filling, Mareike sands the prototype by hand to get the gentle curve at the top of the viewer just right.

View Master 3D prototype

Checking out the final prototype … and thinking about improvements.

Some of the awesome retro-futuristic objects developed by my classmates can be seen here. Thanks to my classmates and Richard and David for a great week of building, thinking and designing.

My Kind of Summer Camp: Exploring Interaction Design in Copenhagen

Interaction Design is Industrial Design for the digital age
In July I participated in the three-week Interaction Design Summer School at Copenhagen Institute of Interaction Design. The first week-long course, Exploring Interaction Design led by Matt Cottam of Tellart and Maia Garau of XPlane Amsterdam was an introduction to core interaction design concepts, methods and tools.

How do you do, feel, know?
For the first couple of days we discussed Graphical and Tangible User Interfaces, Service Design and the fundamentals of Interaction Design. We looked at early examples of Interaction Design including Douglas Engelbart’s 1968 demonstration of the first computer mouse and file sharing and one of Bill Verplank’s classic sketched talks. On one afternoon the class of 25 divided into a small teams and made investigations into interactive experiences around public spaces in Copenhagen. My group tested a parking ticket machine, an ATM, and Bang & Olufson’s sexy portable wifi music player, the Beolit 12. On first glance I was charmed by the look of the player, but after my team made a short presentation to the class, lively discussion about affordances and user feedback followed, and in the end I had some doubts about the effectiveness of the user interface.

Designers don’t sketch all day … they play cards
Our final project for the course was initiated by a flip-card gamestorming session. The cards, divided into the categories, sensor, situation and user, were combined to create a scenario that would spark ideas for invented products and services. The class organized into smaller groups that, using the cards to get started, would each develop a service to present at the end of the week. My team brainstormed that “a pediatrician in the hospital with a multitouch device” could be a toy that records a patient’s movements through play and transmits the data to a doctor. Another card combination was “radiation at the supermarket with a rebellious teenager”, which led to sketching out a fashion-forward bracelet that read radiation levels in food.

Gamestorming with flash Cards

Katja and Marten group service scenarios using gamestorming flash cards. This is the stage at which we invented our RobIn’Hood thievery network service.

Playing games leads to criminal activity
Our final combination of cards was “a robber with a GPS in an emergency”. We ran with this one and developed a thievery networking service called RobIn’Hood. Due to the clandestine nature of the service, membership would be by-invitation only. We designed an elite privacy gesture called “The Phone Bump” that only existing members could perform amongst themselves and for new member invitations. Some of the services we developed were real-time robber support, job board, just-in-time counterfeiting, on-call lawyer, and getaway car/boat/jet rental.

Idea board for RobIn'Hood target audience and service offerings.

On our idea board the RobIn’Hood target audience included robbers, imposters, con-men, pickpockets and former bankers. We also developed a service blueprint, personae, and privacy functions.

Designing the App inteface at CIID

Marten and I ponder the RobIn’Hood graphical interface. Photo by Meredith Tack

Graphical User Interface for iPhone App

Members receive real-time updates to the Job Board. Job postings and applications are accessed via the RobIn’Hood App. Once a job is completed members can rank the performances of their partners-in-crime by giving them a one to five gold brick rating.

To explain “the customer journey” we performed a bank robber networking scenario using smart phones and projected graphics and video, to demonstrate how the job board and ratings service work.

Skit demonstrating the RobIn'Hood service experience

Marten, Barbara and I played the robbers in our service design skit. With “the phone bump” performed, we’re looking for opportunities on the Job Board.

“Son, there’s a future in services”
On Friday afternoon we finished up our projects and gathered for final presentations. Some of the services presented by my classmates were a motivational clean-up game, a travel memory service, an international public transit pass, a doggie-poo snitch App, and a message device for grieving family members. The final presentations were brilliant, and each service idea generated engaging discussions about both the practical aspects of our projects and the future of Service Design.

Thanks to my RobIn’Hood partners in crime Marten Biehl, Katja Hase and Barbara Marcotulli. You guys get five gold bricks! And thanks to Matt and Maia for leading an inspiring and insightful week.

Typographic Lucha Libre

Not only is it a supreme hand-to-hand combat between Japan and Mexico’s World Champ Chicas, it’s a fight to the death between drop shadow, outer glow and wind blur Photoshop-ified typefaces.

Lucha LibrePoster

Plastered all over the streets of Oaxaca, this mega poster for the tremendous wrestling match at the Los Pinos parking lot looked even better in multiples of 20.

Long Distance Design

I recently designed business cards for Valia Carvalho, an Arts & Culture Manager based in Berlin. Valia and I worked over the internet (her in Berlin, me in Valparaíso, Chile), and the cards were gang-printed in Germany. Finished with a high gloss flood varnish, the colours are ultra-vibrant and the card has a slick polished feel. The card back is saturated with colour and pattern, contrasted by a spacious treatment of the typography on the front side. The card tells a little story about the flip-sides of expression and complexity, and clarity and organization.

Valia Carvalho's business card

The design represents both the new-media and fine art components of the projects that Valia manages, many of which are facilitated by the internet. The pixel pattern is generated from a photo I took of a luscious red lily I found in the Colombian hinterland, and the hand drawn lines are just that, rendered with charcoal and then scanned and colourized in Photoshop. Combined, the grid and random lines riff off of each other, and in places there is a merging of colours.

The design took about two-weeks to complete, allowing plenty of time between revisions to reflect and discuss ideas. Designs and feedback were sent back and forth by email, chat, or by skype calls, and final files were sent directly to the printer in Germany.

I’ve included a few of the card designs below to show the evolution of the design and some of the early solutions that I presented to Valia.

Two Business Card designs for Valia Carvalho

These two cards were too much about the personalized expressive marks and unconventional colour combinations, and didn’t convey ”management” strongly enough.

 

Square Calling Card Design

These modernized “calling cards”, in a neat 2" x 2" size, were an early attempt at combining a digital-esque pattern with a hand-drawn graphic.

 

Initial "pixel" Business Card Design

The first incarnation of the winning design. We decided the proportions of the grid pattern were too oversized and quilt-like, and should be derived by pixelating an image for authenticity. Once the final pattern was created, I found it much more interesting to break the hand-drawn lines from their woven arrangement, and combine them with the pixel pattern.

Featured Work

© Copyright Lindsay Simmonds | Graphic Designer - Theme by Pexeto