Development 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 developer role.

What the Book

Exhibition companion piece for the AIGA

fig. 1.1 The definition of the book fades. fig. 1.2 First of seven questions. fig. 1.3 Definitions submitted from the US and elsewhere.

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 whatthebook.org 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

Go to http://www.whatthebook.org/

Imagine Day 2011

Orientations website for the University of British Columbia

fig. 2.1 Large screen view of a orientation group's page. fig. 2.2 A responsive view designed for students on the go during orientation day. fig. 2.3 Various t-shirts represented the faculties on campus.

Imagine Day is UBC's fall semester welcome event. Each year over four thousand students start their first day at university, and my task was to build a website that shows them all they need to know about their first day at school.

The site posed several challenges. There was the challenge of condensing all the myriad piece of information onto a single page, which needed to work equally well on the desktop as it does on the mobile. There was also the challenge of building a flexible content management system to house all the customized information for over 500 distinct faculties and groups.

I began the project by researching the organizational process of the Imagine Day team, figuring out all pieces of information they needed to communicate. Together we created a content hierarchy, which I then translated into a data structure. Knowing that the team had a lot of experience with WordPress, I made use of WordPress along with various modifications to create the underlying framework. Finally, I created the design based on the information hierarchy and the WordPress backend.

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

Visit: Imagine Day 2011 (Note: Some calendar content is no longer available)

UBCevents

Events Calendar at the University of British Columbia

fig. 3.1 Calendar and blog on a small screen. fig. 3.2 Home page on a tablet sized screen. fig. 3.3 Home page on desktop.

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

Visit: UBCevents

Financial Literacy for Youth

A non-profit teaching teens about financial responsibility

fig. 4.1 Pay It Forward - FLY Conference 2010 Team. fig. 4.2 Pay It Forward Conference website. fig. 4.3 Main organization website.

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

Visit: Financial Literacy for Youth

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.

Purpose

Winning entry in the first GOOD magazine design hackathon

fig. 5.1 Purpose project pitch. fig. 5.2 We want to expand our imagination for what our old devices could become. fig. 5.3 Telling the story of a creative way to reuse our old computers.

Purpose is a project created in 24 hours by a four person team from SVA in the 2012 GOOD Magazine NYC design hackathon. The concept is a creative technology reuse service that enables new ways of gathering old technology otherwise headed to landfills, and put them to new uses. Our project was the overall winning entry in a field of 20 odd teams from various universities on the east coast.

Our team collaborated closely on every aspect of the project, from ideation to concept to graphics to storytelling. Our approach was first ensure that the concept worked at a systematic level, providing value to every stakeholder in the consumer electronics life cycle. Once we settled on the concept, we shifted gears to tell an engaging story about the rationale and the experience of the service. I was particularly involved in copy writing and script writing for this project.

Worked on: Concept, Copy, Script Writing, User Journey

Visit: Purpose

Broadway by Subway

Craft and Communication with Jason Santa Maria

fig. 6.1 Mobile view of the design fig. 6.2 Each section retains its look and feel, as it scales up. fig. 6.3 The Union Square section, at the highest resolution.

Our final project brief from Jason Santa Maria was to create a personal digital publication, around the theme “Interactions with the City.” This 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 how the city impressed upon me 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

Visit: Broadway by Subway

The Divided Self - Cybernetics of Motivation

Introduction to Cybernetics and Systems Design with Paul Pangaro

fig. 7.1 We are all of two minds, constantly in conversation with ourselves. fig. 7.2 For behavioral change, we must address both our current and future self.

As a part of the SVA Interaction Design program, we were introduced to the study of Cybernetics. Cybernetics is a way of interpreting interactions in the world as self-regulating feedback systems. My project sought to map out the interactions between systems in our minds as we struggle to make decisions.

I drew on my background in psychology to systematically recast neurological systems into cybernetic terms. The most fruitful insight from this project is the connecting the idea that we are internally divided to the how we design behavior. Seeing different neurological systems as distinct and interacting agents inside our heads, I am compelled to ask how do designs appeal to each part of the self?

Why not just pay the Minimum Payment?

Promotional piece for Financial Literacy for Youth

fig. 8.1 Setting up the premise and the vocabulary. fig. 8.2 Interactive calculator of credit card interest. fig. 8.3 Owing a balance on a credit card is like leaving the facet open.

Financial Literacy for Youth is a non-profit organization that my friends and I started in Vancouver, Canada. This volunteer project was done as part of the promotional efforts for the group. This site attempts to illustrate to students graphically and interactively how their credit card payment directly impacts how much they pay. The message being conveyed here is simple – but in order to make it memorable and engaging it had to be designed to appeal to students without patronizing them.

Responsible for: Writing, Illustration, Design, Development

Visit: Why not just pay the minimum payment?

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 stands 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