Superlógica 2022

Redesigning a table component

UX/UI, Design System

Cover of the page showing the redesign of the table

Introduction

Superlógica provides tech solutions for real estate management and finance, serving over 100,000 condo complexes, 4,000 agents, and 3,000 administrators. Its robust platform handles a large amount of information and day-to-day activities.

The company offers an ERP (Enterprise Resource Planning) product, but its outdated technology has hindered its performance. The Design System committee thus decided to upgrade the technology to React, allowing for the opportunity to update and improve multiple components.

I will focus on the Table component for this project since it is an essential part of the platform, presenting critical content for both management and consulting purposes.

DS Team: UI Designer: Virna Varela | Development: Wilson Prado, Henrique Corraro, Diogo Righi
Skillset: UI/UX Design, Design System
Products: SDL (Superlógica Design Language), ERP

The problem

Although the table is one of the foundations of the ERP interface, we discovered numerous inconsistencies in both its UI and application. After conducting an investigation and inventory, we found that there were many different types of table components and subcomponents, which violated several heuristics, including the absence of clear system status, lack of consistency and defined standards, and unnecessary complexity that often created a cognitive load.

Goals

Our goal was to improve the table component while taking into consideration UX/UI problems found during the inventory and analysis stage.

  • Be simple and consistent;
  • Be scalable, flexible and easy to use;
  • Meet the data management scenarios in ERP;
  • Focus on the desktop version due to users context;
  • Serve both product users and Design System users.

Process

For this project, we used the double diamond to outline our activities and deliveries. First, we undertook a discovery phase to understand our components and the relevant literature. Second, we defined an action scope to balance our needs with those of the user. Then, we developed and presented initial drafts to the team, followed by validation rounds that involved feedback, iterations, and quick transformation. Finally, we delivered the component to the product team.

Discovery

During discovery, we investigated and identified common usability issues and inconsistencies on the platform. We then researched and benchmarked best practices in table component design to visualize different applications.

Inventory

We investigated each ERP vertical's table to understand covered scenarios, shared behaviors, and particular nuances. Collaborating with the Support team, we gained insight into semantics and product specifics, allowing us to navigate problems and gather insights.

During this stage, we could outline some of the requirements for the table:

Table scenarios and needs
  • It must serve as a reading/consulting and management table;
  • Icons or symbols are necessary in order to identify services, providers, document types, etc;
  • It needs to deal with a large amount of information in a focused manner;
  • Status changes needs to be perceptible;
  • Besides status, the user needs to understand certain process steps;
  • The user needs to be able to change and mark options as default;
  • Absence of information must be clear;
  • Sometimes it is easier for the support team to deal with visible document attaching options;
  • Errors and required actions must be clear;
  • Some contents are shown as subtitles or secondary texts;
  • Some tables need inline editing, others open advanced configurations or more options;

Identifying problems

By observing scenarios through a UX/UI perspective, we identified problems and possible solutions for the main table component and its subcomponents. Here are some common problems and insights:

Common problems
Insights and solutions

The overuse of tags without standards is a common problem, such as for dates, payment due dates, and words in the middle of a sentence.

Standardize table tags for displaying specific information.

The table often loses focus on its main subject, such as displaying pricing as the first column instead of the contract ID or name in a contract management table.

Place the main item as the first column of the table for easy identification and understanding.

Sometimes, too much information is crammed into a single cell, often labeled with a generic title that doesn't fully capture the content within.

Separate information into columns according to meaning and context for easier navigation and filtering.

Components are often used in inappropriate contexts, such as progress bars without indicating status or steps, inconsistent methods for displaying information, or buttons that double as tags.

Improve the transparency of information by standardizing how to show progress, status, and counters, and by differentiating components used in different settings.

The amount of information in error popovers can make it difficult for users to read.

Create standards for displaying errors in a table and use modals to display additional information as needed.

Inconsistent ways of displaying empty content in cells: CTA inline actions, question mark icons with popovers, errors, empty tags or no label at all.

Signal context for empty states with the use of "-" and CTAs, or through hidden information.

Icons can be confusing when their meaning doesn't match the context or when different icons are used for the same action in different tables.

Improve icon consistency by creating a centralized icon inventory for Product Designers to save and consult.

