Project Links

• 🌐 Live Website: affina.com.vn
• 📘 Brand Guidelines: View full document
• 🎬 Brand Intro Video: Watch here

Before this transformation, Affina was scaling fast —
but brand, website, and product experiences were fragmented.

The core question that shaped this project:

“What should a financial protection platform feel like?”

I led the initiative to realign Affina from brand identity to product interface —
while introducing AI into workflows to accelerate creative and product innovation.

Phase 1 — Brand Rebuild

Affina needed a clearer personality:
modern, trustworthy, minimal — yet human.

🎬 Brand Intro

Full video:
Watch Brand Intro

Storyboard:

The motion language defined tone, rhythm, and emotional direction for the entire ecosystem.

📘 Brand Guidelines System

Full document:
Open Brand Guidelines

I built a structured and scalable guideline system covering:

• Logo protection & usage rules
• Semantic color system
• Typography hierarchy
• Grid & layout framework
• Accessibility-aware combinations
• UI alignment principles

This became the single source of truth across Marketing, Product, and Media teams.

Phase 2 — Scalable Asset Ecosystem

Rebranding required operational scalability — not just aesthetics.

I built a reusable asset system including:

• Key visuals
• Daily social templates
• Paid ads creatives
• Event & partnership materials
• Sales & internal presentation decks

All visuals followed the same tokenized logic — ensuring consistency and faster campaign deployment.

🤖 AI-Integrated Creative Workflow

Beyond visuals, I actively drove AI adoption inside the team.

In Graphic Design

• Accelerated concept exploration
• Rapid style experimentation
• Campaign variation testing
• Reduced manual production loops

In Product & UX

• Layout experimentation
• Flow validation support
• Content structure iteration
• Faster prototype cycles

AI was implemented as a creative multiplier, not a shortcut.

This significantly increased iteration speed while maintaining brand coherence.

Phase 3 — Website Transformation

The old website lacked hierarchy and emotional clarity.

Before vs After

Improvements included:

• Clear storytelling structure
• Strong visual hierarchy
• Improved whitespace rhythm
• Simplified financial messaging
• Better conversion guidance

The objective:
Make financial protection feel simple and trustworthy — not overwhelming.

Phase 4 — Product UI & System Alignment

The new brand had to live inside the product ecosystem.

I collaborated with BA and Product Owner to:

• Redesign core user flows
• Map logic before visual execution
• Reduce friction in key actions
• Align UI patterns with brand system
• Improve cross-device consistency

🧩 Design System & Component Library

Built a scalable system including:

• Tokenized color & spacing variables
• Typography scale
• Button & input states
• Navigation patterns
• Dashboard modules
• Form validation states

This created structural consistency across Affina 2.0, Pro, Dashboard, and Portal.

🚀 Developer Handoff Optimization

To reduce implementation friction:

• Structured user flow documentation
• Edge case mapping
• Clear state definitions
• Standardized naming conventions

This reduced ambiguity and improved cross-team delivery speed.

Impact & Contribution

This transformation was not incremental — it was systemic.

My contributions:

• Led the end-to-end brand and product realignment
• Drove AI integration into creative and product workflows
• Established scalable design foundations across teams
• Reduced cross-functional friction
• Increased asset production efficiency
• Strengthened brand consistency across website, product, and marketing

Affina evolved from fragmented execution
into a cohesive, scalable, AI-accelerated product ecosystem.

Reflection

Affina’s transformation wasn’t just a redesign.

It was a strategic shift —
from isolated outputs to an integrated system
powered by brand clarity and AI-accelerated workflows.