Mercury’s First iOS app
2020
Role
Lead product designer
Team
Sebastien Windal – iOS Developer
Juliana Vislova – Head of Design
Jason Zhang – COO
Context
This was the first project I worked on after joining the Mercury team as the second product designer under the Head of Design back in Jan. 2020 (pre-COVID). The web product had been fully mature by this point, and we wanted to create a V1 of the app where users can quickly check their company balance, easily deposit their checks, and view recent transactions.
LOG-IN EXPERIENCE – Users must already have an account in order to use the mobile app. Because the account creation flow is extensive and requires KYC and due diligence, we decided not to include a sign-up flow for V1.
With the addition of biometric login (Face, Touch), we added in a new biometric login section under web > settings for users to easily remove devices for increased security.
HOME – User lands here immediately after sign-in. This is a snapshot of the company’s health at a glance – total balance, account spark cards, and a list of the most recent transactions. Most users will spend < 30 seconds to quickly check the company’s total balance or an expected money in/out transaction (e.g. a check for a recent fundraising).
TRANSACTIONS – Users can view all their transactions in reverse chronological order. In V1, we decided not to translate the entire filters component from web, and instead create a separate tab for pending transactions for users to easily filter.
CHECK DEPOSIT – Depositing a check was one of the core features to include in the MVP. Prior to this, users had to take a photo of the check, upload it to their desktop, and process the deposit via the web app’s deposit flow.
5-click process to capture the front and back of the check. We had to make sure users included a “For mobile deposit at Mercury only” memo in the endorsement section on the back of the check.
An average of 93 checks would get processed daily via the mobile flow.
ACCOUNT TRANSFER – As soon as check deposit was shipped, we decided to use the same progression framework to create the money transfer feature. To make sure users didn’t accidentally transfer money, we used the slide-to-transfer UI to add a bit of friction to ensure intention.
OPERATIONAL ACCOUNT MODAL – Most users had the standard two operational accounts (checking and savings). Eventually, users started to create separate checking accounts to utilize them as buckets for better money management (e.g. vendor types, money for ads, etc).
Wire details were purposefully removed from the Savings account for security and to discourage users from making frequent transfers due to the monthly 6-transfer limit.
PROFILE – Standard profile allowed users to access their security settings. The phone number component would only be available to Tea Room customers.
PUSH NOTIFICATIONS – Highly requested feature. Prior to this, users were opted into email notifications for all account activity, balance alerts, money transfer requests, and notifs from Mercury; which created a huge inbox load overtime.
We brought in email notification settings into the app, so users can customize which notifications to receive via push vs. email.
98.9% of users opted into push notifications during roll out.
We used moments throughout the app like the post-check deposit and post-money transfer screens to contextually educate and allow users to opt into push notifications if they haven’t done so.
NOTIFICATION TYPES – A matrix of every notification that a user can receive. We wanted to keep the headlines short and simple with careful (and minimal) use of emojis whenever appropriate.
Before releasing the app, the head of marketing, Bridget Hickey, had an idea to add an easter egg into the app. So what better way (in a very Mercury fashion) than to create a daily tea reading?
Users can access the tea reading by tapping on the avatar initials in the profile modal. We added in a share feature, so users can share their readings on social (e.g. Twitter). This was in collaboration with the head of marketing, the COO (copy for the readings), and tea leaves generated from a past internal hackathon by one of our backend engineers.
Examples of readingsThe lemons were sweet.
The hills rose out of low, rich earth.
The emptiness where water might be put.
In a god, old age is green and hardy.
Summer fruit washed in river water.
They were delicious.
Now where will you stay?
The loveliest thing on this dark Earth.
One year, we'll come back here if you like.
Well, if you will, go on.
Post-MVP Features
ACTION BAR – This was a feature in the web app where admin users can approve or decline money movement requests made by custom users in their company. To make this process faster and easier, we brought in the request flow into the app, so decisioning can be instantaneous.
At a high level, admin users can view the transaction type, relevant bank details, and source of payment. Approve/decline decisions would automatically trigger a push notification and/or email to the requester.
TREASURY ACCOUNT – When the new Treasury product was released, we needed to create a view for the iOS app. We essentially used the existing operational account modal view, and added in a module for the last month and all-time stats sections.
And with the release of the auto transfer feature, we included a dropdown component, so users would know when the next auto transfer would occur, what the rule was, and how to make changes.
TREASURY ACCOUNT – Because the Treasury account is handled by a third-party brokerage, transfers are not instantaneous and take a few business days to process and hit the respective account.
We made a slight update to the UI to inform users of this expected transfer period in the flow.
CARDS – We rolled out the Cards tab, so users can easily access all their debit cards (physical and virtual), card actions, and transactions in one place.
CARD ACTIONS – The most frequent action taken in the cards modal was “view card details” and copy/paste card number.
Stats
16.8K
Unique users
3.53K
Daily users
57
Average new users/daily