Case StudyÉtude de cas · Nexabank (UX Design Institute brief) · 2023 · 8 min read 8 min de lecture

A bank should feel human without feeling unserious. Une banque devrait paraître humaine sans paraître peu sérieuse.

A complete challenger-bank project, from naming the company and designing the logomark to a full identity system and a responsive product UI. One brand decision, propagated across every screen and breakpoint. Un projet de néobanque complet, du nom de l'entreprise au logo, jusqu'à un système d'identité complet et une interface produit responsive. Une décision de marque, propagée sur chaque écran et chaque format.

Client

Nexabank (UX Design Institute brief)

RoleRôle

Brand & UI Designer

YearAnnée

2023

DisciplinesDisciplines

Brand IdentityUI DesignDesign SystemsResponsive DesignFintech

A bank should feel human without feeling unserious.

Banking apps have to solve a contradiction.

Feel human and modern, or nobody downloads you. Feel safe and serious, or nobody trusts you with their money. Lean too far either way and you lose: too cold and it feels like a 2009 banking portal, too playful and it feels like a toy you wouldn't trust with your salary.

Nexabank is a challenger bank I built to sit exactly on that line. I wanted a project that was complete, not a styling exercise on someone else's brand, but the whole thing: name the company, design the logomark, build the identity system, then design the product on top of it. Brand visuals and UI as one coherent piece, the way it actually works when you launch something.

A note on scope. This was the final assignment for the UX Design Institute's Professional Certificate in UI Design. The course provides an assignment brief and assesses execution: brand, layout, typography, colour, iconography, and the final interface. The name "Nexabank," the logomark, the identity system, the design system, and the full responsive UI are mine. I came to the certificate with more than a decade of professional experience and used it to build the one thing my portfolio didn't have: a project that runs from brand name to shipped screen, all of a piece.

Les applications bancaires doivent résoudre une contradiction.

Paraître humaines et modernes, sinon personne ne les télécharge. Paraître sûres et sérieuses, sinon personne ne leur confie son argent. Penchez trop d'un côté et vous perdez : trop froid, et on dirait un portail bancaire de 2009 ; trop ludique, et on dirait un jouet auquel on ne confierait pas son salaire.

Nexabank est une néobanque que j'ai construite pour se tenir précisément sur cette ligne. Je voulais un projet complet, pas un exercice de style sur la marque d'un autre, mais l'ensemble : nommer l'entreprise, dessiner le logo, bâtir le système d'identité, puis concevoir le produit par-dessus. Identité visuelle et interface comme une seule pièce cohérente, comme cela fonctionne réellement quand on lance quelque chose.

Une note sur le périmètre. C'était le projet final du Professional Certificate in UI Design du UX Design Institute. Le cours fournit un brief et évalue l'exécution : marque, mise en page, typographie, couleur, iconographie et interface finale. Le nom « Nexabank », le logo, le système d'identité, le design system et l'interface responsive complète sont les miens. Je suis venu à cette certification avec plus de dix ans d'expérience professionnelle, pour construire la seule chose qui manquait à mon portfolio : un projet qui va du nom de marque à l'écran livré, d'un seul tenant.

The org reality La réalité de l'organisation

Before any pixels, I had to decide what kind of bank this was going to feel like. I framed it as three competing brand territories and pulled references for each.

Trustworthy. Clarity and whitespace, because clutter reads as anxiety when it's your money on screen. Predictable navigation, so nobody hunts for the transfer button. Crisp, legible typography with tabular figures so digits align cleanly down a list of transactions.

Clear. Restraint. Calm. The information architecture doing the work so the interface doesn't have to shout.

Playful. Rounded geometry for friendliness. Delightful micro-interactions as small rewards. Conversational copy ("looks like you need a bit more in your account to do this" instead of "insufficient funds"). Vibrant accent colour for categories and savings goals.

The naive move is to split the difference and land in the middle, which produces a bank that's mildly friendly and mildly serious and memorable as neither. I didn't do that. I made a hierarchy.

Avant le moindre pixel, je devais décider quel genre de banque cela allait être. J'ai posé trois territoires de marque concurrents et rassemblé des références pour chacun.

