Monarch
An innovative, AI driven investment playground designed to empower beginner investors and grow with them as they learn.
Mobile
Winner of Chegg Skills’ Spring 2024 Hackathon
Project Overview
This project was the subject of the Chegg Skills/Thinkful Spring 2024 Hackathon. Groups of seven, including one UX/UI Designer (myself), one Data Analyst, and five Software Engineers, were given the following prompt and had seven days to create a solution to present to a panel of judges:
Design and develop an innovative and AI-driven personal investment playground to empower users to explore options/strategies and make informed decisions to achieve their personal financial goals.
The Problem
How might we design an investment site that gives users of all experience levels the opportunity to reach their financial goals while utilizing automated, personalized investing?
Design Process
Research
Competitive Analysis
What solutions already exist and how effective are they?
User Survey Research
What do users care about when they are investing?
Research Goals
Determine what features are most important to users when choosing an investment application
Determine how existing investment sites solve common problems that users have when investing for the first time
Determine what audience we will be targeting with this site.
Gain insight into the common pain points users face when choosing investment strategies.
Understand the overall process of investment to best understand the overall structure of the site.
Competitive Analysis
What solutions are already out there?
I conducted a competitive analysis of existing direct and indirect competitors in order to understand how they approach the problem and determine their strengths and weaknesses, as well as any gaps that currently exist in the market.
Overall Findings
Betterment
Direct Competitor
Pros:
The investing tools focus on three options: Invest, Save, and Retire, to allow users to choose specific goals.
AI investing tool that allows users to choose from a set of pre created portfolios based on their answers to certain questions.
Investment amounts and frequency are adjustable at any time.
Cons:
There does not seem to be a manual investment option for more experienced investors, rather relying entirely on the AI investment tool.
The historical performance tool is focused on the entire portfolio rather than giving information on specific stocks.
Acorns
Direct Competitor
Pros:
Investment amounts and roundups can be changed at any time by the user.
The AI assistant is greatly focused on and utilized to appeal to beginner investors.
Cons:
Learning resources are only available to users on the phone app, not through the website.
Manual investment options and individual stock information are only available to premium members, even though base members are already paying a membership cost.
SoFi
Direct Competitor
Pros:
The site places an emphasis on multiple ways to invest.
The site dedicates a large amount of its space to the Robo investment assistant.
The site feels like an authority on investing and feels friendly to people with little investment knowledge.
Cons:
AI investors are able to select their risk levels, but there is little to no option for people who want to manually invest.
Individual stock information is scarce to none.
Copilot
Indirect Competitor
Pros:
There are a wide variety of account types and expense tracking options that allow users to save for different goals and visualize their progress.
Shows chosen stock performance based on user's preferences.
The entire premise of the app is to track finances, including investments, but not limited to them.
Cons:
It is unclear from the website landing page whether there is an automated investment assistant, as that is not the main emphasis of the site.
Very little emphasis on investment education
User Survey Research
What do users want?
Given the tight timeline for the hackathon, I was unable to deploy a survey for users to take. I did, however, research existing survey results on the investment behaviors of people in the age range of our main persona, Keith, who you will meet soon.
The main source of this information can be found here: https://www.cnbc.com/2023/08/27/not-just-math-and-numbers-young-people-are-willing-to-sacrifice-returns-for-esg.html
Survey Insights
of gen Z investors place importance on creating investment portfolios that align with their values.
of gen Z investors are willing to accept a lower than average return if it means that they can ensure they are investing in companies whose values align with their own.
Key Takeaways
Younger users, who are most likely to be beginner investors, care about knowing where their money is being invested more than the return they might get on those investments.
Automated Investment tools often do not give any control over what companies are being invested in, so giving that control to users is important to address.
Refine
Building a better resource
Using insights from market and user research, I began to refine the target audience and prioritize the features and information that would make up the user flow of the prototype.
Persona
Based on the information given at the beginning of the hackathon and the research performed, a main persona was created to give focus to the team as the website was designed.
User Stories
Based on the persona and the insights from user research, three key user stories were developed to guide the flows that would be created for the website to ensure that it is built with user needs in mind.
User Flow
Creating an Account Your Way
This is a user flow showing how users can create a Monarch account and set up their first investment account using either the Investment Assistant or Manual Investment routes.
Site Map
Creating Structure
This is a diagram of the pages that will be required to fulfill the selected user stories, as based off of the user flow.
Lo-fi Wireframes
Using the main user flow as a guide, I began shaping the website through wireframing. In this step, I established the main layout of the site using a mobile first approach to ensure that all best practices were followed when creating the site.
Landing Page
Sign Up/Investment Account Creation
User Dashboard/ Account Overview
Test
After prototyping the lo-fi wireframes, I conducted 5 unmoderated usability tests to evaluate the overall usability of the design and to uncover any pain points in the design.
Testing solutions with users
Usability Test Tasks
Scenario: You are Keith, a 25 year old freelancer who wants to jump into the world of investing. You have never done any investing before, so you are looking for a website that helps you make informed investing decisions while still allowing you to grow as an investor. Your first priority is setting up a savings account.
You have come across a website that seems beginner friendly and decide to give it a look.
Task 1: Explore the landing page of the website without clicking on anything yet.
Task 2: Sign up for an account, establishing a 5% APY Savings account using the Investment Assistant. You are going to star out investing $200 every two weeks.
Task 3: Explore the dashboard. You decide you want to read a little bit more about investment strategy while you're here. Look for resources you can use.
Task 4: An unexpected expense has come up and you need to change your investment amount and frequency. Change your savings account deposits to $100 every month.
Task 5: Your parents gifted you some money to help you get started investing. You want to invest it in a specific stock. Open a Standard Brokerage account and do not use the Investment Assistant. Manually choose a stock to invest in and set up your account to deposit $100 every week into it.
Test Results
Successes
100%
of users were able to sign up for an account from the landing page and set up a savings investment account.
100%
of users reported that finding learning resources was relatively easy and that the flow was as expected.
Improvements
50%
of users were unable to successfully edit their investment amount and frequency of the existing savings account.
25%
of users were unable to create a new investment account when prompted.
Iterate
Improving based on feedback
Based on the results of usability testing, improvements were made to several aspects of the website to increase usability and alleviate pain points.
Improvement 1
Investment Amount and Frequency Editing
Pain Point:
During usability testing, users had a difficult time editing the set investment amount and frequency on their existing accounts.
Solution:
The investment amount and frequency edit button was moved to the top of the screen and separated from the other preferences for the account.
Improvement 2
Recapturing Unnecessary Information
Pain Point:
During usability testing, users expressed frustration that when making a new account, some information was recaptured that would stay consistent across all accounts.
Solution:
Some personal information was moved to the ‘My Profile’ section to allow users to adjust it for all accounts at once.
Branding
Taking Metamorphosis from Nature to Finances
Taking inspiration from nature and the concept of transformation of a small investment into a large account, a branding kit was created to inspire a fresh look and decrease the feeling of intimidation that often comes with investing for the first time.
Style Guide
The branding for Monarch took inspiration in tone and color scheme from the Monarch butterfly in its natural habitat. The goal of the branding kit was to create a feeling of ease and comfort within the user, as the target audience is beginner investors.
Sans serif fonts were paired together to create an easy to read site with a modern and approachable feel.
Hi-fi Wireframes
When combining the lo-fi wireframes with the established branding, I wanted to create a website that felt light and approachable while still giving users a sense of security and trustworthiness. Simple vector visuals kept the site clean and uncluttered and allowed for the necessary information to be front and center.
Sign Up/Investment Account Creation
Sign Up/Investment Account Creation
User Dashboard/ Account Management
User Profile/Learning Resources
Hand-Off
Bringing it to the Team
Once the high fidelity mockups were created and prototyped, the figma file with all of the assets created for the project were handed off to a team of five software engineers to code into a workable prototype.
The Solution
A high fidelity prototype of a mobile investment playground created to scale with the user from beginner to pro.
Development Team:
Data Analyst: Jennifer Clifford
Software Engineer: Ahmad Abusaif
Software Engineer: Cory Morgan
Software Engineer: Francisco Alvarado
Software Engineer: Matthew Kulka
Software Engineer: Rouzbbeh Vahdatiasl