Figma-to-Live Marketing Website Design

Keerththana R

Client

Playlog Group Inc.
About Playlog
Playlog is your all-in-one solution for capturing, sharing, and reliving life's most memorable moments with friends and family. As the lead product designer, I shaped the product from zero to launch, owning the full UX/UI design across mobile and web.

Project Objective

As Lead UX/UI Designer, I spearheaded a complete redesign of Playlog’s marketing website to help new visitors instantly grasp the platform’s value and convert into users. I conducted an in-depth audit and competitive analysis, crafted wireframes and high-fidelity designs in Figma, which then the developers built it accordingly. Featuring a video hero banner, “Featured In” marquee, interactive bento-style feature grid, social-proof carousel, and dedicated Wedding, Travel, and Corporate use-case pages. By blending thoughtful UX strategy with dynamic visuals and seamless components.

🎯 The Challenge

Help first-time visitors understand Playlog’s value fast, feel confident sharing media, and convert to sign-ups—all within the first few scrolls.
Launching a marketing site that both captivates and converts meant overcoming several key hurdles:
Instant Clarity: First-time visitors had mere seconds to understand what Playlog does. We needed a hero experience that spoke volumes—visually and verbally—before users even scrolled.
Diverse Audience Needs: Playlog serves weddings, travel adventures, and corporate events and much more! Each with its own motivations and media styles. Crafting a unified structure that could be instantly customized for each use case without losing brand cohesion was critical.
Engaging but Lightweight: We wanted rich, moving visuals (video hero, interactive grids, parallax testimonials) without sacrificing load speed or SEO. Balancing media richness with performance optimizations (e.g., lazy-loading, optimized codecs) was a constant focus.
Building Trust Quickly: As a new visitor, you’re unlikely to commit until you see credible proof. We needed a social-proof system that felt authentic, leveraging real reviews in a way that reinforced confidence without appearing “salesy.”
Future-Proof Scalability: Beyond the initial launch, Playlog’s team needed to update content, swap imagery, or spin up new use-case pages.
By addressing these challenges head-on—through strategic content layouts, performance-first media handling, and a modular design system we created a site that educates, inspires, and converts.

🔍 Research & Analysis

Analytics Audit: Identified high drop-off on old homepage (70% bounce).
Competitive Scan: Benchmarked against event-sharing apps (e.g., WedPics, Dropbox, Google drive, Eversnap).
User Interviews: Uncovered that guests want inspiration—“What could I share?”—and trust signals from real reviews.

✨ Key Design Solutions

Dynamic Video Hero Banner A full-width, autoplay video that instantly immerses visitors in the Playlog experience—showcasing real users sharing moments before any text appears, and setting an engaging, emotional tone from the first glance.
Trust-Building Logo Marquee A clean, horizontal strip of featured on which instantly signalling credibility and easing visitor hesitations about trying something new.
Bento-Style Feature Grid A 2×2 modular layout highlighting core offerings—Storage, Privacy, Albums, ProAlbum with concise icons and headings. This “at-a-glance” grid answers the question “What can I do here?” in a single scroll.
Interactive Testimonials Carousel Real guest reviews presented in a static card style blocks, complete with user photos and star ratings. This social proof adds an authentic, human touch that builds trust and encourages conversions.
Tailored Use-Case Pages Three tailored templates (Wedding, Travel, Corporate) that share a unified structure but swap in audience-specific imagery and microcopy. By speaking directly to each use case, visitors instantly see how Playlog fits their unique needs.

📈 Results & Impact

Bounce Rate ↓ 28% (from 70% to 42%)
Value Comprehension in ≤5 s: Concise headlines, the bento grid, and intuitive layout mean users instantly grasp “what Playlog is” and “how it helps me,” reducing confusion.
Monetization Traction: In the first month after launching our paid plan, 3 users converted to paying customers, immediately validating our checkout flow. Reinforcing social proof, the marketing site not only educates but also persuades visitors to upgrade.

VIEW LIVE WEBSITE

Like this project

Posted Jul 9, 2025

I create SEO-friendly sites wireframed & prototyped in Figma with reusable components, optimized for speed & mobile, from kickoff & audit to launch & support.

End to End Product Design | App / Web Design | B2B & B2C
End to End Product Design | App / Web Design | B2B & B2C
Short Form Video Editor for Beauty, Tech, Lifestyle brands
UX/UI Mobile App Design for a Fintech Neo-Banking Space, XTM
UX/UI Mobile App Design for a Fintech Neo-Banking Space, XTM
UX/UI Mobile App Redesign for Go Pro App
UX/UI Mobile App Redesign for Go Pro App

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc