Maria McCormick
UI/UX Designer | Portfolio Designer

Project Overview

  • Type of Project: Academic / 5-Day Design Sprint at BrainStation 

  • Client: Scotiabank Digital Factory /  Design Mentors

  • Platform: iOS

  • Deliverables: Map User, Interviews Scripts & Results, Persona, Storyboard, Paper Sketch, Low/Mid/ High-Fidelity Digital Wireframes, Usability Test Scripts & Results, Interactive Prototype, Hi-Fidelity Mobile Mockup and Marketing Website.

  • Team Members and Roles:

    • Tristan Ho - UX Writer, Asset Collector, Stitcher

    • Judy Yen - Low and Hi-Fidelity Wireframes, UI Mobile Designer

    • Jesse Martini - Prototyping, UI Website Designer

    • Ursha Rajah - Low and Hi-Fidelity Wireframes, Stitcher

    • Maria Mc Cormick - UX Researcher, Asset Collector, Interviewer

Pastel Bank Mobile App

INTRODUCTION

As part of the learning objective of the UX Design program at BrainStation, all students must go through the design sprint process, during week 6, to create a digital solution. For this challenge, the teacher assistants randomly grouped the students in 5-member teams, and we had the privilege to be mentored and supported by the Scotiabank Digital Factory designer team.


DESIGN CHALLENGE

Fictional Client

Pastel Bank: is a friendly and approachable brand whose primary goal as a business is to demystify the complexity of the many elements of saving, spending and investing money. This bank offers specific personal banking services through a responsive website to manage checking, savings and credit accounts.

The Request

  • Design one distinct task for native mobile app offering, created for one target customer of our choice

  • Marketing desktop website (pre-login screen) demonstrating how customers would learn about the new mobile offering (1-screen, desktop website) 

The Audience

As a team, we decided to choose Young Professionals as our target customers because strategically, it would be easier to find interviewees and testers with such tight project timelines; on the other hand, we all were young professional students!

Illustrations from Drawer Design

Illustrations from Drawer Design

Pastel Bank Mobile App

Project Constraints

Business Requirements:

  • Accounts are associated with a Client ID# (8-digit number)

  • Displayed balances must support up to 11 digits (i.e. $999,999,999.99)

  • Minimum required account types: Chequing/Savings/Credit

  • Transferring between Pastel Bank customers is free, while e-Transfers charge $1 per transaction between institutes

  • Signing up must be prioritized over signing in

Pastel Bank Mobile App

The Solution

A mobile application that would guide young professionals to manage their disposable income to pay off their student loans sooner.

Key Features

  • Distinct Task: Pastel Priority Pay or P3 feature at the onboarding screen which is specific to manage student loan debts

  • He would have the option to sync student loan information via SIN number. Yet, also included an opportunity to input as well manually

  • Auto-payment options, for both minimum payment and goal setting payment in an easy-to-access toggle

  • Through a variety of progress graphs, Jose would visualize his spending habits as well as an optimized plan of his disposable income towards his student loan debt.  

Going deep inside the Design Sprint Process
Pastel Bank Mobile App

Intro: Get to know each other

We started by introducing ourselves and sharing our strengths and weaknesses skills to fill all the required roles within the team in the best possible way. 

"Started at the end" means to set a goal to establish a direction by which the team would solve the design challenge. My team would be referring back to this goal during the entire sprint process to ensure that every decision was aligned with the project goal. 

Secondary Research

Each of us, individually, searched the web, new sites, app stores and gathered findings that helped us to understand the current landscape better. We wanted to identify what was working, what needed to be improved, major struggles that our target users were facing. 

We found that when compared to other groups, young professionals' major financial struggle was related to student loans. These two statements condense our problem space:

  • Student debt is a widespread problem that affects thousands of Canadians between 18 and 38 years old.

  • Young professionals struggle with allocating their disposable income. 

Pastel Bank Mobile App

Goal Settings

With these statistics in mind, we continued to explore the current state of banking and brainstormed our ideas to decide our project goal. We examined all the assumptions/problems, and turned them into questions, explored our biggest unknowns and future scenarios that would have caused our solution to fail.

We identified an opportunity in the experience of young professionals with loan debt payments and their disposable income concerns. The goal we established was to guide young professionals to help them to manage their disposable income to pay off their student loans sooner. How to change their habit spending? How to help them to learn about debts

Pastel Bank Mobile App
Map Users & User Pain Points findings

Map Users & User Pain Points findings

Creating the Map User 

We needed to visualize how a young professional moves through our problem space: how they interact with their bank to pay their loan debts and manage their disposable income. 

To do this, we mapped the journey of young professionals right after graduation because when they get their first job, the repayment period starts. At this point, there is a need to begin to allocate the money in the account to make the monthly payment (preferred automated) and check the remaining debt to track paid and pending. If funds are sufficient, they might decide to contribute as much as they can afford to go for a shorter-term repayment

