EEI4361 - User Experience Engineering

TMA 01

o lla
ag
N
d u
in
as
H

Name – H L Nagolla
S ID – s22010108

Registration Number - 422513890

Table of Contents
Identify and Analyze the Current Service ...................................................................... 3
Overview ................................................................................................................ 3
Pain Points and issues ............................................................................................. 3
Areas for Improvement ............................................................................................ 4
User feedback on the existing system (according to the Play Store) ............................ 5
Design Thinking Process Documentation ..................................................................... 6
Introduction to Thinking Process Documentation...................................................... 6
Steps in design thinking process .............................................................................. 6
Proposed Redesign and Impact ..................................................................................11

lla
Redesigned Service Solution ..................................................................................11
Prototype ...............................................................................................................12

o
ag
Expected Impact on Users and Service ...................................................................14
Conclusion................................................................................................................14
N
d u
in
as
H
Identify and Analyze the Current Service
Overview
The "B app" is a digital banking platform of the Bank of Ceylon. That allows users to perform
various banking tasks such as checking balances, transferring money and paying bills. However,
users frequently report a poor experience, citing issues like cluttered UI, slow response times,
frequent crashes and an unintuitive navigation structure.

Pain Points and issues

Pain points and issues of the B-App,

i. Poor User Interface (UI) Design

• Confusing layout - the user interface is filled with too many elements. Therefore,

lla
users find it difficult to quickly find key functions. This lack of organization leads
to user frustration.

o
• Inconsistent design elements - icons, fonts and buttons lack consistency with the

ag
app. So, that creates a bad user experience and engagement.
• Outdated visual style - the app design is outdated and doesn't have a modern look.
This not only impacts on its visual appeal but also its perceived credibility of users.
N
ii. Navigation and Usability Challenges
• Complex and inefficient navigation system – users need to navigate through
u

multiple screens to complete simple tasks such as checking balances and checking
d

transaction history.
• Lack of quick access to the core functions of the system - features like account
in

summaries, recent transactions and fund transfer are not easily accessible. Users
as

must often go through multiple steps to perform common tasks.

• bad placement of the key features - important actions like bill payments and account
management are not immediately visible or easy to find. This poor placement
H

makes the app less intuitive (especially for users accustomed to more user-friendly
banking apps.)
iii. Performance and Reliability Issues
• Slow loading and response times - the app often experiences delays when loading
and making transactions (especially during time sensitive transactions). This affects
overall efficiency and user base.
• Crashes and errors - the app often crashes or lags. which disrupts the banking
experience and reduces user’s trust in the app’s stability.
• Connectivity problems - even with a stable internet connection, users are facing
connectivity issues where the app fails to load or process requests.
iv. Lack of Modern Security Features and Customization
• Absence of biometric login - users expect secure and convenient login options like
fingerprint or facial recognition. The lack of such features adds inconvenience and
raises concerns about the overall app security.
• No customization options - The app does not allow users to personalize their
experience. such as customizing their dashboard to quickly access preferred
features. This limits overall user satisfaction with their banking experience.

Areas for Improvement

i. Enhancing navigation and layout - simplifying navigation by reorganizing menus and

adding quick access features. It will help users to find essential functions more easily.

lla
ii. Redesigning the UI - an updated and cohesive user interface would enhance user appeal
and provide more consistent experience across the app.

o
iii. Performance optimization - improving the app backend to ensure faster loading times,
ag
fewer crashes and reliable connectivity. It will enhance overall usability and user
satisfaction.
iv. Integrate biometric security features - adding fingerprint or facial recognition for login
N
would enhance both security and convenience for users. These will help users to experience
secure banking services
u

v. Customizable user experience - allowing users to personalize their dashboards or profiles

d

would improve satisfaction and efficiency.

in
as
H
User feedback on the existing system (according to the Play Store)

o lla
ag
N
d u
in
as
H
Design Thinking Process Documentation
Introduction to Thinking Process Documentation
Design thinking is a human centered approach, concerned with solving complex problems in a
user centric way. It focuses on humans first, seeking to understand people's needs and come up
with effective solutions to meet those needs. Design thinking can be considered a powerful
technique for driving innovation. In the design thinking process, trying to empathize with
customers' needs and wants. This helps to come up with business ideas and turn them into
sustainable businesses. Design thinking is generally used by companies, corporates and startups,
private and non profit businesses

