UI Design

SmartLayers

Machine Learning app By Humans4Help

UI Design

SmartLayers

This project was especially challenging, from the terminology to the complex processes behind was completely unknown to me. A machine learning to extract data from document images.

close panel

SmartLayers app

What is this project about?

This one was about training models through machine learning to predict, classify documents and turn into real data from images. The more samples you give to the model, the more accurate it becomes. But what could I give some structure to something so analytical?

We had to build the graphic panel to teach and train the models, then the models were fully trained become into pipelines could take from minutes to hours to process the samples. Later, the predictions to test the models. It took several meetings and a weekly follow up to get the structure, and patterns for each step.

The UI: relevant information for the user

Structuring the process and organizing the information, incomes and outcomes into steps, helped to also organize the UI. The main challenge was the amount of information, the extremely large labels outcoming from the training. What was from overall the actually relevant information for the customer, and what was the data for the model?

For example, the predictions were secured by encryption, these ones were stored in larges keys (hash), but the user should copy those to use them afterwards. The key itself was meaningless in a semantic way but too large for a list. The solution was to truncate the hash in the UI. Adding a copy function as a trailing icon to copy the content without having to highlight the whole hash with the cursor.

Smart layers hash

Another example was the SL Annotator was inspired by simple graphics software (like the old friend Paint) familiar for users to draw polygons and catch the zones inside the files to train the models.

SmartLayers annotator
SmartLayers annotator example

Conclusions

Were intense three months working with the developers to build the application from abstract concepts to a tangible product. I break down the entire flow into smaller digestible pieces, making every step clear and user-friendly. Minimal UI was the key to showing the most relevant information and keeping a low rate of ‘noise’ regarding the intrinsic complexity.

I have learned how to materialize complex and abstract ideas, and make decisions regarding make transparent portions of the process, decreasing user´s cognitive load.

nordea preview
nordea preview
nordea preview