View the product live (The design was eventually tweaked to fit the redesign): tintup.com/analytics/travelocity
This summer I interned at Tint as a software engineer. While many of my friends interned at large tech companies, I wanted an experience that would allow me to contribute directly to the product and the code base, and create immediate and direct impact. I wanted to solve challenging design problems and learn the best practices for creating modular and scalable web applications.
The primary feature I worked on at Tint was a new analytics dashboard. It uses Backbone.js for the primary front-end framework, d3.js to visualize data, and a few other tools such as moment.js to calculate time ranges and keen.io to measure engagement analytics. The project was a mix of design, data, and engineering — three things I love.
Based on user interviews we sent out via email, one of our most popular feature requests was a better analytics tool. At the same time, our user base was growing quickly, and analytics is crucial to users who use Tint to measure their own audiences. For these reasons, an improved analytics dashboard was pushed to the top of our to-do list.
Our first version of the analytics dashboard was not representative of the information that users want to see. Below is a screenshot of Version 1 Social Impact analytics:
Here are some few pain points from this version:
- Users want to see how much impact they’ve made with their Tint feed. The analytics tool should address that problem but Version 1 has a lack of clear visual hierarchy, prompting the question, What numbers should I be looking at?
- Version 1 visualizes data pertaining to a single feed; however, Tint allows users to create multiple feeds. What if a user wanted to understand their overall impact across all of their feeds?
- A very common use case is displaying analytics for others to see and celebrate, which can barely be done in version 1 because of the dullness in the way numbers and data are represented.
Here are a few pictures of sketches and mockups made during the ideation and implementation process: