Banca AideXa: an innovative website for a unique fintech. Here’s how we built it

A scalable architecture built through modern web technologies: the design and delivery process of Banca AideXa’s corporate website is a real best practice!

At Tangity, we humanize complexity through design by creating ideas inspired by people’s needs and emotions and using technology to bring intuitive and tangible solutions to life.

Banca AideXa, on the other hand, a brand new Italian fintech for B2B, is a bank of entrepreneurs for entrepreneurs.

The challenge

Banca AideXa asked us to design a modular and scalable solution in line with the current design trends. The website had to be accessible, speak the reader’s language, and engage the user through a style that was neither that of a traditional bank nor that of a fintech. Furthermore, AideXa asked us to design a CMS to manage the site autonomously and effortlessly.

From day zero, the team was composed by:

• 1 Experience & Design Manager;
• 1 UX and Service Designer;
• 1 Content Designer;
• 1 Visual Designer;
• 1 Design Engineer;
• 2 front-end Developers.

The team members worked together from the beginning of the project with a strong synergy, considering every point of view. Business, content, design, visual, development: day after day, we saw the design and the technical implementation growing step by step.

The design approach

We designed each page to simulate the dialogue between the reader and the bank to help the user feel involved. A series of hand-crafted tailored illustrations enrich the storytelling that the copy and microcopy already build within the pages, engaging the user in simple navigation. The CMS is easy to use and allows the content editors to create new pages quickly. The design system allows anyone to understand and borrow the logic and strategy to design and develop new components and layouts.

The design goals that the team achieved are:

• a linear and straightforward experience, to make users save their time;
• the balance of graphic and textual elements;
• the use of short texts and clear words;
• a modular structure that facilitates the creation of coherent and consistent layouts;
• a forward-looking information architecture;
• the creation of an environment in which users feel at home;
• the creation of a dialogue between the bank and the user that underlines the human value behind the numbers;
• the use of a language that the reader is familiar with;
• a visual approach that communicates the clarity and professionalism of the brand through a minimal look & feel that can keep the level of attention high;
• the use of a story with a direct, smart, and friendly narration without unnecessary frills, which helps transmit the message in a clear, fast, and consistent way.

See also the case study on our website.

The technical requirements

• DatoCMS as headless CMS
• React with TypeScript language
• Next.js with Static Site Generation (SSG) mode
• Component styling with CSS-Modules
• Google Lighthouse Accessibility score above 90%
• Core Web Vitals scores all green
• SEO optimized
• Integration with Invision DSM using Design Tokens

The CMS

Banca AideXa chose DatoCMS has as the headless CMS, because it’s effortless and intuitive to use for editors, and offers an excellent development experience; as a plus, the Modular Content Fields have been a cornerstone for the modularity of the solution: more information will follow.

DatoCMS doesn’t have any concept of pages like traditional CMS. Instead it’s all about content models.

Once the information architecture and content models for the pages are defined by content designers, they can be easily translated into DatoCMS’s models and blocks.

DatoCMS provides also a React package called react-datocms that offers some really useful features out of the box really useful.

Front-end Architecture

We built the front-end architecture around these pillars:

• Semantic Markup;
• Modern Web Layout;
• Responsive Typography;
• Accessibility;
• Component-driven development.

Semantic Markup

In the technical implementation, we wanted to leverage the most modern techniques. That means that the layout is the responsibility of the CSS, the content is the responsibility of the HTML, and JavaScript is used to enhance the user experience.

Semantic markup communicates information to browsers and assistive technology that’s interpreted and rendered standardly.

Modern Web Layout

We extensively used Flexbox and CSS Grid, the native layout systems supported in all modern browsers. That is way more flexible than Bootstrap without messing the markup, easier to layout semantic markup, maintain, and animate the content.

Accessibility

We rebuilt the whole front-end code with accessibility in mind, applying:

• semantic markup;
• proper use of landmarks and correct page sectioning;
• ARIA only when needed;

Accessibility benefits from semantic markup since it provides implicit roles (no need to add role= “button” to a <button>); sometimes it also bonus feedback (most will helpfully read the total number of list items in a <ul>). A screen reader user would find its way around a page coded with semantic HTML that renders default browser styles.

Component driven development

Before building the pages, we started developing the page components using Storybook. Storybook is a great companion for every developer. It allows one to focus on each single component building every state and immediately see how it renders without the need to mount the whole page, free from any external dependency.

Screenshot of the Storybook page for a Card component, with the left sidebar listing several components.

The Design System

During the design process, we created our design system. Synergistically, we worked together to achieve a common goal, relying on the collaboration of a very present customer and relying on the great harmony that has always been between us. We all got our hands on it, overcoming the limits that the role imposed on everyone: there were no watertight compartments, only a great desire to design by iterating.

So, the “Open” design system was born.

A view of Banca AideXa’s design system.

Open’s goals are:

• creating a shared language, both written, visual, or interaction;
• being synced, thanks to a language that defines the bonds between elements and people;
• defining a common vocabulary to improve the collaboration between people;
• helping designers and developers to work better together, involving everybody from the start.
• saving precious time;
• decreasing information fragmentation and reusing already built components; furthermore, it increases the onboarding process of new team members.

