Epic: Low-friction dashboard form to collect feedback

[jldec]

Summary

Users are more likely to provide feedback, the easier we make it for them.

Inspired by the feedback form for Gitpod docs pages, we'd like offer a similar form in the dashboard. (see below)

Requirements

• Needs to work for errors as well as all dashboard pages
• Offer the same emoji, and an input prompting for feedback.
• Send responses to Segment
• Include the page context and any error state

Proposed Interaction

• Dashboard: replace Help -> Feedback which opens Modal (move Help under user dropdown)
• Errors: Ask Was this helpful? with emojis, then open same Modal

Modal (Non selected)	Modal (Active)

Login Error	Workspace Error

Existing form in docs

On every page	Emoji opens form

cc: @jakobhero

Tasks

• Implement feedback modal #9928
  - [ ] Hide behind feature flag
• Adjust top nav
• Implement for error pages #10062
• Hide Feedback Form for self-hosted #10296

[gtsiolis]

Thanks for the ping, @jldec! 🏓

Cross-linking also a past issue related to this in #4196 in case it contains any helpful content. Feel free to also close one of these if needed. 📕

While I'm in favor of making it easier to collect user feedback from within the product, there're multiple ways to approach this. For example, building better issue template forms for feature requests or bug reports, and potentially linking directly to those could be a good MVC (minimum viable change) step, etc. Also, it could be worth discussing what feedback points or types could help or bring in more impact for the product before proceeding with any design proposals. 💭

FWIW, there was also a relevant issue in #3564 which surfaced the need to have a system status indicator for service availability which could be also related here. See #4160 and early design drafts in #4160 (comment). 🟠

I'm adding this as a discussion point for our next sync meeting but let me know if you think this is something I could start actively work on in terms of design. Cross-linking also relevant comment (internal) from a past PLG sync meeting. Unassigning for now.

[jldec]

Thanks @gtsiolis 🏓

The suggestions to link to feedback issues or another form are helpful, but they are not low friction enough. We need a way for users to provide their sentiment and a very quick bit of text without changing context or being faced with a myriad of questions (which tends to happen with issues).

I don't think we should rely on the same mechanism for system status (we need well-instrumented alerts for that).

I think the docs feedback has been quite successful and we can use it as a model, so yes, you can go ahead with ideas for how / where to enable something similar in the dashboard.

[gtsiolis]

Posting below a proposal for adding a feedback widget within the dashboard. Cc @jldec

Going through the navigation:

Current	Breakdown	Scaling	Proposal

Going with a visible menu item that trriggers a modal on click, depending on whether we'd like to include the emojis on this iteration, here's how the modal could look like:

Modal (Iteration 1)	Modal (Iteration 2 - Non selected)	Modal (Iteration 2 - Hover & Active)

Minor clarification comments on the designs above:

1. Move Docs and Help links inside the user dropdown menu.
2. Add Feedback link in the user menu
3. Order 🤩 first.
4. Use a text area component.
5. Use the text area help text to redirect to our issue tracker.

See design specs.

[jldec]

Hi @gtsiolis, I have a couple more suggestions.

1. I have changed the description to include this feature on Error screens as well (to match our G&Rs)
2. I would prefer to keep the Docs link visible in Dashboard (not move into user dropdown menu)
3. Let's not link to issue tracker - but I think we do have to mention privacy policy (as in docs)

If you are ok with these changes, could you update your designs?

[gtsiolis]

@jldec

1. ❗ I'm trying to understand the value of having the feedback functionality on the error pages given this will also introduce a separate system to maintain and monitor for user feedback. Posting some thoughts and questions below, let me know what you think.
   • Regarding using the emojis on the error pages, do we expect to ever see any positive feedback submissions on workspace or login errors?
   • In these error cases it sounds we need to improve system status visibility or provide better actions to users.
   • Also, in the error cases, it could be beneficial to redirect users to our issue tracker as a single source of truth (SSOT) to help avoid duplicate reports from other community members, etc.
   • In any case, using a similar tertiary action button with the same label to trigger the same feedback modal could be a good approach to try this in action without overloading the error pages, see screenshots below.
2. ✔️ Since we have not made any changes to the navigation yet per Epic: Improve dashboard navigation #8385, keeping the Docs in the help menu sounds ok. In the long, I'd expect keeping Docs and Feedback link in the help menu along with Workspaces to become slightly problematic, especially as more links could race for a spot in the menu like Help, What's New, Changelog, and more. However, this is not an issue in the current state of the navigation.
3. ✔️ Sounds ok to drop the links to the issue tracker, however, I don't think we need to mention the privacy policy as dashboard usage is already covered by the browse-wrap consent of the privacy policy from the login page. Let me know if you think it's still necessary to include the privacy policy.

Login Error	Login Error (Hover)	Workspace Error

[laushinka]

• Regarding using the emojis on the error pages, do we expect to ever see any positive feedback submissions on workspace or login errors?

We can ask "Was this error message helpful?"

[jldec]

@gtsiolis

• I think feedback on our error messages will be useful (we included this in our G&Rs)
• Thank you for confirming that the top nav is ok with Docs and Feedback for now.
• I prefer to keep the privacy policy link in the form for consistency with the docs feedback. (see https://github.com/gitpod-io/website/issues/1709) - cc: @MircoatGitpod
• I very much like @laushinka's suggestion to ask "Was this error message helpful?" with the emojis below that (like docs). What do you think about doing something similar (3-step click on feedback, click on emoji, submit form) for the dashboard link instead of going straight to the modal. This will address the ambiguity in the current design about whether selecting an emoji is required or not.

[laushinka]

@jldec @gtsiolis After seeing the changes it would require, I propose implementing the feedback in error messages to be a separate PR - otherwise it would be too big.

[laushinka]

Just synced with @jakobhero on the analytics implementation. He shared how they're tracking it on the website, and we should align. We will call the trackEvent with the following information:

{
score: selectedEmoji,
feedback: text,
url: window.location.hostname,
path: window.location.path
}

Scores:
Starry emoji = 4
Happy = 3
Sad = 2
Cry = 1

Website emoji

[jakobhero]

💯! also, it would be great if we could use the same event name as on the website, i.e. feedback_submitted for consistent data!