← Home
Button TextButton TextButton TextButton Text

Complex Data Table UX Project

I was responsible for...

for

Rexlabs

|

February 2019

I entirely reimagined how Rex Software CRM displays data to their users, and how users can interact with them.

What’s a Rich Text element?

Sunheading

Another subheading

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

And here is a really important quote that I'll want to highlight.

• • •

Project objectives...

This project initiated as a research project for a new product within the Rexlabs product suite. Our aim was to research the leading UX for data heavy tables. Also looking at competitor and leading filtering and sorting UX.

"From the research, I determined strategies we could use to develop a table component that leverages data in the most intuitive way for the user."

• • •

I was responsible for...

• • •

Project details...

UX Research

My research into tables UX started with defining the UX best practices.

I then analysed the data table experience from many of our competitors within the industry.

"Using gifs and screenshots, I provided a visual analysis of features and experiences made within over 20 data tables from leading companies."

My discovery found both positive and negative features that we could learn from.

UX Exploration

Within the desktop wireframes, I focused on many different components that make up the ideal table experience.

Data Table Pagination

From pagination, through to column truncation indicators and sorted columns.

Interaction Experience Prototyping

To enhance the impact of my explorations, I recorded prototypes to best demonstrate the interaction experiences.

Responsive Prototyping

• • •

Applications Used

Google Slides, Giphy Capture, Sketch, InVision (low-fi prototyping), Webflow (horizontal responsive prototyping), Principle (vertical responsive prototyping), Google Docs (document the final solution)

Applications Used

Giphy Capture to capture UX interactions & experiences

Google Slides to present UX analysis

Sketch for UX explorations and solution

Runner Pro Sketch plugin to improve design efficiency

InVision for low-fi prototyping

Webflow for horizontal responsive prototyping

Principle for vertical responsive prototyping

Google Docs to document the final solution

Slack for team communications