V-Style.

Tags
Data visualization, Web Design

Duration
Aug. '18 - Dec '18

Team
Yizhou Liu, Joshua Yao, Bobo Wang, Andy Zhou

Tools
Pen + Paper, Sketch, JS, HTML, D3

An interesting overview of people's street style around the world.

Project Overview

V-Style is an information visualization web app that provides an enjoyable experience to explore people’s street style on Instagram. Users could observe people's styles all over the world from 2013 to 2015, and get unique insights about their dressing styles and clothing combos.

01

How people all over the world style themselves?

The avatars show the dominant street style from Instagram in different cities at a time. Also, users could sort them by different categories and see the heatmap of the similarities for that city when they click on it.

02

Fashion trends, just one click away.

How people’s street styles evolve over time? See people’s preference for colors, patterns, accessories, etc. and find interesting insights on the line chart.

03

Want some inspirations to dress up? Got you!

What are unique in people’s street styles? Check people’s clothes combos and get inspiration by comparing instagram pictures of street styles in different cities. Users could see a correlation matrix of combos, with colors and saturations of cells showing combos' dominant colors and prevelance.

Try V-Style

My Contributions

1. I took the role of product manager, leading team synchronization and discussion. Also, I wrote PRD doc to guide development process of the product.
2. I did data investigation and whiteboard brainstorm to determine the user flows/needs with my peers.
3. As the main designer, I finalized the UX specs and visuals, with iterations based on user feedbacks.

Process Overview

.research
Research
Goals

We tried to understand both available data and target users.

Data Investigation

Thanks to an open-sourced deep-learning paper conducted by Cornell University, we started from their dataset with millions of Instagram pictures that people upload worldwide.

Some examples of our database.

I summarised the dataset into 3 key dimensions: Time, location, Instagram pictures. Through data analysis, each pictures can be represented by multiple variables that are related to dressing, including clothing pattern, major color, collar presence and so on.

After understanding the dataset, we saw a huge potential of the values a visualization could bring. Therefore we started our investigation on users. We come up with several assumptions of possible target users and their scenarios. By interviewing them we validated some suitable use cases.

Interviews

We came up with several assumptions of possible target users and their scenarios. By interviewing people from different roles, we validated their goals and expectations. Users are ranged from non-professional bloggers to professional data analyst, so the design needs to balance between insightful analysis and inspirational exploration.

#KEY USER GOALS

1. Understand how people’s clothing style distributes and evolves.
2. Find inspirations about dressing elements and combos to stay fashionable.

Research
Synthesis

We summarized things to be considered throughout the following design.

Design Principles

Based on our understanding of data and users, we summarized several key principles that we kept in our minds when designing the visualizations.

  • Comparable. The visualization should enable users to compare styles based on locations and time to surface style trends and distributions.
  • Insightful. The visualization should not only support simple analysis of clothing materials, but also surface deeper insights on how people style themselves.
  • Inspirational. The visualization should be inspirational and satisfy people’s curiosity by showing real Instagram pictures.
  • Expandable. The dataset only has 3 years’ Instagram data, but users expect to see more. The visualization should be expandable just in case more years’ data is available in the future.
.ideation
Divergent
Thinking

We brainstormed visualizations and created different design concepts.

Brainstorming

Guided by the design principles, we started our ideation by a brainstorming session with rough sketches. The goal for it was to explore different features and high-level information formats to complete user goals.

Mid-Fidelity Design Alternatives

Based on the result of brainstorming, we created 4 design alternatives. Each of them demonstrated different methods to achieve user goals. We did a poster session in class to gather feedbacks from users.

Chord-chart based view
This concept integrated the popularity of clothing ingredients and their combos into one chord chart. Selecting several ingredients, users could also check the pictures from Instagram to get inspiration.

Glyph-based view
This concept encoded data on human glyph representing different cities. Users can zoom and filter to see the details of each city’s dominant style at a certain time.

Spiral view
This concept focused on clothing color changes. It used each spiral to represent a city and as it rotates around like a clock, users could see the color changing within a year.

Map-based view
This concept mainly provided a map-based data analysis process with line charts to support comparison on cities and years.

Convergent
Thinking

Based on feedback, we decided on features and information architecture.

We presented our ideas in the class and evaluate our ideas with a reflection of design principles. With all these feedback and evaluation, we validated some features and suitable visualizations to encode the data.

Think back of their user journeys

Even though we validated features to help users achieve their goals, we didn’t rush to the design for details. Rather, we stepped back and thought in the shoes of our users again. We found that right now they don’t have a smooth user journey that meets their mental model for data exploration.

Information Architecture

One Info Viz principle we learned from the class is Schneiderman’s Mantra:
“Overview first, zoom and filter, then details-on-demand”.

