Responsive Data Tables - Cushman Wakefield

Challenge

A rapid turnaround was needed for wireframes for a project involving the web presence of Cushman & Wakefield, a global real estate services firm. The major challenge was to translate large, complex data tables into format that could be easily accessed and consumed on tablets and mobile devices.

Solution

This was a focused project. I was tasked with building and submitting sample designs for how the website could be built on Eidosmedia’s Cobalt web platform.

To solve the challenge, I did some research and found documentation on how users interact with information on large tables in a mobile screen presentation.

The challenge was to preserve comparison for one row across all columns and comparison for a single column across all rows. The interaction design accomplished this by having people select a column or row from a dropdown to pull data from for the mobile screen width.

Learnings

Designing usable responsive tables is a huge challenge. Most solutions don’t work well. However, if you start with an understanding of how users interact with tables it is possible to create a usable table experience, even on small mobile interfaces.

Wireframes and Prototyping

Below is an example of a large data table that I needed to preserve in a responsive web format. All of the images on this page are from wireframes I built using Cushman & Wakefield’s current website as a starting point. The full width view entirely re-creates a current webpage, and the tablet and mobile views are entirely my design. They were built to carry through design language and UI while maintaining a seamless responsive experience.

Below are larger views of the wireframes in order of breakpoint: desktop to tablet to mobile