- Adobe XD
- Lead UX/UI Designer
- Art Direction
- Project Manager
- App Architecture
- User Research
- User Flows
- Communication Plan
- Screenshots for iOS and Android app stores
An App to make everyday banking easier.
I led three app designs for Seattle Credit Union over the years. As the lead UX designer it was my job to understand the needs of our online banking and mobile app users, work with with our Operations and IT teams to build scaleable functionality, interface directly with the developers at Q2, and finally to design solutions that improved the usability of the credit union’s app products.
For this specific project, we were focusing on improving the usability of the app in a few categories:
- Increase utilization of secure login channels like Touch ID and Passcode.
- Make it easier for users to see and manager their account balances.
- Make it transfer money from account to account less cumbersome.
- Make the chat tool a viable alternative to calling our contact center and eliminated the need for email, which was a growing security concern.
- Make it easier to order checks through the mobile app.
- Improve the mobile deposit tool, so users have a higher success rate when attempting to deposit checks using their device’s built-in camera.
Working on the app redesign, I was able to also improve the colors used throughout the UI that not only delivered a more cohesive brand experience, but also improved the accessibility of our mobile app by getting the colors to all comply with WCAG 2.0 AA accessibility standards.
Login Quickly & Securely
The mobile app features several login methods. Standard username and password fields are the most popular and therefor the prominent fields featured on the login screen. Users can also choose to enable Touch ID if they’d like to login using their finger print, or they can use passcode if they’d like to set up and use a unique string of numbers. The login screen allows users who want to bypass this step in the future to be “remembered” by the app. The login screen also accommodates users who have forgotten their password or are a first-time user.
Easily Manage Your Accounts
After studying popular user-flows of the earlier versions of the app, I discovered the two most common use-cases for our deposit accounts, were users trying to make a “quick transfer” or to “view activity” on their account. For loan accounts, users wanted to either “make a payment” or to “view payments” to ensure their loans were up to date. In both cases, we added a slidable card for every account that revealed these two options from the main Account Overview page. In the first quarter of the app update, we noticed issues submitted to our support line reduced by over 40% for these four common tasks.
Securely Chat and Get Questions Answered Fast
The old messaging system directed people to forms that were emailed, making it difficult to add information or context to an existing query. We rebuilt the chat functionality to feel familiar, like the texting and messaging apps people are already familiar with. We also wanted to integrate photos and names of the Seattle Credit Union member service representatives to add a human element. This also aids when members have follow-up questions and want to know who helped them with their request the last time.
A picture is worth a thousand words. That’s especially true for screenshots when trying to explain a sometimes complicated error or inquiry. The message field also gives users the ability to quickly upload screenshots which greatly reduced the time it takes member representatives to properly assess the user’s issue and offer a resolution.
Understanding the mobile app users was fundamental to creating an exceptional mobile app product. We worked with several departments to develop personas that encompassed the most common use-cases of the app. This helped our team find the answer to the most important question, “Who are we designing for?” The personas made it possible to understand the expectations, concerns, and motivations of our target users. (I have redacted all personal insights and detailed narratives specifically tied to member data for confidentiality with the client.) With four personas in total we found that although there were different factors to consider for each, it was possible to design a product that satisfies everyone’s needs and delivers on a delightful experience. This was our definition of success.
To coordinate the efforts of the Design, Operations, and Development team we created User Flows for the functions that we were enhancing as a part of the App update. These User Flows outlined the paths users can take to perform a desired action. By laying out each step graphically, it made it easier to conduct meetings where we could validate if the solution’s processes are complete, before spending costly design/development time. These flows also set up our Operations team for success to verify the app would integrate correctly with the credit union’s core system and third-party vendors.
Our team used wireframes to help us think through the content structures and organization of the sitemap, before we started getting to granular on how UI elements should be styled. The wireframe process went through several rounds of edits from multiple stakeholders including staff that was unfamiliar with previous versions of the credit union app. These reviews informed content hierarchy, page structure, interaction insights that would eventually all contribute to our app framework.
Leveraging the usefulness of wireframes allowed the design phase to move much more quickly, as I wasn’t committing too deep to aesthetics until I knew we all had agreed to the overall structure. It also helped me to focus on strategy and usability first, and stylization second. These steps helped us keep the user in mind through every stage of the process.
As a part of this project, I created a template for wireframing for mobile devices with specs close to the iPhone X. It features a light gray dot-matrix grid to help with placement and balancing. It also features a title bar for organizing your wireframes and a notes section for capturing decisions, next steps, and insights.
All values measured year-over-year from the previous year’s activity compared to the first year of app activity.
(A key performance indicator for the credit union in becoming a member's primary financial institution.)
When I took on the project of redesigning the mobile app for Seattle Credit Union, the overall rating was 2.3 out of 5 stars in the app stores. The user experience had points of extra friction, that we were able to remove. Another main issue was that the visual hierarchy wasn’t clear and inconsistent from section to section. While we weren’t able to implement every enhancement in this update, we made great strides in improving the overall usability of the app. Three months after the update rolled out, the overall rating rose to 4.3 out of 5 stars and garnered a steady stream of positive feedback to the credit union’s contact center and social media channels.
“Seattle Credit Union has improved this app a lot! It’s fast, has a much cleaner design, and improved security. Simple to navigate and the new features make it equal to big banks. It feels good to support a local credit union without sacrificing functionality.”Great performance and easy to use.5 stars from Cinemarama
“This app is terrific. I can do all of my banking here. Pay my bills and money to family. I check my credit card balance. Move money back-and-forth. It’s awesome.”The app is great!5 Stars from BuggyDougy
“The latest update vastly improved the speed. I really like all the UI improvements too. Much easier to read and interact with.”Thank you for the UI Improvements.5 Stars from SaintBernardus
“Easy to navigate and find what I need. I rarely even log in now via my PC cause I can do everything through the mobile app.”Easier to use!5 Stars from Laruaseesu