My Role
Responsibilities
As the lead Product Designer, my responsibilities encompassed the entire design lifecycle from user research to visual design and user experience.
Collaboration
Collaboration was vital in creating this workflow because there were lot of dependencies form the AI, Backend and Frontend teams.
Design Process
Objectives
End-users struggle to obtain information from tables with hierarchical headers, merged cell data, and unorganized content. Establish a process that enables users to efficiently capture all data from any type of table in an orderly fashion.
The user should be given an option to find the SKU code and convert the line items to base units
Currently, our feature limits the workspace for data extraction from tables, needing optimization for increased working area.
User Stories
Core User Stories
A user who uploads documents containing intricate tables should have the ability to procure data from any table variant.
The user should be able to find the SKU codes from the backend if it is present
The user should be able to convert the units present in the table to base units
As a user who process lot of big tables I should be able to work on the processed data easily
Understanding AI Capabilities
Discussion with AI team
After understanding the capabilities of the AI from the team following data points was noted down:
The Ai is able to get the line items properly if the the headers are defined
Idea Proposal
Proposed a solution to the team (Slides)
After the discussion with the team a solution was proposed on how to deal with all documents that has complex table in it.
View Proposal →
Designing
Objective 1 (Optimizing the Area)
The objective was broken down to three, at first I started with optimizing the area in which the users can work wit tables
I started with this because, the area optimization is universal that it is applicable for both "Smart Table" functionality and the new functionality for "Staple Matrix" for complex tables
When the user clicks on process after selecting the table using horizontal and vertical lines the left bar was hidden as the functionalities of the left bar was not applicable during data extraction from tables
Result of this was a huge area of vision for the users to see and work with extracted data from the table
A button for expanding and collapsing the table was given near the processed table which seemed extremely useful in the case of large tables
Designing
Operations in Rows and Columns
The design should be powerful such that the user should have the ability edit the rows and columns
They should be able to move the rows and columns both single and multiple at a time
For row wise and column movement this is done by a dragging with a drag handle as shown below, I got this idea from the table management techniques used by confluence
The user should be able to delete the row/column, this is done by clicking the drag handle and select delete
If the user need to add custom data to the processed table the user can add a row/column in top or bottom by using the drag handle and populate
Designing
Populating SKU Code, GL Code from backend
For some users they put forward a requirement to have SKU code and GL code populated on a click
This was done using the following flow
Users process that table and if they want to find the SKU and GL code form the backend they need to select the whole table by checking the main checkbox
After that they need to click on the icon for populating the SKU and GL Code, Icon is made such that it is highlighted when hovered
I knew that just the icon wont help in knowing the feature so we will be adding tool tips with information
Designing
Gathering data from backend
There is a chance that the backend is not able to populate all the like items with SKU Code so sometimes when the user is not able to find the SKU automatically he can manually search for that
This is done by clicking on the pencil icon in the empty cell and the user is provided with a modal to search for the SKU by searching for the product
This will be a dynamic search bar when the user starts typing the results will be displayed
Designing
Conversion to Base Units
The objective of this feature is that the users should be able to convert the units that are present in the invoice to base units if needed
This also has a similar approach to what we did in finding the SKU and GL Code, the user selects the whole table and select th icon for conversion to base units
All the units in the table with get converted to base units
Designing
Conversion to Base Units
There is chance that the backend cant find the base units for each and every line item so the user need to manually find it
This is done by clicking on the edit icon in the empty cell which will provide the users with a popup were they have to select the conversion unit from the drop down
If the conversion is not found the user can add the conversion factor to the backend if needed and then convert (depicted in the flow below)
Designing
Data Extraction from complex tables
This was the major obstacle that needs to be tackled and it has not been done by any of our competitors
The objective was to make users extract data from any complex table
As I had a discussion from the backend team they said if we can store the headers as data points then we can extract the data associated
So in the proposal I introduced a new entity called "Staple Matrix" which is build for all the complex tables
Whenever the user encounters with a complex table in the models area as well as in the scanning area then they should follow a specific workflow.
Designing
Data Extraction from complex tables
The user gets a complex table as shown below and our current smart table fuctionality cant extract data from this kind of tables
So the user should click on "Staple Matrix" which is present near the "Smart Table" and select "Add New Complex Table"
Next step is to define the area of interest, this is sone by dragging and selecting the area as shown, when the are a is selected the user should click on process
Designing
Data Extraction from complex tables
Next step to define what all headers are needed from the table this is done by dragging the headers as shown
When a header is dragged and selelcted the user is provided with a modal in which the selected value will be populated and then the user have to click on save
After the user click on save the heading gets populate on the section as shown below
The user now has to select other headers (As prompted by the pseudo cell)
After selecting all the needed headers user need to click "Populate line Items" button then the AI will analyse and populate the line items
Designing
Data Extraction from complex tables
If the AI has gotten the data wrong the user can edit it by clicking on the corresponding cell and then editing it
For better visualization I provided lines and colour differentiation for headers and line items
Conclusion
Future Scope
The design was completed and handed over to the developers, this will take minimum of 4 months for development
When this set of features are implemented the company will be very confident about their data processing capabilities
