Matera Internet Banking

The project

Matera System is a company specialized in the financial market, offering IT solutions. In their portfolio Matera System has some old solutions that needed rebrand, following the trends and make the user experience simple.

This specific system has some particularities: it has been used by employers who need long hours of training. With this knowledge about the company, the goal was to give an invisible experience and keep the learning curve, reducing the number of courses and training hours.

The process

At this point I had to learn how the system works and think how the product would be scalable. The new version should give the possibility to implement more features without depends just on the interface.

The layout needed to be a modular and low cost to implement. Besides that, the system needed to be responsive and keep the functions and features in a similar way on mobile. Another challenge was the deadline: only 4 weeks to redesign all interface.

UI System & Modular Design

The first critical point was the need to be in Angular JS to developers maximize the production time and gain agility to update the code. The Material Design was the best solution in this case, but in some elements, not all the interface.

Also, I used as the base, the Bootstrap grid's to compose the interface and make the documentation of the interface behavior in the desktop and mobile screens.

I started with elements that were more easy to be duplicated in the interface or that were permanents in the interface like Dropdowns, Lightboxes, Search Actions, Call to Actions buttons and others elements. Also, the art direction from icons was created with outline style.

The result

With the new interface, the feature to show the transactions in timeline mode was one of the relevant points of the job. This gave to the user more control about the actives.

In the responsive system version, the challenge was keeping the same experience from the desktop version.