Confiance. Clarté et espace, car l'encombrement se lit comme de l'anxiété quand il s'agit de votre argent à l'écran. Navigation prévisible, pour que personne ne cherche le bouton de virement. Typographie nette et lisible avec des chiffres tabulaires, pour que les montants s'alignent proprement dans une liste de transactions.

Clarté. Retenue. Calme. L'architecture de l'information fait le travail, pour que l'interface n'ait pas à crier.

Caractère ludique. Géométrie arrondie pour la convivialité. Micro-interactions agréables comme petites récompenses. Ton conversationnel (« il vous manque un peu sur votre compte pour faire cela » plutôt que « fonds insuffisants »). Couleur d'accent vive pour les catégories et les objectifs d'épargne.

Le réflexe naïf est de couper la poire en deux et d'atterrir au milieu, ce qui produit une banque vaguement sympathique et vaguement sérieuse, mémorable pour ni l'un ni l'autre. Je n'ai pas fait cela. J'ai créé une hiérarchie.

Three brand-territory moodboards, Trustworthy, Clear, and Playful, with annotated references Trois moodboards de territoires de marque, Confiance, Clarté et Ludique, avec références annotées

The diagnosis Le diagnostic

The decision that drives the whole project: trust is the substrate, play is the accent, and the accent never undermines the substrate.

Trustworthy isn't one of three options I balanced. It's the foundation everything sits on. Clarity, whitespace, predictable navigation, tabular figures, those are non-negotiable, because they're what makes an app feel safe to hold money. Playful is a controlled layer applied on top: rounded geometry, a warm accent, human copy. Never the structure, always the surface. As my own colour note put it, the palette needed a playful touch "without being too overwhelming or screamy for a banking app." That line is the whole philosophy. I knew exactly where the edge was, and I designed up to it without crossing it.

Then I built the brand that encodes that decision.

The name. Nexabank. I needed a name that sounded modern and connective without sounding like a fintech parody. "Nexa" suggests next, nexus, connection; "bank" keeps it grounded and legible. Trust as the noun, modernity as the modifier, the brand decision in the name itself.

The logomark. I designed the mark from scratch: a bold geometric "N" with a long-shadow treatment that gives it depth and a touch of motion, friendly without being frivolous. It works as a wordmark lockup, as a standalone monogram, and as an app icon across multiple background treatments and sizes, the responsive identity worked out before the product, not after.

The systems that carry it. A type scale built on a golden-ratio progression for the desktop hierarchy and a minor-third scale for mobile, paired (FF Tisa Sans Pro and Proxima Nova) for legibility and tabular alignment. A structured colour system with the vibrant accent deliberately confined to categories, savings, and primary actions, never the chrome. A duotone icon set with thick rounded outlines, in my note, "playful but balanced with the trust a bank must convey."

La décision qui guide tout le projet : la confiance est le socle, le ludique est l'accent, et l'accent ne sape jamais le socle.

La confiance n'est pas l'une des trois options que j'ai équilibrées. C'est la fondation sur laquelle tout repose. Clarté, espace, navigation prévisible, chiffres tabulaires : non négociables, car c'est ce qui rend une application sûre pour confier de l'argent. Le ludique est une couche contrôlée appliquée par-dessus : géométrie arrondie, accent chaleureux, ton humain. Jamais la structure, toujours la surface. Comme le disait ma propre note sur la couleur, la palette avait besoin d'une touche ludique « sans être trop envahissante ni criarde pour une application bancaire ». Cette phrase, c'est toute la philosophie. Je savais exactement où était la limite, et j'ai conçu jusqu'à elle sans la franchir.

Puis j'ai construit la marque qui encode cette décision.

Le nom. Nexabank. Il me fallait un nom qui sonne moderne et connecté sans sonner comme une parodie de fintech. « Nexa » évoque next, nexus, connexion ; « bank » le garde ancré et lisible. La confiance comme nom, la modernité comme qualificatif : la décision de marque dans le nom lui-même.

Le logo. J'ai dessiné le logo de zéro : un « N » géométrique et affirmé avec un traitement en ombre portée qui lui donne profondeur et une touche de mouvement, amical sans être frivole. Il fonctionne en lockup avec le nom, en monogramme autonome, et en icône d'application sur plusieurs fonds et tailles : l'identité responsive résolue avant le produit, pas après.