Steps in design thinking process

lla
1. Empathize
Empathy is the centerpiece of a human centered design process. Empathize mode is the work to

o
understand people, within the context of the design challenge. It tries to understand the way they
ag
do things and why, their physical and emotional needs, how they think about the world, and what
is meaningful to them.
N
Methods used for the BOC app redesign,

• User interviews - I conducted brief interviews with a few BOC app users and asked them
u

about their daily usage, frustrations and what they wished was improved.
d

• Reviewed user feedback - I reviewed app store comments. most of the feedback
in

consistently highlighted issues like slow loading times, crashes and difficulty in finding
main functions.
as

In this step, I identified users want a fast and reliable app that allows them to access core functions
H

quickly. Such as checking balances and transferring funds with minimal effort. Many users
mentioned the app’s poor user interface and poor responsiveness as major pain points. It was also
identified that users are interested in modern security features like biometric login options for
security.
2. Define
The Define of the design process is all about bringing clarity and focus to the design space. It is a
responsibility of a design thinker to define the challenge based on what is learned about a user and
about the context. in this step, makes the findings from the Empathize phase into a clear and
actionable problem statement.

Methods used,

• Framing the problems - I analyzed the user feedback and identified recurring issues to
create a well defined problem statement. Framing the right problem is the only way to
create the right solution.
• Tried to create user personas based on the interviews.

Problem statement - BOC app users need a fast and reliable mobile banking app that allows them

lla
to perform essential banking functions easily because they are currently frustrated by the app’s
confusing interface, poor performance and lack of modern security features.

o
ag
N
d u
in
as
H
3. Ideate
Ideate is the mode of the design process which concentrates on idea generation. Mentally it
represents a process of going wide in terms of concepts and outcomes. In this step, solves the key
problems identified in the Define phase.
Methods used,

• Mind Mapping - I created a mind map to explore how each idea would improve the user
experience and identify those with the most potential impact.

o lla
ag
N
d u
in

Ideas generated,
as

• Simplified dashboard – creating a clear and modern dashboard where users can quickly see
their account balance, recent transactions and shortcuts to core functions. Such as money
H

transfers.
• Biometric login - implementing fingerprint security for secure and convenient access.
• Streamlined navigation - designing a new navigation system that makes core banking
functions easily accessible
• Performance enhancements - improving app responsiveness by optimizing the backend and
reducing app loading times.
• Updated home screen - allowing users to personalize their home screen with quick access
to their most used features.
4. Prototype
A prototype is a simulation or sample version of a final product which is used for testing before
launch. The goal of a prototype is to test products and product ideas before investing time and
money into the final product. During this phase, it allows you to verify your ideas in real life.
Used methods,

• Created the prototypes - I used Figma to create prototypes of the redesigned app. focusing
on key screens like the home dashboard, login page and fund transfer page.

o lla
ag
N
d u
in
as
H

Link for prototype (Figma) - https://www.figma.com/design/LyTYW8jfoL38Oxo5XIhLMH/Untitled?node-id=0-

1&t=fbOVyBbZwV8JBORH-1
5. Test
The Test is to get feedback about the prototypes created. Testing is another opportunity to
understand the user. But unlike the initial empathy mode, now likely done more framing of the
problem and created prototypes to test.
Methods used,

• User Testing - I shared the prototype with the same group of users who were interviewed
during the Empathize phase. and asked them to complete tasks such as checking balance,
transferring funds and logging in using biometric features.
• Feedback Collected - after testing, I collected the feedback about the new design through
a Google form.

Feedback and results,

lla
• Users identified the simplified dashboard and easy navigation system. They appreciated
quick access to core functions.

o
• Users identified the modern user interface designs and overall app design. Also, they

•
appreciated it.
ag
Biometric login was a highly requested feature and users were pleased with its
implementation.
N
• Some users suggested additional features, like dark mode and real-time push notifications

The feedback I collected through a google form,

