CHRISTINE YEH

Apps Manager

 

Apps Manager: Designing Pivotal Cloud Foundry's (PCF) UI experience

Overview

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.

πŸ”— run.pivotal.io

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

Challenge

Make it possible for app developers to see apps across foundations.

Background

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. πŸ‘Ž

Problem Statement

  • 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?)


Process

  1. πŸ‘€πŸ‘‰ 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

  2. πŸ‘€πŸ‘‰ Draft Concept Scenarios + Workflows to further define feature scope

  3. πŸ‘€πŸ‘‰ Leverage App Developer Journey Maps to align around user needs

  4. πŸ‘€πŸ‘‰ Whiteboard early design concepts

  5. πŸ‘€πŸ‘‰ Digitize promising designs into wireframes

  6. Explore more design ideas

  7. Converge ideas to 3 designs we (a trio: the PM, an engineer, and myself) want to test

  8. πŸ‘€πŸ‘‰ Create Usability Testing plan that includes Design Goals, Prototype Goals, etc.

  9. πŸ‘€πŸ‘‡ Test Prototypes (see below), iterate as needed

  10. Synthesize results

  11. Choose the design(s) that best fit the desired feature scope and successfully fulfilled the user scenarios

  12. 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)

Outcome

πŸŽ‰ 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. 

 
AppsManager_prototype1gif_Quartzeast-2.gif
 
 

 

Prototype 2: Homepage Co-Creation

Co-create the ideal homepage with the user.

 
AppsManager_prototype2gif_makeurownhomepage.gif
 
 

 

Prototype 3: Confirm App Status 

Give the tester a clickable prototype with a new homepage connected to only one foundation. 

 
AppsManager_prototype3gif_frackertracker.gif
 
 

 

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:

  • pagination

  • abbreviated search results

  • object-specific large search

  • breadcrumbs

  • several levels of headings

  • simplification of global navigation so that each item became more visually prominent when selected