Illustrations from Drawer Design
Type of Project: Academic / 5-Day Design Sprint at BrainStation
Client: Scotiabank Digital Factory / Design Mentors
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
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.
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.
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)
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!
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
A mobile application that would guide young professionals to manage their disposable income to pay off their student loans sooner.
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.
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.
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.
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?
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.
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:
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.
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.
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.
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.
Art Museum: Hang the solution sketched on the wall
Heat Map: Observe the solutions in silence and mark interesting parts with dots.
Speed Critique: Quickly discuss the highlights of each solution
Straw Poll: Each person chooses one solution and votes using dot stickers
Decide: Make a final decision for your solution.
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.
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.
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.
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:
Friendly Welcome to start the interview
Context Questions about the user; open general
Introduction to the prototype
Detailed tasks to get the user reacting to the prototype
Quick debrief - Capture the user's impressions.
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:
Move the Login option to a separate page.
Reword the "Set the number of years you want to finish paying debt" because it is confusing
Changes #1: Move the Login option to a separate page
Changes #2: Reword the "Set the number of years you want to finish paying debt"
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:
User validation: Not included in this video
P3 Onboarding process: once validation is completed, Jose is welcomed and invited to continue with the onboarding or skip it
Debt planning (1/2): to set goals
Debt Progress (2/2): to see his current debt progress
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!
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.
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