Still in the works, I will complete the project creation process as soon as possible.

Revamp M-BCA

Revamp M-BCA

Revamp M-BCA

About The Project

About The Project

Revamp the m-BCA application by applying the Laws of UX methodology as part of the Creative Challenge. This project will be completed within approximately two weeks, and the results will be presented to the entire creative team.

My Role

UIUX Designer

UIUX Designer

Duration

2 Weeks

2 Weeks

Year

2023

2023

01

01

Project Team

Project Team

In this dummy project, I worked independently, as each participant was assigned a challenge to complete individually. This approach aims to enhance our skills in the design process.

In this dummy project, I worked independently, as each participant was assigned a challenge to complete individually. This approach aims to enhance our skills in the design process.

Agni Fauzan

UIUX Designer

Agni Fauzan

UIUX Designer

Agni Fauzan

UIUX Designer

02

02

Objective Project

Objective Project

The objective of this project is to Improving the user experience and user interface for flow transfers on the BCA Mobile application and enhance skills and refine the ability to create storytelling for pitching purposes, as well as to train the creative team in the process of revamping websites or applications

The objective of this project is to Improving the user experience and user interface for flow transfers on the BCA Mobile application and enhance skills and refine the ability to create storytelling for pitching purposes, as well as to train the creative team in the process of revamping websites or applications

03

03

Design Process

Design Process

Creating the scope and timeline for the laundry project requires a clear understanding of the project needs, target audience, and business objectives. This process consists of four main stages: planning, research, analysis, and design.

Creating the scope and timeline for the laundry project requires a clear understanding of the project needs, target audience, and business objectives. This process consists of four main stages: planning, research, analysis, and design.

04

04

Design Process

Research

Research

By conducting research using the Laws of UX, you can identify the core problem and explore deeper perspectives on the user experience.

LAWS OF UX

In the UX Research process, the Laws of UX can be applied to better understand user behavior, optimize usability, and create more effective design solutions that enhance the overall user experience.

CURRENT CONDITION

The current condition of the application has usability challenges affecting the user experience. Before reviewing with the Laws of UX, it is important to analyze these issues and identify improvements.

Home

Home

Transaksi

Transaksi

Transfer list

Transfer list

Transfer Detail

Transfer Detail

Berhasil

Berhasil

Define

Define

To effectively define problems in UX design, you can use the Laws of UX as a framework to analyze user pain points and friction areas.

PROBLEM FINDING

Identifying the main problems users face when interacting with an application or digital product using the Laws of UX to improve usability and enhance the overall user experience.

Home

Home

Home

Transfer Detail

Transfer Detail

Transfer Detail

Law Of Similarity

Law Of Similarity

The human eye tends to perceive similar elements as a complete picture, shape, or group, even if those elements are separated.

Finding

The background on the Home, Transaction, and Transfer Detail pages is inconsistent, as well as the use of icons, text sizes, and spacing between elements.

Transaksi

Transaksi

Transaksi

Law Of Common Region

Law Of Common Region

Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.

Finding

The grouping of the “Transfer List” and “Transfer” sections in the transaction menu can be confusing, especially for new users, as they look similar but have different functions.

Transfer Detail

Transfer Detail

Transfer Detail

Fitts's Law

Fitts's Law

The time to acquire a target is a function of the distance to and size of the target.

Finding

The narrow spacing between sections can make it difficult for users to select menu items on the transfer details. invisible visual hierarchy between title and subtitle.

Transfer list

Transfer list

Hick's Law

Hick's Law

The time it takes to make a decision increases with the number and complexity of choices.

Finding

The grouping between names is unclear, making it hard to distinguish categories. Users also need to scroll too often if there are many bank contacts, reducing accessibility.

Berhasil

Berhasil

Law Of Common Region

Law Of Common Region

Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.

Finding

Grouping between information is less clear, making it difficult to distinguish categories, and users must take a screenshot to send proof of transfer, which can be inconvenient.

Develope

Develope

After identifying the problem in the Define stage, the next step is to design a solution that aligns with the principles of the Laws of UX to optimize the user experience.

After identifying the problem in the Define stage, the next step is to design a solution that aligns with the principles of the Laws of UX to optimize the user experience.

SOLUTION & IMPROVEMENT

After identifying key user problems through the Laws of UX, the next step is to apply solutions that enhance usability, improve user satisfaction, and create a more seamless and intuitive experience.

Before

Before

After

Solution

All Icons are outline for more consistency

  1. Added balance information, to make it easier for users to find out the total balance + (show & hide feature)

  2. Added the copy account number feature to make it easier for users when they want to send account numbers

All Icons are outline for more consistency

  1. Added balance information, to make it easier for users to find out the total balance + (show & hide feature)

  2. Added the copy account number feature to make it easier for users when they want to send account numbers

After

Before

Before

After

Solution

Transaction features are combined into one page, to make it easier for users when they want to change transaction features

  1. Fixed text Hierarchy & spacing between sections

  2. All Outline icons

  3. Transaction history to make it easier for users to know the latest income and expenses

Transaction features are combined into one page, to make it easier for users when they want to change transaction features

  1. Fixed text Hierarchy & spacing between sections

  2. All Outline icons

  3. Transaction history to make it easier for users to know the latest income and expenses

After

Before

Before

After

Solution

New flow add bank account

  1. Grouping bank contacts alphabetically to make it easier to find the account owner's name

  2. Look up the name of the owner of the bank alphabetically

New flow add bank account

  1. Grouping bank contacts alphabetically to make it easier to find the account owner's name

  2. Look up the name of the owner of the bank alphabetically

After

Before

Before

After

Solution

Fixed text hierarchy and spacing between sections

  1. Total transfer input assistance, to speed up the transfer process

  2. Distinguish between nominal input and PIN input

Fixed text hierarchy and spacing between sections

  1. Total transfer input assistance, to speed up the transfer process

  2. Distinguish between nominal input and PIN input

After

Before

Before

After

Solution

Fixed text hierarchy and spacing between sections

  1. Features to share proof of transfer or download to speed up sending proof of transfer, so users don't need screenshots

Fixed text hierarchy and spacing between sections

  1. Features to share proof of transfer or download to speed up sending proof of transfer, so users don't need screenshots

After

Prototype

Prototype

After designing a solution based on the principles of the Laws of UX, the next step is to create a prototype to visualize and test the design before further development.

After designing a solution based on the principles of the Laws of UX, the next step is to create a prototype to visualize and test the design before further development.

PROTOTYPE

Creating a prototype to test design, interaction, and functionality before full development, allowing for early problem identification, iterative improvements, and enhanced efficiency and overall user experience.

08

08

Summary

Summary

We created wireframes for HR and candidates based on the structured sitemap. This process is carried out to streamline the design phase and ensure a more efficient and user-friendly experience.

EST. 2024

JAKARTA, INDONESIA

CRAFTING THE FUTURE OF

PRODUCT DESIGN

CRAFTING THE FUTURE OF

PRODUCT DESIGN

EST. 2024

JAKARTA, INDONESIA

CRAFTING THE FUTURE OF

PRODUCT DESIGN