Page Comparison

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.

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:

    • https://deploy-preview-1212--paragon-openedx.netlify.app/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

    • https://paragon-openedx.netlify.app/components/collapsible/#card-style

• 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