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 Designer, Facilitator, UX Researcher, Asset Collector, Interviewer

UX Design | Portfolio Design: Pastel Bank Mobile App

INTRODUCTION

As part of the UX Design program learning objective 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 into 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

UX Design | Portfolio 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

UX Design | Portfolio Design: 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, it 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 various progress graphs, Jose would visualize his spending habits and an optimized plan of his disposable income towards his student loan debt.  

Going deep inside the Design Sprint Process
UX Design | Portfolio Design: 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 team's required roles 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 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. 

UX Design | Portfolio Design: 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, 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 young professionals' experience with loan debt payments and their disposable income concerns. We established the goal to guide young professionals to help them to manage their disposable income to pay off their student loans sooner. How to change their habit of spending? How to help them to learn about debts? 

UX Design | Portfolio Design: 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 young professionals move 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 a young professionals' journey 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 sync the information manually.

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 and are looking to pay off their student debts earlier.

The most consistent observations we found among the interviewees were:

UX Design | Portfolio Design: 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.

UX Design | Portfolio Design: Pastel Bank Mobile App
UX Design | Portfolio Design: 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 the most interesting, coolest features on the services we had found, what could be replicated and what needed to be improved.

We, individually, created concept sketches using Crazy 8’s (rapid variations) and Solution Sketches (figure out the details) techniques to translate the abstract ideas into concrete solutions. 

UX Design | Portfolio Design: 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.

UX Design | Portfolio Design: 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 aimed to alleviate the user pain point. Their feedback helped us rethink 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 drawing out a storyboard showing how Jose, our primary persona, would discover and use Pastel Bank's new 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 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.  

UX Design | Portfolio Design: 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 by creating a delightful experience for users to pay for debt and associate that with your bank rapidly.

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 and 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.

UX Design | Portfolio Design: 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 test's main intention was to validate if our concept addressed the user's needs and satisfy 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

UX Design | Portfolio Design: Pastel Bank Mobile App

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

UX Design | Portfolio Design: Pastel Bank Mobile App

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

UX Design | Portfolio Design: Pastel Bank Mobile App
UX Design | Portfolio Design: 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!

UX Design | Portfolio Design: Pastel Bank Mobile App

Presenting our solution to the class, teachers and mentors

We closed our sprint design journey by sharing our team's process with our mentors 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, 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. More ideas will come and can be added without putting at risk the final deliverables.

  • Practice, practice, and practice help perfect the pitch and feel more in control of what will happen, which will make you more relaxed.

Presenting to the mentor panel, teachers and classmates

Presenting to the mentor panel, teachers and classmates

UX Design | Portfolio Design: 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