What: Phases web page design
Date: 5 April 2014
Learning Outcome Statement (LOS):
- Think, Design and Build a conceptual app
- Sharpen design skills (from wireframes, to icons to later implementation?)
- Financial Planning sense
Description: Right. I got tired of last month’s blog based designs; Home Post About pages in the header, Lorem Lorem Lorem pages in the footer and some design in-between. The layouts were too vanilla header-body-footer. I wanted to stretch myself this month do something different. So I’m kicking off this month’s challenge with a purpose: to build web design x-financial planning app.
Focus here is on personal financial planning app from the user’s perspective. It’s geared towards answering questions like “should I take that holiday?” or “I need emergency money for..” So here’s the layout:
- Planned Events are upcoming events with financial impact
- Current Position is your financial position
- Changes is where you enter, simulate and save changes
- Economy Local / World / Trends provides macro view
Changes is the main focus where the user enters some financial numbers for any given change (planned or unplanned). The output presents the impacts to their current position and to their plans (planned events). In addition the user can check the impact on the 2 other future phases (Stabilisation, Retirement – assuming you’re in the Growth phase initially).
If it’s a future spend, then saving the change moves that spend to the Planned Events and immediately moves your financial position accordingly (tech-o: Change is like staging prior to a commit).
The Economy section provides the state of play at a Local, Regional and World level (with trends). The driver? Check the impacts of your financial decisions now before committing.
Here’s more, visually:
Listened to this while creating this: Red Hot Chili Peppers – The Uplift Mofo Party Plan. This is so random as I really don’t know what possessed me to pickup this classic album (their best, IMO). What does Me and My Friends, Backwoods, Skinny Sweaty Man, Love Trilogy and others have to do with this exercise? Well did you notice the splashes of deep orange? Yes, the music brought colour!
Comment: I’m only ever going to design that 2nd page in Codepen.io if this design makes the cut. The other pages need more serious thought and to be honest, I’m cramped with time and it goes against my LOS.
(which is the reason why I held back some other major ideas for this.)
- Thought, Designed and Mock-up built
- Design skills sharpened (the icon design was kinda fun)
- I held back so perhaps I’ll expand more another time
About this project: Initial blog located here and here’s how implemented last month’s winning design. Basically this is a series of designs – 3x a month, beginning March and ending in May. If I have my maths right, that’s 9 designs between March and May with the 3 best designs to be coded here.
And I’ll be storing my collections here.
Until the next design, may your day be filled with colour!