A personal project I’ve wanted to build for many years now is a system to get people thinking about the value of a proposed spending, by showing examples of what else they could get for that same amount of money.
Originally I wanted to be able to enter what you wanted to buy and the price and then show alternatives for less and the amounts you could get for that same cost. But figured that it would be a whole task in itself to gather the data so I put the project on hold. For years….
Eventually I realised that I could invert it and instead ask for the amount you are thinking of spending on that particular category and then show a simple list of pre-selected items. This way I can just make up examples of purchases based on real products or services and include them in the tool completely statically. Or host them in a web API or something.
So now I had a feasible idea finally, and an existing React project I could put this into. Following are a few iterations of the design.
First iteration
I started with generic minimum and maximum costs for each item/service with an idea of the amount left over for snacks or the appropriate “side purchase”. I included a scenario where you could take 20% out and keep extra for side purchases. I realised that this is kind of boring and hard to follow.
Iteration 2: Tabular design
So I moved the 20% scenario into a column, adding emojis and alternating row background colours. See how it’s just more visually interesting and slightly easier to follow. But it’s not very useful actually.
Iteration 3: itemised
I realised that if I explicitly included examples for each kind of cost, like “adult ticket”, “child ticket”, “Netflix with ads”, “Netflix Standard”, “4k Netflix”, it’s clearer, more useful, and actually easier to code because the grammar is easier to write inside the string interpolation.
Iteration 4: legibility and styling
By now I’ve just made some wording and styling improvements. I also corrected the CSS imports in another area of the app so now I have to fix the form layout here but I’m having issues with the imports so I’ve put the project away for this coding session!
A week or so later, I finally fixed the form layout a bit. It’s not visible but my next improvement has been to make the categories and data dynamic so I only need to update some JSON files to make a new category. Since it’s the same React component now the form keeps your entered cost amount.
If you would you like play with the current product, it’s available at Money-Choices.info.