Interaction Design Projects

Modern communication systems are complex, and the creation of such systems involve myriad 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 must carefully design how its systems interact with its audience. The following are several projects demonstrating my work in interaction design.

R2D3: Visual Introduction to Machine Learning

Parallax Data-visualization explaining basics of machine learning

fig. 1.1 The candidates that outspent their opponents won 95% of the House seats in the 2012 congressional elections. fig. 1.2 One of four lobbying spending comparisons to illustrate the lopsidedness of lobbying efforts. fig. 1.3 Screenshot of the most complex animation on the page.

R2D3 is a collaboration between Stephanie Yee and me, in which we use interactive design to express statistical concepts. ‘A Visual Introduction to Machine Learning’ is the first piece in this side project. This post explains the basic concepts behind machine learning using a set of animated visualizations. In the first 30 days after it launched, it had over a quarter-million visitors and was featured in Fast Company, Popular Mechanics, and Gizmodo.

Producing this piece required a mix of writing, design, and programming skills. Stephanie and I co-wrote the story. We focused on making the examples and concepts as approachable as possible, by providing substantive, accurate explanations. This process required rewriting and reworking the copy several times, as well as testing several different data sets to see which one made the story clearest.

The bulk of the design and programming work focused on the transitions between conventional data visualizations like scatterplots and histograms. These animated transitions, which applied many of the scroll-linked animation techniques developed in my thesis project, were critical to helping the reader understand how different concepts relate to one another. A substantive new design concept was the final decision tree visualization, which combined a tree graph and a ‘plinko-machine’ animation to reinforce the mechanics of a decision tree and to explain the complex concept of overfitting.

Worked on: data visualization, graphic design, UI engineering

Visit: A Visual Introduction to Machine Learning

Sift Science User Details Page

Sift Science Fraud Detection Console UI

fig. 2.1 The Sift Science console allows the fraud analyst on our customer's teams to quickly assess whether a user or order is fraudulent. fig. 2.2 The console employed simple visualizations that highlight connections between users. fig. 2.3 One of the joys of being on a product team is being able to refine and hone features over several iterations.

One of Sift Science’s core design problem is teaching merchants to understand and trust results from its complex machine learning algorithms. Without that trust, they will not adopt the product.

When I arrived at Sift Science, the User Details page consisted of the score, and a list of inscrutible machine learning features that contributed to the score, sorted by their weights in the machine learning model. Customers did not know how to interpret this data at all.

I began the redesign of the Sift Science console by talking to customers and figuring out where Sift Science fits into their workflow. Through observing them at their work, it became clear that they used the console mainly for verification and confirmation. Our customers had certain intuitions about what fraud looks like and they wanted to check those intuitions quickly.

The new design presents intuitively important information first, in a format that’s familiar to merchants. Fraud signals are grouped by concepts e.g. orders, social identity, connected users, and activity timeline. Connections between users are visualized. Discrepancies in geographic information are mapped. The result is a report with which customers can quickly verify fraud. The user details redesign was the centerpiece of a larger redesign of the entire Sift Science console.

Worked on: concept, design research, prototyping, product specification, usability testing.

Visit: Sift Science Console Demo

Let's Free Congress

Parallax Data-visualization Piece for Campaign Finance Reform

fig. 3.1 The candidates that outspent their opponents won 95% of the House seats in the 2012 congressional elections. fig. 3.2 One of four lobbying spending comparisons to illustrate the lopsidedness of lobbying efforts. fig. 3.3 Screenshot of the most complex animation on the page.

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 into 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 final 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 galvanize them to action. The content led the design, and the design was augmented by code. All three components (content, 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

Visit: Let's Free Congress

Thesis Explorations

The meandering path towards a thesis project

fig. 4.1 A data visualization of election spending and results in the 2012 House Elections. It was abandoned because it got too complicated. Click through to see the live version. fig. 4.2 A sketch of a campaign finance source data visualization. Click through to see a later prototype of the idea. fig. 4.3 Post-it sized sketches exploring how to visualize aspects of a proposed piece of legislation.

My thesis project resulted in letsfreecongress.org, but it took a meadering path to get there. I began with a vague notion around using design to help people understand politics. In the first couple months I prototyped a few ideas around making legislation more accessible to general audience. 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 and campaign finance data, as well as forays into using animated gifs as advocacy pieces and writing twitter friendly copy. It was from these exercises that the components of Let's Free Congress eventually emerged.

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

Visit: Thesis Process Blog

Sift Science Formulas

Connecting Machine Learning Insights to Process Automation

fig. 5.1 With Formualas, Sift Science's customers can define conditions for actions using a query builder. fig. 5.2 Many formulas can be connected to a few actions. This sketch illustrated designs that help customers understand what actions are happening.

Sift Science’s core value proposition is stopping fraud before it happens. These predictions were exposed as a score between 0-100 via an API. While scores work well for technically sophisticated customers consuming it through the API, it unfortunately does not fit how most merchants think. Many customers just want to know, “should I accept this order, or not?” Ideally, these decisions are automated, so they can focus on growing their business.

The formulas feature was designed to address this need for automation. By creating a formula, customers can describe the kinds of users they want suspended or banned, using a search-inspired UI. This allows customers not only to take action based on machine learning predictions, but also encode other kinds of business logic. Most importantly, it gives a non-technical customer a way of automating decisions.

This feature transformed Sift Science from being an input into a manual decision process, to being a central hub where automated decision are managed. It has removed key barriers for large customers looking to adopt Sift Science.

Worked on: concept, design research, product specification, UI design

WellLife RFP Response

Design Management Final Project with Karen McGrane

fig. 6.1 A slide describing the design process of our "firm". fig. 6.2 The slide outlining some components of the system we proposed. fig. 6.3 A model of behaviour we used in our pitch, pulled from BJ Fogg's research.

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

My team decided to take a step back and look at WellLife's entire business model, to better understand 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

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 quickly prototype designs at a high fidelity. The following are several recent projects where I played a technical role.

What the Book

Exhibition companion piece for the AIGA

fig. 7.1 The definition of the book fades. fig. 7.2 First of seven questions. fig. 7.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, when the forces of technology are 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/

WindSensor

Physical Computing with Rob Faludi

fig. 8.1 A video describing the windsensor.

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 de Wilde. 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, 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

UBCevents

Events Calendar at the University of British Columbia

fig. 9.1 Calendar and blog on a small screen. fig. 9.2 Home page on a tablet sized screen. fig. 9.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 colleagues. Knowing that my non-technical colleagues will need to maintain 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 served as a test case for a responsive online brand framework that UBC was moving towards.

Responsible for: User Research, Design, Development

Visit: UBCevents

Up for a Coffee or Conversation?

I am always up for interesting ideas and projects. If you want to chat about any of the project I worked on, or have an interesting project or opportunity, feel free to get in touch!

Tony