Such principle provides us a good direction to support their ideal user journey. After our discussion, we finalized our information architecture.

.design
Design
Challenge
#1

How to present our data from overview to details, in a suitable layout?

To arrange the overview and details, we come up with 2 design alternatives.

  • Option A: Separating overview and details into 2 pages.
  • Option B: One-page data with a horizontal layout.

As we were aware of their pros and cons, we were faced with a difficult decision. Therefore, we invited some potential users to test them. We introduced our low-fidelity prototype and asked them to evaluate both design alternatives. We have several findings through the testing:

  • Participants indicated that they prefer the one-page option because they feel it more efficient when switching between different cities to find insights.
  • The one-page layout is not so readable as the separated pages, especially for the glyphs. But users felt more comfortable to use it after several explorations.
  • Some of our participants felt the chord chart is interesting but they wondered that whether it's efficient to find insight with it. Especially over 10 clothing elements may create over 100 chords.

Based on our findings, we chose the one-page layout which is proved to be irritating and tedious. Also, we decided to add more details-on-demand to the glyphs to increase the readability.

Design
Challenge
#2

How to let users see clothing combos in a more insightful way?

During our feedback session for design alternatives, people had a positive feedback on the insightfulness on chord chart. But in layout testing, users expressed their concerns on it.
Therefore, to validate the insightfulness and the efficiency of the chord chart, we encoded real data in it and built functional prototypes.

Design Iterations with Functional Prototypes

We built prototypes with real data, and invited users to get insights with it. By repetitively conducting feedback sessions, we did quick interactions on its design.

Based on user feedback, we found that chord chart might be not the best choice to show clothing combos because it's not good at supporting quick exploration on complex correlations. Therefore, we did not limit ourselves to it and tried to design a more efficient and insightful visualization to avoid the disadvantages of chords.

Prototype version 2

Another Option: Correlation Matrix

We referred to the correlation matrix, which provides a more clear way to see correlation data. Based on it we designed a new method to show clothing combos of different cities. Users could explore and compare the clothing combos in 2 cities in it and more details are available on demand.

A/B Testing

Whether correlation matrix is better than chord chart of 8 top combos? The opinion within our team varied. Therefore, we conducted an A/B testing.
With roughly developed prototypes for both chord chart and correlation matrix, 6 users were introduced with these 2 designs. We evaluated the amount of questions that they asked for help to understand the chart, as well as the 'useful' or 'interesting' insights they found within 3 minutes.

  • Users asked averagely 2 more questions to understand the data mapping and features in correlation matrix than chord chart.
  • Users found around 7.5 useful insights on correlation matrix, while around 3 on chord chart.
  • Based on their self-report, 5 in 6 users felt that the correlation matrix is more insightful and useful for them.

The result shows that the correlation matrix is more capable in helping users find insights, but it requires a steeper learning curve.

Based on all these feedback and data, we decided to go for correlation matrix because it’s proved that the matrix is more effective and efficient for users to achieve their goals. But we also have an important design trade-off here. Therefore, we planned to educate about this chart in our onboarding session to improve its learnability.

Interaction
Design

We designed for detailed interactions to help users achieve their goals.

After we validated our layout and key visualizations, I started to design for the interactions. One thing that are always kept in my mind is that interactions are the key bridge between user and the dataset. Therefore, we considered about both users’ tasks and the data quality. To make every interaction meaningful, we built off from the user goals that we identified earlier.

User Goal #1:
Understand how people’s styles distribute around the world.

Interaction #1
Sort the cities by their styles and make comparisons.

Users can see different cities’ popular styles and sort them by different clothing elements. By doing that, users could see cities with same clothing elements showing up together.

Interaction #2
Hover and see details of the dominant style.

When hovering on a certain glyph, users could see an explanation of all the elements included in the city’s style. Icons are added to increase the intuitiveness and ‘click to compare’ button is to guide users’ actions.

Interaction #3
Click to select a city and see its similarity with other cities.

After users click on a certain city, it will be highlighted. At the same time, the cities with similar styles will stay solid while cities with different styles will be lightened.

User Goal #2:
Understand how people’s styles evolve over time.

Interaction #4
Select time period and cities to see trends of clothing elements.

Users could drag or select in the timeline to select the time period that they would like to explore. Also, by clicking at maximum 2 glyphs, users could select 2 cities and see how their clothing elements evolve over time.

Interaction #5
Filtering by clothing elements and compare their popularity in cities.

By clicking on the filter, users could select which clothing element to see and compare. The X-axis will be the frequency that your selected clothing element showing in the city’s pictures. The Y-axis will be the time periods.
By hovering on the dots, users could easily answer 2 questions to support their conclusions and trigger more exploration:
1. Whether the trend here is solid. (For some cities at a certain time, there may not be enough samples.)
2. What are the cities that like or dislike most for this clothing element.

