MOB: Design System

When I joined N5 Now, design was basically decentralized chaos. Every team did its own thing. The same component could look and behave differently depending on which module you opened. There was no shared standard, no system, and nobody demanding one.

I had been brought in to do web, graphic, and audiovisual design. But when they proposed I move to the UX area — which didn't exist yet — it seemed like exactly the kind of problem I wanted to tackle.

Campaigns, Portfolios, and FMC before the system. Three modules, three different standards.

I didn't start with a big proposal or a presentation to convince anyone. I started by tidying up what already existed. Together with a frontend developer, we began building the system in parallel — almost in secret. We called it MOB — Methodology to Organise and Build — but between us we called it "the mafia," because that's what it was: something growing from the shadows without anyone officially asking for it.

The foundation was Material Design, adapted on top of MUI. We first developed it in Adobe XD, then migrated to Figma at just the right moment. That migration was key to letting the system grow and be adopted by the design team.

"Our Design System: MOB" — slide from the philosophy presentation to the team.

The hardest part was evangelism. Team leads didn't believe this was necessary — hard to believe but true. I spent months convincing teams, proving value with each new module, while the company's structure kept changing constantly. It was far from linear.

But gradually it took shape. First the components, then the patterns and behaviors, then the documentation inside Figma. Until this year I closed the loop with a philosophy presentation: The 8 Commandments of Product Design at N5. It was no longer just a component system — it was a way of thinking about design that could be shared with product, technology, and business.

Color variables in Figma: the same screen with N5 and Itaú Chile tokens. The system's flexibility, made visible.

MOB is a complete design system for an enterprise financial platform. Components, patterns, interaction principles, documentation. But what matters most to me isn't the inventory — it's the logic behind it.

The central premise: clients can customize the visual identity, but without touching the skeleton that holds the product together. The client's brand is visible. N5's essence is felt.

The 8 commandments define everything from how to use the system to how to make design decisions. They're not just rules — they're a work culture that extends beyond the design team.

Commandment 1. MOB stands for Methodology to Organise and Build. It also stands for something else.

MOB went from an unsolicited initiative to N5 Now's official design standard. Before: 4 teams with their own libraries and criteria, a different product per client. After: a single system adopted by all 3 product teams, with client identity applied on top via tokens — without touching the product.

The most concrete impact: the mobile CRM was designed in 3 days and implemented in 2 weeks. Visual QA was dramatically reduced — components are reused wholesale and sometimes all it takes is "add a primary button here." Client customization went from manual component-by-component work to minutes: tokens are applied to a variable, not in the code.

The same three modules, after the system. Campaigns, Portfolios, and FMC — one unified visual standard.

The system scales to mobile. Client visit logging feature — critical for private banking. FMC — My Client Profile.

The most important shift was how the organization came to see design. From something that "made screens," it became something that built structures. At year-end, the entire team — CEO and department heads included — publicly acknowledged that change. That's not a small thing.

The most concrete proof that the system works: the same screen with different identities. The client's color tokens are applied over MOB's skeleton without touching the product code.

Client color tokens mapped to the system. Customization operates at the variable level, not the component level.