Quotient Analytics is a self-service product for users to view, understand, and interact with reports for campaign, brand, or category analysis.

Data Visualization &
Web Design

INTRODUCTION

This project was to create a self-service B2B product for Quotient, that would allow our CPG and Retailer clients to view, understand and interact with their campaigns, brand, and/or category performances. Since the launch, we had 1,300+ client contacts and growing. The product strengthens Quotient’s position as a data powerhouse.

 

My role on this project was to come up with the new design system, present statistics and data into clear informational graphic designs, and deliver high fidelity mockups and prototypes for all new features of the product.

Simplified the login experience as compared to the previous complex flow with Salesforce. The workflow of the new login page is very easy for a user to go through and it is communicated through design.

Web Design

Login Page Redesign

Landing Page  |  Help Center  |  Ticketing & Support

Created a new landing page, Help Center, and Support page for business experience so that users will have one experience for all applications and it will be easier integration with the apps. The new design emphasizes and ensures trust and security for the user by using a high-end lifestyle imagery, Quotient brand colors, and balancing the use of space and white space.  

Data Visualization

Conveying all the essential data/information in a simple, clear, and useful way was really challenging. White space, iconography, typography, UI color system, UI charts system are important elements that I had to always keep in mind.

Visual Design Strategy

The following Visual Design Strategy is a suggestion to define the visual design system and look & feel that will be applied across Quotient Analytics. It is intended to help create and maintain a consistent scalable experience that will transform monitored data into actionable, interactive intelligence! 

 

The Visual Design Strategy will cover all touchpoints of the main brand, the UI Design components, the Data Visualization and act as a style reference for all future content.

Logos

The Logo and Logo mark is available in 3 variations.

Background Colors

The background holds the theme of the product, and there are a few possibilities when designing a site background with Data Visualization components. We'll explore a Light Theme and a Dark Theme using Quotient background colors as a base.

Data Visualization Color Palette

Data Visualization Palettes - Background options

Finding the right color palette can be tested against various background colors 

Primary Color Palette

The primary color palette includes 4 primary colors. Quotient Green creates the strongest association to the Quotient brand, while accent colors provide additional depth to branded materials.

Secondary Color Palette

The secondary color palette will create the foundation from which to build and evolve our UI components colors, to provide additional depth to the overall experience and to complement our Brand.

Design System

After many iterations, I created a design system that would evolve over time with the growth of the product. This was a task that had to be accomplished with the guidance and cooperation of engineering teams as it would allow for designers to think like developers and vice versa.

Outcome

The campaign performance metrics would help clients to plan promotional campaigns based on performance, compare trends across key metrics, and optimize campaigns. They can also use the market category data to evaluate market share and offer strategies, identify opportunities to be more competitive, and understand consumer activity by retail channel.

Senior Manager Coupon Strategy & Analytics at Kellogg’s

CHERYL RILEY

The analytics are far more robust than anything we've had before. This will be enormously helpful as we
plan and optimize promotional programs across our brands.

Other Projects

Finding the right color palette require a thoughtful defined design for complex charts and data visualizations:

        1. A palette with accessibility in mind.
        2. A palette that offers at least eight to twelve colors with flexibility to present complex data.
        3. A palette with enough variation that is distinguishable.
        4. A palette that will allow harmonic visual combination with the UI components and Brand color palette.

Here are 3 palette options based on 3 variations from Quotient Brand colors:

©2018 Zhiya Zhu    |    All Rights Reserved