User Goal #3:
Find inspirations about clothing styles and combos.

Interaction #6
Switch to the combo tab and see correlation matrix.

Users could click on combo tab and correlation matrix will show all the clothing combos of your selected cities. Most popular combos are represented by most solid cells, which is intuitive for the users.

Interaction #7
Hover on cells and see details of the clothing combo.

When users hover on a certain cell, it will tell users information about the popularity of this combo and the dominant color for it. What’s more, corresponding combo of another city will be highlighted for users to make a comparison.

Interaction #8
Click on a cell and see instagram pictures of that combo.

When users click on a matrix cell, they could see some examples of real instagram pictures to get inspiration. These pictures will be exactly at that city, at that time, with that combo.

Visuals &
Animations

I crafted meaningful and enjoyable design details.

Visual Design

I created stylish and balanced visual language for all the UI components, one principle that guided all the design decision is that the visual components should support users' cognitive processing. Since colors are important attributes in our data, we tried to make all elements unrelated to data in grey. Also, we tried to use different bolded fonts and shadows to represent element hierarchies.

Meaningful Animations

We crafted meaningful animations to get users’ attention and provide instant feedback. With these, the product provides a more seamless experience that reduced users’ cognitive load.

Details to Educate Users

As mentioned above, to improve the insightfulness of the product, we didn’t put the intuitiveness at the first place when designing for the visualizations. Therefore, we tried different ways to educate users about the interfaces and make the whole product more learnable.

One-pager instruction
We provided a one-pager onboarding for users to get familiar with the tool. It will also appear if users click on the ‘Help’ in the top bar.

Visual Cues
Visual cues of triangles are provided to help users understand cities’ position in correlation matrix. They can understand it easily with the pattern that they learned in the previous page.

.evaluation &
what's next

Development & Final Product

We developed this web product with HTML, CSS, JS and D3.
Check out our introduction video and the final product.

Try V-Style

Usability Testing and Things to Improve on

After we finished our development for the whole product, we invited 7 people to evaluate our product by exploring it. Several matrix was introduced to the participants and they provided their scores as well as reasons after trying out our product.

Learnability - 4.07 / 5.0
Our visualization is relatively new for most users. Thus, learnability has always been our big concern. We would like to know if users can get familiar with our tool very quickly. The results revealed that the learnability still need to be improved. Although we provided an instruction image in the very beginning, users still feel overwhelmed.
Some possible solutions include step-by-step storytelling instruction, or a more gamified onboarding session to get people familiar with the clothing elements, etc.

Example: 'Styling Game' to help people understand our dataset and clothing elements.

Efficiency - 4.62 / 5.0
This project is goal-driven. Therefore, accomplishing tasks efficiently is an important metric to evaluate our design. The results revealed that users can quickly finish tasks after getting familiar with how it works.

Insightfulness - 4.69 / 5.0
The ultimate purpose of information visualization is to discover insights. We hope users can discover some interesting findings. Here are some insights that our users found:

  • Everybody loves black and white shirts or T-shirts, no matter where they come from. One world, one "style".
  • The famous fashionable cities like New York and Milan, they share the same styles.
  • Proximity has influences on fashion styles. More closer, more similar.
  • Satisfaction - 4.88 / 5.0
    One of our primary goals for this project is to provide joy. We hope it's also a fun tool to use since fashion is also an interesting topic. And it turned out EVERYBODY LOVES IT! They love those cute little human glyphs with different clothing. They are curious about fashion style in other cities. The positive feedback makes us feel happy.

    For future steps, we should do more testing on the details to identify users' frustrations, then iterate on some design choices. Also, as mentioned above, multiple methods would be taken to increase the learnability of the tool. Besides, based on our design principle of expandable, it would be cool if it could be linked to Instagram's API and become a more dynamic tool to surface style trends.

    .reflections

    Navigate through the complexity of the data.
    One thing we realized when designing the correlation matrix is that, there is no perfect solution. The complexity of the dataset required us to thoroughly understand it and make a better design trade-off. So as a designer, we need to not only put users in my mind, but also consider data availability as well as quality.

    Design communication.
    While taking the role of both designer and PM, I practiced a lot on my communication skills in my team. I used a lot of methods to convey the ideas, get feedback and push things happen. In this experience, I realized that building empathy all the time with the teammates is super useful to establish a comfortable communication channel.

    Experimental mindset.
    During the project, we were faced with a lot of hard design decisions. I found that with a more experimental mindset, we were more proactive to validate our thinking and iterated based on user data - which lead to a more successful design result.

    PREV

    Nitefly

    NEXT

    Associate Tasking