Collaborative design for a new digital ecosystem

Cornèr Banca
CBA_01_a
CBA_01_mobile
Cliente Cornèr Banca
Our approach
Branding, Content, Experience
Anno
2019

Client and goals

Cornèr Bank is one of the most important Swiss banks. Active both nationally and internationally, with strong roots in the Ticino region, it caters in particular to a high-level private clientele. After several projects with Ander Group  in the past, Cornèr asked our help for the restyling of its website, with the aim of optimize the information architecture.

Identify the target and rethink the tone of voice; reorganize the way services are presented; give the bank a more elegant and 'clean' image, maintaining a link with the communication strategy in use.

Concept

The starting point for the graphic concept of the site was the typical frame of Cornèr Bank's communication: an element that we simplified, made more essential and elegant and used not only in the images of the site, but also as a graphic element that encloses boxes and content. Overall, the mood of the site reflects the values of the bank: solid and traditional.

CBA_02
CBA_03

Design System

The first phases of the project revolved around the definition of the Design System of corner.ch. We chose a color combination that did not deviate from the institutional colors of the Cornèr Brand and was also functional to the User Interface and the interactions between the elements.




The choice of the font fell on Roboto, a Google Font with geometric lines that well express the Concept of the frame, but also contemplates sinuous curves for a comfortable reading. Everything has been  featured by a library of customised icons to identify the various services offered by the group.

CBA_04_a
CBA_05_mobile
CBA_04_mobile

Interaction Design

Through the Interaction Design, we introduced in the site some animations and interactions in order to give more dynamics to the site graphics., always focusing on the frame which is composed in different shapes and directions.

CBA_09

Atomic Design

Atomic Design is  the creation of a digital product through the design of single micro-elements, put in relation with each other. It starts from the design of individual elements (atoms), which are related to each other in simple structures (molecules) or more complex (organisms), introduced within the Templates and finally in the pages (Layout).

The interface of the Cornèr Bank website has been designed i a way that can be modified in a totally modular way, keeping the macro-structure coherent during navigation.
CBA_10
CBA_09_mobile
CBA_06

Information Architecture

The complex structure and the heavy User Experience were among the first issues that emerged during the meetings with the client: the bank's own employees had difficulty navigating the site and finding information. That's why we focused on a great work of content reorganization, eliminating superfluous  menu items; moreover, we grouped services on the basis of real needs and customers' mental models, moving away from the previous structure that replicated the bank's corporate structure.




The new site provides a hierarchy that never goes beyond the third level of navigation. Moreover, the user always has the possibility to move to another section directly at the bottom of the page, without having to use the main menu: in the product pages it is always possible to go to the next level of depth or to go up again in the navigation flow.

CBA_07
CBA_07_mobile

Strategy and Co-design

We set up the project with a logic of Co-Design, or collaborative design: all the most important decisions were taken during the Workshops with the managers of the bank and the people of the Marketing and Communication Team. This allowed all stakeholders to feel that the project was tailored, inviting them to be involved and to provide a contribution. In this way, the approval process was streamlined and response times were rapid.


Even the content writing was done side by side with the client: each area manager was involved in several Content Writing Workshops, with the aim of putting the correct concepts on the table and at the same time translating them into an engaging and SEO-friendly form, which took into account the Keyword research done in the initial phase. The tone of voice was slightly detached from what the bank has done in the past: the style is informal but reassuring, direct but never joking.

CBA_08
CBA_08_mobile

Site development

During the final phases of the project, we organized a Hand Over of the digital formats (Sketch and HTML), so the IT department of the client could manage the development of the pages autonomously.

CBA_11

Per arrivare al cuore del suo target, un brand ha bisogno di una storia da raccontare. Noi disegniamo storie.