Fall 2020
4 weeks

Emotions in Modern Love visualizes what writers associate with “Love”


Modern Love is a weekly column from the NYT that features reader submissions of stories around love. Pieces range from short 100-word submissions to long stories. Our team realized the diverse and intricate relationships revealed through the entries, and designed two different views to allow exploration in different scales and relationships between components of each article.

I was responsible for designing Web interface prototypes.
Team
Elizabeth Han
Mimi Jiao

Skills
Data Visualization
Web Design 










Site 01

Emotions View


The emotions view visualizes the proportion of the six emotions that we chose to explore: joy, anger, sadness, fear, disgust, and surprise. With each article represented by a circular shape, the viewer can explore the various emotions associated with each article.


View Website









Site 02

Subject View


The subjects view allowed exploration in the relationship between various subjects and the date that the article was published. Viewers can zoom in and out of the chart to explore different subjects and trends.


View Website














Design Process

Initial explorations

We began our design process by defining the most important aspects of articles in “Modern Love” that can spark reflection when visualized with data. We were greatly inspired by organic visualization styles that present the humanness in emotions.


Moodboard



Our initial explorations were focused on ways to group data and represent the emotions through lively ways. We realized that it was visually redundant when the same emotions overlap throughout the groupings. Since we want the users to understand the diverse emotions and topics in “Modern Love” articles, we decided to design two view with different purposes.








Wireframes


We chose colors that are commonly used to identify corresponding emotions, and used opacity to allow overlapping in the visual representation.




Colors



When designing the two different views, we focused on finding ways to present data by the purpose of each view. In the emotions view, we used a macro-view of all articles to help viewers make connections of emotions within an article. On the other hand, the subject's view utilized a graph structure to better present the various subjects and its relationship with the year published.



Emotions View
Subjects View





Reflection


This project gave me an opportunity to work in a diverse team and understand the affordances of using code as a creative medium. One challenging aspect of this project was to work with data in the process of designing. It was impossible to predict the outcome of screen designs before implementation, which gave me limitations when wireframing the UI. However, the uncertainty became the beauty of working with data, as we were pleasantly surprised by the outcome of our visualization.


© CHARMAINE QIU 2023