I made an interactive version of the PFC "What to do with your money" flowchart

Meta

Hey all!

I'm a web developer and had some free time over the holidays. I decided to make an interactive version of our what to do with your money (wiki) flowchart over the last couple days.

You can find it here: https://pftools.xyz/canada/steps/

I found the flowchart very helpful, but a bit non-intuitive. It's hard to link people to different steps. It's also no good for people who have accessibility concerns, as images cannot be parsed by assistive technologies.

I'd love to hear some feedback about both the interface and the flow. Personally I find the flow (order of the steps) could be improved, but as I'm not an expert I did not want to overrule the communities decisions.

Things I'd like to add still:

  • Better UI (I'm no designer!) / animations
  • Descriptions per step of concepts, e.g. how do the avalanche and snowball methods work, links to budgetting sites, etc
  • Some sort of description of what the money steps actually are, and how they are meant to be followed.
  • Multiple languages - there are a lot of people that need help that don't speak English!
  • Multiple countries - many subreddits use a similar flowchart tool
  • Other tools - there's been some neat spreadsheets on this subreddit that may do better as web apps.

In course you're interested, here's the source code: https://github.com/stabback/pftools

Posted Dec 30, 2018, 3:38 PM UTC · edited

54253
CrasyMikeMOD•

This is really great. Normally we remove posts for self-promotion but this app is obviously non-commercial, and I sifted through the site and noticed you're not collecting emails, there's basically no branding to it, or anything meaningful like that.

So I'm going to pass on our self-promotion rule. Hopefully nobody objects to that.

139
killerofsix•

Very sensible! Good mod! <3

31
NeverANovelty•

Hell, I might even ask you to consider putting it in the sidebar

21
StabbackOP•

Thanks!

9
Brisbane88Quebec•

This is excellent! I would port it to mobile app and allow for secure account creation. I foresee you being able to grow this organically backed by the power and reliability of the PFC and r/PersonalFinanceCanada.

Ps. I work in software/tech (non programmer/eng) and would love to contribute to this project if ever the need arises pm me.

59
StabbackOP•

Thanks! I did think about account creation as something down the road, but I can't figure out what one would do with an account. It's kind of a one off reference thing. Thoughts?

10
BrianNortleby•

Maybe they could set goals and it could track and show their progress.

Accounts can add a lot of friction which may detract from your goals. I personally wouldn't touch a financial related app that wants me to make an account, but I'm pretty paranoid.

16
Brisbane88Quebec•

Well for one, this can evolve into a great tracker for someone trying to follow the PFT to the T to get themselves out of negative situation financially i.e. me.

Then, it can evolve into a proper budgeting tool that others fail to accomplish by being to granular, IMO. think Mint, YNAB, excel, etc... This should stay high level and reference the tools from the PFT. Ensuring anyone with any skill level understands at glance what it means to be "financially sound".

In the end there is no one magic formula to be financially safe, everyone's situation is different every situation can change not only month to month but day to day I am living proof of this. But i find they way this is laid out makes so much sense and keeps your eye in the prize without feeling overwhelmed.

5
[deleted]•

Yes. You send out interesting links every week or so. Then once in a while send out a sponsored article. You need money if it's going to be interesting to you long term.

2
BertRenolds•

Now, I am quite hungover. But my use case would be a progress tracker fake rewards and split it into a % wise goal thing.

1
RunninSolo•

If you’re going to do account creation but don’t have any experience, check out firebase, it’s what I use for my web apps when it requires accounts. All the verification goes through google.

1
jaymzthesupremeNova Scotia•

I would love the ability to go back a step!

20
StabbackOP•

Hmm, I had one, but removed it as the back button in your browser does the same thing. I can re-add! Thanks for the suggestion!

11
Sophrosynic•

I'm scared to use the back button in a browser for any kind of interactive process. Never know what's going to happen.

33
StabbackOP•

Interesting! I can see why - there were (and are) a lot of terrible web apps. I'll make sure to add it back in. I think i took it out because there was no good place for it to sit on mobile, and removing was easier than thinking that problem through.

5
NearlyFrozen•

If you follow this to a T, then you can guiltlessly spend any remaining amount on liquor and whores!

12
brownmagicianOntario•

in Canada both are available.

2
goldenappletrees•

Thanks so much for sharing! A great refresher entering the new year :)

