THE BRIEF
Capstone Three was founded in 2005 by Amy Shepherd and Victoria Tan as a brick and mortar company in Boulder, Colorado selling bundled mortgage products. They've since extended their services to online banking now that their customer base has grown.
A mobile app is clearly needed to expand their banking capabilities from strictly desktop devices, however basic. With a background in helping future home buyers gather their resources responsibly to purchase their first home, Capstone Three has always been about family friendly banking with a focus on budgeting for the big things.
Therefore, the new banking app will have an extra feature built in that should enable users to see a basic overview of their account savings and goals.
THE PROCESS
Research:
Market research, competitive analysis, 1:1 interviews, persona creation, as well as storyboarding.
UX Strategy and Development:
A road map was drawn up to keep priority features at the top of the list with the time constraints of the project, a site map was developed.
Interaction Design:
Low fidelity wireframes were created and used in a prototype to do basic testing with two users before changes were made, a task flow was implemented
UI Design:
Branding was done for Capstone Three including a logo and style tile. Images were selected that reinforce the brand's Colorado appeal, high fidelity wireframes were created for a second round of prototype testing with three people.
Prototyping & Testing:
User testing of the high fidelity prototype of the website, an affinity map was created to identify any high priority iterations needed
Research
Market Research, Competitive Analysis, 1:1 Interviews, Persona Development, Storyboarding
RESEARCH GOALS
• What features are must-haves in a banking app?
• Who would use a mobile banking app?
• What does the UI for most banking apps look like?
• How do banking apps compare with each other?
• When would users most likely use their mobile banking app?
COMPETITIVE ANALYSIS
Other banking apps were investigated to find their similarities, distinguish their typical UI, and what sets each one apart.
STRENGTHS:
Ally offers superior rates and customer service, reimburses ATM fees up to an amount, can customize order of features
WEAKNESSES:
No ATM finder, no possibility to get in-person customer service, no overdraft protection
STRENGTHS:
No fees at out of network ATMs (ATM owner may charge fee, ability to check credit score, uses Zelle to send money, activate a debit or credit card
WEAKNESSES:
Button to sign in with a PIN at very bottom of screen, so covering the whole home button which leads to accidental clicks on it, no lock debit card feature
STRENGTHS:
User reviews say they are very happy with how easy it is to use, sliding menu for easy access to features, quick action buttons for popular functions
WEAKNESSES:
Can't send money, no budgeting tools, basic
STRENGTHS:
Easy to navigate, mobile check deposit, two login options
WEAKNESSES:
Dated looking UI, can't see account balance after transactions, no overview page with total of all balances
SUMMARY OF FINDINGS:
Upon examining multiple banking apps in the US as well as in Europe, I found out through app reviews that the main thing that users complained about were technical difficulties like not being able to login, crashes, and unavailability. Some must-haves for the UI that I came across often enough was the need for an overview of all balances, sending money, and easy access to top features and screens with the ability to customize a few items.
1:1 INTERVIEWS:
Interviews with Americans help to bring insight to the goals and pains of this particular market
SUMMARY OF FINDINGS:
Five people between the ages of 28-39 were interviewed. I tried to find only Americans while conducting these interviews in Germany. The two with the most habits and things in common are a couple living in the US. Heavy users of their mobile app, they deposit up to 25 checks a month with their phone, and frequently use the send money feature to pay others or get paid as a part of their jobs as music teachers and musicians. When it comes to banking, they value convenience the most. Both mention that one of the other apps they use for money management is Mint, a budgeting app.
INTRODUCING KAT
A frequent mobile banking app user who has less than traditional banking habits, but still wants to save for the big things.
STORYBOARDING
Examining how our persona would use the app on a daily basis.
SUMMARY OF FINDINGS:
The storyboard helps to literally illustrate our persona's needs of convenience and a clear way to help her save money for a goal she has set for herself. It is clear that the banking app designed will need to be convenient, clear, and offer a way for the user to send and receive money as well as save money by reducing fees.
UX Strategy & Dev
Road Map, Site Map
GOALS / PAIN POINTS • SOLUTIONS
Flexibility • Multiple ways to deposit and transfer money at any time
Clarity / Trustworthiness • Reminders/tips at crucial points for how to avoid fees, UI differentiating accounts
Convenience • Ability to deposit checks electronically, send money via Zelle, find ATMs, menu customization to allow access to most used features
Meeting Goals • Include feature to see money-saving goals at a glance
ROAD MAP
A road map was drawn up using Google Docs to get the key features of the banking app in a visual hierarchy that I could reference when needed since there are so many features I would like to add but had limited time constraints.
SITE MAP
This map was more in-depth to simulate what the real app would look like. From our persona's goals and needs, a convenient way to access the app's features on-the-go is required so I decided to make a main menu that is customizable for fast and easy viewing of what she uses most.
Interaction design
Wireframing, User Flow
WIREFRAMING
Low and high fidelity wireframes show the organization of fields, graphics, and click-able areas that would be comprehensive to our persona.
REGISTER/LOGIN
Buttons similar to the home screen of an iOS device make it easier to click through while on-the-move which would fit with our persona's habits. To access more options, users can scroll up with the icon menu or set their menu to list form. The footer incorporates buttons that lead to security settings and more information appropriate to those screens.
VIEW ACCOUNTS
Background color for the accounts with debits on them are light blue referencing the printed paper bills received in the mail which are usually printed on light blue paper. Differing page colors to set the outstanding balances apart from the total balance in the bank accounts. Bank Accounts color coded with orange for checking and dark blue for savings, suggesting an account that's relatively active versus savings accounts which experience less activity. All differentiations reinforced with text indicators for categories.
MAKE A DEPOSIT
The check deposit portion of the app was made with relatively large buttons and fields to allow for faster and easier entering of information and access to the camera.
TRANSFER/PAY BILL
Pages for entering sensitive information were given a neutral blue background to help the user focus on the information entered.
FIND ATM
The FIND ATM feature has a Search by Name bar that turns into a text field that slides upward when pressed.
SEND MONEY
Most banking apps now incorporate Zelle for sending money. I designed the first screen to access this feature but kept the Zelle screens from the original app to keep the experience a separate one since Capstone Three is not responsible for any changes to Zelle's functionalities and features.
VIEW GOALS
The Goals page allows users to view their personal financial goals at a glance and allows for customization of savings accounts names within the app to help with budgeting for a big ticket item like a house, the founding mission of Capstone Three.
TASK FLOW
The most used feature for our persona as well as the interviewees who helped form the persona, I wanted to show how that might look after registering.
UI Design
Logo Design, Branding
LOGO DESIGN
The logo draws from the foothills of Boulder, Colorado where Capstone Three is based. The three peaks represent Amy and Victoria, the owners of Capstone Three, working together with their client to help them get to the top. The shape is also reminiscent of and encompasses the capstone at the top of a pyramid, a tipi because of the Native American history of Boulder, as well as an arrow in upward motion.
BRANDING
A basic and clean UI was incorporated based on my competitive analysis research. Most people were very happy with Colorado Credit Union's app because it is so basic and easy to use so I decided to use that as a foundation since it would fit with the company background detailed in the brief. I went with the colors most often seen in Boulder due to--of course the Denver Broncos--but also the prevalence of outdoor sporting goods and outerwear that are usually in brighter colors. Bolder and bigger lines and icons make it easier for our user to quickly view and navigate the app.
Prototyping & Testing
Prototype Development, Affinity Map
USER TESTING:
A low fidelity prototype was tested with two participants with iterations implemented before a high fidelity prototype was tested with three more participants. I tested with all Americans while living in Germany to get a result that was more accurate to the target market and their habits.
SUMMARY OF FINDINGS:
Because most users tried to push the Need Front Image button on the Deposit page, I decided to make that and the Need Back Image into buttons. I also added an extra screen to the prototype to include the back of the check so you can see how that process in full would look like. All testers completed all tasks without a problem, although two testers accidentally swiped and could go through all screens that way. I learned I need to turn that feature off in the Share settings, but funny thing is that I did want that feature for those first few screens of the app.
IN CONCLUSION:
The research process drove me to design an app for heavy-use bankers on-the-go who value convenience, clarity, and money saving/budgeting features above all else. The UI reflects the aesthetics of the target market in Boulder as well as the sensibilities of our heavy-use banking persona in that it allows for fast and intuitive access to all her favorite and most used features with the possibility to customize. Those features would be the Deposit feature, the check account feature, and the send money feature. Tips have been incorporated throughout that help our persona to avoid unexpected fees and provide clarity and the Goals page helps her keep an eye on her credit score and savings accounts to help her make the right financial decisions that will ultimately help facilitate personal goals.
THE UPDATE:
All changes detailed in the Next Steps section of the Affinity Map have already been implemented. If I had more time I would have liked to include fingerprint authentication as a security login measure and option as well as the screens necessary to show how the user would choose their home menu display from either an icon menu, list menu, or the ability to swipe across the top nine screens chosen with the first screen of their choice appearing as the first screen upon login.
