Visualizing Los Angeles 

Painting a better picture of Los Angeles transportation data for civilians

Design team: Cheechee Lin, Yvonne Chen
10 week project with Creative Labs
Sept - Dec 2016
IxD, Storyboarding, Branding

As a team of designers and developers at Creative Labs. Our goal was to create a visual and interactive narrative about Los Angeles transportation, reflecting our personal experiences with parking, traffic, and commuting times. My design team and I storyboarded and created a brand that reflected the concept of data.


Who we wanted to design for

We wanted to design for a wide range of people, from young adults to senior citizens. This population has access to internet and frequently surf the web. They have travelled by car and by airplane and are interested in learning more about the city's activity. As one of the largest centers in the world, and one least focused on public transportation, we believed that our project would ultimately inform traveling individuals.

Pulling Data

Selecting datasets from DataLA

For the first two weeks, our team met for scrum meetings. Each of us selected 3 data sets from the Data L.A. repository and sketched out how we would individually translate them into visualizations. We shared our ideas as a team and chose 3 data sets that spoke to us the most.

1. Density of parking tickets across all counties
2. Number of cars and planes leaving and entering LAX
3. International destinations to and from LAX


Exploring data visualizations, infographics, and interactive webpages 

As a part of the design team, Cheechee and I pulled inspiration from data visualization agencies and added them to a moodboard to reference throughout our timeline. All members contributed to the page. I individually explored 3 characteristics based on the board we put together. “Intricate” showed more detail, “playful” tried making datasets more fun, and “geometric” took a liking to minimalist shapes.




Our initial starting point for how we would engage the user came from Movement of Data and Why Do Buses Bunch?. The first link creates a dynamic journey that presents visualizations as the user scrolls. The second was an example of the playful interactions we wanted in order to engage our users.

Cheechee, Yvonne, and myself each created a few ideas for the splash page, which was our primary focus at the start of the project. We each had a different tone based on our personalities as designers. I tackled a bit of the intricate side, while Yvonne’s a litle geometric and Cheechee’s playful. We found that all of us resonated with a minimal feeling and felt that stark colors and contrast was best for our story.


Using AGILE as a framework
for our process

Our first iterations were drawn around the concept of a car, but after discussing with our developers, we found that car animations could not be completed in our timeline. Using AGILE, we reframed our narrative using airplanes, which would lead the user from the splash to the preview of the first visualization: parking tickets.

To further connect the theme of data, we implemented grids of hexagons in visualizations. On the splash, the mouse hover displaces squares from a grid overlay. These individual shapes represented parts of a whole, the way data creates a bigger picture.


Honoring Mondrian's primary colors and geometric interest

Our moodboard showed that data visualizations commonly used highly saturated and bright colors against a muted background. The design team felt the strongest connection to primary colors because they quickly caught the eye are were hard to avoid. Our designs were equally minimal, using vectors as the foundation. The personality of our project was inspired by Piet Mondrian’s compositions from the De Stijl movement. We felt that the geometric characteristics communicated how data is a simple piece of a complex whole.

Final Web Design

Cycling through iterations and presenting for demo day

With the help of a style guide, we were able to communicate our vision of the brand to our developers. Our first version of the splash page first played with a city that was made out of squares, the second version had a car (which proved to be too time consuming), and the third finally integrated the airplane. Each visualization demonstrated the styles of each developer and we were able to present the website on Demo Day.


Improvisation inspires creativity, Dynamic teamwork and communication is key

Who you work with and how you work with them is such a huge part of how rewarding a project can be. At the end of 10 weeks, each team member felt that they had equal ownership. Not only was the project engaging (thanks Mihir), we had fun creating. I thoroughly enjoyed working with Cheechee, Yvonne, and the rest of our team, spending several evenings outside of Creative Labs to finish Visualizing Los Angeles.

↵ Back