Increase Transaction with Re-branding Deposit
Role
Product Designer
Responsibilities
User Interface Design
System Design
Company
Ajaib (www.ajaib.co.id)
Platform
Mobile App (iOS & Android)
TEAM
Fahry A, Lead Designer
Afira P, Product Manager
Irawati A R, Copy Writer
Vicky S, Engineer
Overview
As a securities app, Deposit is the main key to starting a transaction on the platform. But functionally, it presented several issues; it was difficult to read, had an old design, and test. I led the effort to improve the deposit from usability and design perspectives.
Problem
The deposit experienced usability issues and needed to be rebuilt and rebranded
1
“Tujuan Transfer” sounds too formal and may not clearly convey the context to users.
2
The transfer methods are presented using text only, resulting in a monotonous and less engaging layout. (Icons for transfers methods)
3
Important information such as “RDN Number” and “RDN Account Holder” do not stand out sufficiently compared to other elements.
4
The copy (clipboard) icon for the RDN number is not prominent and its functionality is unclear.
5
The footer text regarding transfer fees appears cluttered and is difficult to read.
6
The accordion that should appear down instead brings up a new page, this breaks user expectations because the direction of the accordion is wrong.
7
The small font size for some important elements may hinder readability, especially for users with visual impairments.
Research
In an effort to prioritize a Deposit page redesign, our team followed up by conducting interviews with a panel assembled from unsatisfied users (17 of 20 participant). They confirmed our suspicions and gave us ammunition to convince product management to move forward.
After analyzing our direct competitors, I found their suggestion pages were basic and uninspired. I decided to approach competitive research differently, looking more closely at leaders in the digital transaction or trading. Products like Gopay and Ovo had elegantly solved a similar content problem and helped guide me towards the almighty transaction method.
Feature
Improve Clarity
Change term top up to deposit . We want to train the customers that this is more like depositing into a bank than it is topping up on pulsa (phone credits)
Change the copy icon besides nomor rekening to be a pill with the word “Salin”.
Disclosure of deposit information from the bottom section to the top by providing the most crucial information as sub text
Improve Readibility
Redesign the transfer destination section by making it like a bank card. This will make it clearer for users to differentiate the hierarchy between destination and method.
Aligned every element to the left and put the icon for faster scanning and set a clear typographic hierarchy by tweaking font sizes and weights for added emphasis on transfer destination.
Grouping which transactions are done by the bank and which transactions can be done by non-bank applications. create a list of the same bank as the top default
Dynamic Method Transfer
Redesigning the transfer method with a bottom sheet system. Allowing users to quickly see other methods, and providing information on the deposit destination for each transfer method so that users do not have to scroll up just to remember the deposit destination.
Implementation
While working with the front-end team to implement the new deposit feature, we identified weaknesses in our outdated design system process. Due to the product team’s tendency to move swiftly and A/B test extensively, many front-end developers often skipped creating and documenting components until they were proven successful. This approach was understandable but contributed to engineers technical debt.
To address this challenge, we held discussions with front-end and design stakeholders to determine effective solutions. We agreed to allocate time for componentizing successful variants and established a dedicated team to take a more comprehensive approach to enhancing our design system workflow. (Appreciation goes to Fahry for playing a key role in the successful implementation of our design system.)
1
Title
Use bold format and should not have a distance of more than 16px from the content after it
2
Logo
If the bank doesn’t have a logo, use placeholder icon pictured
3
CTA
CTA’s should be prominent and use clear copy action (e.g., “Salin” for copy)
4
Destination Number
Always use monospace or spaced font for readability. Name of the account holder should be placed directly below the number in smaller size and regular weight.
5
Method Menu
Each transfer method (e.g., Bank, Mobile Banking, E-wallet) should be listed with an icon, title, and right arrow indicator. Highlight the most popular method with a tag (e.g., “Populer”).
6
Method Section
Methods should follow a clean layout with proper padding between items. Icons must be consistent in size and style. Ensure clear distinction between different method types using dividers or spacing.
6
Step Section
Use a numbered or bulleted format to describe steps clearly. Step titles should use bold text. Use visual indicators or icons to assist user understanding, especially for mobile app-based steps (e.g., “Login ke aplikasi DANA”).
Results
Deposit Rate is defined as: number of deposit divided by number of active users. Comparing two versions of apps, before and after the change to deposit, shows that the newer version consistently outperformed the old design in terms of deposit rate
Based on the A/B test results from April 17, both Android and iOS platforms showed a notable improvement in deposit rates after implementing the new deposit page design.
On Android, the deposit rate increased from approximately 4.0% in the baseline group to 5.0% in the treatment group, resulting in a 25% uplift.
On iOS, the improvement was even more significant, with the deposit rate rising from around 3.5% to 4.8%, which represents an approximate 37% increase.
These results indicate that the redesigned deposit experience positively impacted user behavior, leading to a higher conversion of active users initiating deposits.
Summary
The deposit redesign improves our overall deposit method experience by making it easier for users to make transactions. Personally, this project gave me some valuable insights:
By systematizing deposit design, we were able to create capabilities for our product management team that would benefit the business far more than simply improving the visual design and hierarchy of deposit methods.
Effective communication and engaging the right stakeholders from the start can yield significant benefits. During the deposit redesign, I identified a chance to optimize how we leverage our design systems. By fostering clear communication, I successfully secured support to initiate what would become a more advanced and structured design system process.