4 min read DTDT

Video Prototyping - Create short videos to demonstrate ideas and gather feedback.

Video Prototyping - Create Short Videos to Demonstrate Ideas and Gather Feedback

Video prototyping is a powerful technique that allows you to visually communicate ideas and concepts through short videos. This method is especially effective for demonstrating user interactions, workflows, and scenarios, making it easier to gather feedback and refine your design.

Step 1: Define the Objective

Clearly articulate the goal of the video prototype and what you aim to demonstrate or test.

  1. Objective: Identify the primary goal or question you want to address.
    • Example: "Showcase the new app's onboarding process and gather feedback on its usability."
  2. Scope: Determine the specific features or aspects to focus on in the video.
    • Example: Focus on the registration process, profile setup, and initial navigation.

Step 2: Develop a Storyboard

Create a storyboard to outline the key scenes and actions that will be included in the video.

  1. Scenes: Break down the story into individual scenes, each representing a specific interaction or step.
    • Example: Scene 1 - User opens the app, Scene 2 - User registers an account.
  2. Actions: Detail the actions that occur in each scene, including user interactions and system responses.
    • Example: "User taps on the registration button, fills in the form, and submits it."
  3. Visual Elements: Identify the visual elements needed for each scene, such as UI screens, icons, and text.
    • Example: Registration form, welcome message, navigation menu.

Step 3: Gather Materials and Tools

Prepare the materials and tools needed to create the video prototype.

  1. Materials:
    • Screenshots or mockups of the UI.
    • Props or physical mockups (if applicable).
    • Scripts for voice-over or on-screen text.
  2. Tools:
    • Video recording equipment (camera, smartphone, screen recording software).
    • Video editing software (Adobe Premiere, Final Cut Pro, iMovie).
    • Animation software (optional) for adding dynamic elements.

Step 4: Create the Video Prototype

Record and assemble the video prototype based on the storyboard.

  1. Recording:
    • Screen Recording: Use screen recording software to capture user interactions with the UI.
    • Live Action: Record live-action sequences if demonstrating physical interactions or environments.
  2. Assembling:
    • Editing: Use video editing software to compile the recorded footage, add transitions, and synchronize audio.
    • Voice-Over and Text: Include voice-over narration or on-screen text to explain actions and provide context.
    • Animations: Add animations to illustrate dynamic interactions or highlight key elements.

Step 5: Review and Refine the Video

Review the video prototype and make necessary revisions to ensure clarity and completeness.

  1. Initial Review: Watch the video prototype and check for any errors, inconsistencies, or unclear elements.
    • Example: Ensure that all user interactions are clearly visible and easy to follow.
  2. Revisions: Make necessary edits to improve the flow, clarity, and overall quality of the video.
    • Example: Adjust the timing of transitions, refine voice-over narration, and enhance visual elements.

Step 6: Share the Video Prototype and Gather Feedback

Distribute the video prototype to stakeholders, team members, and users to gather feedback.

  1. Distribution:
    • Share the video through email, collaboration tools (e.g., Slack, Microsoft Teams), or video platforms (e.g., YouTube, Vimeo).
    • Provide context and instructions for reviewing the video.
  2. Feedback Collection:
    • Use surveys, feedback forms, or discussion forums to collect feedback.
    • Encourage viewers to provide specific comments on usability, clarity, and overall effectiveness.

Step 7: Analyze Feedback and Iterate

Analyze the feedback received and use it to make improvements to your design.

  1. Feedback Analysis: Identify common themes, pain points, and areas for improvement.
    • Example: "Users found the profile setup process confusing and suggested clearer instructions."
  2. Iteration: Make necessary changes to the design based on the feedback and create an updated version of the video prototype if needed.
    • Example: Simplify the profile setup process and create a new video to demonstrate the changes.

Example: Video Prototyping for a New App's Onboarding Process

Step 1: Define the Objective

  • Objective: Showcase the new app's onboarding process and gather feedback on its usability.
  • Scope: Focus on the registration process, profile setup, and initial navigation.

Step 2: Develop a Storyboard

  1. Scenes:
    • Scene 1: User opens the app.
    • Scene 2: User registers an account.
    • Scene 3: User sets up their profile.
    • Scene 4: User navigates the home screen.
  2. Actions:
    • User taps on the registration button, fills in the form, and submits it.
    • User completes the profile setup by adding personal information.
    • User navigates through the home screen to explore features.
  3. Visual Elements:
    • Registration form, welcome message, profile setup screens, navigation menu.

Step 3: Gather Materials and Tools

  1. Materials:
    • Screenshots of the registration form, profile setup screens, and home screen.
    • Script for voice-over narration.
  2. Tools:
    • Screen recording software (e.g., OBS Studio, QuickTime).
    • Video editing software (e.g., Adobe Premiere, iMovie).
    • Microphone for voice-over recording.

Step 4: Create the Video Prototype

  1. Recording:
    • Screen Recording: Capture user interactions with the registration form, profile setup screens, and home screen.
  2. Assembling:
    • Editing: Compile the recorded footage, add transitions, and synchronize voice-over narration.
    • Voice-Over and Text: Add voice-over to explain each step and provide context.
    • Animations: Include animations to highlight key interactions.

Step 5: Review and Refine the Video

  1. Initial Review: Watch the video prototype to check for errors and ensure clarity.
  2. Revisions: Adjust timing, refine voice-over, and enhance visual elements as needed.

Step 6: Share the Video Prototype and Gather Feedback

  1. Distribution: Share the video with stakeholders, team members, and users through email or video platforms.
  2. Feedback Collection: Use surveys or feedback forms to gather specific comments on usability and overall effectiveness.

Step 7: Analyze Feedback and Iterate

  1. Feedback Analysis: Identify common themes and areas for improvement.
  2. Iteration: Simplify the profile setup process based on feedback and create an updated video to demonstrate the changes.

Example Storyboard and Screenshots for Video Prototyping

Storyboard Example

    • Visual: Splash screen and app loading animation.
    • Voice-Over: "Welcome to our new app. Let's get started!"
    • Visual: Registration form with fields for name, email, and password.
    • Voice-Over: "Enter your details to create a new account."
    • Visual: Profile setup screens with options to add a profile picture and personal information.
    • Voice-Over: "Complete your profile by adding your personal information."
    • Visual: Home screen with navigation menu and featured content.
    • Voice-Over: "Explore the home screen to discover new features."

By following these steps, you can effectively use video prototyping to visually communicate your ideas, gather valuable feedback, and iterate on your design to create a more user-friendly and effective solution.

Ava