Canviq Admin — Surveys Page Mockup

Mockup
Scene 1 — Survey List (Default View)
The surveys page shows a filterable table of all surveys. Admins can filter by status (All, Draft, Active, Paused, Completed, Archived), search by name, and quickly see response counts and completion rates. The "Create Survey" button starts the multi-step builder flow.

Surveys

Name Status Responses Completion Created
Post-Purchase NPS Active 1,247 78% Jan 15, 2026
Onboarding Experience Active 523 82% Jan 10, 2026
Feature Prioritization Q1 Paused 189 71% Dec 20, 2025
Churn Exit Survey Active 67 64% Dec 1, 2025
Beta Tester Feedback Completed 42 95% Nov 15, 2025
Employee Pulse Check Draft 0 Feb 8, 2026

Design Notes

1

Status badges. Draft (gray), Active (green), Paused (amber), Completed (blue), Archived (gray). Consistent with submission statuses.

2

Completion rate. Shows percentage of started surveys that were completed. Missing data shows "—".

3

Empty state. When no surveys exist, show centered message with "Create your first survey" CTA.

4

Actions menu. Three-dot menu reveals options: View, Edit, Duplicate, Pause/Resume, Archive, Delete.

Scene 2 — Create/Edit Survey (Step 1)
The survey builder uses a 4-step flow: Details, Questions, Targeting, Review. Step 1 collects title, description, and survey type (NPS, CSAT, CES, Custom). A live preview panel on the right shows how the survey will appear to users. "Save Draft" and "Next: Questions" buttons at the bottom.

Create Survey

1
Details
2
Questions
3
Targeting
4
Review
Live Preview

Post-Purchase NPS

Help us improve your experience by sharing your feedback on your recent purchase.

NPS

Design Notes

1

4-step flow. Details → Questions → Targeting → Review. Step indicator at top shows progress. Active step highlighted in coral.

2

Live preview. Right sidebar shows real-time preview of how the survey will appear to users. Updates as you type.

3

Survey types. Pre-configured templates (NPS, CSAT, CES) or Custom. Each type has default questions that appear in Step 2.

4

Save draft. Admins can save progress at any step and return later. Draft surveys appear in the list with Draft status badge.

Scene 3 — Survey Detail / Responses
The survey detail page has tabs for Overview, Responses, Analytics, and Settings. Overview shows summary cards (total responses, completion rate, avg time, NPS score), a response trend chart, and a list of recent responses with completion status and preview of key answers.

Post-Purchase NPS

Active Jan 15 – Feb 9, 2026 · 1,247 responses
Total Responses
1,247
Completion Rate
78%
Avg Time
1:42
NPS Score
+42
Response Trend (Last 14 Days)

Recent Responses

Feb 9, 2:34 PM
100%
Score: 9 · "Love the new checkout flow!"
Feb 9, 1:12 PM
100%
Score: 8 · "Fast shipping, great quality"
Feb 9, 11:20 AM
100%
Score: 10 · "Best experience I've had ordering online"
Feb 8, 5:45 PM
100%
Score: 7 · "Good overall, packaging could be better"

Design Notes

1

Tab navigation. Overview, Responses, Analytics, Settings. Overview is the default view when viewing a survey.

2

Summary metrics. Total responses, completion rate, avg time to complete, and survey-specific score (NPS, CSAT, etc).

3

Response trend. Simple bar chart showing daily response volume over the last 14 days. Uses gradient coral bars.

4

Recent responses. List of latest survey submissions with timestamp, completion %, and preview of key answers. Click to view full response.

Scene 4 — Question Builder (Step 2)
Step 2 of the survey builder. Left panel shows draggable question list with type badges. Center panel is the active question editor with text input, type dropdown, required toggle, and options for multiple choice. Supports Rating (1-5 stars), Multiple Choice, Free Text, NPS (0-10), and Matrix question types. "Add skip logic" link hints at conditional branching.

Create Survey — Questions

1
Details
2
Questions
3
Targeting
4
Review
⋮⋮ How likely are you to recommend us? NPS
⋮⋮ What did you like most? Free Text
⋮⋮ Rate your experience Rating
Question 1
Required
+ Add skip logic

Design Notes

1

Draggable question list. Left panel shows all questions with drag handles (⋮⋮). Active question highlighted with coral background.

2

Question types. Rating (1-5 stars), Multiple Choice, Free Text, NPS (0-10), Matrix. Type badge shown on each question.

3

Required toggle. Each question can be marked as required or optional. Toggle uses coral accent when on.

4

Skip logic. "Add skip logic" link opens conditional branching UI. Allows showing/hiding questions based on previous answers.