Les systèmes qui le portent. Une échelle typographique sur progression en nombre d'or pour la hiérarchie desktop et une tierce mineure pour le mobile, en paire (FF Tisa Sans Pro et Proxima Nova) pour la lisibilité et l'alignement tabulaire. Un système de couleur structuré, l'accent vif délibérément confiné aux catégories, à l'épargne et aux actions principales, jamais au chrome. Un jeu d'icônes duotone aux contours épais et arrondis, selon ma note, « ludique mais équilibré avec la confiance qu'une banque doit transmettre ».

STAGEÉTAPE 01

A logomark that scales before the product does Un logo qui passe à l'échelle avant le produit

The problemLe problème

A brand mark that looks good once, on a title slide, is useless. It has to survive being a favicon, an app icon, a monogram, and a full lockup, all without losing its identity. Un logo qui rend bien une fois, sur une slide de titre, ne sert à rien. Il doit survivre en favicon, en icône d'app, en monogramme et en lockup complet, sans perdre son identité.

The methodLa méthode

I designed the Nexabank N as a geometric mark with a long-shadow treatment, then worked out every variant up front, wordmark lockup, standalone monogram, and app-icon versions across multiple background treatments and sizes. The mark was proven responsive before a single product screen existed. J'ai dessiné le N de Nexabank comme une marque géométrique avec ombre portée, puis j'ai résolu chaque variante en amont, lockup avec nom, monogramme autonome, et versions icône d'app sur plusieurs fonds et tailles. La marque a été éprouvée responsive avant le moindre écran produit.

I ownJe maîtrise

The name, the mark, and every variant. The decision to treat the identity as a responsive system from the start rather than a logo I'd resize later and hope for the best. Le nom, la marque et chaque variante. Le choix de traiter l'identité comme un système responsive dès le départ, plutôt qu'un logo redimensionné après coup en espérant que ça tienne.

The resultLe résultat

A brand mark that holds its character from a 16px favicon to a full-screen splash, the foundation the product could be built on without the brand fraying at the edges. Une marque qui garde son caractère d'un favicon de 16px à un écran de démarrage plein écran, la fondation sur laquelle bâtir le produit sans que la marque s'effiloche.

Nexabank logomark in wordmark, monogram, and app-icon variants across sizes and backgrounds Logo Nexabank en versions wordmark, monogramme et icône d'app, à plusieurs tailles et sur plusieurs fonds

STAGEÉTAPE 02

A type and colour system that encodes the decision Un système typographique et chromatique qui encode la décision

The problemLe problème

A brand philosophy is just a sentence until the system enforces it. Trust-as-substrate, play-as-accent has to be true in the type scale and the colour rules, not just the moodboard. Une philosophie de marque n'est qu'une phrase tant que le système ne l'impose pas. Confiance-socle, ludique-accent doit être vrai dans l'échelle typographique et les règles de couleur, pas seulement sur le moodboard.

The methodLa méthode

I built a type scale on a golden-ratio progression for desktop and a minor-third for mobile, paired for legibility and tabular figures so balances align. The colour system keeps a calm neutral base and confines the vibrant accent to categories, savings goals, and primary actions, the playful layer, applied with discipline, never to the navigation or structure. J'ai bâti une échelle typographique en nombre d'or pour le desktop et en tierce mineure pour le mobile, appariée pour la lisibilité et les chiffres tabulaires afin que les soldes s'alignent. Le système de couleur garde une base neutre calme et confine l'accent vif aux catégories, aux objectifs d'épargne et aux actions principales, la couche ludique, appliquée avec discipline, jamais à la navigation ni à la structure.

I ownJe maîtrise

Every scale value, the pairing logic, and the rule that the accent earns its place only where delight is appropriate and never where it would undercut trust. Chaque valeur d'échelle, la logique d'appariement, et la règle que l'accent ne gagne sa place que là où le plaisir est approprié, et jamais là où il saperait la confiance.

The resultLe résultat

A system where the brand decision is structurally true. You couldn't misuse it into feeling toy-like without breaking the rules on purpose. Un système où la décision de marque est structurellement vraie. Impossible d'en faire un usage qui paraisse jouet sans enfreindre les règles volontairement.

