AIGA: Hue Are You?
7 weeks, Spring 2022
A data visualization website in the form of a personality quiz, themed around the 2019 AIGA Design Census.

Check out our live website HERE.
Check out our FULL PROCESS HERE.

The design community is missing out on a unique opportunity to reflect on themselves —who are we and how does that manifest in our work? Using the AIGA 2019 Design Census data, #HUEAREYOU uses HEX codes to visualize the unique values each designer holds in the community. As users enter the site they are encouraged to see where they fit in the community visualization by taking a quiz that measures their priorities and values, giving them a personalized HEX code.

Tools: HTML/CSS/JS, PHP, P5.Js, Figma, Tableau
Skills: Data Visualization, Branding, Visual Design, Coding
Team: Jenny Liu, Elysha Tsai, Gary Tang
01. Concept Generation and Framing
The theme of our project focuses on the humanity of designers and how we can celebrate the uniqueness of each designer in the industry.
Some questions we wanted to explore in our project:
1 ) How to better represent designers other than just talking about their projects and skills?
2 ) How to show designers as human beings with various perspectives and values?
3 ) How to show individuality beyond work?
We used color as a metaphor to represent the different designers in the design community. 
The site’s main feature would be a data visualization website that bridges designers with their broader industries on the basis of shared values.

Our project deals with shifting the lens from micro view to a macro view.
Self: The individual and unique set of values → a personal HEX code 
Family: The individual and other people with similar values → an assigned family 
Community: Everyone in the design community → visualization of all families on the explore page + landing page! 
02. Flow Map
Our flow map encourages users to bounce between exploring community values and seeing personal results. This interaction enhances the main aim of our website to let individual designers reflect on the values of the broader design industry.  
03. Logic Behind Assigning Color
A big part of this project was coming up with the logic and system in which a color would be generated. This meant designing the quiz and the logic of the quiz together! 

Meanings behind a color: 
Hue = What does the designer care the most about? Education/ Innovation/ Connection/ Personal Growth / Greater Good/ etc? 
Saturation = Regarding the design industry's future, is the person more confident or concerned?
 Luminance = For this designer, is design more work or life?
04. Visual System
Because our concept involved color, there were a lot of things we took inspiration from. Mostly, we were inspired by the idea of “swatches” and a personalized color palette. Just like how one person does not have only one value but many, we expressed this through the use of identifying a set of colors that visualize that person’s value set.
05. Type System
Partway through the project we pivoted to using ‘Space Grotesk’ as our header, navigation, and pull quote typeface. We also used ‘Arimo’ for body type. This type system is cleaner and acts as a harmonious complement to the square visual element found throughout our website.
A. Landing Page​​​​​​​
The landing page teases the experience on our site with a short intro paragraph, interactive experience, and a prompt to take the personality quiz to begin the experience.
B. Community Page
The community page is where users would be able to view their HEX code in context of others. 
These were the features we implemented on the community page:
1 ) Navigation: users are able to return to “YOURHUE” (personal quiz results) or “ABOUT” (landing/about page)
2 ) Community Selector: users are able to choose which community they are viewing (AIGA Census or CMU School of Design)
3 )Toolbar: users are able to filter the community by hue, saturation, and luminance. Users are also able to get a subtle reminder of their hex code.
4 ) Pop-up Card: users are able to see more details about the people in the community: how many people have 1 particular HEX code, their values, common professions, how many years they’ve worked in the industry.
This page is where most of our concept lies–the ability to allow designers to see the broader design community in relation to their value. Below are all 9000 AIGA data responses visualized as color according to our color-typing logic— this served as the foundation of the explore page.
C. Quiz
The quiz page collects the answers of the users to generate a personal HEX code and bridges the landing page and community page.
There are two goals of the quiz page:
1 ) Establish a user profile from the answers chosen
2 )Maintain immersion by translating AIGA Census questions to those of a personality quiz
Although we iterated with the visual design of the quiz page to make it visually  interesting, we decided was that the quiz firstly had to be functional. 

The progression of our quiz design

D. Personal Results Page
Compared to the questions phase, the results part of the quiz features much more visual interest. 
Our goal for the personal results page was to make it: 
1) Comprehensible 
Something that was important when making the personal results page was being transparent with the logic of how the quiz generates the color. With fun graphics, we represented the underlying traits and runner-up colors our quiz considered when giving them a swatch.
2) Interesting
The quiz needs to be fun! People take personality quizzes because they like introspection, and they like being shown something about themselves they hadn’t considered before. 
We started off with an opening quote each corresponding with to a hue family, leading to an interact-able swatch card-set, and ending in a color-coded artwork gallery. Our goal was to really make the user feel special, so we took the information given to us and repackaged it into features that kept the experience fun and lively!