Review possible technical implementation of clickable prototypes in the guide

[sbddesign]

Idea: convert the user flows in the Guide into clickable prototypes. While this can be accomplished with a Figma prototype embed, there is a desire to avoid third-party tracking, so another solution would be best.

To satisfy this issue:

• Mockup how a prototype would look on the site
• Investigate ways to implement this without 3rd party tracking
• Implement this on a single page in the Guide to prove it can be done well

This is an idea that came out of our brainstorming session on re-organizing the Guide content.

[GBKS]

Additional points, beyond tracking, against using Figma embeds from looking into this in May 2021.

Linking out to Figma prototypes is the easiest solution and is the smoothest experience for users whether they are on mobile or desktop.

Another option would be to first show an image and replace it with the embed on click. That way, the user consents to loading the prototype and the initial page load would not be bogged down. However, the interaction problems with the prototype hijacking scrolls and taps remain.

A third option would be to use a third-party library (if there is one), or create our own that allows us to shape the prototype experience. This would require some sort of export mechanism where we can create a prototype in Figma, export the data, and then use it to render the prototype via JS. I created an export plugin for the UI kit that we could re-purpose.

Before getting into creating our own libraries, we should first actually create enough prototypes in Figma and link out to them. I find the embed more of a cosmetic thing.

[GBKS]

By the way, we have a component for linking out to clickable prototypes, which is used on three of the reference designs, here, here and here.

[GBKS]

We discussed this issue in jam session #24. Takeaway was to do another technical review of this. There was also interested in having more prototypes in general in the guide (independent of whether they are inline or external links). We can create separate issues for each page or user flow for any additional prototype to create.

[pavlenex]

Closing due to lack of interest, @GBKS looked into it a while ago, but embedding it adds a bunch of tracking and increases the page load, since we don't have many prototypes yet, let's first start embeding them and re-visit later on.