The challenge

To create a native mobile app that would cater to the needs of a specific target customer type.

My team

Ben Habib | Maker, Stitcher

Devone Brittain | Maker, Writer

Mona Mann | Writer

Samiya Dalwai | Maker

Figo Bank is a friendly and approachable brand, with the primary goal as a business to demystify the complexity of the many elements of savings, spending and investing money.

Currently, Figo bank offers typical personal banking services through a responsive website (supporting desktop to mobile) to manage the following:

a. Chequing accounts | b. Savings accounts | c. Credit card accounts

The request

“Our customers have been asking for a native mobile app for a long time. However because customers can already manage their personal finances through the responsive website, we want our mobile app offering to provide value that uniquely speak to each of our target customer types.”

Deliverables

1. A distinct task for a native mobile app offering, created for the target customer type, a minimum of 7-10 screens.

2. A desktop marketing web page (pre-login). Website should demonstrate how customers will learn about the new mobile app offering and a clear CTA button to download.

Branding

The solution could only be designed using Avenir as the primary font. Additionally, the design solution must reflect the primary brand colours.

Accessibility

The solution needed to be accessible to the widest audience, thus must be WCAG AA compliant.

Fig: Figo bank’s existing design system

Unpacking the problem

Goal setting

Secondary research

Hypothesis

Talking to users

Drafting a HMW

The analysis of the project brief pointed to a few things that were evidently important to the client:

- Figo Bank’s primary goal was to demystify the complexity surrounding savings, spending and investing.

- Figo bank currently has a responsive website and would like to develop a native mobile app to address customer demand.

- Figo wants to deliver and provide value to this target customer group to keep them coming back.

As part of our secondary research on the problem space, we did an extensive analysis to understand the current and future state of personal banking.

“In a poll of 1,061 respondents across Canada who were 18 years old and above, 44% gave themselves a score of 6 out of 10 or lower when it comes to their financial literacy concerning credit cards.”

(Source)

Taking cues from outsiders

We researched apps outside of the banking industry for mostly UI inspiration, but also to see what solutions they may have employed to solve a unique problem within their respective industries that could be applied to our problem.

But also looking within

We spent a great deal of time doing competitive analysis within the chosen problem space, in order to get a better understanding of what they were doing to address the this problem within their respective organizations.

Some stiff competition!

Fig: A few of the competitors we analyzed for this project

The target customer

Our target customer for this project was post-secondary students applying for their first credit cards.

The ask!

As part of the request from the client; we were tasked with finding a compelling way to encourage them to healthy financial choices while they are young, in so doing increasing the likelihood of repeat use of the bank’s services thus; ensuring long-term loyalty to figo bank.

Fig: Photo by Eliott Reyna - Unspalshed

To get the project moving along towards a working solution, we made a few assumptions about the problem space and about some of the needs of the user.

From the data gather through secondary research, we assumed that Post-secondary students did not know where to begin when it came to managing their personal finances beyond savings accounts.

Interview criteria

Post-secondary students

First-time credit card holders

We conducted research interviews on post-secondary students who recently went through the process of applying for their first credit card.

Interview questions

The questions were focused on key areas that would provide us with sufficient data on the user’s pain points, behaviours and goals as it pertained to:

Managing a credit card

Application process

How can we intervene?

The insights gleaned from the user interview highlighted a number of key themes. At this stage, each member of the team was asked to independently come up with a HMW question. Each designer had a chance to present their approach to the group, after which we all dot-voted on a winning HMW we collectively felt strongly articulated our understanding of the problem space.

How might we ... help post-secondary students manage their spending habits in order to empower them to make wise credit decisions?

John’s goal!

Our persona’s main goal is to feel confident when using his credit card. Ideally he’d like to stop missing payments, and having a tool that helps him keep track and stay on top of his would be beneficial.

He also wants to better understand how credit works and what steps he can take to improve his financial situation.

Fig: Primary persona profile

UI Inspiration

Ideation

Sketches

Storyboarding

Based on our interview insights, understanding of the problem space, we decided that an ideal solution for the problems identified would be one that resonated strongly with the target demographic.

We felt that it’d be helpful to incorporate some sort of an educational component that would help the users understand how credit works, and an AI solution that would learn from the user’s habits in order to help them stay on top of their spending.

Proposed solution

Mia, a personal financial coach that not only provides a library of resources where a user can search up topics of interest to increase their financial literacy, Mia also learns from the user’s spending habits and proactively coaches them through their financial journey.

Mia is designed to always be there to help answer any questions and coach the user in making better spending decisions.

Fig: The brand logo my team designed

Continuing from where we left off in day 1, each team member branched off independently to gather more inspiration for designing the user interface.

