Problem

Users need to be able to track savings goals, so that they can better understand their progress towards achieving those goals.

Solution

Enable users to visually monitor their progress on any number of savings goals.

Requirements

I determined these requirements:

• x

IDEATE

Fitting in with the tree theme, I knew I wanted to incorporate a landscape of some sort. I also wanted to stick with greens and earthy tones. I drew the hills at random at first, but drawing a vertical line down from the foremost hill mimics an accounting ledger.

I determined a need for two single screens: one for a goal in progress and one for a goal that has been achieved. This was important because if the goal is in any state of progress other than 100% (whether 0% or 50%), the screen could look identical except for the progress bar and number of trees. Now when a goal is complete the progress bar changes color.

I drew inspiration for the filters from standard iOS design. I also borrowed some elements like the line dividing the default selection from all the other options and the lines preceding the options.

PROTOTYPES

The top portion of the screen has home and settings options, as well as a filter to view different goals. This screen displays a singular tree because it's not a screen focused on saving, i.e. there aren't any goals to progress towards here.

The main content below that is a list of all transactions in your primary checking account. If you wanted to view other accounts, you can switch into them via the button in the footer. You can also modify transactions (tagging, labeling, hiding) and manage your goals from the footer.

One point is that there are two versions of the single goal screen. There is one which displays progress to a goal with every transaction, and one that (so far) has only highlighted reaching the 50% mark. I liked both so I considered this to be a potential setting the user could change.

Notice there are half of the amount of trees in the left screen as there are in the right screen. I drew guides over these screens when arranging trees so these trees should actually represent 10% increments.

If you click on the goal you are already viewing, this module will simply close. If you click on "Select Goal:", it will return you to the homepage. If you select another goal, it will navigate to that goal's page.

ITERATIONS

I consider this project finished as I've already spent more than the "recommended" 24 hours on it (it is supposed to be a daily challenge, after all), but that doesn't mean that I can't see next steps:

• Revisit achieved progress bar styling

• Revisit transaction date rows styling

• Revisit iconography (especially entries in the footer)

• Revisit top/bottom text margins

• Consider adding more information about the data presented (especially homepage)

• Consider adding the grain texture to the hills

• Consider adding more diversity in color

• Test contrast of every element (did this on an as-needed basis)

• Test multiple device sizes (this is iPhone X)

• Design for scenarios with longer text goals and transactions