UI/UX DesignReal EstateWeb App

PropReel — AI-Powered Real Estate Video Platform

PropReel is an AI-powered real estate video platform designed to help real estate professionals transform property listings into engaging, professional-quality videos while reducing the time and effort required for property marketing.

Timeline2026
RoleLead UI/UX & Product Designer
ClientPropReel Technologies
Duration10 Weeks
PropReel — AI-Powered Real Estate Video Platform Web App design showcase cover
Real Estate2026
Tools & Methods:
FigmaDesign SystemUser ResearchFramer Prototyping
Context

Project Overview

PropReel automates video asset generation for commercial and residential realtors. The platform ingests MLS data, high-resolution photography, and architectural floorplans, synthesizing them into dynamic social and listing video reels with natural AI narration and automated cinematic camera moves.

01

The Challenge

Real estate agents spend hours manually coordinating videographers or struggling with complicated video editing software. The client needed an intuitive dashboard where non-technical agents could generate, customize, and export studio-grade property videos in under 3 minutes.

02

My Approach

Conducted 12 exploratory interviews with realtors and brokers to understand their weekly listing workflow. Designed low-fidelity wireframes exploring timeline editors versus automated preset templates. Discovered that realtors prioritized automated template presets over granular timeline manipulation, leading to a modular card-based composition flow.

03

The Solution

Architected a step-by-step video creation wizard featuring real-time preview canvas, drag-and-drop scene ordering, customizable branding palettes, and one-click export to Instagram Reels, TikTok, and YouTube Shorts.

Human-Centered Architecture

User Experience & Interaction Decisions

Focus was placed on progressive disclosure: high-level options (script tone, music style, video format) are presented upfront, while advanced audio ducking, subtitle typography, and transition pacing remain accessible via collapsible side drawers.

Functionality

Key Product Features

Automated MLS listing sync and photo extraction
Real-time interactive video playback preview in browser
Custom brand kit presets (typography, logos, agency colors)
Multi-format export (9:16 vertical, 16:9 widescreen, 1:1 square)
Automated AI voiceover script generation with accent selection

Design System & Tokens

Built a dark-mode-first design system in Figma with 8pt spatial grid, fluid typography tokens, high-contrast accessible states, and a customized set of video timeline and media control components.

Prototype & Micro-Interactions

Created high-fidelity Figma and Framer prototypes demonstrating the video generation loading states, timeline trimming micro-interactions, and instant template switching.

Validation & Impact

Project Outcome

Real-World Results

Realtors tested reported creating ready-to-publish listing videos in an average of 2.8 minutes compared to previous 4-hour editing workflows.

Have a Similar Challenge?

Let’s create something that works for your business.

I’m available for freelance UI/UX design, Webflow development, and full product design contracts.

Muhammad Arslan | UI/UX Designer, Webflow & WordPress Developer