A Data Driven Website



the final piece

An interactive site and printable takeaway meant to creatively visualize the data of AIGA’s 2017 Design Census. Our group of three sought to present the data in a way that would allow the user to reflect on their own choices in comparison to designers they sought to be like and the data set as a whole. The on boarding begins with an instructional video which then leads into the user choosing two measures of success. They are then led to a blank landscape which populates as they answer our set of four questions in relation to their dream career as a design professional. In the end they are shown their populated landscape which graphically represents their choices in relation to the census data of their “success group” and the total census data set. Once the final map is populated, a png is automatically downloaded which breaks down what most of that user’s “success group” chose in the design census and what the icons symbolize. Finally, the user can explore the symbols on the map, download their landscape, and look into how we analyzed the data. With the final map and the additional png download, the user can print out a physical version of their map to take away. During this project I primarily helped out with the visual assets and copy, while also offering opinions on the overall style of the site. Towards the end of the project, I offered more help in adjusting the html and css as we tightened up our visual style.


Assets 1

My primary role in this project was creating all of the visual assets that appeared on the site, especially once we agreed upon a textured look like it was stamped or drawn. The above illustrations were drawn by my teammate, Sherry Wu, and set the initial tone for our visuals going forward. We decided to stray away from animal imagery and leaned into inanimate landscapes, which is when I began to contribute on the visual development.

assets 2

I first began by drawing samples of different landscapes that we could place different icons on while Sherry continued to iterate on the icons we could use to populate these spaces. Above is the collection we came up with. It was around this point that we realized we should create more of a map rather than four different landscapes, to illustrate that the questions are connected and a part of one design career.

Final assets

I referenced several of my teammate’s illustrations when redrawing the final icons, but revised them to be consistent with my style. I tried to make them simplistic while still bringing in some texture and detail.


Landscapes 1

After we started to settle on our assets, I began iterating on complete maps to bring both the icons and environments together. We agreed on the overall path of city to suburbs to forest to mountains. As we developed our user experience, we thought about how the map moved as the user answered the question. With this iteration we imagined the image sliding to the left as the questions change in a side panel. At this point we decided we wanted a print piece to give the user a literal map, which ended up

Landscapes 2

Our third team member, Maddie Headrick, then came in and iterated using our existing assets to create new map ideas, bringing in textures and other icons to symbolize other bits of data. As we iterated our map, our color palette also adjusted. At this point I took the final iteration and redrew it for consistency of illustration style.

Landscapes 3

With our second palette we landed on the above map base which would become populated though our website. At this base level, the sheep stand in as a representation for 1% of the success group being shown. For example, if there was a group of 3,000 people, there would be 30 sheep. The green patterns represent the area where the answers most popularly chosen by the entire census group, would show up. for that question. And finally the lakes represent the two measures of success chosen.

Final landscape

The background was competing too much with the bold purple assets on top so we decided to lessen the contrast between the icons and make the sheep smaller to make more room for the generated icons.


Takeaway 1

Once we decided to to create a printable piece I played with ways of presenting the choices that user chose and the hard numbers of the data. In this version I bring back both the questions for the user to refer to and their choices, while also talking about the most popular answers by the success group they chose. With this method, the user can very clearly compare and contrast their choices to the most popular choices, in part by seeing the hard numbers to the right of how popular it really was.

Takeaway 2

With this next iteration the user doesn’t get a written reminder of their choices, but gets a more detailed explanation of how the answers of the success group align to their success in design. They are able to see the questions and hard data still for more immediate information if they don’t want to read the full takeaway. This option also seemed appealing as it was more achievable with the timeline of our project to create a takeaway just related to the different success groups rather than generated dependent on the user’s answers.

final takeaway

As the style of our site and map changed, it made sense to also adjust the style of the takeaway to relate more to the landscape itself. We also decided it was important that they have a key to decipher their map without our site. Ultimately I took a method similar to the previous iteration and provided the user with an extended explanation, but highlighted a short sentence instead of the numbers as the quick takeaway message. This piece downloads immediately upon answering the final question and is intended to be printed on the other side of the user’s generated map.


A walkthrough of the site…


The website itself

You can also check out the site here if you want to experience it for yourself! We recommend you view it at a window size of around 1440 x 900.