Type scale and colour system showing accent colour confined to categories and actions Échelle typographique et système de couleur montrant l'accent confiné aux catégories et aux actions

STAGEÉTAPE 03

A product that wears the brand at every size Un produit qui porte la marque à chaque taille

The problemLe problème

A design system is only proven when it survives real screens at real breakpoints. The product had to feel like Nexabank on a wide desktop, a tablet, and a phone, with the layout decisions changing intelligently, not just reflowing. Un design system n'est prouvé que lorsqu'il survit à de vrais écrans à de vrais points de rupture. Le produit devait ressembler à Nexabank sur un large desktop, une tablette et un téléphone, avec des décisions de mise en page qui changent intelligemment, pas un simple reflow.

The methodLa méthode

I designed the full product, overview, accounts, transactions, spending, across desktop, tablet, and mobile. The decisions adapt per breakpoint: the transaction table becomes a card list on mobile, the side navigation collapses into a drawer, the data-dense dashboard restacks without losing hierarchy. The card components, charts, and the account-detail patterns stay consistent throughout. J'ai conçu le produit complet, aperçu, comptes, transactions, dépenses, sur desktop, tablette et mobile. Les décisions s'adaptent par point de rupture : le tableau de transactions devient une liste de cartes sur mobile, la navigation latérale se replie en tiroir, le tableau de bord dense se réempile sans perdre sa hiérarchie. Les composants cartes, les graphiques et les motifs de détail de compte restent cohérents partout.

I ownJe maîtrise

Every layout decision and the call on what each breakpoint shows first versus reveals on demand. The component family that keeps the product coherent across all three. Chaque décision de mise en page et le choix de ce que chaque point de rupture montre d'abord par rapport à ce qu'il révèle à la demande. La famille de composants qui garde le produit cohérent sur les trois.

The resultLe résultat

A product that reads as one brand and one system from the widest desktop to the narrowest phone, the design system proven by the screens, not just documented beside them. Un produit qui se lit comme une seule marque et un seul système, du plus large desktop au plus étroit téléphone, le design system prouvé par les écrans, pas seulement documenté à côté.

Nexabank product UI across desktop, tablet, and mobile breakpoints Interface produit Nexabank sur les points de rupture desktop, tablette et mobile

When the research changed everything Quand la recherche a tout changé

Nexabank (UX Design Institute brief) · 2023

The thing I'm proudest of in Nexabank isn't any single screen. It's that one decision, made before I drew anything, is visible in all of them.

Trust is the substrate, play is the accent. I made that call at the moodboard stage, and then I held it, through the name, the logomark, the type scale, the colour rules, and every screen at every breakpoint. That's the part most portfolios can't show. It's easy to make one beautiful screen. It's hard to make a hundred decisions that all point the same direction, so the product feels like one thing instead of a pile of nice components.

You can trace the decision end to end. The logomark is geometric and bold (trust) with a long shadow that gives it warmth and motion (the accent). The type is crisp and tabular (trust) on a calm neutral base, with the vibrant colour released only into categories and savings goals (the accent). The transaction list is dense, aligned, and scannable (trust); the savings-goal rings and the spending donut are where the colour and delight live (the accent). The error copy is human; the navigation is utterly predictable. Every one of those is the same decision, applied again.

That's what "complete" means to me, and why I built this project. Not brand visuals in one file and UI in another, but a single chain of reasoning that runs from the company's name to the alignment of a number in a transaction row. A bank that feels human, because the accent is everywhere you'd want delight, and serious, because the accent never once touches the things you need to trust.

Ce dont je suis le plus fier dans Nexabank, ce n'est aucun écran en particulier. C'est qu'une seule décision, prise avant de dessiner quoi que ce soit, est visible dans tous.

La confiance est le socle, le ludique est l'accent. J'ai pris cette décision au stade du moodboard, puis je l'ai tenue, à travers le nom, le logo, l'échelle typographique, les règles de couleur et chaque écran à chaque point de rupture. C'est ce que la plupart des portfolios ne peuvent pas montrer. Il est facile de faire un bel écran. Il est difficile de prendre cent décisions qui pointent toutes dans la même direction, pour que le produit ressemble à une seule chose plutôt qu'à un tas de jolis composants.

