Design "all apps" and "all spaces" pages

[hursey013]

Per increment planning, we decided to establish an updated design for “all apps” and "all spaces" pages, which will be accessible through the cards on the "all organization" page.

The hope for these pages is that we would be able to reuse the existing card based layout from the "all orgs" page to also display applications and spaces.

Acceptance Criteria

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

[beepdotgov]

In advance of our Thursday discussion on “all spaces” and “all applications”, I pulled together a quick mapping of all the fields for applications and spaces I’m able to see in Stratos:

https://app.mural.co/t/gsa6/m/gsa6/1730214891111/d9c3e2eaadfdc63b245206057123068a462c2ffa

I’d love to use this during our discussion to suss out answers for three main questions:

1. What fields are missing from this diagram? (I realize my permissions could impact what I see on these pages.)
2. What are the key goals for these two pages? What would we like a visitor to do (or to learn) on each page?
3. From those goals, what are the most important pieces of information we need to show on an “all applications” page? On an “all spaces” page?

No action/review needed now! Just logging it before tomorrow’s meeting.

[beepdotgov]

Logging a few links from yesterday’s session:

• Docs on CloudFoundry’s health checks, which covers checks for “readiness” and “liveness”
• CF’s application manifest, and a sample test manifest schema

The Mural board has also been updated with a few notes from our discussion.

Broadly, we identified a few top goals for the “All Applications” page:

• Triage. “Is my application running?” “Something is wrong with one of my applications; what happened?”
• Orientation. “What space is my app in?” “I have a lot of apps; how can I filter them into something legible to me?”
• Education. The Dashboard could be a tool for learning the CLI — “Here is this view of your application(s); here’s how to do it in the CLI.” — and Cloud.gov best practices. (“We recommend multiple instances; can the UI encourage that?”)

We also discussed a potential (longer-term) goal of possibly allowing users to provision/deploy apps directly from the Dashboard. We’re not tackling it in this first pass, but noting it here for future planning.

Some top goals for the “All Spaces” page:

• User management. Understanding who has access to [things] in this space, and what level of access.
• Orientation. “What’s in this space? How many apps?”
• Administration. “I need to delete or create a space.”

Given that spaces are primarily an organizational helper, we felt the All Applications / Application Detail pages are going to be more critical to the Dashboard.

[beepdotgov]

Hey all! I have a couple in-flight ideas for “All Applications” that I could use some feedback on.

I’ve been focused on figuring out the right level of information density for this page, as well as the right fields we want to display here. I started with three possible treatments for individual applications:

Option 1: Low density

An at-a-glance card that contains just the highest-priority information: the name of the app, its online status, its space, and its memory quota.

Option 2: Medium density

This option’s similar to the last one, but with an expanded layout to show a few more high-priority stats.

Option 3: High density

In terms of fields shown on the page, this option’s somewhere between the first two. But if we want a display that could (potentially) show hundreds of apps, I thought it might be worth considering a more tabular layout.

How you can help

Here’s what I’d love some feedback on:

1. Which level of density feels right to you? (If any!)
2. On the version you preferred: do we need to show more information? Different information?

If it helps, I pulled together a few very quick mockups to show what these could look like in context. They’re not ready for detailed review, just passing them along if they’re helpful for this density discussion:

Representative page layouts (also viewable in Figma)

Option 1: Low density

Option 2: Medium density

Option 3: High density

Thank you all!

[beepdotgov]

While folks are reviewing those possible directions for “All Applications”, I thought I’d pull together a quick mockup of the “All Spaces” page:

Since we decided that spaces are a little less critical to the organization of the new dashboard, I thought it’d be appropriate to reuse most of the “All Organizations” page; there’s different information shown in each card, but that’s the biggest difference.

I’d love to hear:

• Does this feel like the right approach for this page?
• Is there different information we should be showing on each space?

Thanks, all!