Interactive data visualization of a matrix.

Forces of Attraction

1st Place Interactive Data Visualization Project in CPSC 436V @ UBC. An information visualization web app helping users interpret the findings of speed dating experiment to better improve personal dating strategies.

View Live arrow_outward

My Role

Interaction Designer - Reasoned trade-offs of different design decisions given data characteristics and types of user tasks performed, prioritizing accurate understanding of data.

Frontend Developer - Coded slider line chart, bar chart and tool tips.

Report Writer - Primary writer for all report deliverables, including design rationale, functionality documentation and user stories.

Tools

JavaScript, HTML/CSS, D3.js, Zoom

Timeline

4 Months

Problem

How do I make this date count?

Online and app-based dating has exploded over the last few decades. According to the Pew Research Center, 1 in 5 partnered adults under 30 met their current significant other through a dating app or online. But swiping through faces can make our options feel infinite and overwhelming. And even worse - dates gone wrong can lead to serious dating fatigue. How do young people prioritize who to meet so their next first date may be their last?

Our group decided to make a fun and interactive data visualization with the results of a speed dating experiment to help young adults predict their compatibility with a potential partner, spend less time swiping, and find someone worth the second date.

Solution

A fun, interactive data visualization dashboard.

Gif of final designs.
Gif of Forces of Attraction Final Product

Impact

1st

Best Overall Project

Awarded by Professor Munzner and Teaching Staff

Process

Every Single Decision, Explained

For a full explanation of design rationale, data-preprocessing, team member responsibilities, etc., please see our Milestone 3 Deliverable Writeup.

Reflection

I Love Data Visualization

I felt so energized by this creative problem solving - I specifically enjoyed the trade-off analysis of each design decision: balancing data structure, abstracted task, psychology of perception, accessibility and project goals at every level so the project met the requirements in a balanced way.

Radar diagram illustrating the weighing of trade offs.