At the end of the time-slot allocated for inspiration gathering, each designer did a quick presentation of their findings to the group.

Each designer had to come up with a crazy 8 sketch of a screen and complete task-flow sketch. We allocated a total of 70 minutes for the crazy 8’s and task solution sketches.

At the end of the allocated time, we convened to go over each designer’s work as a team and voted on the winning solution sketch we’d proceed with.

1. Art museum - We posted the solution sketches on an art-board

2. Heat map - Observing the solutions in silence, while marking interesting parts with dots

3. Speed critique - We discussed the highlights of each solution

4. Straw poll - Each designer chooses one solution they like

5. Decide - Collectively picked one solution

Fig: Initial concept sketch showing Mia’s capability

What are users trying to accomplish?

We spent a great deal of time ideating on Mia’s capability in helping users understand basic details about their credit score, helping educating them on financial matters, and most importantly helping them navigate day-day banking tasks.

We explored a number of possible task flows while considering the primary task a user would typically use the app for.

Budgeting task flow

We decided to included a budgeting feature because one of the insights from our interview was that users would like to know when they are over-spending, and would like to have an option to stay within a set spend limit.

Fig: Initial concept sketch showing budgeting feature

Fig: Onboarding process concept sketch

On-boarding flow

We wanted users to be able to grasp Mia’s capabilities at a glance. To that end, we decided it’d be best to some how incorporate that into the onboarding flow.

The pagination is meant to quickly introduce users to Mia and establish what could be accomplished on the app.

The wallet feature

One of the challenges we faced was being able to create repeat usage of the app, so we decided that one way to do this would be to give users the ability to add their existing cards to the app, and to be able to make payment directly on the app.

Users have the ability to add multiple cards to the wallet at any given time.

Fig: Initial concept sketch showing wallet feature

Fig: Initial concept sketch showing Mia’s learning centre

Mia’s learning centre

One of the key insights gleaned from our interview was that users within the target demographic found financial matters (especially relate to credit cards) quite overwhelming.

We wanted to make this topic much more approachable and fun by providing answers to any financial questions with just few taps.

Refining Mia’s capability

What changed?

Some of the update included the ability for a user to view their credit standing that’s directly pulled from a credit bureau like Equifax.

Fig: An iteration of the budgeting feature within the app

Review sketches

Asset collection

Copy writing

Trial run

Wireframes & stitching

Prototype refinement

Assets collection

Copy writing

Our approach to asset collection was one of simplicity. We wanted to go with icons and graphics that were minimalistic, simple and modern looking. We felt this was the best design aesthetic that’d appeal to our chosen demographic.

It was necessary to ensure the tone of the copy came across as conversational and friendly, because we felt that this approach would help the user feel more comfortable and receptive to learn about financial matters, which often tends to be formal and impersonal.

We kicked off the design process for the wire-frames by reviewing the sketches from the day before and allocating roles to each team-member. Depending of the roles assigned, some team-members had to work collaboratively in order to ensure the team was in sync at all times.

After designing the first iteration of our high fidelity prototype using Sketch and Figma, the team did an internal first-round of test to check for major inconsistencies with the prototype.

After which, we went ahead to iterate on areas in need of improvement, in preparation for the round of user test coming up the following day.

Trial

We did a trial walk-through of the prototype from the users perspective.

Fill-in the gaps

We looked for inconsistencies, gaps in the experience, and any mistakes we could identify.

Narration

The stitcher did a walk through of the prototype, narrating the steps the user would go through.

Storyboard

We referred to the storyboard to make sure all elements were captured in the prototype.

Taking a look back

We revisited ob to see if we covered everything

Refining

We made all necessary iterations in advance of the upcoming user testing session.

1. Users loved the modern aesthetics

2. The flow was intuitive and easy to follow

3. The alerts feature for upcoming payments was useful

4. Mia’s character was welcoming and liked by the users

What didn’t work

1. The wallet icon didn’t resonate with users as we had hoped

2. It was not immediately clear that the offers feature were based on a user’s spending habits

3. It was not immediately clear to users what Mia’s AI capabilities were

4. Users did not intuitively understand the function of the icon representing Mia on the bottom-nav bar

Fig: Areas with usability issues highlighted in red

Learning centre

Mia’s learning centre where users can learn about key financial topics, and how to stay on top of their credit.

Alerts

Setting up alerts for expenses, users have the option to give Mia the permission to remind them of their limits.

Budgetting

Budgeting feature that allows users to allocate a set amounts to different spending categories.

Multiple accounts

As per the request from the client, the app also features a Figo bank’s checking and savings accounts.

See interactive prototype here

See marketing website here

1. Proposed iterations

2. Second round of user testing

3. Development of Mia’s learning centre

4. Evolution of Mia as an AI learning agent