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/UX Design
Data Visualization
Visual Design
HTML/CSS

Jenny Liu
Chris Han
Gary Tang

Figma
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!







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.