Citizens Bank

Quick Links on the Mobile App
B2C/ Mobile / Product

The Challenge

In the original mobile app design, when users needed to view information or finish some tasks, they needed to click on the bottom navigation to go to the page to finish that action. There was no direct way for customers to access information or finish tasks quickly. Instead, several steps were required to get their job done.

RESPONSIBILITIES
I led the end-to-end design process, designing a way for the customers to have shortcuts to common actions on the app

ROLE
Product Designer. I worked with the Payment Experience Owner (PM), Design Lead, and engineers for the iOS and Andriod apps.

DURATION
6 months

Product Solution

I collaborated with the product owner, engineering leads of iOS & Android, and user researchers on this project. 

Through research, I learned that Citizens Bank’s competitors, like Chase and Santander Bank, all have Quick Links options on their mobile app. They provide the customers a shortcut to have direct and quick access to common actions.

I brainstormed some low-fidelity wireframe ideas and discussed with the senior designers to see if the design fits into our current design system and which gives the best result.

We decided to go for the first option, 4 small buttons in one row. The second option has too many options and it would overwhelm the users. Also, in option 2-4, the icons take up too much screen space, which leaves less room for the other content.

I also worked with the UX researcher to ask users to rank the important banking app features to give us insight into what we might include as possible Quick Links. We got the ranking of 17 features from our users.


High-fidelity design


I mocked up the high fidelity design.  A pencil icon on the left indicates the user can go to the management page to edit the quick link choices. When the user clicks on the pencil icon, it will lead to the “Manage Quick Links” page. The user can choose whether to show quick links by toggling the button on the “Show Quick Links” row. They can select at most 4 quick links to show on the landing page and rearrange the quick link order by dragging the rows.

“Manage Quick Links” looks similar to the “Control Center” in iPhone Settings, so users would immediately understand how to use this page.
When more than 4 quick links are selected, a banner message will be shown to tell the user they cannot add more links.

Added snack bar and banner messages

Snack bar messages sliding from the bottom are shown when the user toggles “show quick links” to indicate “The Quick Links are On” and “The Quick Links are off”.
Moreover, an error message is shown on the top when the changes cannot be saved due to backend issues.


Usability Testing

I then worked with the user researcher to:
‍
1) Test overall usability of the feature, particularly the interactions such as:
- Side-scrolling
- Managing links: adding, subtracting, rearranging individual quick links
- Toggle on and off
2) Validate whether users understand the purpose of and how to use the feature

We conducted four 1-on-1 moderated in-person user interviews at the Westwood lab using iphone. The screened participants are all current Citizens Bank customers, ages 24 to 57. All of them are tech-savvy and use the mobile app often.

We asked them to perform the following tasks.
‍
1) Add/ remove links from the list
2) Reorder quick links
3) Understand a maximum of four links
4) Remove/ hide feature
5) Add feature back to account summary screen (from Profile and Settings screen)

The results are as below.

Overall, they were able to interact with the feature without incurring major usability issues.
‍
- iOS-standard symbols were familiar and intuitive to most users. They understood the meaning and purpose of the “+” and “-” icons
- Users who interacted with the “only 4 links” copy and error copy found it clear

This study suggested the main interactions in this feature are discoverable if users spend a couple minutes exploring them.

When prompted, most participants thought they would use this feature, saying the quick links are “helpful”, “convenient”, and “straightforward”.


Working with copywriter

After the testing, the copy was further simplified by the copywriter. Text was rewritten to match with the tone of Citizens Bank. The text “You may replace the above quick actions with the below options” was deleted as users knew how to add an action by reading the “+” sign during the user testing sessions.

Updated the UIs with the new design system

We later updated the quick links UI to match Citizens Bank’s new design system.

Result

This feature helps customers to have direct access to the tasks they want to perform once they log into the banking app, which helps to improve their efficiency and save time. This increases the competitiveness of Citizens Bank’s mobile app compared to its peers.
Get in Touch!