The product
MapleBank is a fully online bank looking to expand its market in Canada. As a bank, they have a number of features that can be accessed by either mobile and desktop apps depending on the feature. They would like to increase their mobile user base.
The challenge
The goal was to create a new feature that MapleBank will use to entice new customers to sign up for their product. This product must address a critical financial need of the new market's user base. We were tasked with creating an onboarding flow for the banking app that would guide them through a workflow to so they can start using the app.
My role
I was responsible for analyzing user research and conducting a competitive analysis. I also worked on the design and functionality of the new features as well as the wireframes, prototypes and UI elements. I worked on this project along side a team of three others. As the personas were provided to us, our focus was to create the design and user interface. We worked on analyzing personas, creating journey maps, and defining the product. A large portion of this project focused on the UI elements.
Solution
MapleBank doesn’t have a way to help it’s customers manage their income and expenses on their mobile app in an easy, and simplified way. To draw users to the mobile app, we decided to create a feature that would benefit from an accessible and mobile approach. From the personas provided, the idea of a built in budget tracker with the financial institution would be useful.
MapleBank is a bank that is looking to offer a new product in order to attract new customers. First we selected a persona to analyze so we could understand their needs in order to identify a new product. We focused on Monique, a single mother with a desire to start consistently saving money for personal goals and life events. We decided to create a financial planner that was integrated with her bank to help her manage her spending and saving.
Personal needs
To feel in control and on top of her revenues and expenses
She does not want to compromise on her independence or social life despite having kids
This persona was provided to us by MapleBank
As a freelancer and a divorced mother, Monique has income from various sources and that can be inconsistent at times
She wants to feel in control of her revenues and expenses to ensure her life is full-filling without being stressed out by her finances
She would like to save money for larger upcoming life events such as college for her children or travel
As an accountant, and someone who runs her own business, Monique has an understanding of managing her personal and professional finances
Sticky notes to show page ideation and flows
Multiple iterations of user flow wireframes (low fidelity and medium fidelity)
One of the main goals of this project was to focus on the interface design and improve our design skills. We were tasked with creating a style guide for our app and describe our design choices as part of the process.
To determine our colour choices, we considered the mood and tone of our app and the message we wanted to send our users. We wanted to make the tone was positive and friendly to ensure the process of creating a budget as easy and stress-free as possible.
For our brand colours we decided on two shades of cool blue-green and a soft blue with a green hue. Green is meant to indicate freshness, and progress. The cooler tones convey a calmness, important when tackling financial tasks.
Blue is often seen as a sign of stability and reliability. Businesses that want to project an image of security often utilize blue in their advertising and marketing efforts.
We have chosen orange and a vibrant, warmer green as the accent colours to highlight specific UI elements and provide contrast to our primary colours.
Orange has very high visibility and is often used to gain attention but is softer than red, which is reserved for errors and warnings. The warmer green compliments our primary colours while still being vibrant and drawing attention to important elements.
For our text colours, we selected black and white as they are simple and neutral, as well as easily legible with our chosen colour scheme.
Our selected neutral colours provide additional depth and balance to our colour palette. The warm gray chosen conveys a sense of security and warmth with a slight contrast to the cool toned primary colours. The deep navy blue compliments and unifies the primary colours while again highlighting the sophistication of the banking app.
Lexend fonts are intended to reduce visual stress and therefore improve reading performance. Initially this font was designed with dyslexia and struggling readers in mind, but Bonnie Shaver Troup, the creator of the Lexend project, soon found out that these fonts are great for everyone.
Multiple rounds of user testing were conducted as we developed our prototypes. While we improved functionality of the app as well, focus was given to improving UI elements to enhance clarity and usability.
We went through multiple iterations of the product as we developed prototypes. Through our user testing we addressed usability and functionality concerns that were brought up. Iterations in detail can be seen on the Archive Page of the Figma file.
We prototyped, then we presented our prototypes for user testing. We repeated this process multiple times with three major design changes. The first iteration focused on UX design and element placement. Then we added in colour and added adjustments to enhance clarity. Lastly, we iterated once more to make the design more cohesive and functional, using colour to do this. Some elements we focused on during our iterations based on feedback from user testing are explained in more detail below.
Come create a budget with us at MapleBank
See wireframe for developer hand-off