Interaction Design Projects

Modern communication systems are complex, and the creation of such systems involve a myriad set of disciplines. An interaction designer is trained to focus on the experience of the user, while keeping in mind the design of the interacting systems involved. I believe that any organization whose goal is to have meaningful impact in the public sphere must carefully design how its systems interact with the public it wishes to influence. The following are several projects demonstrating my work in interaction design.

Let's Free Congress

Parallax Data-visualization Piece for Campaign Finance Reform

Let's Free Congress is an interactive data-visualization piece advocating for campaign finance reform in the United States. Inspired by the advocacy work of Lawrence Lessig and the Rootstrikers, the project distilled the core arguments from Lessig's book, Republic Lost, and presented them in an interactive form. Over the span of two weeks, it reached roughly 70,000 people, and gathered over 5,000 signatures for the campaign to pass the American Anti-corruption Act.

This site was the end result of my thesis investigations, and a relentless exercise in iteration and reduction. I wanted to pair a clear and straight forward argument with an irresistible user experience, in order to carry readers to the conclusion of the argument and call them to action. The copy led the design, and the design was augmented by code. All three components (copy, design, code) went through at least three major iterations, and numerous smaller revisions.

Worked on: data visualization, graphic design, copy writing, promotional strategy … everything really.

Thesis Explorations

The winding path towards a thesis project

My thesis projected resulted in, but it took a winding path to get there. I began with a vague notion around using design to help people understand politics. In the first couple month I prototyped a few ideas around making legislation more accessible to laypeople. Data visualization emerged as a method for making information engaging and accessible.

Through experimentation I found parsing the entire legislative system unwieldy, and decided to narrow the focus to campaign finance reform. This new direction led to experiments in visualizing election data, campaign finance data, as well as forays into using animated gifs as advocacy pieces and writing twitter friendly copy. It was through theses that the components of Let's Free Congress eventually gelled together.

Worked on: prototyping, data visualization, data gathering, and more.

WellLife RFP Response

Design Management Final Project with Karen McGrane

The final project for Karen McGrane's Design Management class involved responding to a request-for-proposal for an imaginary client, WellLife, which is looking for a design agency to help expand and revamp their medical equipment product line and their enterprise preventative healthcare services.

My team decided to take a step back and look at WellLife's entire business model. Our approach was to figure out how WellLife can establish a dominant strategic position by becoming the anchor of their users' personal healthcare ecosystem. Drawing on ideas from psychology and behavioural science, we pitched a service-design oriented revamp of their business model. The idea is to redesign WellLife's lines of products and services to help their users build new healthy habits.

I took on the strategist role in this project, making sure that every component of the system we pitched are clearly contributing to the overall strategy, and demonstrating how the strategy gives WellLife new competitive advantages. I also took on the role of the primary presenter, and successful weathered the barrage of questions from Karen and the guest critics at the presentation.

Responsible for: Strategy, Research, Presentation

Broadway by Subway

Craft and Communication with Jason Santa Maria

Our final project brief from Jason Santa Maria was to create a personal digital publication, around the theme “Interactions with the City.” That fall was my first time living in New York, so I took the opportunity to capture my impression of this city while it was still new. I chronicled several journeys along Broadway, and captured my impressions of the city through my words, my photographs, and my design.

My self-imposed challenge was to design a magazine-style framework that is responsive. Can I design a site with visually distinct section sections that preserves its character as it scales down? Each section reflected the time of day of my visit, as well as the mood in my writing. Some entries are relaxed and meditative, while others are stark and skeptical. The choice of the long scroll page was a nod to the way Broadway threads across distinct sections of the city.

Responsible for: Writing, Photography, Design, Development

Technical Projects

Interaction design is usually done in context of a collaborative team. In order to collaborate effectively, the interaction designer must be knowledgeable in the discipline of their peers. My background as a web developer enables me to collaborate with developers and engineers very effectively. After all, I can speak their language and understand their concerns. Being able to code also allows me to prototype designs at a high fidelity more quickly. The following are several recent projects where I played a technical role.

