Luis Octavio
CV ↓
Turning a Rebrand Into a Product System

Fintech · DINN (Actinver) · H2 2022

Turning a Rebrand Into a Product System

The brand had changed. The app hadn't. Two audits confirmed it — users were putting their money into a product that didn't look trustworthy. I rebuilt the entire visual system. Tested it with 50 users before a single screen shipped.

100%Perceived increased security50 users tested
90%Associated with calmness and stability
85%Perceived improved simplicity
80%Felt increased trust and transparency
01

Impact

A product that felt inconsistent and a little playful became one that actually felt like a place to put your money.

100%
Perceived increased security
Validated across 50 user tests
90%
Associated with calmness & stability
Perception shifted: playful → trustworthy
85%
Perceived improved simplicity
Reduced cognitive load, new and existing users
80%
Felt increased trust & transparency
The most critical metric in a financial product
Side-by-side — misma pantalla clave, sistema anterior vs. nuevo
RPS-IMP-01b
02

Context

Company: DINN — Actinver's digital investment app for first-time investors in Mexico

My role: I ran the audits, defined the new visual system, and coordinated implementation across the entire app and website. I was also responsible for building the governance documentation the team would use long after this project ended.

Team: UX/UI designers, illustrators, communication team, external audit vendor, product stakeholders

Timeline: H2 2022 — DINN had completed a brand redesign. The product experience hadn't been rebuilt to reflect it. This was the project that changed that.

Screenshots del estado anterior de la app — el "before" que justifica el proyecto
03

The Problem

The product had grown fast: more clients, more screens, a bigger team. That growth made visual consistency harder to maintain, and it showed. In a financial product, inconsistency isn't just a visual problem. It feels unsafe.

A qualitative study — 20 in-depth interviews — revealed that DINN was broadly seen as "inversión para lo diario / chiquita" — a small, everyday investment tool — regardless of how financially sophisticated users actually were. Even experienced investors used it as a side account. The approachability was working, but it was setting a ceiling.

The product as it was
"Bright colors, decorative illustrations, low visual hierarchy — playful and approachable."
Approachability was working — first-timers felt welcome
But it was setting a ceiling on how seriously users took the product
Experienced investors were using it as a side account, not a main platform
The design challenge
"Maturity without rigidity. Clear without being overwhelming."
Accessible enough for first-timers who've never invested
Substantial enough for users to grow into a main platform
Trustworthy enough that users feel safe putting their money in
Collage del estado anterior — inconsistencia visual (ilustraciones, colores, jerarquía)
RPS-PRB-01c
RPS-PRB-01e
RPS-PRB-01g
RPS-PRB-01b
RPS-PRB-01d
RPS-PRB-01f
RPS-PRB-01h
04

Diagnosis

I ran two visual audits simultaneously. I didn't want the findings to just be my own perspective — and I didn't want them to be only an outside one either.

01
Internal Audit
Designed and run in-house
Mapped every UI pattern across the app — color usage, typography hierarchy, illustration style, spacing, component behavior.
Documented every point where brand guidelines were being ignored, stretched, or misapplied.
02
External Audit
Independent vendor
Brought in outside perspective to validate findings and catch structural gaps that internal familiarity had stopped us from seeing.
Both audits reached the same conclusion: the visual system was actively working against trust perception.
Audit findings — inconsistencias documentadas del sistema visual anterior
RPS-DGN-01b
RPS-DGN-01d
RPS-DGN-01f
RPS-DGN-01c
RPS-DGN-01e
05

What I Built

I designed the system with one goal: it had to work for any designer, on any screen, at any point in the future.

01
Color governance
Not just which colors to use — how much of each and when. That one change alone fixed most of the visual noise.
02
Typography hierarchy
Clearer type scale, tighter rules for headings, body, and supporting text. Every screen needed to communicate priority clearly.
03
Illustration direction
Calmer, more grounded compositions. Less decoration that adds visual weight without adding meaning.
04
Spacing and layout
Consistent grids and spacing logic. The visual rhythm users feel but don't consciously notice.
05
Tone by context
Rules for how the visual tone shifts across moments: onboarding, portfolio view, alerts, educational content.
System documentation — paleta con proporciones, escala tipográfica, ilustración antes/después
RPS-SYS-01b
RPS-SYS-01d
RPS-SYS-01f
RPS-SYS-01c
RPS-SYS-01e
RPS-SYS-01g
06

Validation

Before rolling anything out, I tested the new system with 50 users. In a financial product, you don't ship on instinct. You test first.

01
Participants
50
25 existing DINN clients
25 new users — no prior exposure to the product
02
Method
Comparative testing
Old visual system shown against the new one — same screens, same context, different system.
03
Result
Every key trust metric moved in the right direction
Consistently across both user groups — before a single screen shipped to production.
Pantallas nuevas del app — el sistema implementado en contexto real (post-validación)
07

Execution

I led the implementation across the full product — every screen in the app and the DINN website.

That meant coordinating illustrators, UX/UI designers, and the communication team under one direction, making sure the system was applied consistently, not just understood in theory.

I built the documentation as a working reference for the team — with clear rules, rationale, and examples for every decision. It's still being used today.

Spread del manual de gobernanza + implementación en app completa
RPS-EXE-01c
RPS-EXE-01b
RPS-EXE-01d
08

Key Deliverables

Visual Audit Reports
Internal + External
Evidence-based diagnosis of perception and consistency gaps — not just one perspective.
Product Visual System
Color · Type · Spacing · Illustration · Imagery
The full ruleset for how the product looks, feels, and shifts tone across contexts.
Brand Governance Documentation
Still in use today
Scalable reference built for the team — with rationale, not just rules.
Full App & Website Implementation
Every screen, every touchpoint
Cohesive product experience aligned with brand maturity. Coordinated across designers, illustrators, and communications.
09

Outcome

The documentation is what I'm most proud of from this project. Not because it's documentation — but because it's still being used. It gave the team a real system to build on, not a snapshot that slowly gets ignored.

For a fintech app handling people's savings, looking trustworthy isn't a bonus. That's the whole product.

Collage "after" — pantallas representativas del sistema implementado
RPS-OUT-01c
RPS-OUT-01e
RPS-OUT-01g
Play ▶
RPS-OUT-01b
RPS-OUT-01d
RPS-OUT-01f
Play ▶
Play ▶
10

Reflection

In fintech, how things look directly affects how safe people feel. Users don't process trust rationally — they feel it. Color proportions, spacing, illustration tone aren't aesthetic preferences. They're the product.

A rebrand without a product system doesn't really work. You can update the logo and the guidelines, but if the product doesn't reflect the new brand, nothing actually changes. The real work is translating brand intent into component-level decisions that hold across designers and time.

When the stakes are financial, you don't ship on instinct. You test first. Testing with both existing and new users gave us real confidence that the changes worked — before any development started.