Viral Hooks
Trending short videosBefore and after website redesign
P

@pixeldesignlab

TikTok · Split screen

@pixeldesignlab Please, don’t turn your About page into a biography, because no one cares 😅 use this crucial page to explain how can you solve the problem of your audience and how is it tied to you. #webdesigner #redesign #webdesign #websitedesign #businesswebsite #coachingwebsite #website #designer #uxdesigner #uxdesign #figma #figmadesign

View original on TikTok

The edit1 shot · 4 text
Shots Text1:10

Performance

Views
494.4K
Likes
28.4K
Comments
302
Engagement
5.8%
Outlier
2×
Length · 7 Oct 2024
1:10

Video #5338 · Split screen

Before and after website redesignfrom @pixeldesignlab

[01]

Overview

The creator critiques a poorly designed 'About' page, then walks through a complete redesign process in a design tool. She explains key principles for improvement, focusing on shifting the content from a self-centered biography to an audience-focused narrative and breaking up the visual layout into digestible, engaging sections with clear calls to action.

[02]

Simple outline

  1. 1Identify common mistake
  2. 2Explain negative consequences
  3. 3Provide corrective principles
  4. 4Reveal transformed result

[03]

Related videos

[04]

Classification

Concepts
Before/After TransformationGood vs Bad
Elements
Screen RecordingText Overlay

[05]

Hook analysis

What stops the scroll in the first 3 seconds

Title hook · 55%

No One Reads Your About Page 🤷‍♀️ Here's How to Fix It (wait for it)

Verbal hook · 40%

Welcome to my site. One image and a huge chunk of text that no one will read is the worst thing you can do on your about page.

Visual hook · 5%

A split-screen view showing a speaker in the bottom frame and a screen capture of a poorly designed website labeled 'BEFORE' in the top frame.

[07]

Hook and payoff

The promise the opener makes, and how the video pays it back

Hook

Present a visual example of a common, flawed execution ('Before') and immediately label it as a critical error that viewers are likely making.

Payoff

The Synthesis Formula: Summarize all the corrective principles into a final, memorable recipe for success, visually validated by the fully revealed 'After' state.

[08]

Narrative framework

The structural pattern this video runs on

Framework

The 'Before & After' Expert Fix

Identify a common, costly mistake within a specific domain, then systematically break down the principles and visual steps required to fix it, culminating in a satisfying transformation.

  1. 1

    The High-Stakes Declaration

    Escalate the importance of the mistake by attaching significant negative consequences (e.g., financial loss, missed opportunities) to it, creating urgency.

  2. 2

    The Expert's Promise

    Position the creator as the guide who will provide the correct methodology and a clear path to a better outcome ('let me show you how to do it right').

  3. 3

    The Strategic Framework

    Break the complex solution down into two distinct, manageable categories (e.g., 'content and visuals') to create a simple roadmap for the viewer.

  4. 4

    The Foundational Principle Correction

    Address the first category by correcting the underlying flawed philosophy or mindset that leads to the mistake (e.g., shifting focus from self to audience).

  5. 5

    The Execution Correction

    Address the second category by providing specific, actionable techniques for improving the practical execution (e.g., breaking up text, using hierarchy).

Themes

  • User-centric design
  • Effective communication
  • Visual hierarchy
  • Storytelling in marketing

Techniques

  • Before-and-after comparison
  • Screen recording demonstration
  • Direct address to camera

Trends

  • Educational content
  • Design process reveal

Post caption

Please, don’t turn your About page into a biography, because no one cares 😅 use this crucial page to explain how can you solve the problem of your audience and how is it tied to you. #webdesigner #redesign #webdesign #websitedesign #businesswebsite #coachingwebsite #website #designer #uxdesigner #uxdesign #figma #figmadesign

Text overlays

  • title · throughout

    BEFORE

  • title · beginning

    No One Reads Your About Page 🤷‍♀️ Here's How to Fix It (wait for it)

  • title · throughout

    AFTER

  • contextual · middle

    Auto layout added

Transcript

Welcome to my site. One image and a huge chunk of text that no one will read is the worst thing you can do on your about page. The about page is one of the most critical pages on any website, yet it's often so misunderstood, and these mistakes can cost you money. So let me show you how to do it right. We're going to focus on both content and visuals. Usually, people turn the entire about page into a biography. Like, welcome to my site. My name is Veronica. In 2003, I started this company blah blah blah. No one cares. Stop focusing solely on yourself. Even though your background is important, it should always connect back to how you solve problems for your audience. And now let's talk about visuals. Your website needs to be attractive and engaging. Please avoid long, heavy blocks of text. Instead, divide the page into sections with shorter copy. When you structure the text with headlines, sub headlines, and body text, it becomes easier to read and even easier to scan. So don't underestimate the about page on your website. Remember, effective about page combines very good storytelling, social proof, and strong call to action to connect with your visitors and guide them toward taking the main action.

Before and after website redesign | Viral Hooks