Call Table Redesign

The Problem

CallRail's biggest value prop and homepage table had outgrown its width and needed some love.  As we'd added more and more attribution data on a user's calls, we had more and more available columns in the call log table.  We were seeing users turn all the columns on, even on smaller screens. In many cases this would break the card and force a horizontal scroll past the data visualization.  It was a bad, broken experience.

These power users are my weakness – I had to fix the delight-factor for my fellow data-hungry nerds.

‍

‍

The Process

I started by collecting data on the impact of the problem.  We had data on browser resolutions in Google Analytics, and data on column settings in our database, but at the time didn't have a way to match these users up, so I did a rough estimate of impact assuming a fairly even distribution of 'power users' (users with 15-20 columns on) across browser resolutions, skewing slightly towards larger widths.

Then I took a look at the columns. There were some obvious column groupings that could potentially help reduce cognitive load of this page:

• 3 columns of phone numbers that could be grouped with a name to distinguish them - Tracking number & name, caller number & name (from CNAME record), and agent number & name (if available).
• Location is actually derived from the area code + exchange of the caller's phone number. Grouping caller location with caller number could reinforce this association and might keep user from thinking there was more accurate geo-location data being received.

That was an easy 4 column / ~600 pixel reduction that tested well with research participants.

Next we tested more column merging ideas:

• Start Time + Duration?  The default sort is chronological, and users like to sort on Duration, so is there a way to sort on both data points?
• All the session data items (Search Keyword, Referrer, Medium, Landing Page, Campaign)?  It is rare to have data for all of these, so with all of these columns on, we're showing a lot of cells without data.
• User-edited fields (Notes, Value, Qualification, Tags)?
• Use an icon for device type (Mobile vs Desktop) and merge icon with another column (Source or Session data items)?

Overall research participants didn't like these combinations, and wanted the option to sort independently on each column (concept for multi-sort was not intuitive enough).

‍

Next I created rules to fully hide any columns that didn't apply to your account setup.  If you were in the roughly 68% of our user base with only one company, you would not see the 'Companies' column. If you did not have visitor tracking on, none of the session data would show. If you didn't have an international plan, 'Country' was hidden. This kept users from adding columns that would provide them no data or cause confusion.

‍

Finally I worked with the Content Strategy team to set max-widths for all columns with text wrapping and/or truncation. This saved us another few hundred pixels (depending on how long the users data strings were on our previously flexible columns). We also reviewed the default columns to make sure we had the right set. We added logic to save us an additional column for some user types.

‍

Once I had gotten the width of the all columns view down as much as possible, we had reduced our card-breaking table impact to x%.  As a stopgap for these users until we had resources to build a mobile/tablet version of the table, we needed to allow a side scroll (that was as usable as a side scroll could be).

Freezing the actions icons on the right end of each row, we added a drop shadow to imply that there were additional columns to the right. For users without trackpads or scroll wheels, we show a clickable right arrow that becomes a gentle scroll when held.

‍

The Outcome

First and foremost, the page and card no longer broke for our power users. Now the massive table felt intentional even at the greatest edge cases.

Secondarily, table-width was optimized in general, phone numbers in table became more easily scannable by having context above each number, and users were not shown option to add columns that would give them empty data sets.