Blog: https://uxvietnam.com We want your application to be as successful and popular as possible so that you’re rewarded for all your hard work. Using our years of design and usability experience, we offer you advice that has been proven to improve the user experience of mobile applications. Some of our recommendations may be related to platform UI style guides, while others may concern mobile heuristics (see more on the next pages). Whatever we suggest, we will always refer to these baselines to help you understand the design ideas. We are happy to clarify any questions you may have about this document − simply contact us by email. If you find our suggestions helpful and would like the new build of your application reviewed, contact us to organize a usability testing session. We look forward to seeing the improvements you’ve made to your app!

1. Application: BankPlus (Viettel)
PHAM NGUYEN KHOI
FPT Software – FSB. Dec - 2014
User Experience Consultation

2. Application Details
• Application:
• Name: BankPlus
• Version: N/A
• Firmware Version: N/A
• Evaluation:
• Method: Heuristic Evaluation on Running Application
• Evaluator: Pham Khoi (Email: khoipn@outlook.com)
• Evaluation Date: Nov – 22 - 2014
2

3. • We want your application to be as successful and popular as possible so
that you’re rewarded for all your hard work. Using our years of design
and usability experience, we offer you advice that has been proven to
improve the user experience of mobile applications.
• Some of our recommendations may be related to platform UI style
guides, while others may concern mobile heuristics (see more on the
next pages). Whatever we suggest, we will always refer to these
baselines to help you understand the design ideas. We are happy to
clarify any questions you may have about this document − simply contact
us by email.
• If you find our suggestions helpful and would like the new build of your
application reviewed, contact us to organize a usability testing session.
We look forward to seeing the improvements you’ve made to your app!
Improving UX
doesn’t have
to be difficult.
Don’t make me
think
About this document
What is this report for?
3

4. Visibility of system
status
User always knows
what is going on
Match between system
and the real world
Application should use
symbols, icons, format
and layout that users
are familiar with
User control and
freedom
Support undo, redo
functions, not punish
users for their mistakes
Consistency and
standards
The functions and UI
controls must behave
as the user experts
them to
Error prevention
By checking and
confirmation before
submit the action
Recognition rather
than recall
Minimize users
memory load. Users
don’t have to
remember other
information
Flexibility and
efficiency of use
Allow users to
personalize the UI and
to use shortcut
Aesthetic and
minimalist design
UI should look and
work beautifully and
the user’s data should
be kept safe and secure
Errors management
Help users to
recognize, diagnose
and recover from error
situations
CRAP Design Principles
Contrast + Repetition +
Alignment + Proximity
UX Heuristics
4

5. Fixing this issue is crucial before release. The
quality of your application’s user experience will
vastly improve and enable a successful launch.
Major UX
improvement
Big UX
improvement
This is a high-priority issue. By fixing this, your
app’s user experience will be significantly
improved.
This issue is low priority. It doesn’t improve
the user experience significantly, but it might add
the final polish to your application.
Minor UX
improvement
Cosmetic UX
improvement
This issue is the lowest priority. If you have higher-
priority fixes, you should concentrate on those.
UX-issue priority scale
What do you gain by fixing these issues?
5

6. This is the frame used to
highlight elements on
screenshots.
This is the standard
callout used to
indicate potential
issues we have
noticed.
This is the
standard
box used to explain
why we believe
this to be a
potential issue.
[Image caption that
describes what the user is doing on the
screen and what is the result.]
•Current application
[Image caption that
describes what the user is doing on the
screen and what is the result.]
Improvement suggestions
This is the callout used for
suggesting fixes.
This is the box for explaining
the suggested fix.
This is the callout for pointing
out good elements.
This is the box used to explain
why these things are good.
This box can be used to
highlight information, or for
when data is not directly
related to a screenshot or
image.
How to read this report
6

7. Interaction Icon Description
Tap • Open items/Select buttons/links
• Insert cursor (in text field)
• Reveal hidden controls
• Stop kinetic scrolling
Long Press • Reveal Object Menu
• Repeat (QWERTY) key press.
Swipe • Unlock device in locked mode
• Return to last state of Home from full screen application.
Drag • Pan/Scroll content
• Paint to select text in text field (interaction needs to be first started horizontally,
otherwise panning is triggered)
• Move between 3 Home views (Notifications, Applications, Multitasking)
Flick Kinetic pan/Scroll content (in some cases, bringing in new content, e.g. Gallery, switching to
next picture)
Double tap • Switch between zoom levels (touch screen)
• Silence alert (accelerometer)
Pinch Zoom in/out (points touched on screen follow fingers)
Touchscreen interaction guide
7

8. It is a native application on smart phone designed for Viettel customers end-users to use
their bank accounts to transfer, receive and pay services...
Key benefits of using BankPlus:
Easily and quickly communicate with end-user’s bank account through user-friendly
application on smartphone everywhere and every time.
The end-users are Viettel customers – young, living on cities of Vietnam which have good
knowleage about technology. End-users’s age is more than 20 which they must have
smartphone and bank account.
BankPlus Application
8

9. BankPlus - Evaluation use cases or flows
9
Start screen
Transfer money
through bank account
Transfer money
by cash
Pay telecom
fee
Pay other
services
Account/transaction
information
Help Setting
Logout
Login

