MarkMonitor is the global leader in online brand protection. Experts in Domain Management, Anti Counterfeiting, Anti Piracy, Partner Compliance, and anti-Phishing.
Data Grid design: adding new features that add functionality and soften monotony.
Softening the monotony of data-grids and increasing the efficiency of analyst workflows.
The MarkMonitor Data-grid is an essential and core tool leveraged by MarkMonitor analysts on a daily basis. MarkMonitor analysts represent 95% of the customers MarkMonitor service. Analysts use the Data-grid religiously. MarkMonitor is considered a sovereign posture application suite. Sovereign postured systems monopolize the user's attention for long periods of time. Therefore, the way data is displayed and the way patterns and information can be perceived is incredibly important.
The number of columns available to the analysts at MarkMonitor can easily expand to over 150+ with custom columns and fields specific to customer's needs that may no limits. With that much information available in a Data-grid and filters to manipulate the data, subtle and distinct differences in how data is perceived become important. Additionally, modal's are also a large portion of how interactions are currently handled. Many of the MarkMonitor modals look similar in nature.
What's being explored?
In this case study I hope to explore simple modifications to a fully committed front and data great solution known as Kendo. Kendo is a front end of architecture that supports data grid solutions. Kendo is a challenging product to manipulate components within. Analysts' readability is paramount to achieve efficiency in our workflows. Making modifications that meet accessibility requirements is paramount.
Shown above is a screen capture from the current Brand Protection platform.
Accessibility and readability exploration.
Below is a comparison of the Kendo datagrid before and after an exhaustive cognitive load design audit was performed.
A comprehensive breakdown for developers and the team.
Comprehensive documentation was prepared for team members and Developers so that as a team we could move through the suggested UI improvements item-by-item in a comprehensive format. Additionally, accessibility scores and color checking was also taken into consideration.
Color driven cognitive load exploration. (Ongoing)
As an analyst, the ability to visually scan and quickly understand and discern information within the constructs of the data grid is essential for the analysts to be able to effectively and efficiently digest and interpret information at a moment's notice. Ongoing exploration into cognitive load efficiency gained opportunities within the constructs of the user interface what the Kendo datagrid is an ongoing and slow improvement process. Examples below, represent several exploratory design experiments currently under way to improve the cognitive visual scan-ability of the data grid.
Row height improvment
Comprehensive design exploration time was invested into understanding the advantages to multiple row Heights for analyst in relationship to the different types of workflows and client types. Our client types at MarkMonitor very dramatically. The majority of our workflows are sophisticated and often dramatically different from one client to the next.
The advantages to offering smaller row Heights to digest visually more information within the constructs of the data grid are highly advantageous to some analysts While others prefer larger or taller row Heights allowing them to visually scan for Marketplace Goods quickly and easily. Offering customized features that enable the analyst to personalize how they digest data has its advantages here.
Color accessibility usecases for the colorblind using a data-grid
Part of the process of developing highly accessible and efficient datagrid Solutions is dealing with accessibility issues for the 8% of people that are color blind. Color blindness can lead to efficiency loss the miscomprehension of data. Exploration has been started and is ongoing around color blindness accessibility. The examples below show RGB color palette Solutions and scenarios acceptable for those with color blindness.