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!


UX Designer
UI (Explore + About Page)
Visual Designer

UI/UX Design
Data Visualization
Visual Design

Jenny Liu
Chris Han
Gary Tang

7 weeks


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!

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.

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.

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

Thanks for reading:)

Take the quiz for yourself here.
Full process documentation is outlined here.