On peut suivre la décision de bout en bout. Le logo est géométrique et affirmé (confiance) avec une ombre portée qui lui donne chaleur et mouvement (l'accent). La typo est nette et tabulaire (confiance) sur une base neutre calme, la couleur vive libérée seulement dans les catégories et les objectifs d'épargne (l'accent). La liste de transactions est dense, alignée et lisible (confiance) ; les anneaux d'objectif d'épargne et le donut de dépenses sont là où vivent la couleur et le plaisir (l'accent). Le texte d'erreur est humain ; la navigation parfaitement prévisible. Chacun d'eux, c'est la même décision, appliquée de nouveau.

C'est ce que « complet » veut dire pour moi, et pourquoi j'ai construit ce projet. Pas l'identité visuelle dans un fichier et l'interface dans un autre, mais une seule chaîne de raisonnement qui va du nom de l'entreprise à l'alignement d'un chiffre dans une ligne de transaction. Une banque qui paraît humaine, parce que l'accent est partout où l'on veut du plaisir, et sérieuse, parce que l'accent ne touche jamais ce qu'on a besoin de pouvoir croire.

The logomark and identity showing the trust-plus-accent decision at the brand level Le logo et l'identité montrant la décision confiance-plus-accent au niveau de la marque

Product screens showing the accent confined to categories and savings while the structure stays calm Écrans produit montrant l'accent confiné aux catégories et à l'épargne tandis que la structure reste calme

What it delivered Ce que ça a livré

A brand built from nothing Une marque construite à partir de rien

The name Nexabank, the logomark, and a responsive identity system, designed from scratch, not styled onto a brand someone else made. The part of the work most UI portfolios never show. Le nom Nexabank, le logo et un système d'identité responsive, conçus de zéro, pas appliqués sur une marque créée par quelqu'un d'autre. La partie du travail que la plupart des portfolios UI ne montrent jamais.

A decision you can trace everywhere Une décision traçable partout

Trust as substrate, play as accent, made once at the moodboard stage and held through every screen and breakpoint. Coherence by decision, not by accident. La confiance comme socle, le ludique comme accent, décidé une fois au stade du moodboard et tenu sur chaque écran et chaque format. La cohérence par décision, pas par hasard.

A system that enforces the brand Un système qui impose la marque

A golden-ratio type scale, tabular figures for aligned balances, and an accent colour disciplined to categories and actions. The philosophy made structurally true, not just stated. Une échelle typographique en nombre d'or, des chiffres tabulaires pour aligner les soldes, et une couleur d'accent disciplinée aux catégories et aux actions. La philosophie rendue structurellement vraie, pas seulement énoncée.

Complete, brand to breakpoint Complet, de la marque au point de rupture

One coherent project from the company's name to the narrowest mobile screen. Brand visuals and product UI as a single piece, the way it works when you actually launch. Un projet cohérent du nom de l'entreprise au plus étroit écran mobile. Identité visuelle et interface produit en une seule pièce, comme cela fonctionne quand on lance vraiment.

Final Nexabank overview screen across breakpoints Écran d'aperçu Nexabank final sur les points de rupture

The Nexabank card component family and design-system foundations La famille de composants cartes Nexabank et les fondations du design system

This was a UI Design certificate brief, and I'm clear about that. But naming a company, designing its mark, building its system, and shipping a coherent responsive product on top is exactly the brand-to-product chain I'd run for a real launch, and most candidates can only show one end of it. If you're building something that needs the brand and the interface to feel like one decision rather than two teams, that's the work I do. C'était un brief de certificat en UI Design, et je l'assume. Mais nommer une entreprise, dessiner sa marque, bâtir son système et livrer un produit responsive cohérent par-dessus, c'est exactement la chaîne marque-vers-produit que je mènerais pour un vrai lancement, et la plupart des candidats n'en montrent qu'un bout. Si vous construisez quelque chose qui exige que la marque et l'interface ressemblent à une seule décision plutôt qu'à deux équipes, c'est le travail que je fais.

Get in touchPrendre contact ← Back to work← Retour au travail