2023-04-12 Paragon Meeting notes

Paragon Sandbox

@Adam Stankiewicz

One of the goals of Paragon is to improve collaboration between designers and engineers during product delivery.

Currently, the only way for an engineer to share in-progress UI work with a designer is through screenshots, screen recordings, synchronously sharing screens, hosting the MFE development branch on a sandbox, and/or merging to master in order to link to a stage URL.

We’ve been tracking clicks on a “Visit playground” button acting as a painted door experiment to gauge interest in the potential feature.

Open

The CTA gets clicked by about ~15 users per month from about ~350 monthly active users (roughly 5% of users click it); 60 total clicks in the last 90 days.

We want to take this experiment a step further by actually implementing something usable for the Paragon playground/sandbox via https://github.com/openedx/paragon/issues/2181.

Examples:

• https://github.com/seek-oss/playroom

• Shopify Polaris (uses playroom)

• Chakra UI

Discussion/brainstorm:

• What value would you find from having such a tool available to you? What features would be needed to make it useful?

  • Could be a standard way to view and live edit, useful

  • Shareable URL, distinct over what we have in code examples today

  • If a component is changed that wouldnt happen in code, can we test the changes?

  • Not a netlify PR

• How might you use such a tool to improve collaboration between designers and engineers during product delivery?

  • Useful for designers with a drag and drop or point and click to render components in various viewports to anticipate component behavior

  • Drag and drop proof of concept:

    • Playground

  • Should we extend existing code such as Polaris example, instead of rolling a new one on our own?

  • The live editing code examples means that we could build out a way to persist the data, borrowing playroom logic

  •  

Next steps:

• Raccoon Gang plans to do some technical discovery about https://github.com/seek-oss/playroom

• Quick win issue: Update “Show code example” collapsible button

  • Text: “Show editable code example”

  • Add information: “Any component can be added to the code example”

  • Add affordance to collapsible: Add icon and lg-card style of collapsible

    • Collapsible

• 2U UX Team input:

  • Multiple screens could be really cool, like a clickable prototype that can be shared

  • If the code can be sued and we can interact with it, that feels strong

  • WYSIWYG

  • Lowers the learning curve for participants

  • How would dummy data work in this scenario? Data heavy components prepopulated with fake data?

  • Engineer could build a page, and pull the designer, and we could work together on that page

  •