Apps Manager: Designing Pivotal Cloud Foundry's (PCF) UI experience
Apps Manager (AM) is Pivotal Cloud Foundry's UI for enterprise app developers. Its vision: Make it easy and simple for app developers to deploy, manage, and monitor their apps in PCF.
For the 60+ customers using the UI today, Apps Manager was likely the first encounter their app developers had with PCF, and continues to be one of the main developer tools (other than the cf CLI) for monitoring and managing their apps.
What I Did
conducted 2 discovery research initiatives at customer sites
completed 11 UX research initiatives
designed 30+ shipped UI features
interviewed ~40 Apps Manager users
onboarded and paired with a college design intern
Case Study - Moving Apps Manager from being single-foundation-aware to multi-foundation-aware
Make it possible for app developers to see apps across foundations.
The reason this was much more than a simple UI tweak or homepage redesign is because Apps Manager was developed with one major assumption: a user only has apps in one foundation, because customers only need one foundation each.
Fast forward a handful of years, and Pivotal found out customers were starting to consider having multiple foundations set up (for security, locality, stability) the new normal. For Apps Manager users who had apps in 2, 4, 8, 16, 100s!!! of foundations, they'd have to log in and log back out of Apps Manager... Per. Foundation. 😱 And/or open up separate tab instances to see everything at once. TL;DR: Apps Manager in a multi-foundation world was a terrible user experience. 👎
I am an enterprise application developer or application operator (who is the user?)
I am trying to view and manage my applications that exist in multiple foundations (what job/task is the user trying to accomplish?)
But I can’t do this in a centralized place (what is the blocker?)
Because Apps Managers exist in isolation per foundation and aren’t aware of other foundations (what's the reason behind the blocker?)
So instead, I have to open a browser tab for every foundation (what's the current UX?)
Which makes me feel confused and overwhelmed (what is the user feeling/thinking?)
👀👉 Pair with AM's PM to compile various customer and stakeholder inputs into a Feature Narrative outlining the scope, purpose, and problem this feature will solve
👀👉 Draft Concept Scenarios + Workflows to further define feature scope
👀👉 Leverage App Developer Journey Maps to align around user needs
👀👉 Whiteboard early design concepts
👀👉 Digitize promising designs into wireframes
Explore more design ideas
Converge ideas to 3 designs we (a trio: the PM, an engineer, and myself) want to test
👀👉 Create Usability Testing plan that includes Design Goals, Prototype Goals, etc.
👀👇 Test Prototypes (see below), iterate as needed
Choose the design(s) that best fit the desired feature scope and successfully fulfilled the user scenarios
Refine the winning designs into smaller design bits for engineering to work on and deliver:
a. Foundation(s) page (new)
b. App Overview tab on Foundation, Org, Space pages (new)
c. Orgs flyout (new)
d. Multi-object Search, across Foundations (new)
e. Spaces flyout (new)
f. Breadcrumbs (new)
g. Side Menu + Footer (redesigned)
🎉 Apps Manager has a polyhierarchical IA that enables app developers to navigate quickly to their desired app, service, space, or org regardless of which foundation the object lives in.
Prototype 1: Multi-Foundation Search
Test the UX of an Apps Manager search that can access multiple foundations.
Prototype 2: Homepage Co-Creation
Co-create the ideal homepage with the user.
Prototype 3: Confirm App Status
Give the tester a clickable prototype with a new homepage connected to only one foundation.
What I learned
Moving a UI experience from awareness of (1 * x objects) to (n * x objects) is not an easy design problem to solve, when x = 1 - 10,000 and n = 1 - 100. IA decisions that assumed finite x of objects could live in a tree IA structure and be searched, indexed, filtered, and displayed quickly become outdated when that xis exponentially increased. During this project, I depended a lot on typical Navigation: You-Are-Here markers such as:
abbreviated search results
object-specific large search
several levels of headings
simplification of global navigation so that each item became more visually prominent when selected