Color Me Curious

Click to explore your assumptions about color trends in fashion through the seasons.

An Overview

The Challenge

To create an interactive data visualization of unconventional (and plentiful -- 6000+ images worth of) data: fashion photos on a runway.

The Solution

Using information visualization best practices and user-centered design principles, I built an interactive visualization to investigate color trends over the seasons.

My Role

UI/UX Designer & Illustrator: wireframing, high-fidelity prototyping (HTML, CSS, JavaScript), Adobe Creative Cloud (Photoshop & Illustrator), usability research (interviews and think-alouds), Procreate

Data Analyst: Python (for an explanation of our methods, see the site; for a more in-depth and visualization explanation, view the report in the "Deliverables" section below).

The Design Process

Low-Fidelity Prototype

As design lead of this project, I quickly created a demonstrative wireframe of the general concept behind the visualization: a series of images, as though the model is stepping through the seasons, and a filter allowing for comparisons within dimensions of interest (i.e. designer country of origin, Fashion Week city, season, etc). This concept was presented to an audience, with no confusion and much intrigue.

High-Fidelity Prototype and Usability Testing

Due to a swiftly approaching deadline, I took right to coding the prototype in HTML/CSS, and using JavaScript for filter and animation functionality that only enhanced the user-experience, verified through a series of usability testing and think-alouds. Usability issues are addressed below in turn:

The full-hover problem and the multi-designer per row problem. Users disliked that the metadata of each model's dress -- the color-quantized representation of data for that season -- fully obscured the dress it represented. Additionally, multiple designers were sharing lines on an extra-large (i.e. 27") monitor.
An iterative attempt to resolve the full-hover problem, truncating the meta data to a square over the feet of the respective model. Additionally, a "designer insight" column was created to resolve the multi-designer per row problem, as a means of labeling clearly a designer's respective line of work. It was peculiar for this to be placed on the right-hand side of the screen, as our audience was Western-leaning.
A horizontal scrollbar was incorporated for non-desktop and mobile screens to resolve the multi-designer per row problem, as well as mitigate any resizing issues of the models themselves, allowing for full resolution of each season. Since some designers had 50+ outfits in a season, it was crucial that the models not be so small that the data is illegible. The "designer insight" column was also moved to the left-hand side, and was received well.
The first version of the filter section. It suffered from poor contrast and hidden filter options made accessible only through scrolling.
The second version of the filter section. Contrast improved, as well as visibility of all filter options. Its persistence on the page was problematic, as it took up a lot of real estate. This feature was improved via a clear toggle function in the final prototype.
Iterations of the model.

Final Prototype

The final prototype can be explored on this webpage.

Through our testing, our users felt our product was strong in the following areas:

Our users also felt our product was weak in the following areas:

Reflection and Future Steps

Overall, I am very satisfied with this data visualization. It was a great learning experience in how to creatively incorporate design principles to a data analysis project, work that is often seen as dry. It was well-received, and we received high marks on the assignment and praise on Twitter.

It would be phenomenal to incorporate additional designers, just to add to the sheer comparison power of our data visualization. Additionally, it would be worthwhile to experiment with adding a color filter, like some users proposed. While the addition of such a filter might detract from more low-level hypotheses (similarity across citizenship, geographical Fashion Week location, etc), it was a popular request and should be considered.