Data Vis Initiatives

Easy reporting experiences with SaaS

(Client)
IPG Mediabrands, Kinesso
(Year)
2022-2024
(Services)
UI/UX

Data Visualization

Samples & Examples

Development of a proprietary data visualization color formula system, personalized dashboards experiences for easy client theming, and continued innovation in reporting accessibility

Color & Theming

The Problem

When designing a Data Visualization reporting color picker to generate automatic color palettes for charts and graphs based on a primary color, we saw how existing color palette pickers  randomize colors based on a selected shade, which led to off-brand results — and often indistinguishable colors between multiple data series and points

Our Solution

  • Designed a proprietary auto-calculated formula for any primary brand color selection to generate 3 color palettes: Monochromatic, Complementary, Analogous
  • 17 shades of distinguishable differences are generated for each color palette by calculating changes in h,s,l (hue, saturation, lightness) values at designated intervals that work across any input color
  • If a brand’s primary color is too bright, the input color will simply be adjusted to a darker hue of the brand color generating color palettes that are consistently distinguishable and on-brand

Key Benefits

Some key benefits of this solution include:

  • Reduced need to manually align reports and charts exported from the platform to brand guidelines or to be readable & clear
  • Proprietary formula that can be edited to scale as needed within our organization

Dashboard Personalization

Product Application & User Research

Within the Reports application of IPG’s MIE platform, we conducted user feedback on points of friction and opportunities to improve the overall user experience.
We heard clear themes around dashboard personalization when interviewing our users and when gathering ideas across our team:

  • Users are looking for a better way to organize, arrange, and edit the reports in a dashboard view to be able to reduce manual hours spent editing exported charts and graphs from the platform
  • Designers and developers want to be able to use modular designs and micro-interactions to create more scalable patterns while delighting the user, which is in line with the spirit of our design system

Improved UI Touchpoints

Based on the user research, we decided to implement the following UI improvements:

  • Improved visual hierarchy and access to most frequently used actions
    Modular dashboard designs that can easily resize and reorganize the interface through drag-and-drop widgets
  • Micro-interactions with personality and delight provide users feedback and rewards discovery for using new features

Accessibility

Our collective research conducted across our suite of products, led us to the development of an Accessibility Extension tool. While still in early testing and beta phases, this tool aims to allow users the ability to adjust key visual settings based on their accessibility needs.

Data Visualization Benefits

When it comes to data visualization, the Accessibility Extension will allow users to:

  • Adjust font size
  • Correct color contrast
  • Opt to use patterns as shading, which has been recommended to improve readability when distinguishing various groups of data
  • Turn on all labels for a given report
  • Repeat data in a table view which allows users on a screen reader, or who have difficulty distinguishing colors, a way to navigate through the data without missing any pertinent information

Recognition

Credits to the Product Design Team members who supported the design and development of all work illustrated, including video production

Jennifer Rott - SVP, Product Design & Customs Solutions
Emily Chu - Director of UI
Wally Mostafa - Director of UX
Christine Ayuso - Project Director
Michal Polak - Associate Director, Product Design
Sara Birchard - Sr. Product Designer
Maxim Fomchenkov - Sr. UX Designer
Viktorija Prokopenko - UX Designer
Vadym Donets - Jr. UI Designer
Laura Dolegowska - Jr. Product Designer
Patrycja Gawryszewska - Jr. Product Designer

Awards

Awards won for this solution