Uncover AIGA

A web experience that faciliates a data exploration of the 2019 AIGA* Design Census.

*American Institute of Graphic Arts
Using an expansive spreadsheet with over 9000 responses about designers’ income, quality of work/life amongst other data points, the website translates the depth of a designer’s experience beyond a statistic by providing insight to quotes and anecdotes: the true thoughts and voices behind the numbers we so easily digest.
-> Collaborators: Francis Park, Hayoon Choi, Sarah Xi

-> Spring 2022

︎ Web design
︎ Branding
︎ Data Visualization
︎ Web development

In addition to design, brand, and concept development, I was the lead web developer on the team and handled all aspects of web development. I also led my team in data analysis and content collection using python. I handed off asset creation to my teammates as I began coding the website. You can access the in-progress web prototype here.  

The website itself is coded in static HTML and only one flow (demographic) is clickable. I plan to rebuild the website using a content management system!


01: Landing page animation

The landing animation is designed to capture the user’s attention and hints towards the masking interaction that is used throughout the site. 

02: Homepage & Progressive Disclosure

Our website is designed around the idea of progressive disclosure, echoing the theme in our data collection. As the user continues to browse the site, additional feature are added.

Below is what the user sees the first time they land on the page. 

03: Category and quote selection

Once the user selects a category, they are then prompted to select a data point. This services as a data driven starting point that will later allow the user uncover deeper insights related to data. To go along with the uncover theme, data points are hidden underneath and circles are used as markers to assist the user in their discovery. 

Data points become fully uncovered to indicate that the user has already explored the page. 

04: Uncovering individual voices

Clicking on the data points takes the user to the respective page where they explore a visualization of the designers that the data speaks to. This serves as an entry point into the quote section which also speaks to the nature of the data collection.

The balls serve as a data visualization, where the dark balls represent the individuals that make up the particular data point. 

04: Quotes page

This was the most information heavy section of our website. We aimed to make the interaction informative yet delightful by implementing animations in the quotes preview section every time the user scrolls to a quote. Each draggable sticker represents information about the author of the quote. 

We also had plans to have the stickers allow the user navigate to a quote page that compiled the quotes of designers of the chosen attribute. I was unable to implement this in our current web prototype due to technical limitations, but it is something I hope to do in the future!

Understanding the census 

For a more in-depth look into our process, check out our notion page!

We used various forms of high-level analysis to understand the content, from generating graphs to taking more qualitative approaches with word maps.

Through this process, we found ourselves drawn to a column of data that allowed the users to input a long-form response that answered: I feel the most critical issues/challenges facing design are: ... Many of the responses responded to topics surrounding equity, access, the way one’s identity intersects with their practice. When crossing the quotes with the more statistical research we’d done, we found interesting relationships between concrete things happening in the industry and the perspectives of those affected by them.

How can we better represent the relationship between data points and the people they represent? What value can a blend of quantitative and qualitative data provide?

Although representing language and words in this manner was not something we brought forward with us in the process, only through this step were we able to recognize the importance of “voice and candidness” in our thinking process. With these interests in mind, we began honing a bit more into identifying recurring themes within the long-form responses, which would give us a bit more insight into what kind of data and overall messaging we wanted to communicate.

We relied on Python and google sheets filtering system to identify correlations in the data. We mapped these findings to one of three categories, and later found quotes from individuals that the data points speak towards. We then converted our sheet into JSON files to be loaded onto our website. 

As a team, we spent a lot of time nailing down our concept and supporting our ideas through systematically analyzing and gathering data. As a designer I tend to lean towards the flashy, but due to the scale and scope of our project, we decided to go with a simple, type driven design to let the content shine and easier to digest. The visual direction we took made me learn a lot about finessing a simple design to a high degree, which I now value greatly in the work I create.

This project was also a huge challenge to me as the sole coder on the team. Not only did we have to design collaboratively, we had to design with implementation in mind. The biggest problem we ran into in terms of implementation was content management. Because our website contains many page hierarchies all with different variations, it was crucial that we used a content management system. However, I didn’t realise this until towards the deadline, which forced us to code our templates in static HTML which was a very time consuming process.