Design Bogleheads Growth Calculator

Feature Overview

We're building a new mini-tool: Bogleheads Growth Calculator.

If you're unfamiliar with the Bogleheads method, here's an article on it. But the basic idea is you pick 3 types of funds (total stock market, international stock and bond markets) and allocate each of them varying percentages to have a solid outcome of both growth and stability. But how you allocate between the three is what the calculator is helping you understand.

This issue is specifically for the design side of this mini-tool. The deliverable is a Figma file.

Use the Maybe Mini-Tool UI Kit as a starting point: https://link.maybe.co/ui-kit

You can see current mini-tools here: https://maybe.co/tools

Specs

NOTE: This is ONLY for the design of the tool, NOT for any code. That will be a separate issue + bounty.

With these types of calculators, the design can quickly become unusable with dozens of form fields. Our goal is to create something that's the right balance of "simplicity" and "power", but where that inflection point is certainly can vary.

We'll want these fields/inputs:

Total Stock Market dropdown
Total International Stock dropdown
Total Bond Market dropdown
Invested amount

Design elements

Form inputs (drop downs, slider, lock)
Graph showing past 25 years of performance
Tooltips
Returns %
Risk Level
Final value

We had this calculator on the previous Maybe marketing site. Obviously, the look doesn't match the new site, but it gives you an idea of what we're after.

Bounty

There is a $250 bounty on this. These "design" bounties are new for us and for Algora (who helps facilitate the payment of these). So, understand we're in the "experiment" phase of OSS design. 🙂

See the Algora comment below on how to submit your work.

My assumption is we'll end up with quite a few submissions, so as we figure out what OSS design work + bounties looks like, we'll be refining criteria for choosing submissions (and doing a better job at specing out the work).

~~## 🎨 $250 design bounty • Maybe~~

~~### Steps to solve:~~ ~~1. Start working: Comment /attempt once you get started~~ ~~2. Submit work: Comment /claim https://figma.com/path/to/your/file here to claim the bounty~~ ~~3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts~~

~~Thank you for contributing to maybe-finance/marketing!~~

~~Add a bounty • Share on socials~~

Attempt	Started (GMT+0)	Solution
🟢 @asr2003	Jun 14, 2024, 4:20:16 PM	#0
🟢 @claudey	Jun 14, 2024, 4:44:01 PM	#1
🟢 @eduayme	Jun 14, 2024, 9:22:46 PM	#1

/attempt

Options

Cancel my attempt

/attempt

Algora profile	Completed bounties	Tech	Active attempts	Options
@claudey	1 maybe-finance bounty	CSS, JavaScript, HTML & more		Cancel attempt

/attempt

Algora profile	Completed bounties	Tech	Active attempts	Options
@eduayme	2 maybe-finance bounties	Blade, Jupyter Notebook, Vue & more		Cancel attempt

Great work everyone @claudey @eduayme @asr2003 Claudy's work:

eduayme work:

asr2003's work:

From these three designs, @eduayme and @asr2003 designs are close to the issue requirements. @eduayme Good to have you again with the design issue and good work. @asr2003 It really looks similar to the working functionality of the existing one and from the rest I feel it close to issue requirements by incorporating the Tooltips too. Great work @asr2003

Thanks everyone for the work on this! Ultimately going to go with @eduayme's solution. However, @claudey there are a few UI elements that we'd like to merge in to the final product, so I'll send over a tip as well for that.

🎉🎈 @eduayme has been awarded $250! 🎈🎊

🎉🎈 @claudey has been awarded $50! 🎈🎊

@Shpigford Any feedback and tip for my efforts for the design will be greatly appreciated :)

maybe-finance / marketing