UX Design

Full case study

We started by analyzing the data provided to use by MapleBank. We were provided with five personas, as well as statistics about the current population using MapleBank.

Following this, we wrote down some of our initial assumptions surrounding Canadian neobanks and what we’d need to do to stand out.

• “Clear and easy registration forms” meant having clear instructions and a clear call to action.

• To stand out in the neobank space, we need to offer customization options throughout the app.

• To get users excited about savings we would need to find a way that users can easily visualize progress to make it more tangible.

• Individuals already have savings set aside and would be using our app as a means to visualize their savings plan.

• Neobanks are not very popular in Canada

• Individuals that use Neobanks want the user experience to be different than if they were to sign up with commercial banks (i.e less tedious forms, easier approval) 

 

Once we had finished that, we also did a competitive analysis on similar companies, like Koho and Wealth Simple. We wanted to see what other banks and neobanks were doing to see how we could stand out in the banking space. What we realized by doing the competitive analysis is that most banks provide very little information about their products before creating an account. This can be frustrating for users who aren’t already aware of what those products are.

We then started defining the problem. To do so, we chose a primary persona based on the provided personas. We opted to focus on Monique, a woman in her 30s with multiple income streams and many saving goals. We mapped a journey map to learn more about how she would interact with our app. We also created a storyboard to see her frustrations, and how our app could solve the problem. 

We reviewed our initial assumptions after this, and were able to validate three of them:

 

• “Clear and easy registration forms” meant having clear instructions and a clear call to action

• Users will be drawn to our app because we offer a lot of customization options throughout the app

• To get users excited about savings we would need to find a way that users can easily visualize the process to make it more tangible

At this point, we established what our key criteria would be for creating a successful app. We considered users reaching their dashboard for the first time (setting up a goal and creating an account on the way) was the “aha” moment. Our goal was for users to reach this stage in under 2 minutes.

Following this we started ideating: we worked on a user flow to start to see what the user onboarding would look like. We highlighted in gray our happy user flow, but we made sure to provide the necessary screens incase we had an unhappy user. 

Following this, each of us created low-fidelity paper wireframes. We then discussed and opted for the frames that best fit what we wanted to create for our primary persona.

We turned the chosen frames into medium fidelity wireframes and started our user testing.

We started by doing a usability did on 3 users. We had a script and asked questions that gave us both qualitative and quantitative data.

After reviewing the feedback, we created higher fidelity wireframes.

We did a design critique with 3 fellow designers to get an idea of how users felt about our color and font choice.

From this point, we finalized our UI kit. Most of the feedback on our design was very positive, but we did hear that we were using too much green. It was based on this design feedback that we opted to change our CTA color to orange: orange is very visible so it helps users know where to click, and it also evokes feelings of enthusiasm and energy.

Our other color choices were based on color psychology:

• We opted for green as our pimary color as green is known to be easiest on the eyes and it has a relaxing effect. That’s a mood we’d love our users to get into when checking their savings goals!
• We chose blue for our headlines: it’s known to have a calming and tranquil effect and darker blues like this one stimulate the mind into thinking more clearly.

We ran a second usability test in class with 3 new users, which we recognize is bias as we were asking fellow UX designers to review our app. In this case, we had prototyped our wireframes and asked users to complete specific tasks.

This round of feedback gave us a big insight: when we asked users to add funds to a specific goal, they naturally went to the goal page (despite the fact that “add funds” was a navigation option). Based on this, we gave users the option to add funds directly from the individual goal pages.

We applied additional changes based on this test and prepared our prototype for our final test. Our final test was a usability test of 3 new users with a script that we changed to include additional prompts and questions based on the new features and elements that had been added.

In all of our usability tests, users were able to get to the “aha” moment in under two minutes. We were hugely proud that we were able to get users to the “aha” moment this quickly.

The big idea

We added gamification to our app by including badges. User was encouraged to take steps to receive new badges: anything from adding additional funds to their goal, to setting up their profile, to completing their goal. This feature was very popular in our user tests as they felt that they accomplished something regularly by using our app.