interface design for accounts and transactions

[simontegg]

I'm starting a design research thread on visualising stockflows.

[bhaugen]

@simontegg - you my new hero!

[simontegg]

:)

I'm going to start with a small scope of the financial management tool we use in Enspiral, clunkily titled "my.enspiral". We're planning on open-sourcing and re-designing it so I want to see how this tool overlaps with valueflows. This will be a "thinking out loud" thread, similar to the one I did here for holodex

First up I've created a Human Activity Diagram that I learnt about here

You can edit this image here

[simontegg]

Im not a heavy user of my.enspiral but the main uses I see is allowing individuals in a company to create 'virtual accounts' that reconcile (hopefully!) with the company's bank account. Users can freely create receive and transfer money between these accounts and request the accountant to pay out from these to actual accounts (such as their own bank account).
This allows users to operate as mini-business owners with their own business expense accounts while sharing the overheads and gaining economies of scale from the larger company.
It does a few other things as well, but many of these are not used while the accounts and transactions capabilities have stood the test of time (~5 years).

So at least in my mind our "stocks" are the virtual accounts and the "flows" are transactions. Before we get into more specific user stories (like tax) we'll need interfaces to:

• create, read, update and destroy accounts,
• and create, read and reverse transactions

Let's take a look at how other apps represent stocks and flows, specific to money or not and these basic interfaces...

[simontegg]

Desktop - Accounts - Read - Xero

Xero show a simple account balance timeseries when the user views an account:

Notable points include a hover action to get more detail for particular date, and a green tick and "reconciled" that will looks familiar and reassuring to TDD developers.

In Xero you can view a list of accounts and see a timeseries for that account in the list:

[simontegg]

Desktop - Accounts - Read - my.enspiral
Here's the current my.enspiral view of an account:

I believe this was Xero-inspired. Recent transactions are viewable beneath the timeseries and there's a few more controls.
Potential Improvement: Notice how the my.enspiral chart updates with a line from transaction to transaction, while Xero draws a straight line across day-to-day? The former always bugs me.

[bhaugen]

@simontegg - I like where you are going with the graphs. We (NRP) also use virtual accounts. Have a head design for how they should be tied to their underlying bank account, but have not implemented it yet. What people want is digital currencies transferred between agent's wallets, but they don't want it enough yet to abandon the coin of the realm.

For visualizing the actual flows, did you see visual language experiments?

We also tried this (below and in link) quite awhile ago, but nobody likes it, for one reason because the force-directed layout sloshes around uncomfortably:

The processes are arranged on a timeline, and their widths correspond to their durations.

Could do a regular Gantt chart, too, but the model is a bit different: the processes don't directly connect with each other (instead connect via resource flows), so while we could visualize the plans as a gantt chart, there would be difficulties editing the plan on the gantt chart.

We've also tried a regular timeline view, with limited use and usefulness.

Some lacks of utility in these things are because Sensorica so far does not actually use NRP to coordinate their work, so their data is really messy. (They coordinate by sitting in the same room, and emails. Sitting in the same room, of course, works best.)

[bhaugen]

See also

• http://martin.kleppmann.com/2011/03/07/accounting-for-computer-scientists.html
• and images for value flows
• and sankey diagrams
• resource flow diagram corresponding to that sankey

[simontegg]

Thanks @bhaugen. I find there's often a design tension between 'atomic' views which give you a small slice of the data ( e.g a filtered list of accounts that user controls) and 'global' views of the whole system. The former are often easier to design and work with (particularly for mobile). But I think there's value in global views as well . For the time being I'm going to restrict myself to atomic views.

[bhaugen]

@simontegg - no prob. And I understand the tension. I'd be interested in your atomic views for work coordination.

[simontegg]

Mobile - Accounts - Read - Xero

Here's the list view of accounts related to an organisation in the Xero Mobile app:

Notes: there's no attempt to show a time-series of the account balance in the mobile version, just a date, reconciliation status, and current balance. A sparkline might also work in here but the Xero designers have gone for a minimal approach. This is the Android version and you can spot the Material influences in the header and list item spacing.

[simontegg]

Mobile - Accounts - Read - Level Money