The journey would end when the debt is paid off. Our user interacts with both the bank app and a 3rd party (loan student borrowers) website to manually sync the information. 

Refining the user interview insights and

Refining the user interview insights and "How might we" questions

Talk to people 

We interviewed five young professionals, and we focused on identifying their pain points, motivations and behaviours related to our problem space: Student loans and disposable income management. 

Our target audience was:

  • Young Professionals, 20 something adults who have completed post-secondary in the last 2-5 years.

  • For the first time in their life, they have disposable income but also are looking to pay off their student debts earlier.

The most consistent observations we found among the interviewees were:

Pastel Bank Mobile App

Translating our observations and notes into "How Might We" questions 

Having in mind the problem we were trying to solve, we moved to write all our comments and assumptions into "How might we" questions and then vote for the one that better expressed our goal by using the dot voting method.

We used dot voting method to choose the HMW question  

We used dot voting method to choose the HMW question  

Map + HMW questions

To find the most critical moment of our user experience, we organized all our "most voted" HMW questions on the map by putting them on their corresponding step.  

The highest voted HMW that better align with our goal was:

How might we guide young professionals to manage their disposable income to pay off their student loans sooner?

Target Moment: When the young professional starts to repay their student loans.

Pastel Bank Mobile App
Pastel Bank Mobile App

The second-day goal was to identify possible design solutions and ideas through inspiration findings. We individually investigated and compared the existing apps and solutions to find potential features for our design. We compiled our results and shared them, putting the focal point on what was the most interesting, coolest features on the services we had found, what could be replicated and what needed to be improved.

Then each of us created concept sketches using Crazy 8’s (rapid variations) and Solution Sketches (figure out the details) techniques to translate the abstracts ideas into concrete solutions

Pastel Bank Mobile App

Which solution to prototype?

We decided on which solutions to prototype by following the 5-step decision technique (Jake Knapp’s) from the Design Sprint Process. We agreed that the distinct task for the native mobile apps would be the Pastel Priority Pay or P3 feature.

  1. Art Museum: Hang the solution sketched on the wall

  2. Heat Map: Observe the solutions in silence and mark interesting parts with dots.

  3. Speed Critique: Quickly discuss the highlights of each solution

  4. Straw Poll: Each person chooses one solution, and votes using dot stickers

  5. Decide: Make a final decision for your solution.

Pastel Bank Mobile App
 Mentors: Brian Whelan (Sr. UX Designer); Andrea Reck (Sr. UX Designer); Gungeet Kaur (UX Designer); Steve Indrigo (UX Researcher)

 Mentors: Brian Whelan (Sr. UX Designer); Andrea Reck (Sr. UX Designer); Gungeet Kaur (UX Designer); Steve Indrigo (UX Researcher)

Receiving feedback from Scotiabank Mentors

We shared and discussed with the mentors from Scotiabank Digital Factory how we had approached the problem, our research findings and how we were aiming to alleviate the user pain point. Their feedback helped us to re-think the onboarding process as we did not know about the legal implications of requesting the SIN number to retrieve the users' debt information. They also voted on what they considered the best idea that should be prototyped. 

Last but not least: Storyboard

We ended the day by creating a storyboard that outlined how Jose, our primary persona, would discover and use our mobile application.

It starts when he found on Pastel's responsive web banking site a promotion about the new Pastel Bank's personalized mobile app. He felt excited and downloaded it. Part of the signup process is to validate that Jose already has an existing account with Pastel Bank as he frequently uses the online banking services to manage his products. He loved that he does not need to start the signup process from zero. 

Once the authentication part is done, he is welcomed to start the onboarding process or skip it. At this point, Pastel Priority Pay or P3 is introduced to Jose; he chose to continue the onboarding process, and he was amazed when he was able to see that his expenses have been summarized based on his habits. The best part is that he was informed that he might be able to repay his debts ahead of time! He was invited to set his goals by planning his financial obligations. 

One step forward, he saw the current progress with a summary of their monthly payments and disposable. He has completed the onboarding process! Jose is redirected to the home page, and he recognized all his products. His active student loan information was visible and in sync, so he does not need to go to a third party service (borrowers) to know the balance of his loans!. He had a sense that deal with his debts would be more comfortable than expected

Verification, Onboarding, P3 feature set up and Main Screen.  

Verification, Onboarding, P3 feature set up and Main Screen.  

Pastel Bank Mobile App

Synthesize our Solution Sketches into a Prototype

We were focused on creating the High-Fidelity Wireframes by the end of the day, having in mind the accessibility design and key features that would meet the user's and business' expectations. To do so, we discussed and agreed on the users and business values.

We believe our app would add value to the user by:

  • retrieving 3rd party debt information without having to input it manually.

  • offering a personalized payment plan through goal setting (P3 feature)

  • demonstrating spending on a graph to keep users on track to meet their goals

