Interactive Quiz Builder: Research & Design Requirements (Step 1 of 3)

Project Goal: To develop a robust and intuitive Interactive Quiz Builder that allows users to create, manage, and distribute engaging quizzes, and for participants to take these quizzes and receive instant feedback.

Current Phase: Research & Design Requirements Gathering. This document outlines the foundational design specifications, user experience recommendations, and proposed visual elements to guide the development of the Interactive Quiz Builder.

User Input for Topic: "test input for topic" (This topic will be placeholder for an actual quiz topic in later stages, but the system will be flexible to accommodate any topic.)

1. Detailed Design Specifications

This section outlines the core functional and technical requirements for the Interactive Quiz Builder.

1.1. Functional Requirements

The system will support two primary user roles: Quiz Creators (Admins) and Quiz Takers (Participants).

1.1.1. Quiz Creator (Admin) Features

• Dashboard Management:

* Secure login/registration for creators.

* Personalized dashboard displaying an overview of created quizzes, their status (draft, published, archived), and summary performance metrics.

* Ability to view, edit, duplicate, publish, unpublish, and delete quizzes.

• Quiz Creation & Editing:

* Quiz Metadata: Define quiz title, description, category/topic, difficulty level, time limit (optional), and pass percentage (optional).

* Question Types Supported:

* Multiple Choice (Single Select): One correct answer from a list of options.

* Multiple Select: Multiple correct answers from a list of options.

* True/False: Binary choice.

* Short Answer / Fill-in-the-Blank: Requires text input with predefined correct answers or keywords.

* Image-Based Questions: Ability to upload images for the question prompt or as options.

* Question Management:

* Add, edit, reorder, and delete individual questions within a quiz.

* For each question: input question text, add options (with correct answer indication), add an optional explanation/feedback for both correct and incorrect answers.

* Ability to assign points to individual questions.

* Media Integration: Support for embedding images/videos in question prompts or options (e.g., via URL or upload).

* Quiz Preview: Functionality to preview the quiz exactly as a participant would see it before publishing.

* Draft Saving: Automatically save quiz progress as a draft.

• Quiz Publishing & Distribution:

* Publish quizzes to make them available to participants.

* Generate shareable links for published quizzes.

* Set quiz visibility (e.g., public, private with link, password-protected).

• Results & Analytics:

