Reusable Table

Repairing inconsistencies in experiences while reducing technical debt.

Company

Technergetics

Timeline

2023-24

Role

Lead UX Designer

Contributions

Secondary Research

Strategy

Documentation

Interaction Design

Visual Design

Handoff

Background

Technergetics delivers software in an extremely fast-paced agile enviornment. Keeping technical debt at a minimum is the upmost priority, unfortunately delivering good experiences can tend to get overlooked.

Goal

Technergetics needed a way to speed up development processes while ensuring a good experience for their users.

The build out of reusable and standardized components aimed to eliminate code duplication, reduce maintenance complexities, and deliver cohesive experiences.

Outcome

I worked closely with engineering to determine an efficient starting point. Tables were deemed a top priority due to their consistent application across Technergetics products.

Based off of extensive research and collaboration, My findings were that the current toolbar attributes and functionality seemed to have the biggest gap across Technergetics experiences. The behavior of the table also had inconsistencies that needed to be standardized.

I compiled re-occuring themes and functionality to eventually define a reusable table and its respective standards.

At the time of writing this, the Technergetics reusable table has been built, allowing for interchangeable functionality/logic depending on application use case, as well as, streamlining familiarity across experiences to shape their users mental model.

Their technical debt has been reduced and their experiences just got a whole lot better.

A table's best friend

Search

The first attribute of the toolbar is an omnisearch. The omnisearch provides a unified searching experience, eliminating the need to perform separate search capabilities to locate desired data.

Actions

The second attribute of the toolbar is an action group. The action group will allow users to perform any table or row specific tasks.

View

The third attribute of the toolbar is a view toggle. The view toggle button provides flexibility to switch the table between default and compact rows. When dealing with variable amounts of tabular data, toggling different views is necessary

Pagination

The fourth attribute of the toolbar is pagination. Defining the amount of data per load, 25 rows was deemed sufficient for the experience.

Framing the mental model

Split View

Split view pattern consists of populating the adjacent side panel on-row select. The panel will remain visible displaying an empty state to help guide users through the workflow.

Nested

Nested pattern consists of navigating the user to a new page on-row select, resulting in a breadcrumb. This pattern is utilized solely on experience use case.

Perform action

Perform action pattern gets utilized in "row specific" and "table specific" contexts. In "row specific" contexts the toolbar actions will be disabled until checkbox selection, unless functionality is "table specific". In both contexts, the pattern directs the user to a modality where they can perform action.

Will Box © 2024.