actionable table

Can creating smarter tables help a
Neo-bank’s users work faster?

July 2022 - September 2023

Actionable Tables

Can creating smarter tables
help a Neo-bank’s users work faster?

July 2022 - September 2023

Role | Product Design Lead

Company | Aspire (Digital Finance management tool)

Oucome | Delivered comprehensive documentation of interactive component and responsive table guidelines that serve as a valuable resource for designers and tech teams across 7 products. It aimed to increase work efficiency of Aspire's Users.

Tables are the backbone of a digital finance management tools, acting as the primary interface for users to interact with complex data. In all of Aspire’s products like payments, bookkeeping, and claims, tables organise and present large volumes of information.

The project had three key objectives:

Unify the design of existing tables across the product ensuring clarity.
Design two new features; editing and bulk actions, ultimately enhancing user productivity
Create rules for responsiveness ensuring accessibility.

THE FINAL FLOW OF EDITABLE TABLES AND BULK ACTION

Then why ?

Identifying problems IN THE EXISTING SYSTEM

I conducted an in-depth analysis of tables across all major products followed by internal calls with each team's lead designer and product manager to understand their pain points.

ANALYSING TABLES USED ACROSS THE PLATFORM

1. Inconsistent Design: Tables across different products lacked a unified design, leading to a disjointed user experience.

INCONSISTENCY IN DESIGN ACROSS TABLES

2. Responsiveness Issues: Content was often truncated, invisible, or poorly formatted screen sizes, with inconsistent column visibility and no established rules. Initially designed for 1366px screens, the tables lacked responsive behaviour and visual hierarchy.

TABLES DID NOT HAVE ANY ESTABLISHED RULES FOR RESPONSIVENESS

Then How ?

Defining Interactive components

I started by defining table skeleton and unified table components. Further, I created interactive components for an editable table with bulk actions. The components were designed keeping in mind the identified problems while maintaining consistency with the design system. These components can be used to design skeleton of all tables in Aspire.

Interaction and behaviours

Defining all interactive states and how the component should behave during the interaction.

3. Inefficient Editing: The only way to edit any information was to open the detail panel. Users needed a more intuitive way to edit information directly from tables, improving productivity and reducing time spent on data management tasks.

THE ONLY WAY TO EDIT WAS THROUGH THE DETAIL PANEL OPEN ON THE RIGHT SIDE

using components to build a table

Here is an example of how defined components can be used to build a unified table for any product within minutes.

DIGITAL ACCOUNTING

Setting rules for Responsive table

As the last step I defined detailed steps to ensure responsiveness specific for Aspire’s use case. This was the most difficult task of all as it required flexibility across different use cases as well as uniformity.

I created a minimum width logic across 4 screen sizes (The common breakpoints). Once the the column properties are defined and minimum width logic is applied for a single product (eg- transaction list) it can be used by the tech team to set uniform responsiveness.

RULES TO CREATE A RESPONSIVE TABLE USING COLUMN PROPERTIES & MINIMUM WIDTH LOGIC

DEFINING COLUMN PROPERTIES FOR EACH PRODUCT WITH ENSURE UNIFORMITY IN RESPONSIVE BEHAVIOURS ACROSS THE PRODUCT

TYPES OF COLUMNS DEFINE HOW THEY BEHAVE IN DIFFERENT SCREEN SIZES