chrisgonzalez

Prototyping for CNN

prototypes + products

Mapping Election Results

From GIS to maps on Election Center

Visualizing Exit Polls

Helping tell the story of elections with data

Building the Flipper Ticker

From prototype to homepage for CNN's Elections coverage

Visualizing Food Choices

Correlating glucose readings to restaurant visits

Finding Metabolic Trends

Visualizing daily metabolic trends across the years

Graphing Tech Startups

Dealing with a large data set, I solve visual and code problems

Working on the new CNN

Working as a front-end developer and interaction designer to launch a new CNN

Crafting Data Visualizations

Creating reusable visualizations for the city of Miami

Timeshifting Diabetes Data

Exploring metabolic data through different time contexts

Hacking Midi

Designing an open-source platform for mixing music

Prototyping for CNN

Designing a new way to consume breaking news on CNN.com

Making Piano Stairs

Building an interactive, playable staircase to promote healthy choices at work

Deploying a Social Billboard

Displaying Twitter votes in real-time on a Times Square billboard

Creating On-Air Galleries

Telling stories with images for CNN news

Visualizing Twitter Data

Designing interactive data visualizations for the CNN iPad app

2016

As lead Interaction Designer for CNN.com's elections coverage, I prototype and build front-end components for elections results. From maps to candidate bios to page layouts, I work on a small development team to realize designs for millions of users every day.

Senior Interaction Designer - 2

Turner Broadcasting Systems, Inc.

JavaScript
HTML
CSS
Linux
Node.js
Large-Scale Web Deployments
React.js
ES2015
NPM
Module Bundlers
Visual Design
Data Visualization
Responsive Design

2015

In 2015, I worked on my technical fluency. Drawing inspiration from Code Library and API design, visual design, and the ever-evolving landscape of fancy new production tools, I crafted front-end code and comprehensive updates to CNN.com, built a mobile application prototype for CNN, and contributed to the architecture and development of elections coverage for the 2016 Presidential Primaries.

Senior Interaction Designer - 1

Turner Broadcasting Systems, Inc.

JavaScript
CSS
HTML
Node.js
Linux
Front-End Development
Large-Scale Web Deployments
Visual Design
Data Visualization
Responsive Design
NCAA Instabracket 2015
NCAA Boss Button 2015

2014

Promoted to Senior Interaction Designer, I add to my design role by providing insights and direction for information architecture, user flows, and front-end architecture. From July through the end of the year, I worked as a Front-End Developer and Interaction Designer on the redesign of CNN.com

Senior Interaction Designer

Turner Broadcasting Systems, Inc.

Expert Interaction Designer - 3

Turner Broadcasting Systems, Inc.

JavaScript
HTML
CSS
MongoDB
Raspberry Pi
Linux
Node.js
Front-End Development
Visual Design
Data Visualization
Responsive Design
isgonzalez.com Version 2.0
PGA App - Samsung SmartTV

2013

This was a year for getting things done. I taught classes on CSS and Open-Source Technologies. I participated in two Hackathons (one at Turner, one at Yahoo!). I helped found a Maker group at Turner, learned how servers work, and got back into playing and recording music.

Expert Interaction Designer - 2

Turner Broadcasting Systems, Inc.

UI Prototyping + Interaction Design

Rimidi Diabetes, LLC

Audio Production
JavaScript
CSS
HTML
MongoDB
Raspberry Pi
Linux
Node.js
Visual Design
Data Visualization
Mobile Design
Responsive Design
Servers + Port Routing
isgonzalez.com Version 1.0

2012

In 2012, I worked on my craftsmanship- thinking beyond the bounds of any single project into the mutable nature of technology and design. I crafted semantic code, front-end architecture, modular room acoustics, and began learning piano.

Expert Interaction Designer - 1

Turner Broadcasting Systems, Inc.

JavaScript
CSS
HTML
MongoDB
WebGL
Visual Design
Mobile Design
Piano Lessons
Responsive Design
MLB PostSeason
AtWork - iPad
Image Galleries

2011

After finishing my Master's project exploring social health for Diabetics, I found an amazing job at Turner Broadcasting and took a deep dive into a new career path.

Expert Interaction Designer

Turner Broadcasting Systems, Inc.

Master of Science

Human-Computer Interaction - Georgia Tech

Teaching Assistant

3D Design - Georgia Tech

