BNP Paribas Fortis - Sales flow focused layout

The sales flows on the BNP Paribas Fortis website were build within the site pages. To keep the user more focused the Channel Design team created a focused layout. Whenever you start a flow, components like header, navigation and footer will disappear, in order to keep you focused on the job you want to do. Because of this new layout we needed a new grid system and some new components to fit this grid. Together with UI/UX designer Anna Kleszczewska and developer Yuvaraj Ganesan we build a new grid system and some new components like the product boxes.

Agency: Channel Design BNP Paribas Fortis

Tools: Sketch

Credits: UI/UX Designer: Anna Kleszczewska | Development: Yuvaraj Ganesan 

For the grid, first I’ve determined the breakpoints and safety margins first. I used12 column grid which works perfectly in a responsive design. Later on I’ve applied the grid on different sales flow designs, and try to fit all the different components within this grid. Together with the development team we set up the rules for the grid and the different components.

For the product boxes it was important to structure the data to tell a clear story. I started with a small benchmark, in order to select the most important data. I ordered all the data on a scale from 1 to 9 and compared this order with different banks in Belgium. This way I could already see a common factor. Most banks put the goal of the loan on the first rule. The amount became second and the duration third.

Afterwards I put the data in a storyline. Out of this story it was easy to extract the right order of the elements to tell a clear message to the user.  while creating the boxes I try to extract as many unnecessary information as possible without losing the right context of the story. In the end I made some design guidelines and rules to fit all the data in both country languages and different screen sizes.