OMA: One Month App

Initial design mockup

(Click to enlarge)

Take a look at this mockup of the initial design. Here's a few notes:

• Sticking with the initial sketches, I've kept with the basic idea of a grid structure.
• This mockup shows a simple example of what a company's cash flow could look like. It shows some fake income and expenses to give the basic idea of how things will function.
• You'll notice that there is a span of months at the top giving a good range for understanding and viewing your cash flow. The arrows to the left and right will allow you to quickly scan back and forth through the months.
• The top blue bar gives your cash on hand (cash at the beginning of the month) figures.
• Directly below the cash on hand, you'll find your income for each month.
• To help keep things organized, there will be expanding and collapsing options for the income, expenses and each company. This will be done by clicking the arrows next to each item. Currently the income is expanded and the expenses are collapsed.
• When entering a new income item there will be the option to give it a potential of it actually coming in. At the top right there is slider allowing the ability to show jobs according to this potential. Slide the blue circle left and right to view the income according to its potential.
• Quickly add income and expenses by clicking on each link to reveal the forms.

A few things we're still considering:

• We're still considering the best way to edit a specific project's or company's income. This could be handled with a Javascript rollover that popped up an edit link to the left of the title or by simply putting an edit link next to each item.
• The graphic above shows all positive cash flow. If a month has negative cash flow, we'd like to display those columns differently without being too overbearing or obnoxious.
• We're also still playing with showing past, present and future months. Above, we've shown the past month (September) grayed out, and the current month highlighted in green.

So, that's the gist of the design. This mockup is still in Photoshop at this point, but my next step will be to start building out the basic layout in HTML/CSS and start digging into the different screens of the application. During the build out process things are always tweaked and refined as we get a more clear example of how things will really be functioning. We'll be sure to keep posting screenshots of our progress. We've tried to keep things simple and to the basics of what cash flow is about. We believe this is the best direction. Let us know what you think.