Level Money is a budgeting app. They use squarish "cards" in a list to display the balance for each bank account or view:

Notes:
They've stripped away the axis in the line chart and directly annotated the chart with minimum, maximum and the monthly starting balance. I think the intent here is to show just enough info to be useful in the list-of-cards view and get around the lack of hover functionality in mobile. The chart isn't zero-scaled though. Naughty, naughty.
Material design guidelines recommends using cards "to provide context and an entry point to more robust information and views". The extra context of the mini-chart is nice but the tradeoff would seem to be the rapid scanning and easy navigation over a large sample that you get with a simple list as in Xero mobile. If my.enspiral users typically have to navigate over large numbers of accounts the latter might work better.

[simontegg]

Mobile - Account/Transactions - Read Detail - Insight

Jennifer Hou, a pro designer, shares her design process for a personal banking app, "Insight" openly here. There's quite a lot of gold to mine there. For now let's just look at the detail view for an account:

Notes:
There's no timeseries but we have account transactions with a search bar to filter them. The highlighting of "pending" vs "completed" is analogous to the "Available" vs "Invoiced" in my.enspiral. The fatter transaction list items display the same date, amount, description and transacting enitity that my.enspiral breaks out into 5 columns.

[simontegg]

Mobile - Account - Read - Venmo

Venmo is a mobile "share payments" app. This is the view of the user's Venmo account which can be linked to several actual bank accounts:

Another designer has redesigned this with Material. Here's the same view:

Notes:
Personal payments might be a little bit too far from the my.enspiral activity domain. Still, if you're not going to bother with a time series why not make the account balance nice and big?

[simontegg]

Mobile - Organisation/Team - Read - Xero

It turns out that the Xero Mobile App does have Org -level time series summaries, but only if you scroll to the bottom of the org dashboard view:

Notes:
The time series doesn't give you a total account balance (perhaps because there is no specific account). They've prioritised flows in and out of the org at a monthly granularity. To my eye this chart is little unclear. Which bars are "in" and which are "out"? There's no scale or annotation though that might be acceptable on mobile. The monthly breakdown seems like a good fit.
The Xero mobile app seems to prioritise invoice reconciliation as the main workflow for mobile. The "detail" view of an account just shows a big tick if your invoices are up to date:

[bhaugen]

@simontegg - some atomic views that I am interested in are more dynamic than those you have focused on so far, which seem to be about one resource (e.g. an account) and its history.

For example, conversational UIs. A lot of what I think will happen around valueflows is conversations between the flows and the people involved in them and also directly between the people, but about the flows. That's what we were trying to get at here, about value streams. Which are related to Activity Streams, often referenced in issues in these vocab repos. But the activities will be triggers for conversations about coordinating work, matching offers and wants, transferring resources, etc.

[simontegg]

@bhaugen yeah I tend to focus on one thing before shifting on. Maybe I should start separate threads for each thing?
Venmo has a value stream

[bhaugen]

@simontegg - focus where you are motivated. I'm just throwing out suggestions. Lot to do, can't do it all at once.

And as @ahdinosaur reminds me periodically, it's a marathon, not a sprint...

Seems like a sprint the last few days, though...

Venmo has a value stream

Link?

[robguthrie]

Nice work @simontegg!

[simontegg]

Thanks @robguthrie !

[simontegg]

Here's a good overview of mobile design trends in 2015 with explanations

[simontegg]

Charts - Mobile

Here's an example of a minimal multichart page for mobile:

There's 2 possible interactions: go back to where you were or adjust the time filter. We see some big bold typeface with where we are right now and three sparklines. Something like this might work for "income" "expenses" and "balance".

[simontegg]

Sparkline Theory and Practice

[bhaugen]

Love sparklines!

[bhaugen]

I'm thinking about conversational UIs which seem like one of the right ideas for mobile apps and might be relevant for my.enspiral.

[almereyda]

We have moved the ValueFlows organization from GitHub to https://lab.allmende.io/valueflows.

This issue has been closed here, and all further discussion on this issue can be done at

https://lab.allmende.io/valueflows/forum-valueflo-ws/-/issues/20.

If you have not done so, you are very welcome to register at https://lab.allmende.io and join the ValueFlows organization there.