Columns with generic or no titles that relies on the user investigating to understand what is the context.

Add clear column titles in every column.

Inconsistent ways of assigning emphasis to an information: tags, tags + text, sometimes background color changes.

Status tags can change colors and icons to convey a sense of urgency.

Low contrast on texts that difficults legibility.

Defined minimum light grey to prevent random choices in the design system styleguide.

Footer can be a little redundant, confusing and have misplaced features. For instance, bulk actions at the bottom of the page.

Change bulk actions to the top of the table and make the pagination actions more clean and clear.

Search is often located in a different area of the page, very distant from the table.

Standardize a way to show the search near the table.

Buttons that only appear when you hover.

Create a compact way of showing actions without having to hide them with hover.

A lot of times tables are overused when the content could be shown in other ways.

Present information in different ways: lists, dashboards, etc. Not everything needs to be a table.F

Problems highlights

We highlighted important takeaways from the inventory with pictures to illustrate problems:

Example of a UI/UX problem:
Tag overuse for every piece of information.
Overutilization of tags

Tags are being used to display various types of information, including dates, due dates, blank information, and words in the middle of a sentence.

Tags are commonly used to indicate states, statuses, categories, and other important information. However, overusing them can diminish their effectiveness. To avoid this, clear guidelines should be established to define when and how tags can be used.

Example of a UI/UX problem: Overloaded columns with a lot of unrelated information
Overloaded columns

Many tables in the platform include a generic column that contains unrelated information, which can make it challenging for users to understand the presented data and filter by specific values.

The column's goal is to facilitate information identification and organization, with each independent piece of information having its own column. Exceptions can be made for subtitles.

Example of a UI/UX problem: overloaded table with a lot of irrelevant information to the context.
Overloaded tables

Tables in the platform often contain irrelevant information that could be presented as expandable details, allowing users to focus on the most important data first.

Product Designers must ensure that the content displayed are actually answering to relevant questions.

Example of a UI/UX problem:
Same icons representing different things or different icons representing the same thing.
Icon representation and inconsistency

Icons are often used to replace worded statuses that are essential for understanding the content and can only be shown while hovering. However, there are inconsistencies in their meaning, such as icons representing different information or two different icons representing the same information.

Icons should only be used when their meaning is widely understood within the platform. Text should be used whenever possible, and new icons should be added to the inventory only after careful consideration.

Example of a UI/UX problem:
Actions appearing only with hover and in unpredictable spaces.
Table actions

There are inconsistencies in the presentation of table actions, such as their placement in unpredictable areas that can only be accessed through hover, and the use of icons, links, or buttons. Additionally, they often occupy valuable space at the beginning of the table.

Actions should be consistently positioned and visible at all times, with a uniform design based on the context.

Example of a UI/UX problem:
Search located very distant from the table context.
Search and context

Sometimes multiple tables are present on the same page, and in such cases, search bars are frequently placed at the top of the page, far from the relevant context and search results.

Group the search bar with the table, ideally in the header, to keep it contextually relevant.

Desk research and Benchmark

During this stage, we compiled articles and visuals to materialize the table concept and create important guidelines for elements, parts, and behaviors.

Below, there are some of the foundations that were used as a starting point:

  • Vertical and horizontal lines help to delimit the content well, however they can create a visual noise.
  • Horizontal lines already manage to delimit the content without necessity for visual distraction;
  • Alternating background colors to differentiate one line from another (zebra) can be used as a way to help the eye navigate the content;
  • It is important to have clear contrast to differentiate internal elements.
Desktop references

The visuals below showcase some key features that tables can include, such as hover effects, multiple selection, line actions, search bar, information alignment, scrolling, popovers, filters, and more:

Below a list some of the good practices regarding those features:

  • Hovering can be useful to show secondary texts with tooltips that are hidden due to lack of space. If the content is crucial to the context, it is important to display everything.;
  • Highlighting lines and actions when multiple selecting helps bringing contrast to the change of context being presented;
  • When a table lacks space, an interesting option is to compact line actions into a "more actions" kebab;
  • The existence of a search bar that is located in a position that makes sense to the context (right above or in the table header) can help to reduce time spent on a task;
  • Differentiating information alignment based on the type of content (values or text);
  • Scrolling vertical or horizontal while leaving one fixed column can help the user compare content but also not loose sight of the main context;
  • Popovers with detailed content can be a way to clear the table from unnecessary information;
  • Filtering has to be very personalized to the context and provides advanced options when possible.
