🤩

Visualizing emotions for Google

Tags

Data visualizationUX&UIMVP

Timeline: 2015-2017 (2 years)

Team: Google PM, 3 AI engineers, UX research agency (2 people), and my agency FFunction (design and development)

My Role: Lead UX Designer

🔥

Impact

Secured nearly $50 million in sales partner commitments
Led to a follow-up major project a year later

Our goal was to visualize the emotions and topics of social media conversations about brands. This innovative project proved to be incredibly creative and stimulating.

This interface represents the culmination of our efforts, effectively visualizing complex emotional data in an accessible, interactive format.

Final concept

Exploration and Iteration

We explored various approaches to visualize emotions:

Unique visualizations using gradients

Heatmap of emotion volume

Bubble chart of conversation topics

Our designs were heavily influenced by Plutchik's wheel of emotions. We experimented with visualizing data directly on the wheel, including 3D charts and interactive bubbles:

Agile Development and User Testing

We adopted an agile approach, delivering weekly iterations and reviewing user test results and interviews every two weeks. This process was humbling and highlighted the importance of user testing. There was always room for improvement or simplification.

Annotated mock ups with client feedback

Our most significant breakthrough came when I reimagined the emotion wheel as a control/interactive legend, paired with simple bar graphs. This design drastically reduced the learning curve and made interactions more intuitive.

The emotion wheel on the right is used to filter the data on the left. A definitions for emotions and type (primary/secondary) was provided as tooltips

Visualizing Emotions Over Time

We faced the challenge of displaying 14 emotions on a timeline without creating a visual "spaghetti" of lines. Our solutions included small multiples and differentiating primary emotions from secondary visually within filter controls.

Timeline range filtering

Small multiples

Encoding the emotion category

A creative way to show how secondary emotions are made out from combining two primary emotions together.

Key Learnings

The Power of Simplicity: Simple bar graphs combined with an interactive legend dramatically improved user understanding.
Continuous User Testing is Invaluable: Each iteration revealed new insights and areas for improvement.
Content Design Matters: The absence of a dedicated content designer highlighted the challenge of finding the right words for novel concepts. We evolved from technical terms like "Polarity definition" to more user-friendly phrases like "How emotions work".

Impact and Results

Successfully delivered a fully functioning MVP on time.
Secured nearly $50 million in sales partner commitments.
Led to a follow-up major project with Google a year later.

This project not only pushed the boundaries of data visualization but also reinforced the importance of user-centered design in creating innovative, impactful products.