Matera Internet Banking

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.

LAUNCH DATE
2016

PROJECT TYPE
App Design, Web Design

MY ROLE
UI Design, Icon Design

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.

LAUNCH DATE
2016

PROJECT TYPE
App Design, Web Design

MY ROLE
UI Design, Icon Design

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.


LAUNCH DATE
2016

PROJECT TYPE
App Design, Web Design

MY ROLE
UI Design, Icon Design

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.


LAUNCH DATE
2016

PROJECT TYPE
App Design, Web Design

MY ROLE
UI Design, Icon Design

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.


LAUNCH DATE
2016

PROJECT TYPE
App Design, Web Design

MY ROLE
UI Design, Icon Design

matera_presentation

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

2. UI & Modular Design

2. Research

2. Research

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.

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 an outline style.

matera_presentation_3
matera_presentation_4
matera_presentation_5

3. 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 over the actives. In the responsive system version, the challenge was keeping the same experience from the desktop version.

matera_presentation_6

4. Learnings

It was my first financial UI Design project that I worked with. I get confused on start with the difficult to understand the rules of this market and system limitations. I think that the most important step of this process was to design a responsive interface keeping the most important components using Material Design as a base and improving the user experience.

It was my first financial UI Design project that I worked with. I get confused on start with the difficult to understand the rules of this market and system limitations. I think that the most important step of this process was to design a responsive interface keeping the most important components using Material Design as a base and improving the user experience.