a mobile banking makeover
[ CASE STUDY ]
Patelco is a regional credit union based in California that is looking to rethink their consumer banking offering. They seek a fresh approach that leverages some of the forward thinking of other financial institutions, and hopes to reach a broader and younger demographic. They wish to create a solid, mobile-centered banking experience that provides real value to their working class clientele. For this group project, we had two weeks to deliver a modern look for a mobile banking app that gives Patelco users a quick and efficient way to manage their money.
competitor research user flow sitemap sketches proof of design iterations wireframes navigation schema persona profiles prototype presentation
post-its magazines sketchbooks Typeform Illustrator Excel whiteboard OmniGraffle InVision Google Slides
Patelco has a lot to offer their clients, but our team found that the current layout of both their website and mobile app had some limitations. Collectively we decided the most efficient way to get the most of this project was to start from scratch and completely rethink their approach to mobile banking. First things first: our team created a survey and asked 60 people a variety of 23 questions concerning their banking needs and behavior. From there, we dug a little deeper and followed up our survey with some one-on-one interview questions. Here is a sample of our findings:
In order for Patelco to have a competitive edge against other successful financial institutions, it was important to look at what else was out there: what other banks offered that were successes, failures, or could be improved? We explored the websites of different banks (Bank of America, PNC Bank, Citibank, Chase), credit unions (Vibe Credit Union, NuVision Credit Union), and popular budgeting tools (Simple, Mint, Best Budget). We studied their page layouts, the features they offered, and their branding/personalities.
This case studied differed from our previous project in that we were not given mock personas, but had to create our own based on our research and findings. Our team tried a unique approach to building personas: a picture-collage-brain-dump. Based on our research, we decided to throw out every idea that popped into our brain onto a whiteboard. There were no wrong answers, and it was a great place to start developing a fuller picture of our personas.
Our team thought the best way to showcase Patelco's fresh look and features would be to pick personas that fit into their working-class clientele group on extreme ends of the spectrum. We developed two personas: Jayne, the motivated-mom, and Josh, the twenty-something-techie. They fall within the 24-40 age group, are price-conscious, and have a desire to access their bank accounts and manage their budgets on-the-go. Their main differential is their goal-setting focus: Jayne supports her family and is thinking about the long-term, while Josh is living day-to-day and thinking about his short-term expenses.
ideation & sketching
After establishing our personas, we wanted to put ourselves into their shoes and walk through their entire mobile banking experience. We asked ourselves basic questions along the way from their point of view: How do I log on? What is the first thing I see? How can I view my accounts? Where is my budgetary information? What am I saving for? What information do I enter? What feedback will I get?
We answered all possibilities to these questions, and from there used the MOSCOW method to narrow down the features and establish a hierarchy of what the app must, should, and could consist of. We concluded that we would focus on two main features that would be a solution for Jayne, Josh, and Pateclo: creating a savings goal and setting up a budget. By re-designing a mobile app, Patelco would be able to compete with trendsetting banks that fit with their users' mobile lifestyles. In addition, encouraging customers to save would increase Patelco's working capital.
As we brainstormed the process of creating a savings goal, we hit an obstacle of what we called "the tree of death". We drew the various frequencies and methods in which someone could save, and found ourselves with too many options to offer the user that went off in several possible directions. Our team took a step back, and realized that we had to limit the features based on the scope of the project.
testing & iterations
A new issue came to light through each user test - so the more testing we did, the more efficient and straightforward our app became. We asked our users to say what they were thinking out loud as they went through the application and completed a task. A big thanks to all of our GA classmates for volunteering to help!
Our main menu went through several iterations. While we kept the overall interface clean and simple, we tried a few different approaches laying out the information. We finally found a happy medium that allowed users to see all essentials at first glance, and used various colors to make the main features more apparent.
For my first team project, I learned a great deal about balancing and managing everyone's ideas while remaining focused on the ultimate goal. This skill may not be specific to UX, but with any group setting, I believe it is crucial to establish your team's attitude and objectives from the start. It is important to listen and respect each others' ideas, and to openly communicate through each step of the process.
Our team decided from the start to keep the design minimal, and focus on the functionality of the features. We also agreed to put our full efforts into refining two main features, instead of distracting ourselves with an overload of secondary features just for the sake of adding them.
In terms of presenting, I took away a very valuable - albeit somewhat obvious - lesson: always explain jargon and any UX/technical terms when presenting. Do not assume that your audience knows what a wireframe or navigation schema is. It may not be necessary to spell everything out, but a solid pitching strategy is to be clear and descriptive when explaining your thought process.