Quantcast Measure just got a brand new look. Quantcast’s Director of User Experience, Erica Weiss Tjader, explains how we brought the new design forward.
When Quantcast Measure first launched in 2006, the Internet was a different place – Web 2.0 was all the rage, Blackberrys were still a status symbol and Mary Meeker called User Experience an emerging trend. Meanwhile, design favored gradients, default styling for form elements and tiny, underlined links.
Considered attractive in 2006 (source: Wayback Machine)
At Quantcast, we weren’t above the influence of popular trends. Dressed in our finest cargo pants and UGG boots, we built a site that looked like this:
Though Quantcast Measure has undergone many refreshes since then, design trends evolve so rapidly that your latest masterpiece feels dated long before your company is ready to invest in another visual overhaul. And of course, the longer you wait, the harder it becomes to make even small changes — the code base gets more complex and the user experience less consistent. This past week we took a big step toward updating the design of Quantcast Measure. While the changes are small, it’s a starting point to test our way into some much bigger changes.
The Challenge: Build the New, Make It Work Everywhere
The definition of the new Quantcast visual system started when we developed the first client-facing UI for Quantcast Advertise. This effort was a designer-developer dream – create a new product from the ground up. We had customer research, a shiny new set of brand guidelines and a blank canvas (or art board depending on your tool preference).
No design problem is complete without constraints, though, and we had a big one – we would eventually need to transition Quantcast Measure, visited by hundreds of thousands of people every month, to the new visual system. So we designed the new system to work for all products in theory, and implemented it for the Advertise UI and site-wide header earlier this year. Last week, along with the new Audience Interests report, we rolled out the new system to the Measure profile.
The Approach: A Little Goes a Long Way
The update of the Measure profile required that we align as closely as possible with the new visual system using only CSS styling – changes to the grid, graphs or functionality were out of scope.
The following are some of the small changes that had the biggest impact:
- Let the Data Breathe – A whole lot more white space was probably the single most important change to this page. On a page with this much dense information, some generous spacing between sections and within data tables improved the overall readability of the report.
- Make It Modern – Flatter design (albeit not too flat), simple grayscale font icons, clean stylized buttons and dropdowns, and reducing to a single shade of blue gave the design a more modern feel and better alignment with the Quantcast brand.
- Make It Actionable – We still haven’t achieved our dream of relocating the navigation, but the shift to a simpler navigation container with hover interactions to signal clickability, along with consistent button styling throughout the page, looks better and should have some impact on the usability as well.
- Make It Consistent – There’s not much more to say here other than I’m embarrassed to tell you how many different button styles existed before.
The Outcome: Much Better with More to Come
While some of us miss our cargo pants (those pockets can be so useful!), we’re proud to have made a giant leap toward a modern aesthetic. And the best part is, this visual refresh is just a taste of what is to come for Quantcast Measure. How do you like the new look? Tweet us at @Quantcast and let us know!
Posted by Erica Weiss Tjader, Director of User Experience