client work
Finabl is re-inventing investment portfolios to develop beginner-friendly educational investing experiences for young adults.
Finabl is a fintech startup empowering the next generation of investors to make smarter financial decisions through a social, educational, and beginner-friendly experience.
my role
Over fall 2024, I worked as an end-to-end designer in a team with engineers & co-founders. I was in charge with all facets of product experience, from user experience, creating the design system for UI and branding, user testing, and implementation of key features.
problem
Investing has a high barrier of entry - in both learning and financial risk.
How might we create a low-risk and supportive environment for young adults to learn how to invest money?
90% of individuals see investing as the best way to make money.
But out of those, 74% haven't started due to various obstacles.
And only 18% of those can answer basic financial questions.
Solution
A personalized, learning-focused platform for young adults to invest money.
home
Consistent progress tracking
A dashboard on home shows overall progress over time & breaks down progress in specific portfolios
Structured course learning paired with real-world simulations
Users can learn through structured course content while learning from real-world stock information through daily quizzes and simulation portfolios.
learning hub
Marketing moment of the day quiz
trading portfolios
simulation portfolios
Observing stock behavior through multiple different portfolios
Multiple different trading portfolios and simulation portfolios promote experimentation while setting clear benchmarks for learning.
Engaging ways to view stock information
Different visual diagrams for learning about stocks provide engaging ways to learn about stocks and companies in context
stock comparison feature
portfolio pages
social hub
competition page
Encouraging learning through collaboration with peers
App supported competitions, collaborative portfolios and other social features create a sense of community and support through the learning process.
process
research synthesis
Key Insights
1.
Feeling overwhelmed with complex subjects and information overload means potential learners struggle knowing where to start learning.
2.
Perceived high-risk situations causes stress that discourages interested learners from ever entering the stock market.
3.
Learners feel a disconnection between what they learn and real-world investing situations – real world examples of concepts in action generate more insight.
4.
Collaborative activity with peers creates a safe learning environment while encouraging learning.
design goals
Using our insights, we created three design goals that would guide our design process.
- Creating situations where complex concepts could be broken down in small parts
- Friendly and approachable branding & interface
- Encouraging real-world learning via low-risk situations
Consolidating repetitive design features
Throughout the interview and feature brainstorming process, the idea of creating different social features often came up - collaborative portfolios, competitions, clans, chatrooms, etc. It came to a point where the social aspect of the application had so many features it felt more important than the rest of the app.
In discussion with the developers and founders, I revisited the design goals initially set for the app and helped discuss which features could be removed and consolidated to increase the efficiency of each feature.
In discussion with the developers and founders, I revisited the design goals initially set for the app and helped discuss which features could be removed and consolidated to increase the efficiency of each feature.
final information architecture
usability Testing
Refining features via semi-structured interviews
After creating mid-fi prototypes, I conducted A/B testing via speed dating interviews. We chose to test the main features within the app along with features where there previously was discussion between the developers and I on how something should be implemented.
Through testing, we gained overall design insights that we could implement to all pages.
- There needed to be greater distinction between the states of different stocks
- Different types of portfolios (ex. simulation vs. trading) needed to have fundamentally different UIs and ways of accessing them - or else confusion was easily created
- Reminders for all types of goal-setting needed to be clearer for users to remember them
Page experimentation + ideation
After creating mid-fi prototypes, I conducted A/B testing via speed dating interviews. We chose to test the main features within the app along with features where there was contention between the developers and I on how something should be implemented.
Creating distinction between similarly named features via different interactions
There was confusion between the difference between real trading portfolios vs. learning simulation portfolios. To create more distinction between the two, I changed the card UI for how both are accessed and used.
Sectioning information to reveal more data as needed
Initially, all information about a portfolio was located on one screen - this felt overwhelming to some users and also created confusion about where certain key information was.
Organizing portfolio page into three separate pages - an overall overview, the stocks in the portfolio, and trading history felt less overwhelming.
Organizing portfolio page into three separate pages - an overall overview, the stocks in the portfolio, and trading history felt less overwhelming.
Creating the social hub - finding the best way to group related but different features
We A/B tested with how the chat, competition, and profile were arranged in the social page.
Detail A: Keeping each feature & the profile on a separate tab
Detail B: Having a social “hub” that centered around a profile
Insight: Detail A created an unnecessary step in the UI, while detail B made it difficult to comprehend the purpose of the buttons leading to features.
Solution: Having a central hub that centered around the additional features in the page. I receded the profile to a separate page since the user icon & location was a common enough design pattern to signal to users what it’s purpose was.
Detail A: Keeping each feature & the profile on a separate tab
Detail B: Having a social “hub” that centered around a profile
Insight: Detail A created an unnecessary step in the UI, while detail B made it difficult to comprehend the purpose of the buttons leading to features.
Solution: Having a central hub that centered around the additional features in the page. I receded the profile to a separate page since the user icon & location was a common enough design pattern to signal to users what it’s purpose was.
microinteractions
Small moments of joy through character animations
A cute character for the branding mascot creates a level of approachability for the app while adding opportunity for engaging UI animations.
impact
Finabl received a few hundred signups within three days of pre-launch.
The app is currently in development and will be launching soon!
The app is currently in development and will be launching soon!