What the Book

Exhibition companion piece for the AIGA

50books/50covers is an annual competition run by the AIGA, featuring the best in book and book cover design. This year’s exhibition was designed by Barbara de Wilde – my friend and classmate at SVA Interaction Design. We hatched the idea for to take a snapshot of how people on the web see the book today, just as the forces of technology is unbundling the publishing industry and the book itself.

Taking art directions from Barbara, I designed and developed the site using responsive design principles and a few AJAX tricks. The idea was to translate the experience of participating at the exhibit into the online world. My focus was to make each interaction as intuitive as possible, leaving room for the visitor to contemplate the questions and their reactions. The backend was developed using the CodeIgniter framework.

Responsible for: Interaction Design, Front-end Development, Back-end Development


Physical Computing with Rob Faludi

The WindSensor is an Arduino-augmented indoor wind chime that rings when the wind blows outside. The weight of the wind chime has a permanent magnet, which is moved invisibly by hidden electromagnets controlled by the Arduino board. The Arduino board receives signals (via a wireless XBee chip) from an anemometer that detects the wind's motion.

WindSensor was my final project for Physical Computing, done in collaboration with Barbara deWilde. Our assignment was to use the XBee wireless protocol. We decided to build something elegant and poetic that we can imagine having in our homes. Though the concept was simple, there were quite a few technical hurdles we had to jump through, especially on the electronics side e.g. learning to build electromagnets, and writing magnet activation routines that convincingly emulated the movement of the chime's clapper in the wind.

Responsible for: electronics and circuit board design, arduino code, concepting


Events Calendar at the University of British Columbia

The UBCevents calendar website was one of my last projects at the University of British Columbia. Having gotten to know the organization, its process and its audience thoroughly after two years of working with the events team – I set out to build a site tailored for the students at my alma mater and my friends and colleagues who will maintain it after I am gone. Knowing that I will not be there to service it, I designed and built something simple and friendly using WordPress.

The site was an experiment with responsive design, as I was well aware of the extensive use of mobile devices by UBC students. It serves as a test case for a responsive online brand framework that UBC is moving towards.

Responsible for: User Research, Design, Development

Financial Literacy for Youth

A non-profit teaching teens about financial responsibility

My friends and I started Financial Literacy for Youth (FLY) when we were just graduating from university. We recognized that our high school and university financial education was inadequate, and decided to do something about it. Over the years we've ran several conference for teens and built an organization devoted to the cause of financial literacy.

I coordinated workshops for the first two years of our conference. I wrote designed and wrote workshops, which were constantly tested with students through out its development. I also designed games and activities to help students internalize and apply the lessons they learned.

As part of the board, one of my primary responsibility in FLY is our brand, design, and technologies. In the three years between 2009–2011 I was responsible for every aspect of our organization's design challenges and technical problems. Through our web presence and promotional work we attracted the attention of teachers, parents, students, and occasionally reporters in our community, raising the profile of financial literacy in our community.

Financial Literacy for Youth is based in Vancouver, Canada.

Roles: Director, Designer, Developer, Writer, Instructor, Mentor, Delivery Driver, Helping Hands

More than just the work

I can say a whole lot about the value of interaction design, or developer skills, or storytelling abilities. All of those matter, but none of those necessarily make me stand out. You want to bring the right person on to your team, and in my opinion, mindset and attitude are more important than specific skills. So let me tell you what motivates me.

All the work that I do is driven by generosity and curiosity. Generosity inspires me to teach teens about finance, host code workshops for classmates, and run three non-profits' websites. Curiosity leads me to read neuroscience books, play in improv theatre, and write three pages everyday. I care deeply about the impact of my work. I believe great interaction design can shape social behaviours in new and powerful ways, and my goal is to leverage this for causes I believe in. I want to use all my skills and abilities to make a contribution to my world.

So, if you are looking for a design technologist who is fluent in multiple disciplines, capable of collaborating with your whole team, and passionate about the work being done, consider bringing me on board.

Yours Truly,
Tony Chu