10. Start screen
10
Issue: Chức năng giới
thiệu và hỗ trợ cùng một
nhóm lại để cách xa
nhau.
Proposal: Nhóm lại vào
một khu vực. Tách thành
2 nhóm chức năng
CRAP Design Principles –
Proximity
Issue: Icon bị sai.
Proposal: Thay icon bằng
icon khác tốt hơn
Proposal: Đưa
logo + chức
năng chính của
ứng dụng vào
trang đầu tiên
Proposal:
Nhoms các chức
năng gần nhau
thành các
nhóm, tăng độ
contract
Proposal: Đưa
ra các điều kiện
kiểm tra tính
ready của ứng
dụng tại trang
này
Match between system
and the real world

11. Start screen
11
Issue: Trong trường hợp
ko có 3G hoặc internet
cửa số này hiện ra rất
lâu hoặc và ko có cách
nào tắt được
Proposal: Đưa
ra các điều kiện
kiểm tra tính
ready của ứng
dụng tại trang
này
Error prevention

12. Main Menu
12
Issue: Menu dày đặc các
chức năng thuộc 3 nhóm
khác nhau
Proposal: Nhóm lại vào
một khu vực. Tách thành
3 nhóm chức năng
CRAP Design Principles –
Proximity
Issue: 2 thông tin này
thuộc về người dùng
đang bị đặt xa nhau
Proposal: Nhóm lại vào
một khu vực
Proposal: Quy
hoạch lại thông
tin
Proposal: Tách
thành các nhóm
chức năng
Proposal: Loại
bỏ phần footer
để tiết kiệm
diện tích
Issue: Phần footer này
chiếm nhiều diện tích của
màn hình mobile quá

13. Main Menu
Proposal: Nhóm các chức
năng ko quan trọng vào
menu trược ngang, bỏ trên
phần menu chính đi

14. Transfer money through bank account
14
Issue: Số tiền thường rất
dễ nhầm lẫn
Proposal: Improve
control này để tránh
nhầm lẫn cho người
dùng.
CRAP Design Principles –
Proximity
Issue: Label và value ko
map với nhau
Proposal: Đưa mã
PIN lên đầu để tránh
việc người dùng
quên mã PIN
Proposal: Tách
thành các nhóm
chức năng
Proposal: Improve
control tiền để tránh
nhầm lẫn cho người
dùng
Issue: Có quá nhiều ngôn
ngữ design
Error prevention

15. Transfer money through bank account
15
Issue: Người dùng mất
nhiều thao tác để có thể
chọn được nội dung cần
thiết. Thêm nữa ko có 1
overview về chức năng
của màn hình
Proposal: Chuyển
dạng list thành ratio
box để tiết kiệm
thao tác của khách
hàng
Proposal: Ghi lại
thông tin của giao
dịch trước đó để
suggest cho khách
hàng

16. Help
16
Issue: Description vô
nghĩa so với title -> cảm
giác cẩu thả
Bug: Kích thước icon bị
bug – to bất thường
Issue: Nếu không có
thông tin, màn hình này
gây cảm giác là ứng dụng
bị lỗi.
Error prevention
Consistency and standards
Proposal: Học cách
desc của facebook

17. Help
17
Issue: Khách hàng tự hỏi:
vậy tôi nên làm gì tiếp
theo đây?
Proposal: thêm một nút
điều hướng, ví dụ: Thử
lại để khách hàng có thể
biết làm gì
Error prevention
Issue: Có rất nhiều nội
dung cần phải offline
hoặc cache nhưng đều
đỏi hỏi online
Proposal: Chuyển những
nội dung offline vào bộ
nhớ của device

18. Setting
18
Issue: Có rất nhiều chức
năng chỉ cần thu vào 1
màn hình
Proposal: Dùng một màn
hình system setting để
nhóm các chức năng này
lại
Issue: Tương tự như các
màn hình trước đó, cần
phân các chức năng đồng
dạng vào thành từng
group
Issue: Có một số chức
năng bị confuse với title
và description ko rõ ràng
với người dùng đầu tiên
Visibility of system
status

19. Logout
19
Issue: Toàn bộ menu phải
chỉ dành cho việc logout
Proposal: Nhóm lại các
chức năng liên quan sang
một menu trượt
Visibility of system
status
Proposal: Thêm
một nút logout tại
menu trượt ngang
Proposal: Nhóm các
chức năng ko quan
trọng vào menu
trược ngang

20. Other suggestions
Have you considered this?
20
Start screen Main Menu Sub Menu
Issue: Lạm dụng quá nhiều
icon -> thiếu độ contract
Issue: Sử dụng quá nhiều
ngôn ngữ design: viền mở,
đổ bóng, nghiên…
Consistency and
standards
CRAP Design Principles
Contrast

21. Other suggestions
Have you considered this?
Issue: Sử dụng màu sắc
icon quá nhiều, lòe loẹt ko
có màu chủ đạo
Proposal: Dùng màu
chủ đạo là màu
xanh và màu vàng
của viettel
Sử dụng icon đơn
sắc
Issue: Sử dụng logo của
thương hiệu thay vì logo
của sản phẩm
Proposal: thay bằng logo
của sản phẩm
Issue: Diện tích này quá
lãng phí cho phần footer –
ngôn ngữ của web
Aesthetic and
minimalist design

22. Don’t make me think
Thank you
22
Q&A
Usability Testing
Heuristic Review
End-user Review
UX Design Process
• Research
• Mockup Design:
Information Design &
Interaction Design
• Visual Design
• Evaluator: Pham Khoi
• Email: khoipn@outlook.com
• Phone: +84 902023560
• Evaluation Date: Nov – 22 - 2014