Redesign of tables
Redesign of tables
Tapi — April 2023
Tapi — April 2023
About this project
About this project
Overview
Tapi is a platform which helps property managers (PMs) track and action maintenance.
PMs are busy, so Tapi needs to provide information in an efficient and digestible way.
The goal was to improve the UX and UI of the various tables used to display data throughout the product, such as Jobs, Properties, and Suppliers.
This case study will focus on the Jobs page, as it's the most frequently used and had the biggest impact.
PMs are busy, so Tapi needs to provide information in an efficient and digestible way.
The goal was to improve the UX and UI of the various tables used to display data throughout the product, such as Jobs, Properties, and Suppliers.
This case study will focus on the Jobs page, as it's the most frequently used and had the biggest impact.
PMs are busy, so Tapi needs to provide information in an efficient and digestible way.
The goal was to improve the UX and UI of the various tables used to display data throughout the product, such as Jobs, Properties, and Suppliers.
This case study will focus on the Jobs page, as it's the most frequently used and had the biggest impact.
My role
Research — I carried out extensive research into table UX and UI design best practices.
UX/UI Design — I produced a variety of design concepts ranging from low-fidelity screens to high-fidelity interactive prototypes to test interactions.
Design System — I worked closely with the engineering team to iterate on the design and find the best solution that worked within the constraints we had.
Presentation — I presented the final design to the wider team, explaining the benefits and design decisions that had been made throughout the project.
Research — I carried out extensive research into table UX and UI design best practices.
UX/UI Design — I produced a variety of design concepts ranging from low-fidelity screens to high-fidelity interactive prototypes to test interactions.
Design System — I worked closely with the engineering team to iterate on the design and find the best solution that worked within the constraints we had.
Presentation — I presented the final design to the wider team, explaining the benefits and design decisions that had been made throughout the project.
Research — I carried out extensive research into table UX and UI design best practices.
UX/UI Design — I produced a variety of design concepts ranging from low-fidelity screens to high-fidelity interactive prototypes to test interactions.
Design System — I worked closely with the engineering team to iterate on the design and find the best solution that worked within the constraints we had.
Presentation — I presented the final design to the wider team, explaining the benefits and design decisions that had been made throughout the project.
The challenge
The challenge
Summary of the problem
The old card-based design had several UX issues that hindered the effectiveness of these tables. The issues included suboptimal use of screen real estate, failure to display important data, and limited user interaction with no sorting available.
Problem #1
Job cards were too large
The previous layout utilised cards instead of a table for presenting jobs, limiting the quantity of jobs that could be displayed on a single page. I identified that we could enhance the number of jobs showcased on a page, reducing the scrolling needed to locate a specific job.
The previous layout utilised cards instead of a table for presenting jobs, limiting the quantity of jobs that could be displayed on a single page. I identified that we could enhance the number of jobs showcased on a page, reducing the scrolling needed to locate a specific job.
The previous layout utilised cards instead of a table for presenting jobs, limiting the quantity of jobs that could be displayed on a single page. I identified that we could enhance the number of jobs showcased on a page, reducing the scrolling needed to locate a specific job.
Problem #2
Restrictive interaction
Limited interaction with the old design meant that users could only navigate to the job page. However, there are many instances where users would want to directly access the Supplier or Property subpage associated with the job. This was a multi-step process in the old design.
Limited interaction with the old design meant that users could only navigate to the job page. However, there are many instances where users would want to directly access the Supplier or Property subpage associated with the job. This was a multi-step process in the old design.
Limited interaction with the old design meant that users could only navigate to the job page. However, there are many instances where users would want to directly access the Supplier or Property subpage associated with the job. This was a multi-step process in the old design.
Problem #3
Limited context
The old design didn’t display all of the information relevant to each job. The goal was to maximise the amount of information displayed in an up-front and accessible manner.
The old design didn’t display all of the information relevant to each job. The goal was to maximise the amount of information displayed in an up-front and accessible manner.
The old design didn’t display all of the information relevant to each job. The goal was to maximise the amount of information displayed in an up-front and accessible manner.
Problem #4
No ability to sort data
The previous card-based design did not allow users to sort their data, only filter. For example, it wasn’t possible to sort jobs by most to least urgent.
The previous card-based design did not allow users to sort their data, only filter. For example, it wasn’t possible to sort jobs by most to least urgent.
The previous card-based design did not allow users to sort their data, only filter. For example, it wasn’t possible to sort jobs by most to least urgent.
The result
The result
Summary of the design solution
Through my research, I found that most enterprise software products similar to Tapi use tables rather than cards to display and organise complex information. Moving away from the old card-based UI to a well-considered table UI would not only improve the overall user experience on several key pages, but it would also make the best use of the customer's data.
Through my research, I found that most enterprise software products similar to Tapi use tables rather than cards to display and organise complex information. Moving away from the old card-based UI to a well-considered table UI would not only improve the overall user experience on several key pages, but it would also make the best use of the customer's data.
Through my research, I found that most enterprise software products similar to Tapi use tables rather than cards to display and organise complex information. Moving away from the old card-based UI to a well-considered table UI would not only improve the overall user experience on several key pages, but it would also make the best use of the customer's data.
Solution #1
Better use of vertical space
The new table design can fit three additional jobs on the page while maintaining a good amount of padding to ensure readability. Although this is a small change, it significantly improves the ease with which users can find the job they’re looking for.
The new table design can fit three additional jobs on the page while maintaining a good amount of padding to ensure readability. Although this is a small change, it significantly improves the ease with which users can find the job they’re looking for.
The new table design can fit three additional jobs on the page while maintaining a good amount of padding to ensure readability. Although this is a small change, it significantly improves the ease with which users can find the job they’re looking for.
Solution #2
Improved interactions and navigation
Switching from a card-based design to a table format enabled me to incorporate links within the table. This is a significant enhancement for users, as they can now directly navigate to the Property or Supplier subpage for a given job.
Switching from a card-based design to a table format enabled me to incorporate links within the table. This is a significant enhancement for users, as they can now directly navigate to the Property or Supplier subpage for a given job.
Switching from a card-based design to a table format enabled me to incorporate links within the table. This is a significant enhancement for users, as they can now directly navigate to the Property or Supplier subpage for a given job.
Solution #3
Increasing visible columns
Transitioning from a card-based design meant I could fit more columns into the page. I conducted research to identify which columns were the most important. I then made sure those columns were on the left side and easily accessible.
Transitioning from a card-based design meant I could fit more columns into the page. I conducted research to identify which columns were the most important. I then made sure those columns were on the left side and easily accessible.
Transitioning from a card-based design meant I could fit more columns into the page. I conducted research to identify which columns were the most important. I then made sure those columns were on the left side and easily accessible.
Solution #4
Ability to sort data
The updated table design allows users to sort Jobs by multiple different data points, including creation date, last action date, property address and more. This greatly improves a users ability to organise their table in a way that’s relevant to their task at hand.
The updated table design allows users to sort Jobs by multiple different data points, including creation date, last action date, property address and more. This greatly improves a users ability to organise their table in a way that’s relevant to their task at hand.
The updated table design allows users to sort Jobs by multiple different data points, including creation date, last action date, property address and more. This greatly improves a users ability to organise their table in a way that’s relevant to their task at hand.
wrapping up
What the new design achieved
This project led to significant improvements in the user experience for Tapi users. The information presented in tables throughout the product is now more organised, easy to understand, and actionable.
This project led to significant improvements in the user experience for Tapi users. The information presented in tables throughout the product is now more organised, easy to understand, and actionable.
This project led to significant improvements in the user experience for Tapi users. The information presented in tables throughout the product is now more organised, easy to understand, and actionable.
Personal reflection
This project was an excellent opportunity for me to refine my skills in designing a complex interface with a large amount of data. It highlighted the importance of understanding user needs and prioritising features that will have the most significant impact on the end-user.
This project was an excellent opportunity for me to refine my skills in designing a complex interface with a large amount of data. It highlighted the importance of understanding user needs and prioritising features that will have the most significant impact on the end-user.
This project was an excellent opportunity for me to refine my skills in designing a complex interface with a large amount of data. It highlighted the importance of understanding user needs and prioritising features that will have the most significant impact on the end-user.
Increased efficiency
Efficiency is crucial in property management. Even small improvements, such as reducing the number of clicks to reach a desired page, can have a huge impact — particularly when those actions are taken multiple times a day.
Efficiency is crucial in property management. Even small improvements, such as reducing the number of clicks to reach a desired page, can have a huge impact — particularly when those actions are taken multiple times a day.
Efficiency is crucial in property management. Even small improvements, such as reducing the number of clicks to reach a desired page, can have a huge impact — particularly when those actions are taken multiple times a day.
Further improvements
Since the completion of this project, I’ve done a lot of work towards improving the user experience of our filtering function. This includes allowing the user to hide or reorder columns to their preference. The filter project is still in progress.
Since the completion of this project, I’ve done a lot of work towards improving the user experience of our filtering function. This includes allowing the user to hide or reorder columns to their preference. The filter project is still in progress.
Since the completion of this project, I’ve done a lot of work towards improving the user experience of our filtering function. This includes allowing the user to hide or reorder columns to their preference. The filter project is still in progress.
Customer feedback
"The new look puts jobs into date order, which I love, saving so much time and more details on main screen is helpful"
"The new look puts jobs into date order, which I love, saving so much time and more details on main screen is helpful"
"The new look puts jobs into date order, which I love, saving so much time and more details on main screen is helpful"
— PM / Tapi user
