Maple Budget App

UX Design / Problem Definition/ Wireframing/ Branding/ Prototyping/ Testing

Project Overview

Maple Bank is a fictional neobank seeking to reach a new segment of users. As a team we were given the goal of creating a new app that could perform a single outcome, relevant to a new target user base. We chose to create an app that could support users in creating budgets, and reach savings goals as a result. Our deliverable for this assignment was a high fidelity mockup and prototype created with Figma.

Roles & responsibilities

As part of a team of 3 students of Concordia CCE, working remotely, I worked on ideation, design, prototyping and usability testing. The work was built off of research provided by our fictional client, Maple Bank.

Scope and constraints

The project was created in just over two weeks, making each stage of the process quite succinct. Over a longer timeline, more time would have been dedicated to testing different aspects of the product, and perhaps towards deepening the existing research..

Problem Statement

We identified a need amongst users in the targeted demographic for a system to manage their income and budgets, and feel in control of their finances. Through addressing this problem, Maple Bank achieve their goal of reaching a new segment of users.

Persona

The target user was based on a persona provided by the organization. She is a 35 year old accountant and single mother who wants to be able to manage a strict budget and save for her children, whilst maintaining independence in her social and personal life.

Journey Map

To understand the the experience for users like Monique, of budgeting and saving with the tools initially available to them, we created a journey map to identify pain points and the key opportunities. When limited to using her banking app, Monique lacked the ability to understand how much she was saving per month, the categories of her spending, and how saving towards certain goals such as a vacation would affect her overall budget. With Monique’s many responsibilities, the lack of support in managing and planning her budget led to a feeling that she lacked control of her finances.

How Might We (HMW) Questions

HMW allow busy users with many responsibilities to keep track of their spending to provide them with a sense of control?

HMW facilitate saving funds for budget conscious users so that they can meet their saving goals in a timely manner?

Further Research

We conducted a competitive analysis to assess existing solutions to similar problems. We chose to focus primarily on budgeting applications but certain banking apps were also used as reference during the design process. The budgeting apps we looked at were Mint, Buddy and Wally.

Strengths

All three apps displayed a strong visual indication of budgeting progress through clear progress bars and use of color.
Buddy provided a clear and effective set up process to onboard users, although perhaps implemented a few too many pages in the process.
Buddy and Mint provided users with unlimted subcategories giving them the option for high levels of precision with their budgets.

Weakness

A potential weakness during set up for Mint and Wally was that users are encouraged to link the their bank accounts to the app without receiving a clear idea of the benefit they would gain, or the security measures in place on each app.
A shortcoming seen in Wally was the inability to use the app without linking a bank account, unlike Buddy and Mint which provide alternative options for users who may prefer not to sign-in with their banking info.

Ideation - Low Fidelity Sketches

To generate ideas we created low fidelity sketches and wireframes separately, two of us using the Crazy 8 method. We came together to share our ideas, and proceeded to choose the direction we wanted to take our designs in from there. The ideas centered around displaying budgets to users through infographic diagrams and progress bars, and allowing them to set savings goals.

User Flow

I developed a user flow to get a clear idea of all the paths a user could when signing up with the app and checking their budgets, as well as getting an idea of all the screens we would need for our wireframes.

Medium Fidelity Wireframes

We created wireframes in several stages. We started with low detail wireframes to generate ideas, to higher detail medium fidelity versions seen below, which integrated adherence to layout grids and included set gudielines for spacing.

Branding

Our goal was to create a brand identity that balanced professionalism and trust with a contemporary and warm feel. Inspired by the bank name Maple and through analyzing color psychology, we opted for a combination of orange and green. The former conveying warmth and confidence, and the latter being an easy and relaxing color on the eye. After a round of user testing and a design critique we opted to shift the primary color from orange to green, as the initial emphasis on orange created a somwhat overstimulating look that detracted from the professionalism of the app. Orange was adapted to display expense progress information, and signify interactivity in select instances. A shade of yellow was also chosen as an accent color, and to signify income. For our typography we chose two sans serif fonts; Rubik for titles, and Nunito Sans for body text. They striked a balance of professionalism and readability along with a subtle sense of warmth through lightly rounded edges.

Usability Testing

We conducted several rounds of remote testing with our wireframes at the medium and high-fidelity stages. At the medium fidelity stage, users were asked to describe how they would complete certain tasks verbally, and express any confusions or points of satisfaction they had. When the higher fidelity prototype was ready for testing, users could directly click through the app to complete certain tasks. At this stage we created a usability testing script which identified 7 key tasks for users to complete as well as a series of more qualitative questions concerning the apps color palette and ease of navigation.

Our process of gathering data during testing, included direct observation of user behaviours whilst interacting with the prototype, as well as taking note of their feedback in response to questions.

Post Testing Design Changes

In the header, arrow buttons to manipulate the budget date were changed to a calendar icon with a dropdown date selector. This made the intended function more clear to users.
The central budget diagram was simplified to be more easily understandable, utilizing a single color for expense subcategories.
In the navigation section, text was added beneath each icon to make them more understandable to users. The icons themselves were also changed to match their destinations more closely.

Prototype

For proof of concept and user testing, we created a clickable Figma prototype using our high fidelity wireframes. The prototype demo-ed the applications onboarding process, key functionalities, and navigation systems.

Key Learnings

The prototyping process provided an opportunity to think through user flows at a deeper level and and pay attention to the granular details. Moreover it gave a chance to accommodate different paths the user may take.
I learnt a lot during this process, namely the importance of user testing at different stages of design. Through testing we gained important feedback on the app's color scheme, its responsiveness, and the clarity of the budgeting information being presented through infographics. With that said we could have set up more testing metrics, to track some quantitative measures of the user's experience with the product.
For the purposes of this assignment we needed to prepare a Figma file to be handed off to a potential developer. In reflection, I could have made sure to organize my design file earlier in the process to ensure less work was needed at the end to make it ready.