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
-
Facilitate a better user experience for Numerator's digital product by improving its UI.
-
Create with a limited color palette.
-
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
-
Research and discovery
-
Define the scope
-
Style Guide Creation
-
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:
-
The user’s comfort in trusting the data visualization with the appropriate color scheme
-
Cohesive interface design across all Numerator products based on this project
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:
​
-
Easy to comprehend
-
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.
Image: Primary and secondary color palettes used to reskin Numerator Insights
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
After
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
After
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
After
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.