NethVoice: study and design of the new Visual Plan UI #8255

Description

Study and design the new user interface of the NethVoice Visual Plan, in line with the new NethVoice interface. The output of this issue is a set of approved mockups that will guide the implementation of the redesign, the new modules and the usability improvements described in the parent issue.

Activities

Analysis

• Review the current Visual Plan and list its main usability issues and limitations
• Map the current features to preserve (modules, drag & drop, chaining, inbound route as the starting point)
• Collect the design guidelines and reusable components of the new NethVoice interface
• Take into account the outcome of the evaluation on keeping the Visual Plan separate or integrating it into the NethVoice interface, since it affects layout and navigation

Design

• Overall layout: canvas, module palette/sidebar, toolbar, configuration panel, and how they fit into the NethVoice interface (if integrated)
• Empty state / new flow: inbound route node placed on the canvas by default
• Nodes: consistent design for all modules, existing and new:
  • Existing: inbound route, ring group, queue, IVR, CQR, announcement, time condition, call flow control, extension, voicemail, conference
  • New: Set CallerID, Direct DID, Queue Exit, Queue Options, Queue Priorities, AI answering agent
• Connections: how links between nodes and their outputs (e.g. IVR options, time condition true/false, queue fail-over) are shown and created
• Configuration panels: layout for each module, including the new options (inbound route ringtone and CID prefix, IVR direct dial, queue ringing/MOH, CID prefix, announcements, break out IVR)
• States and feedback: selected, hover, error, incomplete configuration, unconnected node, save confirmation
• Canvas navigation: zoom, pan, centering, optional minimap, node search
• Light and dark theme
• Responsiveness: behavior on smaller screens

Deliverables

• Short document summarizing the analysis and the design choices
• Wireframes of the main screens and flows
• High-fidelity mockups (light and dark) of the main screens, nodes and configuration panels
• Clickable prototype of the main flow (creating a call flow from scratch), if useful for validation

Acceptance criteria

• Mockups cover all existing and new modules and their configuration panels
• The design is consistent with the new NethVoice interface
• The design reflects the decision on standalone vs integrated Visual Plan
• Mockups are reviewed and approved by the team before implementation starts