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
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.
The image above presents an example of a table with some of the UX/UI problems that will be explored in this case
Our goal was to improve the table component while taking into consideration UX/UI problems found during the inventory and analysis stage.
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.
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.
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.
The image above is a collection of screenshots from each product table type.
The quality of the image was reduced to preserve information privacy.
During this stage, we could some of the requirements for the table:
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:
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
We highlighted important takeaways from the inventory with pictures to illustrate problems:
The main subject, "Charges", appears as a small detail in the middle of a table already packed with information.
The first column of the table should display the main focus.
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.
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.
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.
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.
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.
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.
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:
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:
The visuals represent some of the main features of a table: hover, multiple select, line actions, search, information aligment, scrolling, popovers, filters, etc:
Below a list some of the good practices regarding those features:
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:
Mobile transformation
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.
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:
Miro mind map
During development, we created a table template that would cover both simple and complex scenarios based on all the discovered information:
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.
The table presented in the Problem topic now shows issues identified during the discovery phase. It was redesigned to address UX and UI problems:
"Charges" table with listed UX/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.
Notes for the UX/UI projects
Below there are some of the main behaviour interactions regarding: navigation; selection; search; scroll and pagination:
When the table items are selected, the header is transformed and shows bulk actions.
Searching specific information with results in real time
Searching specific information with no results.
Scrolling the content horizontally in case the table has more columns than the space available.
Loading between pages with a spinner.
Skeleton loading was being studied for a second version of the table.
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.
Validation scheme
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.
Components preview detailed in a figma file
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.