* View detailed results for each quiz attempt (participant's answers, score, time taken).

* Aggregate analytics: average score, most frequently missed questions, number of attempts, completion rates.

* Export quiz results (e.g., CSV, Excel).

1.1.2. Quiz Taker (Participant) Features

• Quiz Discovery:

* Access quizzes via a direct link provided by the creator.

* (Optional) Browse public quizzes by category, topic, or difficulty.

• Quiz Taking Interface:

* Clear display of quiz title, description, and time limit (if applicable).

* Intuitive navigation between questions (Next/Previous buttons, question number indicator).

* Progress indicator (e.g., "Question X of Y," progress bar).

* Real-time timer display (if applicable).

* Ability to select options or input text based on question type.

* Confirmation before final submission.

• Instant Feedback & Results:

* Immediate display of score upon quiz completion.

* Option to review answers: clearly indicate correct/incorrect answers, show the correct answer, and display the provided explanation/feedback.

* (Optional) Display of pass/fail status.

* (Optional) Ability to share results.

1.2. Technical Considerations

• Architecture:

* Frontend: Single-Page Application (SPA) for a dynamic user experience, using a modern JavaScript framework (e.g., React, Vue, Angular). Responsive design is paramount for mobile and tablet compatibility.

* Backend: Robust API-driven architecture (e.g., Node.js with Express, Python with Django/Flask, Ruby on Rails, PHP with Laravel) to handle quiz logic, data storage, and user authentication.

* Database: A relational database (e.g., PostgreSQL, MySQL) for structured data like users, quizzes, questions, options, and results. This ensures data integrity and efficient querying.

• Security:

* User authentication (JWT or OAuth2).

* Password hashing and salting.

* Input validation and sanitization to prevent common web vulnerabilities (XSS, SQL Injection).

* Secure data transmission (HTTPS).

• Scalability:

* Designed to handle a growing number of quizzes, questions, and participants.

* Cloud-based deployment (AWS, Google Cloud, Azure) for flexibility and scalability.

• API Design:

* RESTful API endpoints for all core functionalities (quiz creation, fetching questions, submitting answers, retrieving results).

* Clear API documentation.

1.3. Initial Database Schema Idea (High-Level)

• Users: id, username, email, password_hash, role (creator/participant), created_at
• Quizzes: id, creator_id (FK to Users), title, description, topic, difficulty, time_limit_minutes, pass_percentage, status (draft, published, archived), created_at, updated_at
• Questions: id, quiz_id (FK to Quizzes), question_text, question_type (MCQ_SINGLE, MCQ_MULTI, TRUE_FALSE, SHORT_ANSWER), points, image_url (optional)
• Options: id, question_id (FK to Questions), option_text, is_correct, explanation (for this specific option)

(Note: For SHORT_ANSWER, Options table might store correct keywords/phrases)*

• QuizAttempts: id, quiz_id (FK to Quizzes), participant_id (FK to Users, or NULL for anonymous), score, start_time, end_time, is_completed
• Answers: id, attempt_id (FK to QuizAttempts), question_id (FK to Questions), selected_option_ids (array/JSON for multi-select), short_answer_text, is_correct (computed), time_taken_seconds (for this question)

2. Wireframe Descriptions (Conceptual)

These descriptions outline the key screens and their primary elements. Detailed wireframes will be developed in the next phase.

2.1. Creator Dashboard

• Layout: Sidebar navigation (e.g., "My Quizzes," "Create Quiz," "Analytics," "Settings"). Main content area.
• Content:

* "Create New Quiz" prominent button.

* List of quizzes: Each entry shows quiz title, status (Draft/Published), number of questions, number of attempts, average score, and action buttons (Edit, Preview, View Results, Delete).

* Quick stats/summary: Total quizzes, total attempts across all quizzes.

2.2. Quiz Editor Page

• Layout: Multi-step form or accordion-style sections.
• Content:

* Quiz Details Section: Input fields for Title, Description, Topic, Difficulty, Time Limit, Pass Percentage.

* Questions Section:

* "Add New Question" button.

* List of existing questions: Each question displayed as a card.

* Question Card:

* Dropdown for "Question Type" (Multiple Choice, True/False, etc.).

* Text area for "Question Text."

* Upload button for "Image/Media" (optional).

* Input fields for "Options" (dynamically generated based on question type), with checkboxes/radio buttons to mark correct answers.

* Text area for "Explanation/Feedback" (for correct/incorrect answer).

* Input for "Points" for the question.

* Action buttons: "Duplicate," "Delete," "Move Up/Down."

* "Save Draft," "Preview Quiz," "Publish Quiz" buttons at the bottom/top.

2.3. Quiz Taking Page

• Layout: Clean, minimalist design to minimize distractions.
• Content:

* Header: Quiz Title, Time Limit (if applicable), Progress Indicator ("Question X of Y" or progress bar).

* Question Area:

* Clear display of the current question text.

* Embedded image/media (if present).

* Interactive elements for answers (radio buttons for single choice, checkboxes for multi-select, text input for short answer).

* Navigation: "Previous" and "Next" buttons. "Submit Quiz" button (visible on the last question).

2.4. Quiz Results Page

• Layout: Clear summary at the top, followed by detailed breakdown.
• Content:

* Summary: Quiz Title, Participant Name (if logged in), Score (e.g., 8/10, 80%), Pass/Fail status, Time Taken.

* Review Answers Section:

* List of all questions.

* For each question:

* Original question text.

* Participant's chosen answer(s).

* Correct answer(s) clearly highlighted.

* Indication of "Correct" or "Incorrect."

* Explanation/feedback for the answer.

Design Specifications: Interactive Quiz Builder

This document outlines the detailed design specifications, wireframe descriptions, color palette, and user experience (UX) recommendations for the "Interactive Quiz Builder." The goal is to create an intuitive, engaging, and robust platform that empowers users to create and take quizzes seamlessly.

1. Core Design Specifications

The Interactive Quiz Builder will be designed with a focus on ease of use for content creators and an engaging experience for quiz takers.

1.1. Functional Requirements (Design Perspective)

• Quiz Creation & Management:

* Dashboard: A central hub for creators to view, manage, and create new quizzes.

* Intuitive Editor: A drag-and-drop interface for adding, reordering, and editing questions.

* Question Types: Support for various question formats including:

* Multiple Choice (single correct answer)

* Multiple Select (multiple correct answers)

* True/False

* Short Answer (text input, with optional auto-grading keywords)

* Rich Content Support: Ability to embed images, videos, and audio within questions and answer options.

* Customizable Feedback: Define specific feedback messages for correct and incorrect answers for each question.

* Quiz Settings: Configure quiz title, description, time limits, number of attempts, scoring rules, and visibility.

* Preview Functionality: Allow creators to preview their quiz exactly as a taker would see it before publishing.

* Publish & Share: Generate shareable links and embed codes for published quizzes.

• Quiz Taking Experience:

* Welcome Screen: Clearly display quiz title, description, and instructions.

* Question Navigation: Clear "Next" and "Previous" buttons. Optionally, a question list for quick navigation (if not timed).

* Progress Indicator: Visual representation of quiz completion (e.g., "Question 3 of 10").

* Timer Display: Prominent countdown timer for timed quizzes.

* Submission: Clear call to action to submit the quiz.

* Results & Feedback: Instant display of score, correct/incorrect answers, and customized feedback upon completion.

• User Interface (UI) Elements:

* Form Elements: Consistent styling for input fields, checkboxes, radio buttons, dropdowns, and text areas.

* Buttons: Clear hierarchy for primary, secondary, and destructive actions.

* Notifications: Informative toasts or banners for success, error, and warning messages.

1.2. Non-Functional Requirements (Design Perspective)

• Responsiveness: The entire application must be fully responsive, providing an optimal experience across desktops, tablets, and mobile devices.
• Performance: UI elements and interactions should load quickly and smoothly, minimizing latency.
• Accessibility: Adherence to WCAG 2.1 AA standards, including keyboard navigation, sufficient color contrast, ARIA labels, and screen reader compatibility.
• Intuitive Design: The interface should be self-explanatory, requiring minimal onboarding for new users.
• Consistency: Maintain a consistent visual language, interaction patterns, and terminology throughout the application.

2. Wireframe Descriptions

The following descriptions outline the key screens and their essential components.

2.1. Creator Dashboard / Quiz List Screen

• Layout: Two-column layout. Left sidebar for main navigation (e.g., "My Quizzes", "Create New Quiz", "Settings"). Main content area for quiz list.
• Header: Application logo, user profile/account menu, "Create New Quiz" primary button.
• Main Content Area:

* Search Bar: To filter quizzes by title or topic.

* Quiz List: A card-based or table-based display of existing quizzes. Each card/row includes:

* Quiz Title

* Description Snippet

* Status (Draft, Published, Archived)

* Number of Questions

* Last Modified Date

* Action Buttons: "Edit," "Preview," "Share," "Archive/Delete," "View Results" (if applicable).

* Pagination/Load More: For extensive quiz lists.

• Empty State: A clear message and prominent "Create Your First Quiz" button if no quizzes exist.

2.2. Quiz Editor Screen (Create/Edit Quiz)

• Layout: Multi-panel or tabbed interface for managing quiz settings and individual questions.
• Header: Quiz Title (editable), "Save Draft," "Preview," "Publish" buttons.
• Left Panel (Quiz Settings):

* General Information: Quiz Title (text input), Description (rich text editor), Category/Topic (dropdown/tags).

* Visibility: Public/Private toggle, Password protection option.

* Time Limits: Enable/Disable timer, duration input (minutes/seconds).

* Attempts: Number of allowed attempts.

* Scoring: Points per question, total score display, passing score.

* Feedback: Global feedback settings (e.g., show answers immediately, show score only).

• Center Panel (Question List & Editor):

* Question List: A vertical list of questions. Each item is collapsible and includes:

* Question Number

* Question Type Icon

* First few words of the question text

* Action Buttons: "Edit," "Duplicate," "Delete"

* Drag Handle: For reordering questions.

* "Add New Question" Button: Prominently displayed at the bottom of the list.

* Question Editor (when a question is selected/newly added):

* Question Type Selector: Dropdown or radio buttons to choose type (MC, MS, T/F, Short Answer).

* Question Text Area: Rich text editor for the question itself.

* Media Upload: Button to add image/video/audio.

* Answer Options (based on type):

* Multiple Choice/Select: List of input fields for options, radio buttons/checkboxes to mark correct answer(s). "Add Option" button.

* True/False: Two radio buttons for True/False.

* Short Answer: Text input for expected answer(s) (keywords), case sensitivity toggle.

* Feedback Fields: Rich text editors for "Correct Answer Feedback" and "Incorrect Answer Feedback."

* Points Value: Input field for points awarded for the question.

* "Save Question" / "Cancel" Buttons.

2.3. Quiz Taker Interface

• Layout: Clean, minimalist, and focused on the current question.
• Welcome Screen:

* Header: Quiz Title.

* Main Content: Quiz Description, estimated time, number of questions.

* Call to Action: Prominent "Start Quiz" button.

• Question Display Screen:

* Header: Quiz Title, Timer Display (if enabled), Progress Indicator (e.g., "Question 3 of 10").

* Main Content:

* Question Text: Clearly displayed, potentially with embedded media.

* Answer Options:

* Multiple Choice/Select: Clearly clickable radio buttons/checkboxes.

* True/False: Prominent "True" and "False" buttons.

* Short Answer: Text input field.

* "Next Question" Button: Primary action.

* "Previous Question" Button: Secondary action (optional, depending on quiz flow).

* "Submit Quiz" Button: Appears on the last question.

• Results Screen:

* Header: "Quiz Completed!" message, Quiz Title.

* Main Content:

* Overall Score: Clearly displayed percentage and points.

* Summary: Number of correct/incorrect/unanswered questions.

* Question-by-Question Review (Optional):

* Each question displayed with user's answer, correct answer, and specific feedback.

* Visual indicators for correct (green) and incorrect (red) answers.

* Call to Action: "Review Answers," "Retake Quiz" (if allowed), "Go to Dashboard."

3. Color Palettes

A professional, clean, and engaging color palette will be used to ensure clarity and user comfort.

Primary Palette Option: "Vibrant & Trustworthy"

This palette combines a strong, trustworthy blue with a refreshing teal and an energetic amber, grounded by versatile neutrals.

• Primary Accent: #2D72D2 (Vibrant Blue)

Usage:* Main branding, primary calls-to-action (CTAs), active states, major headers.

• Secondary Accent: #5BC0BE (Teal)

Usage:* Secondary buttons, hover states, complementary elements, progress indicators.

• Action/Highlight: #FFC107 (Amber)

Usage:* Alerts, warnings, timers, key highlights, quiz completion celebrations.

• Neutral Dark (Text): #333333 (Charcoal Gray)

Usage:* Primary body text, labels, icons.

• Neutral Medium (Subtle Text/Borders): #6C757D (Medium Gray)

Usage:* Secondary text, borders, inactive states.

• Background Light: #F8F9FA (Off-White)

Usage:* Page backgrounds, card backgrounds.

• Background White: #FFFFFF (Pure White)

Usage:* Content panels, modal backgrounds, text input fields.

Semantic Colors:

• Success: #28A745 (Green)

Usage:* Correct answers, successful actions, positive feedback.

• Error/Danger: #DC3545 (Red)

Usage:* Incorrect answers, error messages, destructive actions.

• Information: #17A2B8 (Cyan)

Usage:* Informational messages, tips.

4. UX Recommendations

These recommendations aim to enhance usability, accessibility, and overall user satisfaction.

4.1. General Usability & Clarity

• Clear Information Hierarchy: Use varying font sizes, weights, and colors to guide the user's eye to the most important information first.
• Consistent Navigation: Ensure navigation elements are consistently placed and behave predictably across the application.
• Action-Oriented Language: Use clear, concise, and actionable labels for buttons and links (e.g., "Add Question" instead of "+").
• Minimize Cognitive Load: Avoid jargon. Break down complex tasks into smaller, manageable steps, especially in the quiz creation process.
• Visual Feedback: Provide immediate visual feedback for user actions (e.g., button clicks, successful saves, form validation).

4.2. Quiz Creation Experience

• Drag-and-Drop for Reordering: Implement an intuitive drag-and-drop mechanism for reordering questions, providing visual cues during the drag operation.
• In-line Editing: Allow creators to edit question text and answer options directly within the question list view, rather than always navigating to a separate editor panel.
• Smart Defaults: Pre-fill common settings or suggest reasonable defaults to speed up the creation process.
• Preview Mode: Make the "Preview" button prominent and easily accessible, allowing creators to switch between editing and previewing seamlessly.
• Autosave Functionality: Implement an autosave feature for quiz drafts to prevent data loss. Provide clear feedback when content is saved.
• Template Options: Consider offering pre-designed quiz templates for common use cases to kickstart creation.

4.3. Quiz Taking Experience

• Focus Mode: Design the quiz-taking interface to minimize distractions, focusing the user solely on the current question.
• Clear Progress Indicator: A visually prominent progress bar or "X of Y questions" indicator helps manage expectations and reduces anxiety.
• Timer Visibility: For timed quizzes, ensure the timer is always visible and provides clear visual cues as time runs out (e.g., changing color, flashing).
• Confirmation Dialogs: Require confirmation for significant actions like "Submit Quiz" to prevent accidental submissions.
• Instant Feedback (Configurable): For quizzes that allow it, provide immediate feedback (correct/incorrect) after each question or upon quiz submission, along with custom messages.
• Mobile-First Design: Optimize touch targets and input methods for mobile users taking quizzes on the go.

4.4. Accessibility

• High Contrast: Ensure sufficient color

This document outlines the detailed design specifications, wireframe descriptions, color palette, and user experience (UX) recommendations for the "Interactive Quiz Builder." This comprehensive guide will serve as the blueprint for the development of a user-friendly, engaging, and efficient platform.

1. Project Overview: Interactive Quiz Builder

The "Interactive Quiz Builder" is designed to empower users to effortlessly create, manage, and deploy engaging quizzes. This platform will provide a robust set of tools for question creation, quiz settings, and content management, all within an intuitive interface. The goal is to make quiz building accessible to everyone, from educators to marketers, without requiring technical expertise.

2. Design Principles

Our design approach for the Interactive Quiz Builder is guided by the following principles:

• Intuitive & Efficient: The interface must be easy to understand and navigate, allowing users to create quizzes quickly and without friction.
• Clean & Modern: A minimalist aesthetic with clear visual hierarchy to reduce cognitive load and enhance focus on content creation.
• Engaging & Dynamic: While a builder tool, elements should provide visual feedback and a sense of responsiveness, making the creation process enjoyable.
• Flexible & Scalable: The design should accommodate various quiz types, settings, and future feature expansions without requiring significant overhauls.
• Accessible: Designed to be usable by the widest possible audience, adhering to WCAG guidelines.

3. Core UI Components & Interactions

This section details the key user interface components and their expected interactions within the Quiz Builder.

3.1 Global Navigation

• Type: Persistent Left Sidebar Navigation.
• Elements:

* Logo/Brand: Top-left, links to Dashboard.

* Navigation Links:

* Dashboard: Overview of all quizzes, quick actions.

* Create New Quiz: Direct link to start a new quiz.

* Analytics/Reports: Performance metrics of published quizzes.

* Settings: Account-level or platform-wide settings.

* Help/Support: Access to documentation or contact options.

* User Profile: Bottom-left, avatar/name, dropdown for profile settings, logout.

• Interactions: Hover states for links, active state highlighting the current section.

3.2 Quiz Builder Dashboard

• Purpose: Central hub for managing all created quizzes.
• Layout:

* Header: "My Quizzes" title, search bar, filter/sort options.

* Primary CTA: Prominent "Create New Quiz" button.

* Quiz List: Displayed as a responsive table or card view.

• Elements (per quiz item):

* Quiz Title & Description: Primary identifiers.

* Topic/Category: Tags for organization.

* Status: (Draft, Published, Archived). Visual indicator (e.g., colored badge).

* Questions: Number of questions in the quiz.

* Attempts/Completions: Quick stats.

* Last Modified: Timestamp.

* Actions:

* Edit: Icon button (pencil) to open the Quiz Editor.

* Preview: Icon button (eye) to view the quiz as a participant.

* Share: Icon button (link/share icon) to get embed code or share link.

* More Options (Dropdown): Duplicate, Archive, Delete.

• Interactions: Search and filter functionality, sortable columns, hover states on quiz items and action buttons.

3.3 Quiz Editor (Main Creation Interface)

This is the core workspace for building and configuring a quiz.

3.3.1 Layout & Global Actions

• Header:

* Quiz Title (Editable): Large, prominent text field for the quiz title.

* Save Draft Button: Primary action, auto-saves frequently.

* Preview Button: Opens a new tab/modal with the quiz participant view.

* Publish Button: Final action to make the quiz live.

• Left Sidebar (Quiz Navigation):

* Sections: "Quiz Details," "Questions," "Settings."

Purpose: Navigates between different configuration aspects of the current quiz*.

* Interactions: Clicking a section updates the main content area.

• Main Content Area: Dynamic, changes based on the selected section in the left sidebar.

3.3.2 Quiz Details Section

• Purpose: Define the basic information and branding for the quiz.
• Elements:

* Quiz Title: (Pre-filled from header, editable here).

* Quiz Description: Rich text editor for a detailed overview.

* Topic/Category: Input field with auto-suggest or multi-select dropdown.

* Tags: Input field for relevant keywords.

* Thumbnail Image: Upload area with drag-and-drop support, preview, and delete option. Recommended dimensions (e.g., 1200x675px).

* Language Selector: Dropdown for quiz language.

3.3.3 Question Management Section

• Purpose: Organize, add, and edit individual questions.
• Elements:

* "Add Question" Button: Prominent CTA, opens the Question Editor Modal.

* Question List:

* Each item is a card/row.

* Drag Handle: For reordering questions (vertical drag-and-drop).

* Question Type Icon: Visual indicator (e.g., "MC" for Multiple Choice).

* Question Text Snippet: First few words of the question.

* Points: Displayed if applicable.

* Actions: Edit (pencil icon), Duplicate (copy icon), Delete (trash icon).

* Empty State: "No questions added yet. Click 'Add Question' to get started!"

3.3.4 Question Editor Modal/Panel

• Purpose: Detailed interface for creating or editing a single question. (Could be a modal overlay or a slide-in panel from the right).
• Elements:

* Header: "Add New Question" or "Edit Question [Question Number]".

* Question Type Selector: Radio buttons or dropdown:

* Multiple Choice (MCQ)

* True/False

* Short Answer / Fill-in-the-Blank

* Matching (Advanced)

* Image Hotspot (Advanced)

* Question Text Editor: Rich text editor (bold, italic, links, lists) for the main question.

* Media Upload: Option to add an image or video to the question (drag-and-drop, file browser, URL embed).

* Answer Options (Dynamic based on Question Type):

* MCQ:

* Input fields for each answer option.

* Radio button next to each to select the correct answer.

* "Add Option" button.

* "Remove Option" button (X icon) next to each option.

* Minimum 2 options, maximum 6-8.

* True/False:

* Two radio buttons: "True" and "False". User selects the correct one.

* Short Answer:

* Input field for the exact correct answer(s).

* Option for "Case-insensitive" or "Multiple correct answers" (comma-separated).

* Explanation/Feedback: Rich text editor for optional feedback shown after the user answers (e.g., why an answer is correct/incorrect).

* Points: Numeric input for the score awarded for a correct answer.

* Footer: "Save Question" (primary), "Cancel" (secondary).

3.3.5 Quiz Settings Section

• Purpose: Configure the overall behavior and participant experience of the quiz.
• Elements:

* Timing:

* "Enable Timer" Toggle.

* If enabled: "Time Limit (minutes)" Numeric input.

* Attempts:

* "Number of Attempts" Dropdown (e.g., 1, 2, 3, Unlimited).

* Question Order:

* "Randomize Question Order" Toggle.

* Answer Order:

* "Randomize Answer Order" Toggle (for MCQ).

* Feedback:

* "Show Correct Answers Immediately" Toggle.

* "Show Explanations After Submission" Toggle.

* Results Display:

* "Show Score to Participant" Toggle.

* "Custom Completion Message" Rich text editor.

* Lead Capture:

* "Require Name/Email" Toggle.

* Custom fields (e.g., Phone, Company).

* Certificate:

* "Generate Certificate on Completion" Toggle.

* If enabled: "Minimum Passing Score (%)" Numeric input.

* "Certificate Template" Selector.

3.4 Preview Mode

• Purpose: Allows the quiz creator to experience the quiz exactly as a participant would.
• Design: Mirrors the front-end quiz-taking interface. Read-only.
• Elements: Start screen, question display, answer selection, navigation buttons, results screen.
• Interaction: A "Close Preview" button or clear indication that it's a preview.

4. Wireframe Descriptions (Key Screens)

4