MapleGrove
Summary
Karl, chief innovation officer (CIO) of MapleBank, a fully online bank in Canada, is looking to expand its market by creating a new product focusing on one outcome with an onboarding that clearly explains the new service. Our team aimed to beginner investors by designing an investment app that helps build confidence in users to invest with automated investing features and a virtual advisor.
Timeframe
6 weeks
Role
Research, Wireframing, UI/UX Design
Chapter 1
Research
The Problem
Our team was given a broad freedom to design a new app. Based on the data provided by Karl, we narrowed our ideas down to these 3 topics: financial assistance, savings and investment. We noticed that people in our entourage were not investors, so a decision was made.
Many people don’t know where to start when it comes to investing. They are often overwhelmed by the choice of what stocks to trade and deeply worried about the risk of losing money. This led us to think, what if people can automatically invest while still enjoying their social life?
How do banks handle investing flow?
Competitive Analysis
Onboarding
We first identified similarities in the onboarding between different apps (not related to investment) to understand what makes a good onboarding experience. Here are some common points we found:
- Progress Tracking
- Personalization questions
- Interactive walkthrough
Investment apps
We also analyzed investment apps to understand their strengths and weaknesses, allowing us to see design opportunities for our app.
Wealthsimple
RBC
Desjardins
Strengths
They are easy to use and navigate and provided chat support with virtual assistant and appointment with advisors.
Weaknesses
Their investment features were more catered to people who have some knowledge, offering little to no guidance when opening an investment account.
Opportunities
Providing a step-by-step guide combined with virtual assistance when opening an investment account can help users feel more confident about their choice.
Insights
Personalized Experience
People are more motivated to complete a task when they feel supported with a tailored interface.
Professionalism & Trust
When it comes to money, it is important to build trust so that people feel safe committing their assets. But is there a way to make it more approachable than traditional bank apps?
Jargon-Guided
While a jargon-free experience can help people make quicker decisions, educating them on financial terms keeps them engaged in the long term and helps them become familiar with their overall financial environment.
Chapter 2
Define
Target Audience
To help us build a new product, Karl provided different potential new customer personas. Because we wanted a target user who navigates diverse financial situations, we selected Monique.
Designing for Monique helped us prioritize the key features needed for the app. Specifically, we focused on creating an onboarding experience that clearly explains investing to beginners. This leads us to ask:
How might we...
make investment easy for beginners so that they feel confident investing their leftover savings to grow their wealth for future plannings?
tailor investment recommendations so that users feel the app reflects their personal goals and risk tolerance?
make investing approachable for users with zero knowledge and who do not like to take much risk so that they can get the benefit without managing portfolios?
Chapter 3
Ideate & Sketch
What are the most important elements to be able to provide personalized investment recommendations? What do beginners need to have a good onboarding experience? Will users go back to previous steps?
Onboarding flow for beginner investors
User flow for opening a new investment account
Low-Fidelity Wireframes
After our research, we drafted our ideas and insights into low-fidelity wireframes, focusing on these core features that will help beginner investors:
Virtual Assistance
For an approachable experience, users will be guided by a virtual advisor during the onboarding.
Jumping Back
On users’ second time opening an investment account, they have the flexibility to return to previous steps for a more fluid navigation.
Real-Life Examples
To help beginners understand the app’s value, benefits to invest with relatable examples will first be shown on the splash screen.
On-Demand Support
Help and guidance will be available at users’ fingertips for a smooth and reassuring experience.
Chapter 4
Branding
To make the app more welcoming, we defined MapleGrove’s brand identity: trustworthy, dependable, and friendly.
Colours
We used midnight blue to make the app feel safe, strong and professional while bringing a bright orange as an accent to add energy. We also added neutral colours to balance the palette.
Typography
We chose Zalandos Sans for headings to bring a modern, strong and secure feel, and Nunito for body text, to give a friendly feeling with its rounded shape, giving the app a perfect balance.
Style Guide & Components
To translate the brand identity throughout the app, we maintained consistency by using soft border radius instead of sharp edges to reduce the intimidating feel of traditional banking apps and a curated colour palette to ensure cohesiveness across the screens.
Logo Design
The logo features a modern maple leaf with three bars, representing investment performance. To show stability and growth, the wordmark utilizes a contrast of regular and bold font weights.
Virtual Advisor
To make our app more approachable, we introduced a virtual advisor named Ava. She offers quick answers and support, so beginners feel safe and reassured.
Chapter 5
Usability Testing
Our goal for the usability testing is to see how users feel about the onboarding and how easy it is to open an investment account.
User Feedback
Overall, we had positive reactions regarding the onboarding and the app in general. But, user feedback highlighted several areas that still felt complex, proving we had more work to make the app beginner friendly.
“Ava is full of character!”
“I want to invest with this app.”
“I would like help when I’m unsure during the onboarding.”
“Didn’t I already create an investment account during onboarding?”
Iterations & Refinement
Adding more context
To help beginners understand the different options available during the onboarding, we added more description supporting the labels.
Including chat support
For a more seamless user journey, we integrated Ava, our virtual advisor, to support throughout the onboarding flow.
Refining the onboarding
To prevent user confusion between onboarding and account creation, we fully incorporated the investment account setup directly into the onboarding flow. We also bolded key phrases within Ava’s questions to create a strong visual hierarchy, allowing users to quickly scan the information.
Changing “Help” label
Because the “Help” label is misleading, often confusing users who were looking for technical troubleshooting, we changed it to “Advice” to better represent the content on that screen.
Takeaways
This was a challenging project as we all had small knowledge on investing and little time to invest into deep research on the topic. In my case, I learned more about components and prototyping using conditions on Figma.
During our usability testing, we encountered an interesting insight regarding what actually motivates a beginner to start investing on their own. If we could redo our project with more time, we would conduct user interviews and research on investments.
Nice-to-Haves
Here are some features we would like to expand on if given more time, including that insight we got during our usability testing.
Holdings of Friends & Family
Beginners are more likely to take the first step in investing by themselves when they see their peers doing the same. Adding social proof, such as to see others’ market trades which can reassure beginners that they are making the right choice.
More on Real-Life Examples
Expanding relatable examples beyond the splash screen by including context-driven investing choices. For example, users can set a trigger to invest $20 every time it rains and they stay at home. This further reduces financial anxiety on beginners, making the experience more accessible rather than intimidating.