Ted McDonald

Interaction designer
Incoming intern at NASA JPL

  • My Role
  • UX Design
  • UI Design
  • Front-End Code
  • Team
  • 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
  • Project
  • Duration: 20 weeks
  • Client: UW College of Engineering

Interactive Prototypes for the UW

The University of Washington (UW) was finishing work on the West Campus Utility Plant (WCUP), a water and power plant that serves as a set piece for an ongoing campus development plan. Included in the final designs for the WCUP were six large, street-facing displays.

My team was given two quarters to explore and prototype interactive content for the WCUP displays that would promote UW sustainability values, as well as serve as an attraction, reflecting and adding to the culture of the local neighborhood.

Display concept for WCUP building.

Outcome

My team designed, developed, and demoed two interactive prototypes for our stakeholders.

Stakeholders loved the prototypes, and now have a clear content vision for the WCUP displays and a process for moving forward with future teams as content is updated.

What We Made

After testing many ideas, we designed and developed two interactive prototypes. One prototype used the Kinect motion sensor and had users manipulate on-screen buttons to simulate water going through pipes. Another prototype had users create custom bike designs via a mobile web app and appended the creations to displays on site.

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, the pipes were beautiful and unique the WCUP.

Our interactive water pipes prototype used gestural interactions to simulate water flowing through pipes, via the Kinect sensor. Our concept allowed pipes to cross multiple displays, though our prototype demonstrated only one.

(left) Water pipe interaction via Kinect. Click for non-gestural demo!
(right) Inspiration for water pipes and building the prototype.

The interaction was quick to learn and everyone wanted to try it out. Even in a gamified and abstract form, the prototype stayed true to the purpose of the WCUP.

Design a Bike

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

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

To coincide with bike month, we created a mobile web app that let users design a bike and add their name as a decal. Their designs would then show up on the WCUP displays.

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

Because users are able to design bikes from any location, the app works as an incentive to visit the WCUP displays. Users get a piece of the experience on the mobile web app and are motivated to go see if their creations made it onto the displays on site.

This concept also 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 partner with local clubs and organizations and use messaging as a call to action or to promote events.

How We Got There

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

User Research

We split into two teams during our research phase. One team interviewed stakeholders in the UW administration and surveyed existing research related to the local neighborhood and UW sustainability objectives.

The other team took measurements of the site, conducted field research to observe users and their movement patterns, and researched sensors for interaction.

The team organizing and analyzing early research findings.

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 take advantage of the WCUP displays to give character to the growing West Campus. Community engagement was a common theme.

Site Constraints

Our display interaction zone had a steep slope in elevation. To make matters more difficult, the distance between user and feasible sensor placement was about 4-8 meters.

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

This meant that certain sensing technology, like the Microsoft Kinect, could encounter problems given the distance. If sensors were placed inside the WCUP, window glass interference was a concern.

Since we had initial setbacks getting security clearance to enter the WCUP, we set up the Kinect sensor in a hallway. We matched the height and distance specifications we had measured on site and made sure to point the Kinect through window glass to emulate site conditions as close possible.

Testing Kinect through hallway window.

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

Kinect recognizing figures through window.

Ideation

Our concepts had to be interactive, fun, promote UW sustainability values, and add to UW West Campus character. Due to the transient nature of public displays and the short attention span passersby exhibit, interactive content needed to be bite-sized, artistically abstract, and easy to interact with.

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. We repeated this process a multiple times to improve subsequent ideation rounds.

Given how broad our scope was, initial concepts were all over the place. The team was trying to combine sustainability, neighborhood culture, and games and it proved difficult to move forward on ideas.

Interaction concepts sampled from various members of the team.

I proposed we stop trying to combine goals into a single concept, but rather think of goals as separate content packages. So one content package could focus on a specific sustainability value, while another could focus on a different sustainability value or activity that added to the culture of the local neighborhood.

Research showed that repeat walks passed the WCUP are common, so displaying only one type of content can become stale. Instead, displays could cycle through content packages depending on time, date, or context.

This made it much easier to converge on good ideas since concepts were simpler and focused.

Quick to Build, Easy to Transfer

Prototypes were built 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 complexity and depth.

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

Lego-like pipe components made it easy to test different layouts.

The 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 design prototype. Instead of spending time creating individual images for bike and wheel designs, we used JavaScript to quickly change some values in the SVG code and the bike and wheel designs changed to match.

Bikes were SVG, allowing quick code-based designs.

Aesthetic simplicity, component style design, and code-based prototypes also allow for easier handoff to future teams.

Reflections

This was a big project and I am really proud of the prototypes we created. The size of the team presented challenges, especially during ideation. Dealing with those challenges really made me appreciate the value of good project management techniques.

I learned that an overly broad scope can be its own curse and stall forward momentum. Thinking of project goals as individual content packages instead of combining them into a single, all-encompassing concept helped focus the team and ensured ideation sessions were productive.

I'm grateful to my team members and their willingness to teach me things I previously had little exposure to. I played a significant role in ideation, front-end coding and visuals, but I learned a lot about user research, program management, physical computing, and more.