d u

https://docs.google.com/spreadsheets/d/1sLj-4cnBZ8r9psp6dyw0gtn6PFCAv6baIoP9mKfNVL4/edit?usp=sharing
in
as
H
Proposed Redesign and Impact
The redesigned Bank of Ceylon (BOC) mobile app addresses the key pain points identified during
the design thinking process. The new design is focused on improving usability, performance and
security and also providing a more modern and user-friendly experience

Redesigned Service Solution

The core elements of the redesigned BOC mobile app include

1. Simplified Dashboard
• Identified Issue - the previous dashboard was cluttered and difficult to navigate.
• Redesign - the new dashboard features a clean and minimalistic design that displays the
most important information. such as account balance, recent transactions and quick access
to essential functions like fund transfers and bill payments.

lla
• Features - allows to perform common tasks (like money transfers and bill payments) with
a single tap and provides a more visual and organized layout using icons and labels across

o
the app and buttons.
•
ag
Impact - this design reduces the cognitive load on the user and helps them to complete
tasks quickly and improve overall satisfaction with the application.
N
2. Biometric Login for Security
•
u

Issue - users identified security issues. The previous application had a lack of modern
security features.
d

• Redesign - biometric login (fingerprint) is integrated for fast and secure access to the app.
in

• Features - users can choose to enable biometric authentication. It will reduce the need to
remember passwords while login.
as

• Impact - biometric login improves the security of user data while making the login process
seamless. provide smoother user experience and increase user trust.
H

3. Improved Navigation System

• Issue - users face difficulties with navigating through multiple screens to complete simple
tasks. such as checking account balance and making transfers.
• Redesign - a new navigation system has been implemented at the bottom of the app. That
gives users immediate access to key features like home, profile, transfers and payments.
• Impact - reduces the number of steps needed to perform essential tasks. Furthermore, it
will enhance usability and allow users to access core features more efficiently.
4. Customizable User Experience
• Issue - the previous app did not offer personalization or flexibility.
• Redesign - a customizable dashboard allows users to select which features they want to
prioritize on the home screen.
• Features - users can rearrange quick actions and decide which details to view first on the
home screen.
• Impact - gives users to manage their dashboard. it will improve user engagement and
satisfaction.

Prototype
1. Login Screen with Biometric Option
The redesigned login screen clearly offers both a biometric login option and a traditional

lla
PIN/password entry. This enhances both security and convenience.

o
ag
N
d u
in
as
H

Previous look and modern look

2. Simplified Home / Dashboard and Modern Navigation System
The new home screen shows a clean layout with an easy navigation system for core functions. This
design eliminates clutter and ensures that the most important information is visible.

o lla
ag
N
Previous look and modern look
u

3. Modern look for Money Transactions

d
in
as
H

Previous look and modern look

Expected Impact on Users and Service

1. Improved Usability and User Satisfaction

• Impact on users - simplified design and navigation is enhancing the usability of the app.
Users will find it easier to perform essential tasks and keep the user satisfied with the app.
The ability of Customizable feature will save the user time and reduce frustration.
• Impact on service - a more intuitive and easier to use app will reduce the need for
customers to visit branches or call customer service for assistance with basic tasks.

2. Enhanced Security and Trust

• Impact on users - biometric login provides a secure and convenient way for users to access

lla
their accounts. This added layer of security helps protect user data, build trust and reduce
the risk of unauthorized access.

o
• Impact on service - improved security features reduce security breaches and increase
customer confidence.
ag
N
3. Personalization and Engagement
• Impact on users - by allowing users to customize their dashboard, they feel more in control
u

of their experience. This will increase user engagement for the app.
d

• Impact on service - a personalized app can lead to higher usage rates. Furthermore, it
in

makes a more satisfied user base.

as

Conclusion
H

The redesigned BOC mobile banking app addresses the core issues like poor usability, outdated
design, performance and lack of security by focusing on user-centered design through the design
thinking process. The proposed solution will significantly improve the user experience with the
app and make it more intuitive, secure and user friendly. The expected impact is not only an
increase in user satisfaction but also enhanced efficiency and trust in digital banking services.