9
kingKendou•

Op, I don't know who you are, but I will find you and i will give you a warm thank you hug!

7
The_Canada_GooseQuebec•

The chart is good, definitely lots of opportunity to expand.

6
CarribeanSensationOntario•

Question:

I’m looking at the “save up to 15% of pre-tax income” and was wondering; if I am using a combination of RRSP and TFSA’s, how do I treat the TFSA contributions?

So for example, say I already have 5% in my RRSP, and I am trying to contribute the remaining 10% in a TFSA. Say that 10% of my net income is 5k, and my marginal tax rate is 30% (for simplicity). I know that TFSA contributions are after tax, but in order to satisfy that “15% pre-tax” target, do I contribute $3.5k ($5k after tax) or straight up $5k?

Now I know that the more I contribute to retirement the better, but I just wanted to understand the language.

5
CanuckYou2•

I think you’ve made this a bit confusing, but I will try to help. If 10% of your net income is 5k, then 10% of your gross is ~$6.5k. So you should be aiming to save $6.5k in TFSA (or possibly just $5k if you want to rationalize that post tax contributions are more valuable, which they are).

I think you went the wrong direction when calculating the $3.5k, but that number doesn’t make sense to me.

1
CarribeanSensationOntario•

Sorry, I meant 10% of gross income. So using yoir explanation, I should target a $5k total contribution in my TFSA for the year.

2

I think this step should say "at least 15%". Not "up to 15%".

1
CurlyTemple•

Love it! I'd add a way to go back a step, and Dealer's Choice has a typo - "personal".

3
edroyque•

Purely from a UX perspective, I always imagine personal finance as a pyramid (like maselow’s hierarchy of needs) that you build from the top up. Visualizing your tool like that may (may) help, vs a flow chart.

3
KidUnidentifiableOntario•

Please sell a big ass poster of this flow chart! Step before "Create Budget" is "Do you have this poster?" lol

3
wayj99•

Nice job! 👍

2
draxema•

Hey, I'm a student in computer engineering and I am bilingual (French/English). I would be interested to contribute since I think it could be a great opportunity to learn. Pm me if you are interested!

2
StabbackOP•

Whoops, last reply got nerfed as I had an email address in it.

Navigate to http://pftools.xyz/canada and hit 'Contact me', let me know what you like doing! Alternatively, feel free to put a PR into the repo listed in the notes.

3
[deleted]•

[removed]

1
AutoModeratorMOD•

Your submission was automatically removed because it contains an email address. Please only use email addresses via the private message function. You can send a PM by navigating to the userpage of a user.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

1
LeakyLycanthrope•

Cool! I noticed two small issues though:

First, on Firefox, some of your symbols didn't load correctly: they just displayed as text saying "arrow_forward", "arrow_drop_down", and "check_circle", "star", "star_border". Maybe that's just my computer for whatever reason, though, I dunno.

Also, the first time I went through it, the question "Are you expecting any large required purchases soon?" didn't change after clicking the answer. The explanatory text changed, but not the question itself. Again, maybe the problem is my computer. I wouldn't know how to tell. Just thought you might like to know.

2
StabbackOP•

Thanks for the report! The first (icon names) may be a network thing, I'm loading them from Google's icon set. Unsure about the second, I'll watch it, thanks for the report.

3
TwerkingSeahorse•

Ahh material design + vue <3

2
smoreno85•

Yeah, hehe...

1
StabbackOP•

<3

1
13inchesflacid•

This is pretty neat, thank you!

2
trinity_girl2002•

Unfortunately for me I get this message when I open the link?

Object.values is not a function. (In 'Object.values(this.components[t])', 'Object.values' is undefined)

1
candidwaterfallAlberta•

I loooove it. Thanks for making it.

1
drumstyx•

Is this dialogflow or something similar?

1
StabbackOP•

Nah it's just a web-app. Dialogflow is neat though - I could probably port this over.

1
billypmacdonald•

Dave Ramsey would be proud

1