Design “all organizations” page

[beepdotgov]

Per increment planning, we decided to establish an updated design for the “all organizations” page, which will be accessible through the Dashboard’s org picker. (#409)

One outcome of this work might be a reusable component that could also be adapted for a similar “list of things” page, such as the Dashboard’s applications page.

Can this task be done in one increment?

Yes.

Acceptance Criteria

• [x] Designs are accepted by cloud.gov
• [ ] Designs have been reviewed for technical feasibility, and handed off for implementation

[beepdotgov]

@sknep @hursey013 Got an initial design attached below! (And in Figma, as ever.)

Two things while you look into this:

• From an earlier discussion in Slack, it sounds like this page won’t have to deal with wild amounts of density. That’s a big reason I decided to go with this card-driven layout, rather than a more tabular approach. (It also lets us reuse the “welcome mat” pattern we just finalized!)
• I thought the individual cards could highlight a couple key pieces of information: the number of users and applications, the user’s role in that org, and memory usage. But I’d love to hear how this feels to you; is there more/different information we need here?

Thanks, both! Excited to hear what you think.

Mockup

[hursey013]

Wow @beepdotgov, just wow 😍 Your choices on which pieces of information to include within the cards are spot on in my opinion. I think the only thing perhaps to make more clear would be that the memory represents the current allocation of memory to the org as opposed to a live snapshot of the current memory usage. For example an org might currently have 10GB of available memory and have only allocated 6GB of that to the various apps within the org, leaving 4GB remaining to be allocated. Maybe that's already your intent, but at first glance I interpreted the green/red gauges to indicate live usage (since that's what you often see in dashboard like this).

What do you think about including the org picker on pages like this? I think in my head I've envisioned that dropdown being a consistent part of the UI while in the platform section, but perhaps that's redundant here?

[beepdotgov]

@hursey013, I’m delighted this feels like the right direction! Seriously, thanks for that, and for the feedback!

I think the only thing perhaps to make more clear would be that the memory represents the current allocation of memory to the org as opposed to a live snapshot of the current memory usage.

I didn’t realize Stratos was displaying memory available for allocation, so thank you VERY much for calling that out.

Just curious, would it make more sense if we swap out “allocated” for “used”, like this:

Would that feel more accurate?

What do you think about including the org picker on pages like this? I think in my head I've envisioned that dropdown being a consistent part of the UI while in the platform section, but perhaps that's redundant here?

Oh, that’s a really interesting idea! I think we could include it, but we’d need to revise its design a bit: namely, we’d need a default “No organization selected” state. At least as we’ve currently defined it, the picker shows the currently active org, with some links to move to another organization:

But on this page, we don’t have an “active” organization. (Which is why I removed it!) But if we want to include it here, I think we could make it work — let me know, and I’ll tinker with some options for round 2.

[beepdotgov]

Okay, round two! In Figma, but also: right here!

I’ve tweaked the label on the memory bar, and changed “Current organization” to “Organization”, which allows us to have an empty state on this page. Expanded, it’d work the same, but we’d remove the “View all organizations” link like so:

@hursey013 Would love to hear what you think!

[hursey013]

Apologies for the delayed response @beepdotgov! I think allocated works well here, and not to backtrack, but seeing the org picker with the empty state like that on this page makes it feel almost unnecessary, especially on this page since users have a clear path to picking an organization via the cards. Unless you have a strong opinion one way or the other I'd say we can leave the org picker off this page as you originally proposed. Otherwise, this looks great, lets move on to feasibility/implementation! Thank you @beepdotgov

[beepdotgov]

Thank you, @hursey013! I think that’s the right call: I’ve dropped the org picker, and updated the design.

I’ve pulled together a small screen-friendly view of the design as well:

https://www.figma.com/design/DNbFdd7YrA2MpgeXNgmNLz/Cloud.gov-%E2%80%94-Dashboard-UI-redesign?node-id=1319-21282&node-type=section&t=E168n49EPnTe4Ef3-0

@echappen, just noting that these are ready for feasibility/implementation! Onward! 🎉🚀