SARAH XI
Uncover AIGA is an exploratory data visualization of the 2019 AIGA Census, in the form of an interactive website.


TIMELINESpring 2022 
7 Weeks
ROLEUI Designer
UX Researcher
WITHHayoon Choi
Proud Taranat
Francis Park
PROGRAMSFigma
Adobe After Effects
HTML/CSS, Javascript










 
OVERVIEW
What is Uncover AIGA?

UNCOVER AIGA facilitates data exploration in which the user filters between categories, gains insight through ‘surface’ data points, and uncover its deeper meaning by reading quotes of the designers that the data points truly speak to. Users are also provided with external resources that can further inform them of the topics explored. Although, by digging beneath the surface of data can we really begin to understand the depth and value of the Census.ROLE
UI/UX + First Time Data Analyst
I took part in analyzing the expansive spreadsheet that is the AIGA Census Data, and filtered and analyzed over 9000 responses related to topics such as: designers’ income, quality of life, race, gender. My team and I then translated our findings into the form of a website that expresses the depth of a designer’s experience beyond the ‘numbers’. Through data points, quotes, and anecdotes, we aimed to present the true thoughts and voices beyond the statistics that we see on the surface level.




01/ Primary Web Features



A) LANDING PAGEThe landing animation was made to capture the user's attention and hint at the "uncovering” motif that's been used throughout our website.




B) HOMEPAGEAs the name of our project entails, our website surrounds the theme of progressive disclosure. As the user further explores each page, additional features reveal themselves in the homepage such as resources related to a particular topic. These external links would only pop up one by one as the user browses through each category page.


C) CATEGORIES & LOOKING AT DATAWhen the user navigates to a category page, they're given an opportunity to explore select data points related to the topic of the page. By making it a data-first entry point, we aim to guide users to uncover deeper insights related to the data they initially explored. Within a category page, the data points are hidden underneath and can be unveiled by hovering over the marker dots that were placed to assist the user in their exploration.



D) INDIVIDUAL VOICES — Quotes Page When users click on a data point, they're then taken to the respective page where they're able to browse through quotes from real designers that the data relates to. The surrounding circles containing the designer's demographic information changes according to each quote.


E) EXTERNAL RESOURCESAs mentioned earlier, as users return to the homepage after browsing a category page, new features appear on the page. These circular 'stickers' are external resources that users can click on to learn more about a particular category topic. In our initial prototype, we had another layer in the experience where clicking on a data point takes them to a page where they can explore a data visualization of the designers the data point is referring to. From there, users are able to access the quotes page that was shown above or a related external resource.


*Even though users could access external resources in the quotes page, the main source of external links is located on the home page as shown earlier.



02/ Process and Structure



THE DATA ANALYSIS
So how did we go about understanding the Census? How did we decide which parts of the data to focus on?

The raw content of the Census was given to us in the form of a massive spreadsheet. Even though this looked intimidating, we began sorting through the content via various forms of higher-level analysis ranging from quantitative graphs to qualitative word clouds.




WEBSITE STRUCTURE
Findings and Site Architecture

Furthermore, by using Google Sheets’ filtering system and some Python, we were able to pinpoint certain correlations within the data. This is what allowed us to group our findings into three main categories that would later become the core of our web experience. These correlations also allowed us to find quotes from individuals that spoke to certain data points. Through this methodology, we were also able to convert the data into JSON files that would be loaded onto our website.

From analyzing the data, we ended up being drawn towards a particular column of data that allowed a long-form response that answered: “I feel the most critical issues/challenges facing design are ___”. While it was interesting to see all the responses surround the topics of equity, access, and the way one’s identity intersects with their practice, we found a lot more interesting relationships between concrete things happening in the industry and the perspectives of designers who are affected by them. This then led us to ask, How can we better represent the relationship between the data points and the designers behind those statistics? What value can these connections between quantitative and qualitative data bring and suggest?




03/ Visual Direction & Style Guide


IDEATION
Visual Directions

Besides the data collection and analysis, we also spent a lot of time ideating on a concept + visual direction. After going through many pivots and explorations, we were then able to settle on the theme of “uncovering” and progressive disclosure.





FINAL ITERATION
User Flows + Final Direction

Once we latched onto the theme of ‘progressive disclosure’, we made sure that the visuals and design decisions really tied back to the functional aspect of that theme. As a result, we landed on our final direction, where the circles served as a multipurpose tool to deliver, lead, and reveal different types of information. Below we created a userflow chart to help describe one of the intended paths a user might take when exploring the website.



STYLE GUIDES
Typography + Assets

Here’s the compilation of the typefaces used and the instances each is used for, along with additional graphic elements such as stickers and visualizations.




Thoughts & Reflection
In general, I felt like this project was a very good and new experience. Even though on the surface level, it felt like it we would just be using a lot of communication design skills that we’re familiar with (think typography, layout etc), I didn’t expect how conceptually deep the project was able to get and how prominent data visualization was going to be. That being said, working in a group while managing visual/conceptual design with the front/back end coding was much more difficult that expected. It was difficult to properly code what’s been visually designed, and I learned how important it was to problem solve and come up with effective compromises as a group to keep the concept in tact. Despite these difficulties (and a couple of visual pivots here and there), I do believe that our project ended up being something we all heavily resonated with conceptually. And with that, we hope that everyone who explores through it feels the same as well.




Special Special