@pixeldesignlab
TikTok · Split screen
@pixeldesignlab This is how you can change your website from average to premium ✨💻 This is one of my absolutely favorite projects I’ve been working on 🥹🎀 It’s so much easier to create websites that match your personal style 😄💕 #webdesign #webdesigner #website #websitedesign #websitedesigner #redesign #uxdesign #uxdesigner #SmallBusiness #websitetutorial #businesswebsite @Giulia Chilin
Performance
Video #5380 · Split screen
[01]
The creator presents a case study of a website redesign for a client named Giulia. She first shows the outdated 'before' website, diagnoses its problems with text overlays, and then walks through the redesign process, which includes establishing a new brand identity, defining strategy and goals, creating wireframes, and planning the user journey, all while showing a screen recording of the new site being built. She concludes by emphasizing that a website should be a powerful, strategic tool, not just a pretty design.
[02]
[03]
50.1KExplaining a website redesign process@pixeldesignlab · Before/After Transformation
54K1.1×Explaining a website design transformation@pixeldesignlab · Before/After Transformation
97.4K2.1×Web design process start to finish@pixeldesignlab · Tutorial / How To
194.8K2.2×Redesigning a website for scannability@pixeldesignlab · Tutorial / How To
274.1K1.1×Fixing common website design mistakes@pixeldesignlab · Before/After Transformation
130.1K1.7×Website redesign before and after@pixeldesignlab · Good vs Bad
494.4K2×Before and after website redesign@pixeldesignlab · Before/After Transformation
702K12.7×Designer creates 3D website concept@marcelodesignx · Process
82.4K1×Critiques and redesigns famous website@pixeldesignlab · Hypothetical Case Study
61KDesigner redesigns influencer's boring website@pixeldesignlab · Hypothetical Case Study
135.5K3.1×Designer critiques and redesigns website.@pixeldesignlab · Good vs Bad
74.7KDesigner critiques and redesigns website@pixeldesignlab · Hypothetical Case Study[04]
[05]
What stops the scroll in the first 3 seconds
Verbal hook · 45%
Juliet is a very successful digital entrepreneur, and she best that her old website was outdated and did not reflect what she wanted her audience to feel when they land on it.
Visual hook · 55%
A split-screen layout showing a speaker on the bottom and a website screenshot on top. A red line is immediately drawn across the website, visually indicating a problem or cancellation.
[06]
Steal this for your own video
Split screen: you on the talking to camera, a screenshot of on the , and a line slashes across the asset in the first second to mark it as the problem.
[07]
The promise the opener makes, and how the video pays it back
Hook
Visually present a flawed 'before' state, using text overlays to label its specific deficiencies, which establishes a relatable problem and creates an immediate desire for a solution.
Payoff
Deliver a concise, memorable manifesto that reframes the viewer's perspective on the topic, transforming the specific case study into a universal and actionable lesson.
[08]
The structural pattern this video runs on
Framework
The Strategic Transformation Blueprint
Demonstrating the value of a strategy-first approach by showcasing a 'before and after' transformation process, moving from a relatable problem to an aspirational, well-reasoned solution.
The Problem Diagnosis
Articulate the subject's core problem and the negative emotional or business impact it causes, framing the urgent need for change.
The Foundational Pivot
Introduce a counter-intuitive first step: solving a deeper, strategic problem (e.g., brand identity) before addressing the visible, surface-level issue (e.g., design).
The Strategy Deconstruction
Break down the essential components of the foundational strategy, providing a checklist of critical considerations that establishes expertise and offers educational value.
The Process Visualization
Show a time-lapsed or sped-up walkthrough of the tangible execution process, connecting the abstract strategy to concrete actions and building momentum towards the final result.
The Guiding Principle
State the single most important objective or user-centric goal that drives all execution decisions, clarifying the 'why' behind the work and its intended outcome.
This is how you can change your website from average to premium ✨💻 This is one of my absolutely favorite projects I’ve been working on 🥹🎀 It’s so much easier to create websites that match your personal style 😄💕 #webdesign #webdesigner #website #websitedesign #websitedesigner #redesign #uxdesign #uxdesigner #SmallBusiness #websitetutorial #businesswebsite @Giulia Chilin
contextual · beginning
Outdated
contextual · beginning
Doesn't speak to her audience
contextual · beginning
Evokes no feeling
contextual · beginning
Lifeless
branding · middle
Giulia Chilin
Juliet is a very successful digital entrepreneur, and she best that her old website was outdated and did not reflect what she wanted her audience to feel when they land on it. Before we even started the website, we did a completely new brand identity. That's for another video. But it's important to first know who is the target audience, what's the strategy, the main business goals, purpose, values with a consistent visual identity in place. Rest becomes much smoother. And so from there, it was a breeze. We started with website wireframe to set up the strategy, how the content will be placed, and what the user journey will look like. The goal is to avoid confusion and guide users exactly where we want them to go. Book a service, sign up for a webinar, fill out the contact form, etcetera. It needs to be very clear what action we want the user to take. Your website shouldn't be just pretty. It's a powerful tool, not just a better. So think about it.