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

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

2. 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!

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. 

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? 

Mapping the User

We needed to visualize how young professionals move through our problem space.

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.

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.

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.

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.

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.
  

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.  

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.

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"

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.