I entirely reimagined how Rex Software CRM displays data to their users, and how users can interact with them.
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.
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!
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.
• • •
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."
• • •
• • •
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.
Within the desktop wireframes, I focused on many different components that make up the ideal table experience.
From pagination, through to column truncation indicators and sorted columns.
To enhance the impact of my explorations, I recorded prototypes to best demonstrate the interaction experiences.
• • •
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)
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