Matera Internet Banking

Client: Matera

Project: Web Design, Responsive Design

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 a 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.

matera_presentation

The process

At this point, I had to learn how the system works and think about 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.

matera_presentation_2

UI & Modular Design

The first critical point was the need to be in Angular JS to developers to maximize the production time and gain the 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.

matera_presentation_3

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 other elements. Also, the art direction from icons was created with outline style.

matera_presentation_4
matera_presentation_5

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 the user more control about the actives.

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

matera_presentation_6

Selected Works

Renault ConnectApp Design

SleepyApp Design

BePay AppApp Design

Matera Internet BankingWeb Design, Responsive Design

CebraceApp Design

GOL AirlinesMultiple Projects