DARIAEngineering / dcaf_case_management

Rails-based case management system for abortion funds
MIT License
87 stars 245 forks source link

Design Scalable Budget Bar Look #1887

Open lomky opened 4 years ago

lomky commented 4 years ago

How the budget bar looks at our default scale of $1,000, with various sized pledges: Screenshot_2019-12-29 DARIA

How it looks with our largest (known) budget of $1,750, with various sized pledges: Screenshot_2019-12-29 DARIA

I don't know if those are realistic pledge sizes. Might be worth asking our funds about what size pledges tend to be.

We also have at least one fund working on a monthly budget, so they would likely want to use an even larger number for the max.

cmgiven commented 4 years ago

Playing with some ideas (👋 from Chicago).

1

Let's start by going dead simple. If it's just a progress bar, how much of the goal does that achieve?

Also suggested a label to show the amount remaining. Seems like that could save some mental math, and perhaps is useful if the budget maximum is changing.

2

Okay, but let's say we do need more information. By just showing lines, we can give the impression of the different size pledges. For an individual case manager, might this be enough to remind them of the various pledges they've made?

One advantage of this layout is that it preserves chronology: the order in which the pledges were made.

Also shown is a legend style to help connect the labels to the corresponding bar.

3

Tooltips (which currently exist, although I note there's a bug where they don't disappear) could fill in some details; shown is amount and appointment date. Needing to click/hover might not be ideal, though.

4

If, on the other hand, we care more about the distribution of pledge amounts, and there's a goodly amount of grouping in common amounts (I seem to recall this was the case?), we could show something like this.

As compared to the last option, this no longer tells a story about the order in which the pledges were made. But it does allow me to see how much money has gone to different amounts easily, and if I've needed to make a particularly large pledge, it would reflect that fact clearly.

If the bar has insufficient width, the label could be hidden (shown in the final two images using extremely large amounts). As shown here, if a number of consecutive bars have their legends hidden, they are grouped into one. A tooltip on hover reveals the specific amounts of individual pledges.

Another thing we lose (at least as shown here) is the ability to link from the tooltip to the patient page. Although the tooltips could list and link to each patient in the group, this could get cumbersome, and without the benefit of chronology, is probably pretty difficult to find a specific patient, at least if they don't have a unique and memorable pledge amount. But it also seems to me like this may be also difficult today? I wonder how often case managers use the progress bar for navigation?