I’m #9AC322 and I am part of #PearFamily. Hue are you?
#HUEAREYOU is a data viz web experience that uses AIGA Census data and the universal language of color to highlight commonalities and individuality in the creative community.
Taking this personality test generates a custom hex code and matches you to a family with common values in design.
Scroll down for a quick tour of our site!
Role
Skills
Team
Tools
Duration
UX Designer
UI (Explore + About Page)
Visual Designer
UI (Explore + About Page)
Visual Designer
UI/UX Design
Data Visualization
Visual Design
HTML/CSS
Data Visualization
Visual Design
HTML/CSS
Jenny Liu
Chris Han
Gary Tang
Chris Han
Gary Tang
Figma
Tableau
HTML/CSS/JS
PHP
Tableau
HTML/CSS/JS
PHP
7 weeks
DESIGN OVERVIEW
Welcome to #HUEAREYOU
1. Enter the Experience
The landing page directs the user to take the quiz. There is also an interactive visualization of the recurring color square motif, which responds to mouse position. This page is dual-purpose, acting as an about page accessible via the main navigation.
Default state
With mouse movement + hovering over the #TakeQuiz button
2. Take the Quiz
Enter your name and answer six multiple-choice questions about your stance on the design industry and your designer ethos. Flip over informational cards (61 possible!) to gain further insight into your responses.
P.S.: Click on the icons in the background to reveal fun facts from the AIGA Census!
P.S.: Click on the icons in the background to reveal fun facts from the AIGA Census!
3. Reveal your Personal Result
#HUEAREYOU generates a color result based on your quiz responses. Scroll to reveal a quote from a famous designer, your unique hex code, color family (people who share your top value), and more.
P.S.: Click on the swatchbook to see a breakdown of your color result based on hue, saturation and luminance.
P.S.: Click on the swatchbook to see a breakdown of your color result based on hue, saturation and luminance.
Initial scroll interaction
Opening the swatchbook
4. Explore the Creative Community
Let’s contextualize your color result with AIGA data. Each square represents a unique hex code—some squares are larger because more people got that particular result! Scroll to reveal the diverse spectrum of people in the creative community.
Click on a square to bring up a swatch card, revealing demographic details like experience level, what type of designer they are, and their values. Narrow your exploration with the interactive toolbar. Click on “SoD” to reveal localized community results from the CMU School of Design.
Click on a square to bring up a swatch card, revealing demographic details like experience level, what type of designer they are, and their values. Narrow your exploration with the interactive toolbar. Click on “SoD” to reveal localized community results from the CMU School of Design.
Clicking on my square! 3 other designers share the same hex code as me.
9000 data points dissolved into 400 possible hex codes and 16 family groups (hues)
Filtering results with the toolbar
I worked on the toolbar: an equal parts informative and functional tool
Separate community page for local results