Ted McDonald

Interactive Display Prototypes

— My team was asked to design and prototype interactive content for large, street-facing displays located in the West Campus Utility Plant (WCUP) that would promote University of Washington (UW) sustainability values, connect with the local community, and serve as an attraction.


We created both interactive prototypes as well as a framework for creating new content. Prototypes were demoed in the UW CoMotion MakerSpace. Our stakeholders, including Rebecca Barnes, the university architect, loved the concepts and plan to adopt our strategy moving forward.

We discovered that UW sustainability messaging is focused on promoting everyday actions individuals can take, such as riding a bike or walking, instead of driving. Stakeholders also wanted WCUP displays to give character to the growing West Campus and engage with the community.

To address the multiple goals of our stakeholders, I proposed that we create a variety content packages. Each content package is a self-contained idea, which can be cycled through depending on time, date, or context. This keeps content fresh, focused, and quick to create.

Due to the transient nature of public displays and the short attention span of passersby, interactive content was designed to be bite-sized, artistically abstract, and easy to interact with.

Design a Bike

A lot of thought went into designing content that connected UW sustainability with the local community. Our goal went beyond just ideating a single concept – we wanted a framework that the UW could follow when developing future content.

And then it clicked. It was early May, which was coincidentally bike month in Seattle. Biking fit perfectly into the UW sustainability goal of simple actions individuals can take to reduce their carbon footprint and it was an activity heavily promoted by local organizations and companies.

We created a web app that allowed users to design a bike. They could choose the color, wheel spoke pattern, and add their name as a decal. When they were happy with their design and tapped the save button, their bike would append to the large on-site displays.

The bike prototype solved two important challenges. First, a web app allows interaction from anywhere. This expanded our user base to encompass more than just a few passersby. Since user generated designs appear on the WCUP displays, there is an incentive to pass by and check out the neighborhood.

The second challenge solved is community engagement. By creating content that fits within the context of larger community events, many opportunities open up the UW. For example they could partner with local organizations and companies to promote values or events, the possibilities are endless.

Interactive Water Pipes

Given that our displays were located in the WCUP, our team wanted to connect the plant to the neighborhood in a memorable and fun way.

We decided to base our prototype on the colorful water pipes inside the plant. Visible to passersby, WCUP water pipes were a colorful and unique characteristic of the building and immediate neighborhood.

Using a Kinect sensor to capture gestural interactions from the user, the prototype simulated water flowing through various pipes. The great thing about this concept is how versatile it is; pipes can be expanded across many displays or just one. Our prototype demo made use of a single display.

The prototype proved to be very popular with users in the MakerSpace. Even in a gamified and abstract form, the prototype stayed true to the purpose of the WCUP.

↑ Try out the water pipes above

Visualizing Foot Traffic

Continuing on the theme of transportation sustainability, we created a concept that make use of simple sensors. As passersby walked by, animated footsteps follow them from one display to the next. As footsteps followed them, humorous messaging would be displayed to encourage them to keep walking and to thank them for choosing a greener method of transportation.

If there is more than one passerby, the displays show more sets of footstep tracks and messaging reflects the group context.

Rapid Prototyping & Transferability

Prototypes were built for quick assembly and easy transferability.

Aesthetically, designs were fun and lively, though simple. They were line based and made use of gradients to give a sense of complexity and depth.

This made it easy to create lego-like components with our designs. Anyone on the team could explore different layouts with this method of prototyping, regardless of visual design experience.

A simple aesthetic style also made it easy to export as SVG files, which are resolution scalable and code-based.

The code-based nature of SVG worked especially great for our bike prototype. Rather than creating individual images for bike and wheel designs, we could simply tweak some values in the SVG code and the bike and wheel designs changed to match.

Design Process

Our design process involved stakeholder interviews, field observations, surveys of existing research and tools, competitor analysis, ideation, storyboards, and digital prototypes.

Early in the process, the team quickly gathered stakeholder objectives, site and tech constraints, and inspiration from similar projects.

We employed a divergent and convergent ideation methodology, where team members would individually create dozens of sketches and then come together and discuss which ones had potential.

Concepts that were quirky, fun, and met project goals were than prototyped and tested. It was an iterative, agile workflow.