Case Study: Redesign of a Local Credit Union’s Mobile Banking App
This past fall at UCSD, I had the opportunity with a team of fellow design students to redesign and improve the way San Diegans could save money using the SDCCU mobile app.
Design Prompt
Using a well known banking app, extend or redesign a feature that helps a specific type of user to save for a major upcoming high-cost purchase.
Problem Statement
Our team chose to redesign and extend the functionality of the San Diego County Credit Union mobile app. By further developing the app, we wanted to create an intuitive way to help users manage their savings. By implementing more customizable organization tools, users can better visualize how their money is used. If users can better visualize how their money is used, they will be more conscientious about saving and spending, maximizing their saving and minimizing their spending.
Why SDCCU?
Our team was at first hesitant to choose an application for our redesign that was strictly local to San Diego. Our main concern with this is that it would dramatically reduce our pool of target users, and that not only is it not a well known app, but its design is not as refined as many other popular banking apps. The appeal to choosing SDCCU greatly outweighed our concerns, however. One of the main reasons we chose to focus on a local banking app was because we felt this type of redesign might stand out more to employers. Given that many design students have redesigns of popular applications in their portfolios our team felt that creating a redesign for something less developed (the second version of the app was recently released and currently is very low-rated) was a more realistic task, similar to something we might focus on in one of our first design jobs perhaps. Additionally, having a local, accessible stakeholder was an incentive to really design with the user and stakeholder’s needs in mind.
My Role
Throughout the course of this project, my role in my team was flexible, as I’ve been able to sharpen my skills in various steps of the design process. My focus was particularly in helping design and create our UI and prototypes in Figma, as well as conducting user research with our preliminary prototypes. Given that I have background and experience in writing/journalism, I spearheaded the write up component of our redesign throughout each assignment, ensuring that our work was telling a story during each step of the design process.
User Research
In order to be able to appropriately address the needs of our users in this redesign, we first needed to determine who our target users might be, and what their needs actually are. Once we have an understanding of how the user’s needs align with what we expected them to be in our preliminary research, we will then be able to adapt our designs to include features, UX flows, and UI components that can directly and indirectly address these needs. If we can achieve this, then we will have created a successful redesign of our product.
Targeted Users
Our target users are financially independent professionals between the ages of 20 and 40, whom are currently saving up for a major life purchase. These individuals, we felt, would be in a position to begin saving money if they are working professionals, and would likely have savings goals at this point in their lives. One interesting observation to note is that our stakeholder, SDCCU, uses almost exclusively images of younger individuals in their marketing and advertising materials (with the exception of those that pertain to retirement); this may give us some insight that this may indeed be their target audience.
Creating User Goals and Persona
Users should be able to:
•Track their current savings
• Check interest rates of real and predicted saving amounts
• Set up a reoccurring transfers from their checking account, but also maintain a positive balance
• Provide tips and encouraging messages at milestone balances
• Visualize their money in different customizable categories
Research Goals & Methods
Through our research our goal was to better define our user’s needs and desires. Interviewing users can reveal their thoughts about what features are missing and what features currently exist that work well for them. User research would help us determine what our design problem is and give us a starting point for iterating design ideas.
Our team sent out a online Google Form survey to the course piazza and posted the link on our personal social media accounts. We decided to use a survey to gain initial insight as to what kinds of users our project should focus on. This preliminary survey helped us to refine our target user profile as well as polish our problem statement. One major confound we anticipated in our research was the fact that our survey population (our COGS 127 classmates) would likely have somewhat similar saving goals, given that they are all at a similar point in their educational career and are likely to share similar financial goals with respect to paying student loans, and saving for major milestones in life that potentially correlate to their age (i.e. putting a down payment on a house) — which we anticipated may be similar.
Major Findings
After distributing the survey to several individuals, our key findings included the following:
- 72.7% of individuals surveyed were saving up for a purchase to be made in the next six months or less
- 50% of participants report checking their savings or checking account as their primary method for saving for purchases
- The majority of purchase goals reported were short-term and generally less expensive items. Most goals reported in the survey were items that generally would not require long-term interval payments (i.e auto or home).
Again, our major pain point in conducting preliminary research was the sample size and diversity in profession, but given the data we accumulated our group decided that this was sufficient information to proceed with creating a smarter savings tool. While we anticipated the spending goals of those surveyed to be larger, more long term goals, seeing that many individuals had savings goals that could be completed within 6 months gave us insight to one end of the spectrum in our target users (i.e those closer to age 20 than age 40). Because of this, we made the decision to make this savings tool friendly to the user who may have a short term (i.e less than six months) goal, as well as the user who may be thinking of starting a college fund for their children or saving for a down-payment on their first home.
Paper Prototyping
The next step in our redesign process consisted of creating paper prototypes to hash-out potential UX flows for our app’s savings feature. This was a necessary step for our team, as using paper prototypes was a low-risk way to test out ideas we had for the flow of the app; this way we could determine if our ideas for how the user would click through and use the savings feature would actually be feasible for our higher-fidelity prototype. We wanted to make sure that our users could not only walk us through and figure out how to use the feature on their own, but also wanted to pay attention to any points of hesitation or confusion they may have while testing the paper prototype. This would give us insight as to which features and ideas we had were intuitive enough for the user to figure out on their own, and which needed to be simplified in order to keep the app user-friendly. Our team created two distinct prototypes (prototype “A” and “B”) in order to gain insight as to what direction to go into for our UX flow for our digital prototype.
Prototype “A” : On-boarding
The on-boarding slider setup format in prototype A is expected to be conducive to inexperienced users, or those who have never used the savings tool before. It provides more guidelines for the user by walking them through each step. The cognitive demand on the user is limited to answering questions one at a time. It also lets users see their progress in the process and encourages users to continue to the next step. By the end of the slider users are presented with all of the data they just entered and are given the opportunity to revise their inputs. The presence of so many pages for the user to click through to create their goal may fatigue the user, and create more space for error.
Prototype “B”: Form
Instead of a slide-show process the second prototype opts for a more straightforward approach. All of the questions are presented at once in a fill in the blank format. Users have to read through the questions and satisfy the response for each piece of information needed to create a savings goal. After this, they are directed to their Goal Dashboard, which displays all of their goals and allows them to edit them as needed. This design is expected to be better suited for experienced users who do not want to sit through the slider on-boarding process and prefer to quickly create their goal. However, the presentation of multiple blanks could potentially be very overwhelming and creates a more cluttered appearance depending on how many fields a user is required to fill out before they can successfully create a goal.
Variations in Prototypes
Because our redesign is focused on extending the capability of the savings account page on the SDCCU app, our team created two distinct UX flows for each paper prototype to test in order to determine which flow was most effective and intuitive for users, as well as to get a sense of any problem areas. As described, one prototype (A) is focused on creating new savings goals in an on-boarding page style, where the user is walked through the process step-by-step, while our other prototype (B) was a more bare-bones approach which consisted of a form setup from the main page where the user’s accounts are displayed. The variation in the user flow between our two prototypes was very minimal. The process to create new savings goal begins and ends on the same page. Where the two prototypes differ the most is in their levels and forms of user interaction. They are each designed to support a different type of user. Our user testing would help us better understand what our target user’s needs were: to be walked through the process of creating a savings goal, or having customizable options that create the goal quickly and are easily editable?
User Testing
Testing our paper prototypes gave us insights to major confusion points in our UX flows, as well as small features (i.e. verbiage of button labels) that caused errors or hesitation among the users. One of the individuals surveyed, for example, really liked that both prototypes had a confirmation button that must be pressed in order for the user to save their savings goal. This is one example of very component-specific feedback received. A more holistic bit of feedback received was that the user liked the simplicity of the form-style page, but liked the friendliness of the step-by-step, on-boarding version of the prototype. One main concern of the user was that having several pages to complete (minimum four for the on-boarding version) may result in a high attrition rate — the amount of pages needed to get through before creating the goal may create fatigue in the user, causing them not to finish creating their goal. Based on the feedback we received, it became clear that we needed to style the UI more like the on-boarding screen (minimalistic, intuitive icons, progress bars), but keep the user flow similar to the form screen (one page setup and confirmation to create a savings goal).
First Figma Iteration
Our original UX flows had very distinct foci in how they walked the user through creating savings goals, though we integrated the most effective elements of both into our Figma prototype. One of our original flows was an on-boarding style setup for the user, which walked the user step by step through the creation of a savings goal and had a minimal design, the other modeled closely after the existing flow of the SDCCU app, adding a savings tool button which prompted the user to a form-based flow in which the user would input their information to create a savings goal (this would include name, amount, frequency of deposit, and date of hopeful goal completion). Our user testing showed that while prototype A (on-boarding) was very user-friendly, using a step-by-step flow would run the risk of user fatigue and attrition. In an effort to make the process as simple as possible we integrated the form features of prototype B for the goal setup. Both prototypes maintained the idea of having a dashboard for the user’s savings, which is reflected in the current prototype, but the savings tool has been made more accessible through the navigation bar, and a button to create a new goal appears on the savings dash as well.
Going from paper prototypes to a higher-fidelity version was not as seamless as we previously anticipated. We quickly realized that having all of the information laid out in a very plain, form-like manner looked ok in our paper prototypes, but did not look very inviting in our Figma prototype. We decided that we needed to add more iconography, as well as do a better job at chunking out and distributing information on the page (this is where we got the idea to use cards in the app that contain information for the user). We liked this idea better not only because having cards inspired us to make them collapsible in order to maintain a minimal look and save space, but also because this gives the app more of a modular feel, and we wanted for the user to feel in control and able to customize their banking experience. An alternate version we created of the Goal Dashboard features snapshots of all the goals in a more linear format. In this version users can scroll through their goals and quickly see a summary of their goal and its progress. Users can view each goal in more depth by expanding it with the arrow button. The new goal button is at the top of the screen so users do not have to scroll all the way to the bottom when they want to create a new savings goal. This design is more traditional and more similar to the current SDCCU app which means users would not have to relearn new design/functionality.
Second Figma Iteration
Upon receiving feedback from the TA’s and other classmates, our suggestions of what to change and improve was primarily centered around refining the details and logistics of our Savings Tool feature and it’s appearance. Some suggestions we received pertained to making the prototype appear more realistic and user friendly. To do so, we removed any filler text, placeholders, and excess headings and labels that were creating redundancy and could cause confusion for our user.
Our goal was to take a “less is more” approach to improving the app’s feature, as the existing one is very busy and full of text that we believe could be minimized. One suggestion we received was to create a method of categorization for the savings goals; in order to do so we added the option to label/color code the savings goal upon creating a new one. Additionally, we received the suggestion from one of our TA’s to keep the number of screens we create to a minimum to focus specifically on the feature we are extending, so we were able to consolidate two of the screens: the number pad and the form to input information when creating a new savings goal. We feel that this will help to reduce fatigue and attrition of users when signing up.
One theme in this iteration of our prototype revolved around creating consistency for the user. For us, this meant ensuring small details from our first prototype (i.e. having the bottom nav bar on all pages, having placeholder text in all of the fields instead of only some). This was one reason we chose to include the new option of labeling the savings goal with a color to match the color on the cards which they will appear on in the user’s dashboard.
Other improvements our team made to our prototype pertain to the aesthetic design of the screens. Our original prototype used mostly matching colors with our app’s existing color scheme (mostly dark blue to match the company’s logo); for our updated prototype, however, we made the decision to expand the color palette slightly for the sake of drawing attention to the new features we are designing. While we maintained consistency with the existing application’s aesthetic design and navigation, we wanted to make our feature more simplified and user friendly. This meant using the card-style formatting for both the home and the savings dashboard, as well as integrating the use of more vibrant colors and gradients within the savings tool (while maintaining the colors and existing elements of the app’s navigation and overall appearance. While we also had the cards in the previous iteration of our prototype, we chose to keep them over our alternative screen for the savings feature, which were tabs with progress icons.
Next Steps
Given the time and resources necessary to continue this redesign, our next steps would be to continue iterating on our high-fidelity prototype. In order to truly determine which alternative designs are appropriate for each screen we created, it would be helpful to conduct A/B testing with a larger sample size, as well as conduct more user interviews in the testing phase — not only to gain more qualitative feedback, but also to get a more quantitative idea of what features and components in our UI were effective, and which would cause errors and slips by the user. If we had sufficient time to continue refining and iterating on this redesign, as well as aligning it more strictly with the style in the existing SDCCU app, we could potentially share our redesign idea and process with our stakeholder. This, again was the appeal of choosing a local app for our redesign: it’s far more accessible to us than any big banking companies we would have potentially chosen otherwise.
Personal Reflection
Focusing on data-driven UX over the course of two months working with this redesign has enlightened me to the importance of narrative in not just creating a case study, but in UX design itself. Having to create a narrative for every step of the design process that was cohesive required more extensive thought and effort than simply describing the design itself. Being descriptive and telling a story about the transformation and iteration of this redesign was actually quite helpful and insightful as a designer in this project — it forces you to see your process in the eyes of a user or someone who is not familiar with your product, which in turn helps to keep the product itself user-centered. Often, I feel, it can be easy to get caught up in simply trying to improve a product because of a unique idea you — as the designer — may have, but being able to take a step back at every phase of the design process offers valuable perspective which can help improve the next iterations of your designs. Throughout the course of this redesign I feel that this is a skill that I have refined greatly. I have previous background experience in writing and journalism; this is something I thought I may not ever use again after deciding to pursue UX design, but I could have not been more wrong. I feel that my background in writing has helped me in the creation of this case study, and as it turns out is a part of the design process that I discovered I really enjoy.
