Name

Samantha Pico

Dinis Polo

Beatriz Rodriguez

Bernard Laurent

Philip Bills

Hana Kobayashi

Location

🇬🇧

London, UK

🇵🇹

Lisbon, Portugal

Title

Cell text

Beatriz Rodriguez

🇵🇹

Porto, Portugal

🇫🇷

Nice, France

🇺🇸

Florida, USA

🇯🇵

Kyoto, Japan

Progress

Table cell

Content insde

State

Border

Bottom border

Top border

Right border

Left border

Tax Systems

Uk's leading tax provider, offering software for companies to automate their tax

About Retain

Tax Systems is a UK company offering tax compliance software. Specialising in digitalising and modernising tax processes and prioritising data security through their desktop cloud applications.

What this case study looks into

This case study examines Tax Systems' design system's table cell component, aiming to streamline usability and reduce maintenance. It addresses issues like inflexibility and inefficiency in table components, proposing a new structure for enhanced ease of use. The solution aligns with Tax Systems' objectives of achieving flexible tables and simplified maintenance.

"One of the best works I've seen. This is fantastic Jy, this works really really well!"

- Viviktha Gundetti, Line Manager (UX Lead)

My role

UX/UI Designer

Time frame

1 week

Tools

Figma

Microsoft Teams

Table cells, the most used component in Tax Systems
Yet, a nightmare to use..

Context

My contribution & responsibilities

I looked into a design solution for this issue. I designed every cell, created the dynamic and flexible cell swappable structure and thought about how the mechanics of this component would play out. I created the documentation of good and bad usage practices as well as the instructional documentation.

Problem statement

Designing tables is currently a cumbersome process for designers, leading to frustration, inefficiency and inconsistencies in designs.

Detaching instances

Each time a designer uses a table cell, it gets detached. Leading to design errors.

Responsiveness

Table cells are not in auto layout. An issue to work with as they are components.

Maintance

Table cells are messy to maintain with so many variants making it overwhelming.

Results

Table cells are now the most powerful component in the design system!

Maintenance is virtually eliminated, ensuring a more consistent design environment with control over strokes and enhancing table-building efficiency with auto layout-wrapped cells and easy to swap content all whilst not detaching any instances.

Maintance to 95%

A huge maintenance improvement since there's nothing to maintain really.

Better table building experience

Building tables is a joy now, I've build complex tables in minutes.

Consistent design

Tables cells are now linked to the design system, as they are not being detached.

Name

Samantha Pico

Dinis Polo

Beatriz Rodriguez

Bernard Laurent

Philip Bills

Hana Kobayashi

Location

🇬🇧

London, UK

🇵🇹

Lisbon, Portugal

Beatriz Rodriguez

Cell text

🇵🇹

Porto, Portugal

🇫🇷

Nice, France

🇺🇸

Florida, USA

🇯🇵

Kyoto, Japan

Progress

Table cell

Content insde

State

Border

Bottom border

Top border

Right border

Left border

Try it out for yourself!

Feel free to mess around with the edit pane, everything is interactive! Trying changing the content/states or remove some strokes with the toggles.

Building a table (27s)

Building a simple table took seconds, changing the cell content, removing strokes and all with a few clicks.

Adding new states (18s)

Adding a new state is as simple as adding a new variant bringing all the interactions and nested components.

Adding new cell content (35s)

When new content is added, there's no need to create all the different variants and states, as the cells are already designed to accommodate interchangeable content.

Reflection

My thoughts on this project

This is a very powerful and flexible build that will be a huge asset in building tables in the future. This structure will for sure be put to other sections in the design system such as accordions where you can swap what content goes inside the accordion without detaching.

Overall, this was a very satisfying build to do and it was great to present it to my team and see that they all absolutely loved the solution. Table cells were something that was a huge issue right from the start and now it's our most powerful components so far.

Tax Systems

Uk's leading tax provider, offering software for companies to automate their tax

Linked In