spacing
Portfolio | Responsive Data Tables
Overview
This work was part of AT&T’s DS2 enterprise design standards initiative. The DS2 effort involved the reimagining everything from typography to atomic UI patterns and mashups across the board.
[Subtitle]
[description]
Project profile
table
Challenge
A basic table pattern had already been designed prior to my involvement but was incomplete.
My challenge was to conduct a deep dive audit across B2B and B2C experiences and propose additional visual and interactive designs and responsive architecture solutions that addressed user pain points and expectations to complete this pattern’s specification.
[Subtitle]
[description]
Current-state audits
Findings
➤ Online data tables had become too complex and disorganized to understand
Talking with a few B2B customers and inside account reps revealed data-rich tables were very “busy” and confusing. Some legacy B2B customers had simply become blind to them altogether. This resulted in customers having to calculate invoices and calling in to account reps and customer service for verification.
➤ Call center spikes
The research revealed customer support agents and account reps were spending a significant amount of time reviewing and qualifying information already available online. This was a frustrating distraction for both customers and staff.
➤ 3 distinct tables types identified
The audit revealed 3 distinctly different tables types were used predominately throughout the enterprise. This included very simple, tabular data displays with just a couple columns containing small amounts of data. Conversely, a second table class was very dense with many columns containing long text strings, lists, images. The third, was a ledger style with a left column containing a long string line item description and the right column containing values, dollar amounts and sum totals.
Approach
The stakeholder elected to take an Unintentional / Activity Design approach. I relied on the feedback and input from 2 internal B2B customer support agents and a member from the B2B Accounts Receivables team.
[Subtitle]
[description]
Design principles
➤ Best practice research
Before rushing into future state design iterations, I wanted to freshen up on my knowledge of tables from the perspectives of component architecture and cognitive science. I used the W3C and the A11y Project as sources of truth regarding component architecture and (primarily) Edward Tufte for the cognitive and content design research.
Challenging the status quo
➤ Pinching and zooming to view table data was not desired
I was asked to consider new ways of displaying information dense tables on small screen devices that challenged the status quo.
Outcomes
The stakeholder elected to take an Unintentional / Activity Design approach. I relied on the feedback and input from 2 internal B2B customer support agents and a member from the B2B Accounts Receivables team.
[Subtitle]
[description]
New table classes
➤ Class 1: Simple tables
Tables classified as Simple will flex elegantly across breakpoints (or simply fit as-is within the smallest 320px viewport). Viewing the content of a Simple table type does not require any additional user involvement (pinching, zooming, scrolling, etc.).
➤ Class 2: Complex tables
Tables classified as Complex are Simple tables but with one key difference. Complex tables possess so much content that the table, in its complete form, can not fit elegantly within the smallest 320px viewport. Column data is simply too dense to fit comfortably without the need for additional user interaction (pinching, zooming, scrolling, etc.).
➤ Class 3: Summary tables
Summary tables are essentially a hybrid of the Simple and Complex table types. However, a Summary table displays only (and always) 2 columns across all breakpoints. The Summary table type is preferred when presenting accounting content in a ledger format.
