✨ Intro Statement
I developed a sleek, conversion-focused password landing page for BiomDent, an innovative Swiss microbiome toothpaste by the Helvetica group. Translated directly from a Figma design, this "coming soon" page effectively builds anticipation and captures leads ahead of their Q4 2026 launch.
📄 Project Brief
BiomDent needed a temporary landing page to collect email signups while protecting their in-development Shopify store. The client provided a minimalist Figma design requiring a clean header, an interactive product slider, and an email capture form. The goal was to create a lightweight, responsive entry point that reflects Swiss precision and modern oral care aesthetics without relying on heavy themes.
🎯 Goals & Strategy Overview The strategy focused on speed, brand consistency, and immediate lead generation.
Main Goals:
-
Figma-to-Code Accuracy – Perfectly match the provided design, including the distinctive magenta and blue gradient branding.
-
Engaging Presentation – Implement a smooth, responsive product slider to highlight key benefits (e.g., SLS-free, low-abrasive).
-
Frictionless Lead Capture – Integrate an easy-to-use email signup form connected to their marketing backend.
🔍 Project Review Designing for Anticipation & Simplicity The layout is intentionally stripped back to focus entirely on the product and the call-to-action. By utilizing a crisp white background that transitions into a vibrant blue gradient, the visual hierarchy draws the user's eye naturally down to the "Notify me" button. The custom slider adds just enough interactivity to educate the user on the product's unique selling points without distracting from the main goal of email collection.
🔧 Project Development Breakdown Lightweight Architecture & Integration
-
Phase 1: Foundation & Header: Built the layout using Shopify's native password page template, integrating the custom BiomDent logo and the top announcement bar detailing the launch timeline.
-
Phase 2: Interactive Slider: Engineered a lightweight, touch-friendly slider utilizing clean HTML/CSS and minimal JavaScript to showcase the toothpaste imagery alongside its specific health benefits, ensuring perfect scaling on mobile devices.
-
Phase 3: Form Integration: Customized the native newsletter form to match the Figma UI perfectly, ensuring the input fields and the vibrant magenta CTA button align with the overall brand system.
📈 Project Outcome A pixel-perfect, highly responsive pre-launch page that effectively masks the store under construction while actively building BiomDent’s initial customer base. The page is fast, visually striking, and perfectly aligned with the Helvetica group's brand standards.
📊 Key Stats
-
100% Visual fidelity to the original Figma design
-
1 Custom-built, lightweight interactive slider
-
1 Fully integrated lead-capture funnel
✅ Key Results
-
Delivered a polished, responsive Password Landing Page to gate the store.
-
Implemented a seamless Product Slider for early customer education.
-
Integrated a styled Lead Capture Form to build a pre-launch audience.
-
Maintained strict Brand Fidelity, matching fonts, colors, and the gradient footer.
💼 Business Impact This streamlined landing page turns a standard "under construction" barrier into a powerful marketing asset. By successfully capturing early interest and building an email list through a premium, trustworthy interface, BiomDent is cultivating a warm audience ready to convert the moment the full site goes live.