top of page

Product Reskin: Numerator Insights:

Background

What is Numerator Insights?

Numerator Insights is a SaaS business intelligence web-based platform that merges individuals’ physical store receipts with their online e-receipts to capture purchases of all product categories across all channels. Previously known as InfoScout Insights, Numerator was hit with a big question, "Will our clients still trust this product if it's no longer InfoScout Insights?"

The Challenges

  1. Facilitate a better user experience for Numerator's digital product by improving its UI.

  2. Create with a limited color palette.

  3. Regain the user’s trust in the same product that is under a new brand

My Role

  • Designed high-fidelity prototype

  • Contributed to style guide creation

  • Designed web app UI

Process

  1. Research and discovery

  2. Define the scope

  3. Style Guide Creation

  4. Designing the User Interface

Research and Discovery

Ethnographic Research

We worked closely with a third-party design agency and our marketing team to gain insight on how to approach rebrand concerns. The agency provided us with a general style guide, color palette, and a new logo for the overall company. These materials served as solid references and inspiration the login page and style guide for Insights. 

​

When interviewing the analysts and clients that use InfoScout Insights, they had all agreed that the user interface was easy to use and visually appealing. In understanding the psychology of color used in UI, the user associates the color blue with trust, safety, and relaxation. We see this color in popular sites such as Facebook, Twitter, and Google. It's also the color we used in InfoScout Insights. 

Define the Scope

​The impact of improving Numerator Insight's UI would be:

  1. The user’s comfort in trusting the data visualization with the appropriate color scheme

  2. Cohesive interface design across all Numerator products based on this project

Report_Prompt_09_2x.jpg
Report_CategoryChurn_Spend_Hide_2x.jpg

Image: Insights BEFORE the Reskin

Style Guide Design

Many aspects of Numerator’s brand were already established. However, we developed the color palette further, creating more shades and adding more colors, with the following in mind:

​

  1. Easy to comprehend

  2. Strongly reflects Numerator’s brand

​

We kept the web app’s design as close to its previous design under InfoScout to ensure the same trust clients and analysts had with InfoScout Insights. We were very intentional with our color choices and font weight selections so that we could emphasize various elements and actions that matched the report workflow.

Artboard.png
Artboard Copy 2.png

Image: Primary and secondary color palettes used to reskin Numerator Insights

Numerator_Insights_GUI.jpg

Image: Style Guide

Designing the User Interface

There are 3 key points from my research that informed the design.

1.  The left nav needed a logo change

Currently, the upper left nav reads “InfoScout Insights”. Since InfoScout has merged into Numerator, it became high priority to change the logo to “Numerator Insights”. Because many clients trust the InfoScout brand, we wanted to subtly incorporate InfoScout’s trademark to ensure that trust. We added “Powered by the InfoScout OmniPanel” below the new logo.

Before

Left Nav, Rev 007 Copy.jpg

After

Left Nav.jpg

Image: Logo change reflected in Numerator Insights

2.  The web app design from the agency was visually harsh on the eyes.

While only an example, the agency’s design played an integral role in reskinning the interface. The combination of a bright green on top of a white backer was visually harsh on the eyes and for analysts who constantly look at the app, it was important for them to feel comfortable looking at the screen. The excessive use of bright green diluted the prominence of the data, and it became difficult to draw the user’s eye to a certain part of the screen. Since Numerator's data visualization serves as the main focus, we used bright colors as the secondary palette to highlight quantitative information so it appears most prominent on the page.

Before

Picture2.jpg

After

StoreLoyaltyFlow_Summary_001_2x.jpg

Image: Used the color palette differently from what the agency suggested

3.  The login page needed a refresh.

The Insights login page still had InfoScout’s trademark all over it. It displayed a picture of shopper with a sheer navy overlay, along with the appropriate login text fields and an orange CTA to login. We changed the background to a simple dark teal with bright green pills emerging from the bottom of the page. I kept the text fields and CTAs in place and changed the CTA color to a light sapphire. This contrast in color draws in the user, introducing them to something modern and exciting, while ensuring trust in the product with the components kept in the same place.

Before

InfoScoutInsights_Login_001.png

After

Login_002_2x.jpg

Image: Gave the new login page a vibrant and exciting feel

Final Design

Click here to view the full prototype. 

​

Key Takeaways

Branding matters! This is my first rebrand and reskin. It was really fun working on the overall visual design across the Insights product and contributing to the style guide. My initial thought was “Will clients and analysts still trust our product if it looks completely different and falls under a new name?” Integrating InfoScout’s wireframe into Numerator’s brand helped familiarize the app for the clients and analysts, rather than changing the whole design of the app. A lot of the changes in the UI are quite subtle, but these subtleties helped create the overall design for Numerator Insights.

bottom of page