The original project received an Honourable Mention for the 2019 RGD Student National Awards of Excellence for Strategic Design and showcased at the 2019 SFU FCAT Undergraduate Conference. The team was also invited to share the project with Vancity’s Digital Strategy team after the course concluded.
Disclaimer: The following work is a hypothetical solution, and is not affiliated with Vancity Credit Union.
Reading Length
Financial credit is an important aspect of Canadian’s financial history, and an estimated 56% of Canadian’s have never checked their credit score (Bank of Montreal and Pollara).
As one of Canada’s largest non-profit credit unions – Vancity can help deliverer digital offerings that can benefit their members and communities. And since almost half of their members interact almost entirely through digital, this would be an added value to their digital functionality.
Overall, there is a lack of information Vancity provides about credit building – and we could address these issues to bring member scores to the forefront earlier:
Rather than just telling people about credit, we felt strongly as a team that a meaningful intervention had to be more than information. It is more meaningful to ask what to do with this information?
This led us to our frame:
In order to understand our members, we conducted research during our sprint to determine segments that members with credit could be. We settled on somebody who would need help building credit.
| Disappointed Applicant | Members who have applied for loans but were not approved, or were not able to get the interest rate they wanted due to their credit score. |
|---|
We created this persona based off our member segment: a full-time veterinary technician who didn’t qualify for an interest rate they were happy with. This persona needs guidance, and this is where Vancity could intervene most meaningfully.
By creating a journey framework, it allowed us to understand what the current process is today without our intervention. This helped us to fully illustrate the process and identify current frictions within the process of researching credit.
Currently today, Vancity has a mobile application. But rather than overloading their current application, we built a companion app, as managing credit is a different set of activities from everyday banking that warrant a dedicated focus.
As a lead on testing for the team, I designed the user test plan for the team. For testing, I conducted in-person user testing with a think-aloud method. This allowed for the most pivotal feedback.
Through 3 weeks, we user tested with 9 participants, conducing A/B think-aloud user testing to look at the clarity of the app, and comparing two visual concepts. As a result, we were able to determine the final result, and discover ineffective user flows.
The main motivation of my redesign came from the use of the “red” colour. While this is Vancity’s brand colour, the issue is that red promotes a negative connotation in finance. I gathered feedback after the project completed, and wanted to challenge myself to redesign the project, while respecting the brand colours.
Here are some of the main areas of feedback:
With the feedback in mind, I worked to redesign the interface that has a better data visualization focus. I wanted to mainly focus the redesign on these areas:
Here are some before and after results of the interface. More in-depth analysis about each screen is featured below.
In order to have a clear direction for the voice and tone of the application, we established design principles that guided our interface.
| Be Personal | As a local credit union, Vancity is recognized for their personal service which should be consistent across all channels. |
|---|---|
| Be Clear | Use common language to guide members through understanding each step of their credit process. |
| Be Hopeful | Provide information upfront and always frame things positively when assisting members in improving their credit score. |
The process of evolving the home screen design involved different prototypes. While the beginning evolutions shared a similar experience to the original, the main issue was the lack of clarity in blending the home screen and line chart.
Testing the donut chart in Fig 1 wasn't communicating as well, since I still wanted to project the intended credit goal. Fig 2 and Fig 3 had issues where the chart was blending into the background, similar to the original.
Ultimately, Fig 4 seperates out the data in two charts: a numeric point (with a variance to the previous month) and "bar chart" showcasing a percentage of your actual score relative to the goal, and a line chart for the credit at a glance. Both charts can implement a threshold, using colour to connote the positivity of the score.
By separating out the top metric shown as numeric point data and the line chart data, it helps to clarify the hierarchy when differentiating both aspects of data.
Quick and glanceable information about their credit score is intended. Members can see their overall score, credit at a glance, goals, and insights about what is affecting their credit score. The use of flags for insights and colour connotations identify the positive and negative factors.
Home will showcase your credit score on a graph, and show your score over time. Data cards showcase why your score may be lower, with a "threshold flag" to indicate negative and positive results.
Our onboarding explains credit, and links accounts from other financial institutions, to give a cohesive look at how factors and other accounts affect their score.
Curated information helps members reach their goal by giving them clear, achievable steps within a reasonable timeframe.
Based on the FICO Equifax factors, these are the 5 guidelines that influence your credit score. Clicking on a factor reveals more insights about that specific point. We can point to actions here, such as enabling Pre-Authorized Payments, which can help members.
Everyone manages their finances differently. With curated notifications, MyCredit recommends actions specific to each member’s habits rather than providing generic information.
We celebrate accomplishments and recognizing members for their efforts encourages them along their credit building journey.
This is our imagined sitemap that would be needed for initial implementation and launch if Vancity was to make this available to members, to achieve the optimal experience for Vancity members.
Our team was invited to present the full solution to Vancity's digital strategy team after the course conluded, with positive feedback from the team.
While this is a concept project, these are the metrics Vancity would need to help measure success.
In order for this to be feasible, Vancity would have to implement these vendors in order to bring in the correct data:
This project allowed me to gain more experience in prototyping, and help to bring interfaces to life with more complex motion. Being able to adapt quickly to interface changes allowed me to develop my thinking process and workflow for collaboration between UI and prototyping.
This project has helped me professionally as well, as this was a large-scale project in a short time frame. It allowed me think more rapidly, and develop more clear design decisions.
View another project:
We started off by analyzing the domain of credit - focusing on credit scores and reports. A credit score may in fact be the most important number in your financial history, as it impacts credit cards, loans, leases, and mortgages. Analyzing a study conducted by The Bank of Montreal and Pollara, we found an estimated 56% of Canadians have never checked their credit score, and 31% don’t know the steps to achieve a good score. This statistic intrigued us - we knew there was a significant opportunity for a design intervention.
Vancity Credit Union is one of Canada's largest non-profit credit unions. In their 2017 annual report, Vancity wants to deliver "digital offerings that benefit members and communities." As almost half of their members interact with them almost entirely through digital channels (online banking website or mobile app), they know they are under pressure to deliver more digital functionality.
We chose Vancity over the traditional major credit companies such as Equifax or TransUnion, as we ran into the issue of would these companies want to intervene? Rather than targeting paid services provided by larger services, we wanted to help members of Vancity.
With Vancity being founded to provide financial services to people from all walks of life, and a values-based cooperative, we found that this client would be the most feasible to help their own members and community thrive in their credit journey. And by building credit knowledge, it aligns with their value of giving members financial literacy.
By analyzing the current experience of learning about credit, we came across issues not only for the domain, but Vancity itself.
Our research found that Vancity had a lack of information on the topic for their members. But the biggest insight was the fact that people fear checking their score, or they don’t know their score until they need it for a large purpose – which could be too late for them. This is where we could intervene – allowing easier access to scores, and bringing their score to the forefront earlier to help them build their score.
These openings and insights helped us to being to drive a project. But rather than just telling people about credit, we felt strongly as a team that a meaningful intervention had to be more than information. Otherwise, just giving people information is what the current experience of researching credit yourself is. Rather, it is more meaningful to ask what to do with this information?
This led us to our frame:
In order to understand our members, we conducted research during our sprint to determine segments that members with credit could be.
| Stable & Secure | Members who have multiple credit accounts, are financially responsible, and have credit scores above 700, which Equifax considers good. |
|---|---|
| Disappointed Applicant | Members who have applied for loans but were not approved, or were not able to get the interest rate they wanted due to their credit score. |
| Never Needed to Check | Members who have not yet needed to apply for a loan or line of credit, so they don’t know the details of how to maintain good credit. |
By defining these segments, we defined the disappointed applicant as the most meaningful segment to design for, and help to focus on credit building, rather than focusing on someone who may need to focus on managing credit.
We created this persona based off our member segment: a full-time veterinary technician who didn’t qualify for an interest rate they were happy with. This persona needs guidance, and this is where Vancity could intervene most meaningfully.
By creating a journey framework, it allowed us to understand what the current process is today without our intervention. This helped us to fully illustrate the process and identify current frictions within the process of researching credit.
Informed by our research, focusing on the area of “building a credit score” along with “follow through” allowed us to have a clear direction to capitalize on Vancity’s need for financial literacy, along with helping people to begin their credit journey and stay on track. This also ties to Vancity’s annual report – wanting to have more financial literacy for their members.
Currently today, Vancity has a mobile application. Originally, we had considered building the feature into their current app. However, rather than building more features into the existing Vancity application - which might lead to information overload, we built a companion app instead. This helps to design for an experience that reduces the cognitive overhead, and managing credit is a different set of activities from everyday banking. Therefore, seperating out MyCredit will warrant a dedicated focus.
After 1 week of domain research, we designed this project in 3 weeks, rapidly iterating as a team on this solution. Through the design process, we also gained valuable mentorship and feedback from a local design agency, Engine Digital, as we finished the solution.
As a lead on testing for the team, I designed the user test plan for the team. For testing, I conducted in-person user testing with a think-aloud method. This allowed for the most pivotal feedback.
The result of user testing was over 9 participants being tested in a week. The above showcases the main assumptions we had going into the user test. As a result of the user test, we found problems. Mainly our biggest insight was an ineffective onboarding. We had to redesign our onboarding process to emphasize more on credit building – as this could impact a potential bounce rate in the future, if the copywriting was unclear.
This is a snapshot of the user test questions. The aim of these questions what to first understand if people knew about credit scores. Secondly, the tasks were designed with specific scenarios in mind. By using a think-aloud method, this allowed us to test the core functionalities of the application – with getting behavioural reactions.
I also conducted A/B testing to validate designs - as our design team was struggling to determine which solution would be the best communicates the information. We wanted to focus on the score itself in this scenario, as it was the most important piece of information. By suggesting A/B testing, we were also able to test between the two interfaces. As a result, we had an overwhelming 100% response to the “B” prototype, reinforcing to our team the direction that needed to be pursued.
It was important for this design to be accessible, and complies with WCAG AA 2.0. As an auditor for accessibility, it was important that colour ratios conformed to standards, along with making tappable target areas large enough. We also made sure our text complies with Apple’s Human Design Guidelines for readability and hierarchy.
The main motivation of my redesign came from the use of the “red” colour. While this is Vancity’s brand colour, the issue is that red promotes a negative connotation in finance. I gathered feedback after the project completed, and wanted to challenge myself to redesign the project, while respecting the brand colours.
Here are some of the main areas of feedback:
With the feedback in mind, I worked to redesign the interface that has a better data visualization focus. I wanted to mainly focus the redesign on these areas:
Here are some before and after results of the interface. More in-depth analysis about each screen is featured below.
In order to have a clear direction for the voice and tone of the application, we established design principles that guided our interface.
| Be Personal | As a local credit union, Vancity is recognized for their personal service which should be consistent across all channels. |
|---|---|
| Be Clear | Use common language to guide members through understanding each step of their credit process. |
| Be Hopeful | Provide information upfront and always frame things positively when assisting members in improving their credit score. |
The process of evolving the home screen design involved different prototypes. While the beginning evolutions shared a similar experience to the original, the main issue was the lack of clarity in blending the home screen and line chart.
Testing the donut chart in Fig 1 wasn't communicating as well, since I still wanted to project the intended credit goal. Fig 2 and Fig 3 had issues where the chart was blending into the background, similar to the original.
Ultimately, Fig 4 seperates out the data in two charts: a numeric point (with a variance to the previous month) and "bar chart" showcasing a percentage of your actual score relative to the goal, and a line chart for the credit at a glance. Both charts can implement a threshold, using colour to connote the positivity of the score.
By separating out the top metric shown as numeric point data and the line chart data, it helps to clarify the hierarchy when differentiating both aspects of data.
Quick and glanceable information about their credit score is intended. Members can see their overall score, credit at a glance, goals, and insights about what is affecting their credit score. The use of flags for insights and colour connotations identify the positive and negative factors.
Home will showcase your credit score on a graph, and show your score over time. Data cards showcase why your score may be lower, with a threshold flag to indicate negative and positive results.
Our onboarding explains credit, and links accounts from other financial institutions, to give a cohesive look at how factors and other accounts affect their score.
Curated information helps members reach their goal by giving them clear, achievable steps within a reasonable timeframe.
Based on the FICO Equifax factors, these are the 5 guidelines that influence your credit score. Clicking on a factor reveals more insights about that specific point. We can point to actions here, such as enabling Pre-Authorized Payments, which can help members.
Everyone manages their finances differently. With curated notifications, MyCredit recommends actions specific to each member’s habits rather than providing generic information.
We celebrate accomplishments and recognizing members for their efforts encourages them along their credit building journey.
This is our imagined sitemap that would be needed for initial implementation and launch if Vancity was to make this available to members, to achieve the optimal experience for Vancity members.
Our team was invited to present the full solution to Vancity's digital strategy team after the course conluded, with positive feedback from the team.
While this is a concept project, these are the metrics Vancity would need to help measure success.
In order for this to be feasible, Vancity would have to implement these vendors in order to bring in the correct data:
This project allowed me to gain more experience in prototyping, and help to bring interfaces to life with more complex motion. Being able to adapt quickly to interface changes allowed me to develop my thinking process and workflow for collaboration between UI and prototyping.
This project has helped me professionally as well, as this was a large-scale project in a short time frame. It allowed me think more rapidly, and develop more clear design decisions.
View another project:
