Ted McDonald

I design products and interactions that are engaging and accessible. I am studying Human Centered Design and Engineering at the University of Washington.

Interactive Prototypes for the University of Washington

I played a major role in designing and prototyping interactive content for six large, street-facing displays on the University of Washington campus.

My team created a prototype that lets users simulate water going through pipes using a Kinect sensor, and another that lets them append bike designs to the screens via a mobile web app.

My Contributions

  • Creative lead
  • UX design
  • Prototyping
  • Front-end code

Team Members

  • Ted McDonald
  • Angela Nelson
  • Lo Wheelwright
  • Nicole McGovern
  • Kate Cowley
  • Madison Holbrook
  • Ashish Chaudhary
  • Andrew Briggs
  • Rafal Kocielnik
  • Joshua Yao
  • Brock Craft
  • Tyler Fox
  • Andy Davidson

Introduction

The University of Washington was finishing work on the West Campus Utility Plant (WCUP), a major installation responsible for providing chilled water and backup power to various buildings on campus.

Included in the final designs for the plant were six large, street-facing displays.

Screen concept for WCUP building.

Design Challenge

My 16-person team was given 10 weeks to explore and produce interactive content concepts for the WCUP displays that would promote UW sustainability values, as well as serve as an attraction, reflecting culture of the surrounding neighborhood.

We explored different types of motion sensors, including Kinect, as well as alternative methods of interaction using mobile apps.

My Role

My role began as a UX designer to help with research and ideation. I pushed the team to move beyond concepts and led the development and direction of our working prototypes. I became the creative lead midway through the project.

Research

After an initial meeting with one of our stakeholders, it became clear that there was no set vision or known constraints. Given our tight schedule, we needed to figure out the direction our project should take, as well as figure out the site constraints.

We split into two teams. One team interviewed other stakeholders throughout the UW administration and conducted on-the-street surveys to get a sense of who our site passersby were. The other team took measurements of the site and researched potential sensors for interaction.

Stakeholder Interviews

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 a car. There was also a desire from stakeholders to highlight the WCUP building and surrounding neighborhood somehow. Community engagement was a common theme.

The team organizing and analyzing early research findings.

Site Constraints

Our screen interaction zone (the zone in which our content is meant to be interacted with) had quite a slope in elevation. To make matters more difficult, the distance between user and likely sensor placement was about 4-6 meters.

This meant that certain sensing technology, like the Microsoft Kinect, could encounter problems given the interaction distance. The team was also unsure if sensors could be placed inside the utility building and how the window glass might interfere.

Site surveys gave us an idea of interaction zones and viewing angles.

Bootstrapping

Since we had initial setbacks getting security clearance to enter the WCUP building, some team members and I set up a Kinect sensor in one of the buildings at the UW. We matched the height and distance specifications we had measured on site and made sure to point the sensor through a window to emulate site conditions.

Our setup actually worked well enough that we decided to go ahead and allow concepts using the Kinect sensor in our ideation.

Kinect recognizing figures through window (left) and alternative view of window test (right).

Ideation & Critique Sessions

Our concepts had to be interactive, related to sustainability or reflective of the site neighborhood. We took sustainability topics reflected in our research and abstracted them to make our concepts simple and fun.

We were aware of the more transient nature of a large interactive display and the short attention span passersby would exhibit. Our ideas were designed to be bite-sized in nature and easy to interact with.

Interaction concepts sampled from various members of the team.

Selecting Concepts to Prototype

We wanted to showcase a variety of interaction concepts. User research showed that repeat visits to the site are common, so displaying only one content type would quickly become boring. The idea was that the screens could cycle through content depending on time, date, or context.

We chose one concept that involved the use of gestural interactions via Kinect sensor, and another that made use of a mobile web app to append custom user designs on the screens.

Water Pipes Prototype

We had been trying to come up with a way to tie the WCUP building into our project, where our displays were located.

We decided to create a prototype based off water pipes inside the building. The colored pipes were beautiful, unique to the area, and we came up with a concept where passersby could use gestural interactions to simulate water flowing through the pipes, via the Kinect sensor.

Water pipe interaction via Kinect (left). Inspiration for water pipes and building the prototype (right).

Users could manipulate an onscreen hand and press buttons to initiate water flow. It was fun, yet true to the building. The water pipes prototype fit the goal of adding to the neighborhood culture and could serve as a fun attraction.

Design A Bike Prototype

We wanted to connect UW sustainability values with the larger Seattle community, so we looked into ways the city was involved in promoting sustainability. We discovered many areas of overlap, especially around transportation.

May is bike month in Seattle, and biking is encouraged by many local companies and organizations. Transportation sustainability is important to the UW, so the theme was perfect to ideate around.

To coincide with Seattle’s bike month, we created a mobile app that let users design a bike, add their name as a decal, and append their design to the screens on site.

Mobile app appends bikes to screens on site (left). In addition to bike color, mobile app allows users to choose a wheel design and add their names (right).

The user is able to create the bike from any location, so the app works as an incentive to visit the physical location of the displays. Users get a bite-sized piece of the experience wherever they may be, and are motivated to go see if their bike made it onto the displays at WCUP.

A Template for the Future

This concept serves as a template for how the UW could use events and initiatives surrounding sustainability in order to engage with the larger community. The UW could even partner with local cycling clubs and organizations, and use messaging as a call to action or promotion of events.

Rapid Prototyping

Due to the compressed schedule my team had, I designed prototypes in a way that allowed for quick assembly and changes.

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

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

Basing designs off lines also made it easy to export as SVG files, which are resolution scalable and code-based.

Pipe components made it easy to test different layouts (left). Bikes were SVG, allowing quick code-based designs (right).

The code-based nature of SVG worked great for our bike design prototype — instead of spending tons of time creating individual images for the different bikes and wheel designs, we used JavaScript to quickly change some dash array values in the SVG code, and the wheel design changes to match.

This method of prototyping also has the benefit of easy handoff to future teams.

Outcome

Our stakeholders loved the prototype demos, mentioning that getting to actually try prototypes sold them on the concepts — one of the many reasons prototypes are important.

The project went very well, and various stakeholders, including the University Architect and a senior member of the UW Office of Budget and Planning, expressed their desire to sponsor an ongoing research group that focused on designing content for multiple displays around campus.