Clinique DASHBOARD

Role / Responsibilities:

User Experience Design, UI / Visual Design, Front-End Development, Project / Product Management

Challenge:

Clinique came to us after seeing a simple dashboard during a summit hosted for our customers that gave them inspiration for a dashboard of their own. After the summit, they asked if we could create something similar to help them monitor key metrics regarding their ratings and reviews.

Where it all Began

The dashboard to the right was shown at a Bazaarvoice Summit, and it left a big impression on our partners at Clinique. They loved the idea of surfacing these key metrics in a highly visual dashboard, and wanted one of their own to broadcast throughout their headquarters to boost awareness and interest in their product ratings and reviews.

However, this particular dashboard wasn't exactly what Clinique was looking for. They loved the idea, but wanted even more data, and they needed it to be eye-catching enough to get their busy employees to stop and notice these screens in order to be effective.

That's where I come in!

This started as a special project for one of our most loyal clients, but it's potential for eventually becoming a product offering was apparent. I worked closely with one of our lead front-end developers at Bazaarvoice to establish a plan for building this out to be as flexible and customizable as possible to enable any client to use this tool, while keeping Clinique's requests top of mind for this initial iteration. Together, we owned the product management, experience design, interface design, project management, development, and testing, as this project was more of an extra-curricular practice without total backing from the R&D department.

We started by taking the things Clinique did like from the initial dashboard and working from there:

Animated blocks
Key metrics included
Large text that is visible from a distance

This gave us a good baseline to start with.

Initial paper prototype while brainstorming potential options for blocks and grouping data.

Next, we needed to consider what Clinique's goals were for this dashboard. They wanted this tool to provide insight into the following questions:

What is currently trending on the site?
What data can we utilize in a marketing effort?
Which products aren't getting enough traction, despite having a high user rating?
What products are not doing well, and why?

After working with my colleague to list every possible data point we could feasibly access, we narrowed down the list to only include information that would be helpful in providing the types of insights Clinique was interested in.

I then wrote each metric on a post-it note and started arranging them in order of importance (to the client) and grouping any related metrics. This helped us narrow the list down even more, and gave my colleague a good starting point for development.

DESIGNING THE CODE

Final black and white mock-up before coding began

After a few iterations and additional metrics were added, Clinique was happy with our wireframes and mocks, and we began working on the code.

We needed the code to be flexible, responsive, and easily customizable, so we decided to use Flexbox Grid for the layout and Less CSS variables to handle the styling for our MVP (minimal viable product).

I was able to use nested Less variables and equations to handle all of the styling for the entire dashboard, which meant we could completely customize each dashboard for any new client with just a handful of variables. Ideally, only the main brand colors and font-family would need to be modified to create a totally custom look and feel.

The Final Test

Photo of the dashboard displayed on a Samsung TV

Clinique wasn't sure what type of device they would use to display this dashboard, so we needed to test on a handful of TVs and tablets.

Fortunately, our flexible layout worked seamlessly on all devices, big and small. Yay!