Mobile Banking App
Experience Design

Created and prototyped a new concept and design system for a mobile first banking app experience

The Problem

SafeCorp approached ZURB wishing to envision a mobile first banking experience that transforms the way people manage and interact with their daily finances. Not only will the experience inspire customers to easily understand the brand and its value proposition with a touch of their finger tip; the experience will further surprise and delight them as SafeCorp becomes their primary banking relationship. SafeCorp would like to inspire banking customers into a stress free and healthy financial life.

The Solution

My team and I discovered what's important to users when it comes to organizing their money and staying on top of payments. I created an experience centered around transactions and gives the user an understanding of their spending as they live paycheck to paycheck. I designed an interface experience that is clear and concise, eliminates friction points and creates inspired moments in the financial journey.

Product Designer
10 Weeks
User Research
Experience Diagram
Experience Workflow
User Journeys
Ideation Sketching
Design Patterns
Design System
User Stories
Mood Boards
Visual Design
Style Guide


User Research

Define Our Audiences

My team member and User Researcher built 4 audiences to give me a unique look at how people in our audiences think about their finances. The audiences focus specifically on middle class earners with prime credit, earning between roughly 44k and 100k a year, seeking banking solutions.

Throughout the project, I constantly collaborated with the User Researcher on what concepts and designs I wanted to test with users.


Financially-struggling Consumers

  • Low-balance Banking Consumers

  • Credit Union Members

  • Large National Bank Members

  • Credit Card Holders


Financially-responsible Consumers

  • High-balance Banking Consumers

  • Credit Union Members

  • Large National Bank Members

  • Credit Card Holders

  • Prime Credit Score Consumers


Remote Consumers

  • Mobile & Remote Consumers

  • Multiple Account Holders


Middle Income Consumers

  • Middle Income Families

  • Average Credit Score Consumers

Design Principles

From User Research, my team and I cultivated these Principles based on the audience behaviors we have collected. I used these to drive the interaction decisions in the screens and workflows.

Opening up the Problem

Explore Opportunities

I dove into Opportunity sketches to frame the problem space and open up the project to potential solutions. I presented about 50 sketches to understand our client's perspective of the problem and grasp the client's reaction to potential solutions.

Split Utilities
What's Your Rainy Day?
Locked Money

User Journeys

These User Journeys allowed me to understand what draws the user into this app, what are the user's problems, and how does the app specifically help them in a scenario. I created 12 of these that included a problem journey and a solution journey.

Melissa is Invited to a Shared Pocket
Megan & Josh Split Expenses with Pockets

User Interface Design through Ideation Sketches & Lo-Fi Wireframes

These Ideation Sketches allowed me to move forward from the Opportunities into visualizing simple UI components in sketch form as to not get too caught up in details and draw the focus towards concept and experience.

Experience Diagram

My Design Team Lead and I created an Experience Diagram that captures the high level concepts in the system that emerged from our Principles. It shows the key actions a user will consider in the first few taps.

The goal is to create sticky behaviors that get people coming back to interact with the mobile app.

Workflow Summary

I created this workflow diagram to understand how a user enters into the app and what function leads to the next. This also displays the primary and secondary patterns of the design system.


Hi-Fi Wireframes

To land on these Hi-Fi Wireframes, I iterated through over 150 user flows of tasks that could happen in the app and what would be the best interactions ultilizing the Design Patterns.

Financial Action

Alerts create awareness of a Financial Action in the app. The Financial Action creates an event, can be triggered by a rule, and pushes an alert to a user in the system. The financial action is first part of a financial behavior that enables us to create trust with a user.



Transactions are the foundation of our system. We can use them to spark new ways for users to feel better about their financial health. Transactions manifest as screens in the system, but they also reveal themselves in more specific ways throughout the app experience.


Spending Power

The Spending Power screen gives users a unique view of where a user is in their spending over the course of a paycheck or billing cycle. It’s the main screen people will see when they come into the system. This screen answers key questions for a user:



A key part of the user experience is integrating a partner into pocket management. The Share screen is accessible on the Spending Power screen and makes it easy to manage money with a partner.



After a user selects a partner, they can chat directly with them about a pocket or specific transaction. In the case of a transaction, it remains visible so each person can chat with financial context.


Money Details

When a user clicks on their Spending Power graph, they get a detailed view of their total assets and a breakdown of their money across different accounts.



Pockets enable users to organize and spend their money in ways that give them more control than a typical savings or checking account.


Move Money

Move Money is a universal pattern that can be accessed from different places within the app experience. The Move Money module enables users to transfer money from entities and pockets. Specifically, users can transfer, pay someone, deposit checks, and add direct deposit.



The Profile screen includes a number of traditional banking settings, as well as concepts specific to SafeCorp. The profile includes your money card, your personal information, notification preferences, permissions to login, recurring transactions (rules for your money in and out) and general support.



Support exists in two formats- a direct response from agents in a messaging system (that can be accessed in the tray and profile) and an FAQ that enables users to get to answers on their own.



Onboarding is a system comprised of over 200 screens states across various stages of the app experience. These screens overlap with the zero state screens and activation concepts.


Put the Work Infront of Users

Created Animations for Usability Testing

I created 13 different user flows from the app and across 4 different types of spending power bar variations for a total of 52 animtions created in Principle. My team member and User Researcher tested these animations with users to understand which variation of the spending power bar we should move forward with.

User Recieves Paycheck
User Borrows Money
Users Chat about Finances

Sentiment Analysis

Below are the user survey results across different emotional guages. The screens marked in red, I redesigned and tested again to show improvement in interaction and comprehension.

Emotional Reaction

Connect Design Patterns

Clickable Prototype

I strung together all of the Hi-Fi Wireframes into a clickable prototype created in Marvel. This showed the team the various flows and how the design patterns above interact together.

Continued User Research

Validate our Design Decisions

The User Researcher on my team ran over 2,000 user surveys to test the interactions of our app concepts with our 4 Banking audiences. This allowed me to iterate on the Hi-Fi Wireframes based on the user survey data and lastly validate my design decisions.


Land on Creative Direction

Exploration through Mood Boards

SafeCorp wanted visuals that were modern, clean, simplistic, bright and bold. They needed something that they could easily market to their audiences. I explored 4 directions of visual design expressed in Mood Boards and applied visuals to a few screens of the system.


Applied Visual Designs



Through this project, I accomplished these following goals:

  • Designed an interface experience that is clear and concise, eliminates friction points and created inspired moments in the financial journey. My team and I tested this continuously through our engagement with the SafeCorp target audience. I produced an iterative plan that shows how testing, copy, design, and development will help the team achieve success, as well as built an amazing new brand.

  • Ensured the banking app experience is easy to use, taking into consideration the latest design trends for key interactions and behaviors. The app establishes trust by collecting information such as personal income, and creates stronger engagement and simplify the banking experience.

  • Created a progressive, fresh design that encourages continued engagement with SafeCorp for banking, as well as portrayed the high level of trust for their customers. The experience and story is mobile first and told in small stories that make up a larger story. I included the interactions of flick, swipe, and Tap.

  • Delivered high fidelity implementation ready designs for entire flows as Sketch files uploaded into SafeCorps invision workspace, and animations and other documents shared on Google Drive and handed-off deliverables ready to use for engineers and other designers.

More of My Work