Mobile references

In this context, the product is designed for desktop use only, but a responsive design was still considered for future development beyond the MVP stage, as users may switch to different screen sizes.

There are various ways to handle table behavior on mobile devices. According to Michał Jarosz's article 5 Practical Solutions to Make Responsive Data Tables, some of these solutions include hiding columns, collapsing content, transforming content display, and providing comparison options:

  • Hiding less important columns broadens the overview by showing more information at once, but it can also limit spacing while hiding important information;
  • Collapsing the table by showing the first column as fixed makes the first item always visible, but it requires less obvious interactions and can take up a lot of spacing from the rest of the content;
  • Transforming the table by showing blocks of information with title and value side by side can also be an oportunity to ease the viewing of large amounts while maintaining columns and content visible. The only downside is that it takes up a lot of spacing and column titles are repeated multiple times;
  • At last, comparing can be very helpful when in need of comparing information side by side. However it can be very limiting when the idea is to compare elements from different positions;

Scope

To define the scope, we considered the foundational parts, elements, and features of the table based on our previous findings:

*Represents features that could not be met at the moment and were postponed to a second version.

Header

  • Search: real time search that filters in real time.
  • Actions: bulk actions, Adding items to the table;
  • Filters*: filtering based on the each table needs (period, value, etc);
  • Advanced*: personalize which columns are displayed in the table.

Columns

  • Sorting: descending and ascending visualization of the content;
  • Information indicator: clarify specific terms used as column titles;
  • Selection: selecting bulk or individual elements;
  • Scrolling: horizontal scrolling when the table reaches maximum space available in the screen;
  • Advanced*: personalize if the column is visible or not; drag and drop; freeze or resize column.

Lines

  • Actions: executing individual actions inside the cell or the line;
  • Hidden content: display hidden content with popovers or tooltips for further details;
  • Attention/news: highlight with components (tags) according to different events;
  • Cells content: checkbox, avatar, text, links, numbers, tags, actions, etc;

Footer

  • Summary: total amount or important information that needs to be summarized;
  • Pagination or more: load extra data.

Summarizing with a mind map

To ensure comprehensive coverage of all scenarios during development, we created a mind map that listed the table's parts, elements, and states. This helped us keep track of our tasks:

Develop

During development, we created a table template that would cover both simple and complex scenarios based on all the discovered information:

A template of the new table design

The template was designed with table parts and elements in Figma, allowing product designers to customize columns and sizes while adhering to UX/UI guidelines. Changes were made to search proximity, bulk action positioning, and content types in columns to improve clarity and visual design. A tag column with specific colors for status and information, as well as always visible actions, were also added.

Application example: before and after

The table presented in the Problem topic now shows issues identified during the discovery phase. It was redesigned to address UX and UI problems:

The new table solution considers both visual and content changes, and was developed in collaboration with the product team. It demonstrates that a clear and clean visual does not necessarily mean a minimalistic approach that hides or removes information. Instead, in this case, additional columns and information were necessary to improve interpretation and avoid mixed or lacking context.

Interaction examples

Below there are some of the main behaviour interactions regarding: navigation; selection; search; scroll and pagination:

Validation

Validation was an iterative process throughout the project, with the team constantly sharing information and validating problems and requirements. A specific round was dedicated to ensuring all scenarios were met, and tables from different pages were adapted using the new Design System components with help and review from the Product and Support teams.

Product designers then incorporated the new table into their projects and conducted usability tests to evaluate feature and table performance.

Handoff

The delivery stage provided specs to the Design System developers and documentation/guidelines for Product Designers to use in their projects. However, this was just the beginning of multiple tests to come.

Takeaways

The table component may appear visually simple, but it can lead to serious interpretation issues if not designed appropriately. Thus, it was crucial to analyze the project from both UX and UI perspectives. Moving forward, our plan was to improve the table's responsive design, continue the discovery process through usability tests with the product team, and analyze ticketing metrics related to table interpretation issues.

Previous project: Structuring a Multi Brand design system ➝