Giới thiệu về MB Energy

MB Energy là một mini app được tích hợp trong hệ sinh thái MBBank, giúp người dùng khám phá các thông tin về thần số học, chiêm tinh, tử vi cá nhân và ngày tốt nhằm hỗ trợ ra quyết định trong đời sống hằng ngày. Ứng dụng cung cấp các gợi ý trực quan về mức độ thuận lợi của ngày, việc nên làm, khung giờ tốt và yếu tố năng lượng cá nhân, được trình bày dưới dạng thẻ nội dung dễ tiếp cận.

Thiết kế tập trung vào trải nghiệm cá nhân hóa, kết hợp phong cách thị giác mang hơi hướng vũ trụ – năng lượng, cùng hệ thống màu sắc và typography giúp tạo cảm giác huyền bí nhưng vẫn hiện đại, phù hợp với ngữ cảnh một sản phẩm tài chính – tiện ích trong ứng dụng ngân hàng.

Mục tiêu dự án

• Mục tiêu của dự án MB Energy là xây dựng một mini app mang tính cá nhân hóa cao, kết hợp giữa các nội dung huyền học (thần số học, chiêm tinh, tử vi, ngày tốt – việc nên làm) với hệ sinh thái sản phẩm ngân hàng của MBBank, nhằm:
• Cung cấp cho người dùng những gợi ý mang tính cảm xúc và định hướng hành vi, giúp họ cảm thấy được thấu hiểu và đồng hành trong các quyết định hằng ngày.
• Tận dụng ngữ cảnh “thời điểm – năng lượng – nhu cầu cá nhân” để đề xuất các sản phẩm tài chính phù hợp như thẻ, tiết kiệm, ưu đãi hoặc chương trình khuyến mại, theo cách tự nhiên và không gây gián đoạn trải nghiệm.
• Gia tăng mức độ tương tác, tần suất sử dụng và thời gian ở lại của người dùng trong ứng dụng MBBank thông qua một trải nghiệm mới mẻ, khác biệt so với các tính năng ngân hàng truyền thống.
• Định vị MB Energy như một lớp trải nghiệm cảm xúc (emotional layer) bổ trợ cho các dịch vụ tài chính, góp phần nâng cao giá trị thương hiệu và sự gắn kết với người dùng.

Phạm vi công việc

Trong dự án này, Đỗ Minh Tâm chịu trách nhiệm toàn bộ mảng thiết kế sản phẩm, bao gồm:

Concept & Visual Direction

• Xây dựng concept tổng thể cho MB Energy, định hình phong cách thị giác mang cảm hứng từ vũ trụ – năng lượng – huyền học, đồng thời vẫn đảm bảo tính tin cậy và phù hợp với bối cảnh ứng dụng ngân hàng.

Layout & UI Design

• Thiết kế toàn bộ layout và giao diện người dùng cho các màn hình chính của mini app, đảm bảo tính nhất quán, dễ sử dụng và tối ưu trải nghiệm đọc – tương tác nội dung.

• Motion & Micro-interaction Design
  Thiết kế animation và các hiệu ứng chuyển động nhẹ nhằm tăng cảm giác “dòng chảy năng lượng”, hỗ trợ dẫn dắt người dùng mà không gây nhiễu.

Design System

• Xây dựng hệ thống design system riêng cho MB Energy (màu sắc, typography, iconography, component, spacing…), đồng bộ với hệ sinh thái MBBank và dễ dàng mở rộng trong tương lai.

Design Hand-off

• Chuẩn bị file thiết kế, component, guideline và trạng thái UI chi tiết để bàn giao cho đội ngũ phát triển, đảm bảo quá trình triển khai diễn ra mượt mà và chính xác với ý đồ thiết kế.

Design

Onboarding flow

Để sử dụng mini app MB Energy, người dùng cần confirm các thông tin cơ bản bao gồm: Họ tên, giới tính và ngày tháng năm sinh.
Các thông tin này được sync từ hệ thống của MBBank qua Mini App.

Người dùng có thể update giới tính hoặc ngày tháng năm sinh.

Mini-app Homescreen

Tại màn hình homescreen của ứng dụng, người dùng có thể nắm bắt nhanh các thông tin về chỉ số ngày tốt của hôm nay.

Ngoài ra, thông tin về ngày cá nhân và các việc cần chú ý trong ngày cũng được hiển thị kèm theo.

Với các thông tin về ngày cá nhân, MB Energy như một lớp trải nghiệm cảm xúc (emotional layer) bổ trợ cho các dịch vụ tài chính, góp phần nâng cao giá trị thương hiệu và sự gắn kết với người dùng.

Thần số học

Module Thần số học trong MB Energy được thiết kế nhằm giúp người dùng hiểu rõ bản thân thông qua các con số cá nhân, từ đó có thêm góc nhìn để định hướng hành vi, cảm xúc và các quyết định trong từng giai đoạn cuộc sống. Thay vì chỉ hiển thị thông tin mang tính diễn giải, module tập trung vào việc trực quan hóa dữ liệu huyền học bằng các layout dễ đọc, phân tầng thông tin rõ ràng và hệ thống biểu đồ – thẻ nội dung sinh động.

Người dùng có thể khám phá nhiều khía cạnh khác nhau như con số định mệnh, ngày cá nhân, biểu đồ ngày sinh, mũi tên hoạt động, các thử thách và đỉnh cao cuộc đời, mỗi phần được trình bày theo hướng “khám phá dần”, giúp tránh quá tải thông tin nhưng vẫn giữ được chiều sâu nội dung. Thiết kế ưu tiên trải nghiệm cá nhân hóa, tạo cảm giác được dẫn dắt, đồng thời mở ra ngữ cảnh phù hợp để tích hợp các đề xuất sản phẩm và ưu đãi ngân hàng một cách tự nhiên.

Việc lớn cần xem

Tính năng Xem ngày tốt trong 7 ngày tới giúp người dùng chủ động lựa chọn thời điểm phù hợp cho những việc quan trọng như mua nhà, khai trương, mua xe hay nhập học. Dựa trên thông tin cá nhân và các yếu tố tử vi – năng lượng theo ngày, ứng dụng đưa ra gợi ý trực quan về mức độ thuận lợi, khung giờ tốt và những việc nên hoặc cần tránh, giúp người dùng cảm thấy an tâm hơn khi đưa ra quyết định cho các cột mốc quan trọng trong cuộc sống. “Có thờ có thiêng, có kiêng có lành.”

Chiêm tinh học

Tính năng Chiêm tinh học giúp người dùng khám phá những ảnh hưởng của các yếu tố vũ trụ lên cảm xúc, hành vi và các mối quan hệ trong từng thời điểm. Thông qua việc phân tích cung hoàng đạo, vận trình theo ngày và các chủ đề nổi bật như tình cảm, công việc hay tài chính, ứng dụng mang đến những gợi ý mang tính định hướng, giúp người dùng hiểu rõ bối cảnh năng lượng xung quanh mình.

Thiết kế trải nghiệm tập trung vào việc đơn giản hóa các khái niệm chiêm tinh phức tạp, trình bày nội dung theo từng lớp thông tin dễ tiếp cận, kết hợp hình ảnh và chuyển động nhẹ để tạo cảm giác khám phá liên tục. Qua đó, chiêm tinh học trở thành một công cụ hỗ trợ người dùng quan sát bản thân và đưa ra quyết định một cách chủ động, thay vì chỉ là nội dung mang tính tham khảo.

Màu sắc tương hợp, Trang sức hợp mệnh

Profile

Design Hand-off

Design Hand-off của ứng dụng MB-Energy được chia thành 2 phần.

1. Hand-off các thiết kế tĩnh bao gồm: Layout, Font & Color style. Bộ components, icons và variables.
2. Hand-off interactive design bao gồm: Animation, các hiệu ứng loading, chuyển động thẻ và các thành phần tương tác trong giao diện như "Chỉ số ngày tốt hôm nay", hiệu ứng cung hoàng đạo, onboarding interaction... Animation trên MB-Energy được thực hiện trên Adobe After Effect và toàn bộ chuyển động được hand-off cho developers thông qua đặc tả chuyển động và file Json.

Tổng thể cấu trúc của phần hand-off design tĩnh.

Hand off Animation & Interaction

Các chuyển động sau khi export từ Adobe After Effect được nhúng ngược lại Figma và đưa vào đặc tả thiết kế để giúp developers & QA có thể hình dung rõ ràng trigger, timeline và đặc tính loop của chuyển động.

Các chuyển động được lưu trữ trên Google Drive và bàn giao cho developers

Bạn có thể truy cập ứng dụng MBBank để tìm hiểu thêm về MB Energy.