We’ve hit a major milestone with iBank for iPad — we are now officially in beta. I realize that the “beta” milestone means different things for different people and companies. For us, it means we are feature-complete and will only be fixing bugs before the 1.0 release. So I’m here today to share with you in more detail what this app does and and what it looks like. In earlier posts (here and here) I showed some screenshots and mockups, which have changed dramatically for the final release. And since I’ve talked quite a bit about our Direct Access feature and how it enables you to automatically download your data from thousands of different financial institutions, in this post I’m going to focus more on the final user interface and user experience.
Top Portion of Overview Screen. The first screenshot I want to talk about is from the top portion of the overview screen:
At the top is the brown “leather binding” which holds the “pages” of your financial book with three buttons: dynamic navigation, Settings and Add. Then there is the Summary section which shows handy summations for your various accounts, assets and anything else you are tracking in iBank. Reminders, for v1.0, shows you scheduled income and bills. The Budget section is a brand new way of displaying how you are sticking to your budgets. Not only can you tell how well you are following your budget today, but you can also see when you’ll get back on budget if you are off. Notice that the “Budgeted” line has various jumps; these correspond to various bills that you are expecting for the month. The rest of the upward slope is determined by spending on non-scheduled items, like groceries, or household spending. I’m very excited about our new budgeting interface. It is, in my view, the best visual representation of a budget I’ve ever seen.
Transaction Editor. I want to talk about a different user experience that is ubiquitous throughout the app; it’s what we call “editors.” Editors are a way to, well, let users edit their data. In some iPad apps this is done via a popover or modal assistant. These are reasonable approaches and easy to implement, but they don’t provide a great experience. So we’ve gone the route of bringing up a custom “sheet” with customized keyboards, similar to what you find when editing cells in Numbers.app. For example, here is our editor for non-security related transactions:
To edit any item in iBank you double-tap it. Editors work by tapping the field you want to edit (denoted by dashed underline) and by then tapping a value from the custom keyboard below. In this example, I’ve tapped category and then chose “Groceries” from the category keyboard. Please note how much easier it is to tap a category than to type out, “G r o c e r i e s”. The transaction editor dynamically presents just the information relevant to the transaction being edited. For example, if it’s a multi-currency financial book, fields for exchange rate and currency will appear.
Security Editor. Here is another editor for securities (because remember, this app has full investment tracking capabilities):
We change the look and feel for each editor, but the principles and experience are the same. Editable items are dashed underlined and when possible we customize the keyboard for easy selection.
Current Positions Wheel. Providing an easy way for people with investments to see their current holdings and how they are performing is a must for a full-featured finance app. In addition to providing this information in a list, we also provide an interactive pie graph. Almost everyone who has played with that app has enjoyed interacting with this widget as it dynamically adjusts the angular velocity depending on the size of the pie wedge.
Whenever you look at an investment account, your current positions are displayed in our pie graph wheel. Each wedge of the pie graph can be selected by tapping it, spinning the graph, or tapping the big arrow in the middle. The size of each slice is a reflection of the value of the security. Green slices denote a gain, while red slices denote a loss for the day (grey is for no change). Notice that stats about your current holding are also shown (e.g. cost basis, gain, number of shares, etc.).
Interactive Bar Chart. The last major UI element I want to introduce is our interactive bar chart. The bar chart appears on almost every screen and is the primary way for getting at historical data. You can swipe it to scroll back in time and it will dynamically rescale the axes. By tapping individual bars or selecting a range of consecutive bars you can “drive” what data is displayed below:
In this case we are showing some cash flows stats and transactions for a three month range, April through June.
And with that, I’ve only begun to scratch the surface. I’ve left out major features and capabilities, including swiping pages to navigate, several other editors, the budget and spending screen, and other parts of the app. One only has so much time for a blog post when trying to wrap up the final details on a project of this size. So the big question is, when will it be released? I’m happy today that I can provide a better answer than our usual, “when it is ready.” We plan to submit it to the App Store toward the end of this month.