JavaScript
CSS
HTML
Visual Design
Data Visualization
Mobile Design
Teaching Assistant Curriculum
Healthcare Technologies
Cognitive Psychology
Blocks - Diabetes Data Tracking
Electronic Health Records Redesign
UAV Interface Design
Personal Site Redesign (Wordpress)

2010

In 2010, I was deep in the midst of graduate school. I decided to focus on diabetes technology for my Master's Project and found Elizabeth Mynatt as a faculty advisor. In the Fall, I landed a Teaching Assistant position with Carl DiSalvo, which got me addicted to helping people learn.

Master of Science Candidate - 1

Human-Computer Interaction - Georgia Tech

Teaching Assistant

Visual Design - Georgia Tech

Web Producer

Ivan Allen College - Georgia Tech

Processing + OOP
CSS
HTML
Visual Design
Data Visualization
Engineering Psychology
Human-Computer Interaction
Teaching Assistant Curriculum
Living Liberia Batik - Interactive Storytelling
Class Projects
Freelance Web Design

2009

In 2009, I left my job as a Flash Ad Maker for a slightly stranger job as a Master's student. In the interim, I stumbled into a role mixing live music recordings for a local podcast. In the Fall, I went back to school and began work on a memorial project for Liberia in collaboration with the Carter Center.

Multimedia Developer - 2

Screen 5ive Media, LLC

Recording + Mix Engineer

haveyouheard.net

Master of Science Candidate

Human-Computer Interaction - Georgia Tech

JavaScript
Flash ActionScript 3
Sound Design
Visual Design
Engineering Psychology
Human-Computer Interaction
haveyouheard.net mixes
shrimpsauce clothing
Tons of Flash Ads + Catalogs

2008

In 2008, I worked full time as a Flash Developer. I learned all about ActionScript, XML, and how to work on a small production team. Within 6 months, I was promoted to team lead, coordinating efforts between designers and developers to meet aggressive timelines.

Multimedia Developer - 1

Screen 5ive Media, LLC

Audio Production
Scrum/Agile
Flash ActionScript 2
PHP
JavaScript
Flash ActionScript 3
Sound Design
Tons of Flash Ads + Catalogs

2007

After finishing my Sound Design senior project in Surround Sound music mixing, I found an internship for audio production. After that, I found an internship learning Flash. I took on some freelance Sound Design and Video Editing work. Then I got promoted to a full-time Flash Developer.

Multimedia Developer

Screen 5ive Media, LLC

Flash Development Intern

Screen 5ive Media, LLC

Audio Production Intern

Creative Sound Concepts, LLC

Video Editor + Sound Designer

Freelance

Bachelor of Fine Arts - Sound Design

Savannah College of Art & design

Audio Production
Flash ActionScript 2
Sound Design
Scrum/Agile
5.1 Surround Music Mix Thesis
Sound Effects Design - Senior Film Project
Audio Installation Project

THE DISTANT PAST

Overview

In October 2013, I was invited to participate on a team of three with Mark Barilla and Curt Merrill at a hackathon in lovely Sunnyvale, CA. The weekend was sponsored by Yahoo! and run by the Global Editors Network with the goal of fostering innovation in digital news.

The weekend we flew in coincided with a shooting at LAX. Curt flew through LAX on his way up to Sunnyvale, arriving about an hour after the conclusion of the shooting. Finding relevant news and up-to-date status of the event proved exceedingly difficult. Comparing articles and writeups from disparate locations, social media accounts, and headlines was a heavy task to accomplish on a mobile phone while moving through a terminal. We took this use-case as our primary challenge in developing CNN Storyline.

Rapid Prototyping

Over two days, we prototyped a system that surfaced CNN editorial, live blog posts, and social posts surrounding a breaking news event in a timely and evolving manner. On first visit (above), the app features a story summary and some of the latest news bullets, while allowing readers to dive deeper into op. ed. pieces, background research, videos, and related social media posts.

On subsequent visits, the app highlights any new and updated items since the user's last visit. This allows for quick scanning to see how a story has evolved.

Fig. 1 - CNN Storyline: First Visit

Fig. 1 - CNN Storyline: Second Visit

Wrapping Up

Over the weekend, I played the part of front-end developer and interaction designer, hand-coding the prototype using Node.js, HTML, CSS, and some client-side JS (jQuery and Handlebars). In the airport on my way out of town, I rewrote the CSS to make the site responsive.

At a hackathon, immediate and decisive action is crucial. Iteration can't be drawn out- it has to be a part of team conversations. Distilling a design down to its most crucial elements is a powerful exercise in identifying constraints and focusing on the essentials.