PrimeTrust is a banking product that allows users to create custodial accounts - bank accounts that can hold cash, stocks (holdings), as well as crypto currency.
The goal of this project was to create an Android and iOS app for PrimeTrust's banking product.
The team consisted of 4 product designers (including myself) and a PM.
Because the scope of this project was incredibly large, I'm going to specifically highlight our iOS flow for US individual account creation, our navigation and deposit interaction for Android, and our account pages for iOS and Android.
US Individual Account Creation (iOS):
PrimeTrust has four main user types (US individual, US Corporation, International Individual, and International Corporation). The US Individual user type was the most common so my goal was to optimize that flow to have the highest acquisition rate as possible. I needed to figure out how to chunk the information in a way that would lead to the lowest bounce rate. Through research I figured out that sensitive information, such as ssn, should be requested towards the end of a flow. Then I broke down all of the user information I needed to collect into four buckets: contact information (name, address, gender, etc.), tax information (tax id number, tax country), identification information (dob, ssn), and signing agreement.
Next, I created a mock up using those four main buckets as separate steps in a sign up flow. The reason for chunking a longer sign up flow like this is to give the user small rewards along the way (completing smaller flows) to keep them from bouncing.
I also created a different flow with two main buckets - personal information (which would contain contact, tax, and identification information) and signing agreement. This flow (B) would have a longer first step and would let the user move through the information flows a little quicker, but without rewards along the way.
Then I A/B tested these two sign up flows on users. The results are shown below.
It turned out that the "B" flow with the two main buckets of "personal information" and "agreement" had a much higher acquisition rate. The comments that we received during testing were that the four bucket solution "seemed intimidating" and "felt long just from looking at the list". After showing the results and insights of the test to our PM, the "B" flow with an 80% acquisition rate was approved.
Navigation and IA with Deposit Action (Android):
Our first challenge when entering the Android phase of this project was restructuring our IA and navigation to meet Google's material design guidelines. After doing a round of research, we began sketching out different solutions that fit the guidelines. The reason for this was to find a solution that would fit into patterns that Android users were already familiar with, instead of reinventing the wheel.
After exploring our solutions, we eventually decided on using a bottom navigation with tabs - similar to what we used in our iOS design. The main difference would be our decision to take the deposit action out of the bottom nav, and instead put it as an icon in the top nav. This was a growth-based design decision so that the "deposit" action would be the primary action throughout the app, instead of it being on the same hierarchy as the other actions in the nav bar. We also decided to consolidate the "alerts" section of the app into the "more" tab.
Originally, we were just using an icon for "deposit" in the top right of the nav. This is a common pattern in material design.
However, after a round of usability testing, we found that users were very confused by the icon and didn't understand if it was even clickable. After experimenting with numerous different icons, we found that users were most successful when we turned the nondescript icon into a labeled button.
Because we had made the "deposit" action the primary action, we needed to make that interaction the "hook" of the app. The user needed to be able to easily choose which account they wanted to deposit into, and what type of currency they wanted to deposit ("cash, crypto, other" was the specific verbiage our PM gave us to use). After researching other Android interactions, I sketched through a bottom sheet solution.
Once this interaction was approved by our head of design, I took the entire deposit flow to hi-fi.
Then I prototyped the interactions.
Account Pages (iOS and Android):
For our account page for iOS, we knew we would need to use some sort of data-visualization with an expandable design solution to display a user's currency breakdown between "Cash, Crypto, and Holdings (Other)". We also wanted to throw in a "deposit" button as a primary action. My solution involved the use of a donut chart and accordions, which is shown below.
Both our PM and Head of Design liked this solution. It would allow for expansion on both the business and user side. Next I made a lo-fi version to figure out the arrangement of the deposit button with the other actions a user would want to take from the account page (such as viewing statements, transaction history, etc.).
Once all of the nuts and bolts of the account page were in place, I treated it with some love and care and brought it into hi-fi.
Our next challenge was to turn our account page into something that was optimized for material design for Android users. After much research on material design guidelines, and many iterations, we eventually came to a finalized Android account page using material components.
I grew so much as a designer from this project. From learning growth-based design decisions to material design guidelines, this project was incredibly challenging and rewarding. It forced me to dig deep into the major differences in designing for iOS versus designing for Android. More importantly though, it helped me understand navigation and UI components that both operating systems have in common - which will help me in the future as mobile product design seems to be moving toward a hybrid of both iOS and material elements.