On the other hand, the business value would be added by:

  • Creating a more accessible mobile banking experience

  • Appealing to a demographic that's starting their banking and financial journey, and may create lifelong clients.

  • Building brand loyalty: a delightful experience for users to rapidly pay of debt and will associate that with your bank.

Divide and Conquer

We worked in parallel based on each role. As a "collector," I gathered assets such as icons, typography ideas, images and illustrations by reviewing existing websites, apps and UI designers pages. Two other students, the "makers," built the low-fidelity wireframes while another "maker" designed the website promotional page, and the "writer" drafted the tone and copy of our app.

Accessible Design (WCAG)

Although Jose's vision is fine, we wanted to make sure our product was accessible for all potential users. To do this, we made sure to follow WCAG double-A compliance standards we ensured that 

  • Our content had logical structure and contrast

  • The readability of our text by using sufficient sizes and also true text, which helps maintain the fidelity of the content 

  • For some of the headings, we also used all-caps

  • and just for convenience, we gave Jose the option to skip onboarding.

Key Features

  • Two-factor authentication in the initial sign-up validation process

  • Introducing Pastel Priority Pay or P3 feature at the onboarding screen which is specific to manage student loan debts

  • He would have the option to sync student loan information via SIN number. Yet, also included an opportunity to input as well manually

  • Auto-payment options, for both minimum payment and goal setting payment in an easy-to-access toggle

  • Through a variety of progress graphs, Jose would visualize his spending habits as well as an optimized plan of his disposable income towards his student loan debt.  

Day-3 version of wireframes after the internal trial run

Day-3 version of wireframes after the internal trial run

Trial Run and Iterate

At Mid-day, we had an internal trial run looking for gaps, inconsistencies, mistakes and improvements.

We listed all the potential changes, agreed on the most important and which ones we would fix for the next day.

The wireframes in Sketch and prototypes in InVision were updated accordingly, and we finished the day by preparing the test interview scripts following the Five Act Interview technique:

  1. Friendly Welcome to start the interview

  2. Context Questions about the user; open general

  3. Introduction to the prototype

  4. Detailed tasks to get the user reacting to the prototype

  5. Quick debrief - Capture the user's impressions

Pastel Bank Mobile App
Mapping Usability Test 

Mapping Usability Test 

Usability Testing

We ran five usability tests and gathered all the observations putting a special spotlight on what worked and what did not. The main intention of the test was to validate if our concept addressed the user's needs and if it satisfied all the project requirements.

We mapped out the insights to concentrate on those issues that had higher user value but required low effort to fix:

  1. Move the Login option to a separate page.

  2. Reword the "Set the number of years you want to finish paying debt" because it is confusing

Pastel Bank Mobile App

Changes #1: Move the Login option to a separate page

Pastel Bank Mobile App

Changes #2: Reword the "Set the number of years you want to finish paying debt"

Pastel Bank Mobile App
Pastel Bank Mobile App

Interactive Prototype

This is the version of the prototype tested by five different people. All the changes applied were based on their insightful feedback and those issues that had a higher user value but less effort to fix them.  

This is the sequence to test the P3 feature:

  1. User validation: Not included in this video

  2. P3 Onboarding process: once validation is completed, Jose is welcomed and invited to continue with the onboarding or skip it

  3. Debt planning (1/2): to set goals

  4. Debt Progress (2/2): to see his current debt progress

  5. Go to the main page to review all his products, and the best part is that he can check his loan balance within the app!

Pastel Bank Mobile App

Presenting our solution to the class, teachers and mentors

We closed our sprint design journey by sharing with our mentors the process our team followed to extract meaningful insights and how we took our design decisions to ideate our solution.

In 8 minutes, we introduced them to our research findings, problem statement, our primary persona, user/business values, the key features that would make young professionals' lives easier while dealing with the repayment of students loan debts.

We received great feedback about our research and ideation process. Something that we would take into consideration in future designs is how to create self-explanatory graphs that can be easily understood and, most importantly: customizable.

My design experience was very insightful; These are the critical lessons learned.

  • Teamwork is crucial to have a successful solution, so it is essential to agree on the project goal as all the members will work toward it, but we all seem to forget it!

  • Start working on the low-fidelity wireframes as soon as possible and test it immediately. During the iteration, more ideas will come and can be added without putting in risk the final deliverables.

  • Practice, practice and practice help perfect the pitch, feel more in control of what's going to happen, which in turn, makes you more relaxed.

Presenting to the mentor panel, teachers and classmates

Presenting to the mentor panel, teachers and classmates

Pastel Bank Mobile App

Scotiabank Digital Factory Mentor Panel

  • Nelson Moutinho, Design Director
  • Corbet Fawcett, Design Research Director
  • Sarah Chung, Product Design Lead
  • Jen Serdetchnaia, Sr. UX Designer
  • Alejandra Lopez, Sr. UX Designer
  • Sophi Qi, UX Designer