Data visualization, Web Design
Aug. '18 - Dec '18
Yizhou Liu, Joshua Yao, Bobo Wang, Andy Zhou
Pen + Paper, Sketch, JS, HTML, D3
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.
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.
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.
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.
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.
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.
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.
Based on our understanding of data and users, we summarized several key principles that we kept in our minds when designing the visualizations.
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.
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.
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.
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.
This concept mainly provided a map-based data analysis process with line charts to support comparison on cities and years.
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.
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.
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.
To arrange the overview and details, we come up with 2 design alternatives.
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:
Based on our findings, we chose thewhich is proved to be irritating and tedious. Also, we decided to add more details-on-demand to the glyphs to increase the readability.
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 and built 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. 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
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.
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 , as well as the .
The result shows that the correlation matrix is more capable in helping users find insights, but it requires.
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 . But we also have an important here. Therefore, we planned to educate about this chart in our onboarding session to improve its learnability.
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 thebetween user and the dataset. Therefore, we considered about both and . To make every interaction meaningful, we built off from the user goals that we identified earlier.
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.
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.
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.
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.
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 , 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.
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.
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.
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.
I created stylish and balanced visual language for all the UI components, one principle that guided all the design decision is that. 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.
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.
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.
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 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.
We developed this web product with HTML, CSS, JS and D3.
Check out our introduction video and the final product.
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 , or 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:
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 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, then iterate on some design choices. Also, as mentioned above, multiple methods would be taken to of the tool. Besides, based on our design principle of expandable, it would be cool if it could be and become a more dynamic tool to surface style trends.
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.
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.
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.