This work was part of a 6-day long Design-A-Thon hosted by Scotiabank Digital Factory (SDF). My team and I worked together to create a native iOS digital solution to help bank customers understand credit card payment requirements, options, and due dates.

The design was to be part of a fictional financial institution call Wellspring, which was provided by the SDF. The following sections will guide you through the problem, the research we conducted, and ultimately to our final solution. Also, additional challenges presented by the SDF were tackled and incorporated.

• Completion time: 6 days
• Platform: iOS
• Roles: UX Researcher, UX Designer, Interaction Designer
• Number of team members: 3 people (including myself)     

The SDF presented to us the following problem statement:

“How might we help customers understand credit card payment requirements, options, and due dates?”

Defining the Problem Space

The first step we took at defining the problem space was to conduct secondary research. The main points are presented below:

• 42-53% of Canadians don’t pay off their credit cards in full each month.
• 39% of Canadians are uncertain about the benefits of paying off more than the minimum balance.
• The average credit card debt in Canada is $2,627.
• Many consumers choose to ignore credit card debt by paying only the monthly minimum without realizing this debt is the riskier form of debt as it is associated with more bankruptcies. This is due to higher and more variable interest rates.

The next step in defining the problem space was to interview real users. We interviewed 8 different people to find out their current knowledge and behaviors related to credit cards and debt. The following actionable insights were collected:

• Users learnt about personal finance management through trial and error (i.e. getting into debt) and did not use any financial tools provided by their bank at the time.
• Many users do not know how interest in credit card debt is calculated and, therefore, do not know how much interest accrues over time.
• Users understood when a payment was due, but they struggled and were confused about how much to pay. There was an overall confusion between the difference in statement and current balance.

Additionally, we looked at how banks communicate credit card information to their customers as a way to understand the problem space’s status quo.

Synthetizing Information

A new concept introduced by the SDF team was the use of mindsets instead of personas. Mindsets are a way of thinking about how we complete an action. For our project, the focused mindset was chosen because making a payment towards your credit was considered to be a specific task in the user’s mind.

Having the focused mindset present, the team developed an experience map for a user who wants to pay their credit card balance.

We decided to focus on the last two stages of the experience map: Statement Issue and Due Date. The opportunities at these stages are the most relevant and actionable for a banking digital product.

Design Direction

Having synthesized all the research information, the team decided on the following design direction:

“Optimizing the payment flow so that the user is better informed to make credit card payment decisions”

User Stories, Epics, and Task Flow

The next step was to come up with different user stories aligned with the chosen design direction in order to get ideas for product features. These user stories were grouped into different epics and the Understandable Payment Options epic was chosen to move forward.

With the selected user stories, the team developed the following task flow which depicts an optimized credit card payment system:

The approach we took for this challenge was the following:

First, we wanted address accessibility from the cognitive and psychological angle because debt can be associated with anxiety and depression. This meant that the product we design will need to have simple and friendly language and tone; as well as, no alarming and big notifications.

Secondly, when addressing the challenge of users being unable to use their hands because of cold weather, the team came up with two possible solutions: voice design (Siri integration) and motion design. These two solutions could potentially be integrated in the near future.

Initial Sketches

After narrowing down a specific task flow, the team completed a set of initial sketches. These sketches comprise all the elements discussed during the ideation process; as well as, the accessibility challenge.

Usability Testing

Due to time constraints, we used the hand-drawn sketches to conduct the usability testing of our product. We used the PoP app from Marvel. We conducted moderated usability testing with four different users that match our user criteria: people who use credit cards.

The scenario presented to the users was that they had to make a payment of $500 towards their credit card.

The main insights obtained from the usability testing are the following:

• Users acted positively when noticing at the dollar amount of interest they have to pay.
• The “suggested amount” in the payment options screen was found to be ambiguous and sometimes confusing.
• The use of positive language to encourage positive behavior in the confirmation screen was recognized.
• The reminder option at the end of the payment process was found to be confusing. Users thought it might be automatic payment instead of a payment reminder.

Wireframing

Low fidelity wireframes were created including the insights from the usability testing and presented to the SDF team for further feedback.

We decided to tackle these two challenges in one simple design. We animated a loading screen that would be displayed in the event of a delay in the system when the user is trying to access their credit card information.

The loading screen displays a message unique to the customer and the banking products they have, this way personalizing their experience. All these messages can also be found in the “TIPS” tab at the home screen.

During the next few days the team and I worked on defining the final look of the app, as well as, completing the high-fidelity wireframes.

We picked colors that we felt our brand to be represented by, while also keeping in mind the accessibility considerations previously mentioned. The chosen colors are shown below:

• Purple promotes wisdom and understanding, and it is considered to be good for anxiety.
• Green promotes balance and self-confidence, and it is considered to be good for anxiety and stress.
• Yellow promotes self-confidence and self-control, and it is considered to be good for depression and lack of confidence.
• More info about how colors may affect your mental health being, here.

After injecting color to our wireframes, the final product can be seen in the image below:

Additionally, we also added other micro-interactions to our final design as it was part of the evaluation criteria for the final pitch. I created the interactions using ProtoPie.

During Pitch Day we presented our work to the SDF team along other amazingly creative teams. This was a great opportunity to practice our pitching skills and to learn from the feedback provided by the SDF team.

• Understand who and what you are solving for – For us, it was really valuable to understand and define the problem space and seek opportunities for intervention as we were not fully aware of the credit card debt problem in Canada. Also, during this design-a-thon we learnt to use mindsets instead of personas. It was really interesting for me to experience this as this is becoming a new trend in the UX world.    
• Define a clear MVP – Even though we were given a lot of flexibility design-wise, it was really important to define a minimum viable product given our time constraint. This way we had a clear goal and were on track on completing our work throughout entire event. This meant no overnight work!
• Take advantage of your team’s strengths and work together in your team’s weaknesses – by creating and systematic frame of work and allowing each team member to take ownership of specific tasks, we were able to move forward almost frictionless.
• Be curious and always ask questions – several SDF team members were available throughout the entire event to guide and help us. We took full advantage of their experience and knowledge to steer our work towards something we were proud of at the end of the event.   

Email

LinkedIn

Instagram