Tái định nghĩa trải nghiệm ngân hàng số cho ứng dụng LPBank Mobile
- Khách hàng
LPBank
- Dịch vụ
Discover Information architect Concept design UI design Design system
- Thời gian
Mobile app6/2024 - 8/2024 Web app8/2024 - 9/2024
Với hành trình phát triển bền vững, LPBank đã khẳng định vị thế là một trong những ngân hàng thương mại cổ phần hàng đầu tại Việt Nam.
Định hướng phát triển
Ngân hàng số
cho mọi nhà
Chuyển đổi số được coi là nhiệm vụ trọng tâm với định hướng phát triển thần tốc, số hóa sản phẩm dịch vụ và nâng cao trải nghiệm khách hàng trong hành trình trải nghiệm số
Chuyển tiền miễn phí,
kinh doanh như ý
Chuyển tiền liên ngân hàng thuận lợi
Chuyển tiền miễn phí,
kinh doanh như ý
Chuyển tiền liên ngân hàng thuận lợi
Chuyển tiền miễn phí,
kinh doanh như ý
Chuyển tiền liên ngân hàng thuận lợi
Chuyển tiền miễn phí,
kinh doanh như ý
Chuyển tiền liên ngân hàng thuận lợi
Tầm nhìn về
sản phẩm
của Beau Agency
Vượt ra khỏi một ứng dụng tài chính thông thường, cân bằng lợi ích của các bên stakeholder
Thể hiện một diện mạo mới của LPBank
Tối ưu trải nghiệm các chức năng hiện hữu
Tiếp tục số hóa các sản phẩm dịch vụ khác để đáp ứng nhu cầu đa dạng
Ra mắt ứng dụng trong thời gian sớm nhất
Trở thành hệ sinh thái sản phẩm với hệ thống sản phẩm dịch vụ đa dạng vượt ngoài ứng dụng tài chính
Một sản phẩm có tính tùy biến mạnh mẽ và cá nhân hóa theo nhu cầu sử dụng của người dùng
Một sản phẩm hỗ trợ tài chính cá nhân, gia đình & hội nhóm
Giải pháp dành cho
LPBank
Giải pháp
dành cho LPBank
Đối với người dùng
Lấy người dùng làm
trọng tâm
Đơn giản hóa
thao tác người dùng
Với mỗi tác vụ như hiện tại, người dùng gặp phải một vấn đề là hệ thống đang đưa ra quá nhiều lựa chọn đầu vào để người dùng quyết định, điều đó làm giảm hiệu năng của người dùng.
Vì thế các thao tác và các trường thông tin của hệ thống được tối giản hóa để giúp người dùng thao tác nhanh chóng và thuận tiện hơn
Giúp người dùng
theo dõi chi tiêu
trực quan
Đây là bước đầu tiên trong tầm nhìn hiện thực hóa việc biến LPBank trở thành một ứng dụng quản lý tài chính cá nhân thực thụ bằng cách giúp người dùng có thể theo dõi tổng quan về chi tiêu của mình trong kỳ vừa rồi, từ đó nâng cao khả năng cân đối chi tiêu một cách phù hợp hơn
Đơn giản hóa
thao tác người dùng
Với mỗi tác vụ như hiện tại, người dùng gặp phải một vấn đề là hệ thống đang đưa ra quá nhiều lựa chọn đầu vào để người dùng quyết định, điều đó làm giảm hiệu năng của người dùng.
Vì thế các thao tác và các trường thông tin của hệ thống được tối giản hóa để giúp người dùng thao tác nhanh chóng và thuận tiện hơn
Giúp người dùng theo dõi
chi tiêu trực quan
Đây là bước đầu tiên trong tầm nhìn hiện thực hóa việc biến LPBank trở thành một ứng dụng quản lý tài chính cá nhân thực thụ bằng cách giúp người dùng có thể theo dõi tổng quan về chi tiêu của mình trong kỳ vừa rồi, từ đó nâng cao khả năng cân đối chi tiêu một cách phù hợp hơn
Tái cấu trúc lại hệ thống
thông tin
Tái cấu trúc lại
hệ thống thông tin
Với hệ thống kết cấu thông tin ban đầu đang gây ra khó khăn cho người dùng vì độ phức tạp quá lớn, quá nhiều lựa chọn cũng như các nhóm thông tin đang có sự bất hợp lý trong sắp xếp.
Beau và LPBank đã đưa ra quyết định cho một kết cấu thông tin mới đơn giản và hiệu quả hơn, giúp người dùng có thể dễ dàng điều hướng mà không phải suy nghĩ và lựa chọn quá nhiều, tăng tối đa sự tự động hóa trong quá trình sử dụng
Đối với thương hiệu
Tổng hòa giữa tính hiện đại và
tính bản sắc của LPBank
Tổng hòa giữa
tính hiện đại và tính bản sắc của LPBank
Màu sắc văn hóa
ngũ hành
Các màu sắc được ứng dụng trong thiết kế lấy màu chủ đạo của thương hiệu LPBank là vàng và nâu, bên cạnh đó thiết kế còn áp dụng thêm các màu sắc nằm trong ngũ hành để tạo nên một sự đa dạng và phong phú trong thiết kế cũng như tạo nên một sự hòa hợp về cảm xúc.
Thổ # 0E93D3
Thổ # 683820
Kim # F99D1B
Kim # F99D1B
Mộc # BDE23A
Mộc # BDE23A
Thủy # 0E93D3
Thủy # 0E93D3
Hỏa # F5272E
Hỏa # F5272E
Thổ # 0E93D3
Thổ # 683820
Kim # F99D1B
Kim # F99D1B
Mộc # BDE23A
Mộc # BDE23A
Thủy # 0E93D3
Thủy # 0E93D3
Hỏa # F5272E
Hỏa # F5272E
Các màu sắc được ứng dụng trong thiết kế lấy màu chủ đạo của thương hiệu LPBank là vàng và nâu, bên cạnh đó thiết kế còn áp dụng thêm các màu sắc nằm trong ngũ hành để tạo nên một sự đa dạng và phong phú trong thiết kế cũng như tạo nên một sự hòa hợp về cảm xúc.
Chất liệu thiết kế tân tiến & độc đáo
LPBank Mobile mang đến một làn gió mới với thiết kế glassmorphism tinh tế. Các lớp giao diện trong suốt, chồng chéo nhau tạo nên hiệu ứng chiều sâu, giúp người dùng cảm nhận được sự nhẹ nhàng, hiện đại.
Hình ảnh và nội dung như được "nổi" lên trên nền, tạo điểm nhấn trực quan, thu hút mọi ánh nhìn. Với thiết kế này, việc tương tác với ứng dụng trở nên thú vị và liền mạch hơn bao giờ hết
Hệ thống icon chức năng được thiết kế riêng
Đối với kinh doanh
Thúc đẩy kinh doanh
Khách hàng là trọng tâm, tuy nhiên việc thúc đẩy kinh doanh cũng là một yếu tố quan trọng không kém - Quyết định đến sự thành bại của doanh nghiệp
Trong quá trình làm việc, Beau và bộ phận nghiệp vụ của LPBank đã kết hợp với nhau một cách chặt chẽ để có thể hiểu được về nhu cầu kinh doanh đối với mỗi phòng ban của LPBank, hiểu và nắm rõ về các sản phẩm dịch vụ mà ngân hàng đang nâng cấp trên nền tảng số, từ đó đưa ra các giải pháp thiết kết phù hợp, hài hòa giữa sự thuận tiện trong sử dụng của khách hàng, gài bán các sản phẩm chiến dịch một cách khéo léo mà không đứt đi mạch sử dụng của người dùng
Trong quá trình làm việc, Beau và bộ phận nghiệp vụ của LPBank đã kết hợp với nhau một cách chặt chẽ để có thể hiểu được về nhu cầu kinh doanh đối với mỗi phòng ban của LPBank, hiểu và nắm rõ về các sản phẩm dịch vụ mà ngân hàng đang nâng cấp trên nền tảng số, từ đó đưa ra các giải pháp thiết kết phù hợp, hài hòa giữa sự thuận tiện trong sử dụng của khách hàng, gài bán các sản phẩm chiến dịch một cách khéo léo mà không đứt đi mạch sử dụng của người dùng
Đối với kinh doanh
Thúc đẩy kinh doanh
Khách hàng là trọng tâm, tuy nhiên việc thúc đẩy kinh doanh cũng là một yếu tố quan trọng không kém - Quyết định đến sự thành bại của doanh nghiệp
Trong quá trình làm việc, Beau và bộ phận nghiệp vụ của LPBank đã kết hợp với nhau một cách chặt chẽ để có thể hiểu được về nhu cầu kinh doanh đối với mỗi phòng ban của LPBank, hiểu và nắm rõ về các sản phẩm dịch vụ mà ngân hàng đang nâng cấp trên nền tảng số, từ đó đưa ra các giải pháp thiết kết phù hợp, hài hòa giữa sự thuận tiện trong sử dụng của khách hàng, gài bán các sản phẩm chiến dịch một cách khéo léo mà không đứt đi mạch sử dụng của người dùng
Gợi ý các sản phẩm phù hợp dựa trên nhu cầu và hành vi người dùng
Khai thác nhu cầu của người dùng để nâng cao hiệu quả hoạt động
Vận hành
Triển khai dự án trong
thời gian thần tốc
Triển khai dự án
trong thời gian
thần tốc
Beau Agency đã phối hợp cùng LPBank để triển khai dự án trong một thời gian ngắn
Thời gian triển khai
3 tháng
Số lượng cây chức năng
12+
Hai phiên bản
Mobile/Web App
Số lượng màn hình bàn giao
1000+
Hệ thống design
guidelines bài bản
Bên cạnh việc thiết kế, Beau còn thiết lập một bộ UI guidline cụ thể nhằm giảm thiểu tối đa việc phát sinh quá nhiều UI element trong thiết kế và nâng cao hiệu suất thiết kế của các designer. Bên cạnh đó nó còn nâng cao hiệu quả khi làm việc cùng developer
Foundation
Atoms Atom là những thành phần cơ bản nhất cấu thành nên một thiết kế, cái mà không thể tách thành những thành phần nhỏ hơn
Foundation
Màu sắc
Icon
Typography
Elevator
Grid
UI Element
Button
Icon
Molecule Trong UI, các Molecule là tập hợp của phần tử UI hoạt động cùng nhau
Molecule: Card
Molecule: Card Label + Button + Icon
Organisms Organisms là một thành phần giao diện tương đối phức tạp bao gồm tập hợp các molecule cùng atoms
Tìm kiếm hóa đơn Molecule: Input + Atom:Label +
Template Template là một đối tượng mà các thành phần bên trong nó được sắp xếp một cách hợp lý để tạo nên một thiết kế có chủ đích
Template: Trang chủ
Digital Experience Design
Tô Quang Huy
Ngô Tiên Tiến
Phạm Hải Linh
Đỗ Hương Giang
Hoàng Lê Phan