Modularity

As said before, the modularity of the pages is built around the DatoCMS’s Modular Content Fields.

Content in DatoCMS can be organized into:

• Models: general content models;
• Blocks: content models that can be referenced in Modular Content fields defined in other models;

Also, there is a 1:1 mapping between blocks and React components in the code. We defined a model called “Modular Page” with a modular content field that refers to several blocks:

Screenshot of DatoCMS admin user interface displaying the model definition of a modular page.

In this way, a content editor is free to choose the blocks to be displayed on the page:

Screenshot of DatoCMS editor user interface when editing a Modular Content field.

The page layout

The page layout is simple: on desktop, the content is large at a maximum of 1440 pixels, with margins on both sides; the page consists of horizontal chunks, so every page component is as large as the viewport and displayed stacked vertically.

The layout is even simpler on mobile, with only 4 grid columns and the page sectioned with vertically stacked components.

There is an exception to this layout on desktop: the possibility to display 2 components on the same row; we may have 2 cases:

1. both components may take 50% of the available space on desktop (6 columns of the wrapper grid);
2. the first component takes 1/3 of the available width (4 columns) and the second 2/3 (8 columns).

So in one row, we may have:

• 1 component with full width;
• 2 components with 50% of the width;
• 1 left component with 1/3 and a right one with 2/3 of the width;
• 1 left component with 2/3 and a right one with 1/3 of the width.

We have implemented this layout using a compound grid, as explained by Andy Clark in this Smashing Magazine article:

Inspired Design Decisions: Pressing Matters - Smashing Magazine

A compound grid is two or more grids of any type — column, modular, symmetrical, and asymmetrical — on one page. They can occupy separate areas or overlap.

In our case, we need 2 grids: one with 2 columns and one with 3 columns. Overlapping them, splitting the column, and considering the gaps, we create a compound grid of 4 columns.

Applying the compound grid to our cases, we get this:

Implementing the compound grid using CSS Grid is a piece of cake:

.compound-container {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 2fr;
   grid-column-gap: 16px;
}
// this is used by the components large 50% of the width
// it will take 2 columns of the grid
.component-50-percent {
   grid-column: span 2;
}
// the component large 1/3 will take only 1 column
.component-one-third {
   grid-column: span 1;
}
// and the component large 2/3 will take 3 columns
.component-two-third {
   grid-column: span 3;
}

We used a different layout for the blog landing page, where we have a cover image alongside cards on the right and below. The cover image extends outside the grid to the left border of the viewport:

Implementing this layout has been challenging, but once again CSS grid comes to the rescue:

Technically, also this grid is a compound grid with 6 columns, where the 1st and the last one are used for the side margins of the content with a variable width; the cover image stretch within the first 4 columns:

.blog-container {
   grid-template-columns: 
      1fr 
      minmax(auto, 437px) 
      minmax(auto, 250px) 
      minmax(auto, 250px) 
      minmax(auto, 437px) 
      1fr;
}
.cover {
   grid-column: 1/5;
}

You can see desired behavior on the blog landing page.

Components architecture

Most components need to be displayed in full width, with the content within 1440px maximum; inside, the content is aligned with a 12 columns grid.

Each component is built with:

• an article element that wraps the component itself, large 100% of the viewport; a background color may be applied;
• a div element as an internal wrapper with automatic left & right margin to center the content; it may also define a CSS-Grid with 12 columns, used to align the inner elements.

Here the simplified markup:

<article class="block">
   <div class="content-wrapper">
      /*... component inner elements here...*/
   </div>
</article>

and the styles:

.block {
   max-width: var(--section-max-width);
   width: 100%;
   margin: 0 auto;
}
.content-wrapper {
   display: grid;
   grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
   grid-template-rows: auto;
   gap: var(--grid-gap);
   align-items: center; 
}

Typography

The website uses the responsive typography technique: it means that the font size increase or decrease when the browser viewport change size; in this way, the font size becomes fluid, not constrained by several media queries, but linked to the viewport width.

Also, to avoid font size too much small o big at the extremes, we used the technique called “css-locks” (see this article); since we are targeting only modern browsers, it’s all about the CSS clamp function:

font-size: clamp([minimum size],[desired viewport width],[maximum size]);
// example:
font-size: clamp(1.5rem, 4.9vw + 0.9rem, 3rem);

Conclusion

The team worked for three months, delivering a brand new design system and a whole new website, with 27 components and 25 variants, that are used to compose a total of 45 HTML pages.

What’s next? Now we’ll continue to take care of what we’ve created with the same spirit: multidisciplinarity, synergy, and attention to detail. The work so far is only the beginning.

Team

Experience & Design Manager
Lais Kantor Caserta (Banca Aidexa)

UX and Service Design
Maddalena Bellè (Tangity)

Content Design
Martina Cesaretti (Tangity)

Creative Direction
Andrea Abascià (Tangity)

Visual Design
Huiling Li (Tangity)

Illustrations
Sara Ciprandi

Design Engineer
Marcello Palmitessa (Tangity)

Front-end Developers
Roberto Vitali (NTT DATA)
Andrea Puzzuoli (NTT DATA)