Vaadin Copilot UX refresh

[emarc]

Description

Vaadin Copilot UX refresh to better onboard, help users find and efficiently use the features relevant to the task at hand.

Tier

Plus

License

Proprietary

Motivation

Background

During the last ~1.5 years Vaadin Copilot has gained a lot of features, while the AI landscape and expectations have changed rapidly at the same time. This has resulted in overwhelmed users, not finding the features that they would benefit from, and misunderstanding the role of AI in the product.

Problem

• First use and activation difficult, hard to figure out
• Features hidden in drawers
• Unclear feature split between drawers and menu
• A lot of panels and features makes it hard to find relevant ones, figure out what to use when
• Edit context (need to "drill down") hard to grasp, easy to make mistakes, or just seems broken
• Some tools (test recorder, log, ...) need to stay open while interacting with app; clunky at best ATM

Solution

• Change how the activation button and menu works, change terminology
• Move panels from drawers into a more prominent toolbar
• Split panels into "modes" – panel sets related to a task at hand
• Show onboarding wizard pointing at things on first use, replace current "welcome popup"
• Use modes to make it more clear what is free vs commercial
• Make it possible use tools (panels) while interacting with app (mode/tool specific)
• Change look and feel of edit context indication, clarify how to use
• "Drill down" (and up) using icons as well
• Make modeifiers for selection and "piercing" match Figma
• Make top-level of a component (edit context) editable
• Only show one "badge" at a time
• Make features work or disabled with multiple selected – no hybrid

Notes

This is a "difficult" PRD, as the implementation will need user testing and iteration.
(These are mostly not new features, but a redesign.)

Requirements

• New UX for activation and menu

• Toolbar with modes and tools (including read-only/interactive/... capabilities)

• Keyboard shortcut (SHIFT-CMD+CMD) cycles modes

• Edit context indication redesign

• "Drill down" piercing modifier (CMD)

• Multi-select modifier change (SHIFT) (on UI, not outline)

• Selection indicator redesign (single badge, count)

• Context menu adjustments (selection indicator/count, disable items that only work on single items when multiple selected)

• Feature walkthrough (replace "welcome screen)

• Documentation

• User testing + iteration

Nice-to-haves

No response

Risks, limitations and breaking changes

Risks

This is a big UX change that is hard to properly UX test before implementing. Iteration might take time.

Out of scope

No response

Materials

Interaction prototype – this has been circulated internally and details are honed with UX designer.

Refer to (internal) Figma prototypes for visual design and details.

Metrics

No response

Pre-implementation checklist

• Estimated (estimate entered into Estimate custom field)
• Product Manager sign-off
• Engineering Manager sign-off

Pre-release checklist

• Documented (link to documentation provided in sub-issue or comment)
• UX/DX tests conducted and blockers addressed
• Approved for release by Product Manager

Security review

None