Duckbill: Framer Website Development

Frontend Engineer

Framer Developer

Figma

Framer

React

Duckbill

🥱 TLDR;

❇️ Project Overview

✦ About the client: Duckbill

✨ The Spark

✦ What were the client's needs and goals?

🚀 The Process

🤔 Challenges Faced

📸 Project Mockups

📊 The Stats

✦ Timeline: ~ 1 month

✦ Budget: $2,800

✦ Deliverables: Finished Framer project file and a published link.

💬 Client Testimonial

Impressed? Want me to create a Framer website for you? Check my Framer service details here and book instantly ⚡

🥱 TLDR;

I built V2 of Duckbill's website in Framer.

Duckbill's homepage hero section.

⤷ Live Preview: https://www.getduckbill.com/

❇️ Project Overview

✦ About the client: Duckbill

Duckbill is an executive assistant for your personal life, powered by expert humans and enhanced by AI.

Duckbill provides life support, taking over the execution of dreaded everyday tasks by anticipating needs, surfacing results catered to member tastes and preferences, and fully executing on their behalf.

✨ The Spark

✦ What were the client's needs and goals?

Elysia Mann, Head of Marketing at Duckbill, contacted me to build their site's V2. They were finalising the designs but wanted to book a website developer to build it out.

Duckbill V2.0

In total, around 5-6 pages needed to be developed for the new site, along with the following:

Implementing Facebook/Meta Pixel, cookies, Google Tag Manager (GTM) etc.

100% responsive designs for desktop, tablet and phone sizes.

Accessible and scalable components so they can be easily modified later.

CMS setup (for blogs and other such pages/sections).

Connecting the project to a custom domain.

🚀 The Process

I completed the project in the following steps:

✧ Analysing the design: getting to know the brand design, page layouts, section content and prototype. I started with the homepage, checking the needed typography scale, colors, and effects.

Bird's eye video of different breakpoint UI designs of the homepage.

✧ Getting to know the components: this is useful when we need to make a scalable system that's easy to maintain in Framer. I checked components like testimonial cards, animated gradient text, etc, to know their working and UI design to replicate it 1:1 in Framer.

Some of the components used in the project.

✧ Developing the website: I start by importing all the colour and text styles to create an excellent base for sections and components. Then, I built all the pages individually, from the homepage to about us and then to gift cards, FAQs, etc.

Neatly arranged components and text styles.

Some pages were straightforward, like about us, privacy policy, gift cards, etc. While others had some challenging sections like the how it works section on the homepage, etc.

✧ Constant feedback cycles and updates: the Duckbill team was excellent throughout the process. I collaborated closely with Jill, the UI designer; Elysia, the marketing and project manager; and Mary from the content team. I gave them all the updates about the project, be it quick progress or a bottleneck that needed a thorough review.

✧ Improving performance and SEO: I wanted to do a quick performance and SEO check upon completing most of the project. So I double-checked all the assets used in the website, tested the site on Lighthouse and PageSpeed Insights and improved the score, so we got 90+ scores on all departments like performance, accessibility, SEO, etc.

✧ Client handoff: after all the tasks were marked as completed, I was happy to transfer the Framer project to the Duckbill team, where I got invited as an editor for quick copy changes etc. After that, the handoff was done, and the project was marked as completed (with a huge success 🎉)

🤔 Challenges Faced

There were quite a few challenges I faced throughout the project, but the good thing is that, in the end, me and the Duckbill team solved most of the issues thanks to a great collaborative and supportive environment.

I want to highlight two of such challenges:

The custom "Sign up" button: the "Sign up" button on the navigation might look like a simple button made with no code, but it's actually more than just a regular button made in Framer.

The sign up buttons on the hero section.

The Duckbill team required it to do two things:

Redirect to the custom-made /waitlist page: https://app.getduckbill.com/wait-list

If a user lands on any page of the website (including the homepage) via Duckbill partner promo code, then it should redirect to the /waitlist page with the promo-code attatched to it. For example, if the partner promo code is ABC, then the /waitlist page link should be: https://app.getduckbill.com/wait-list?promo=ABCD

This is to be achieved by using UTM parameters and making a custom coded button for the same. So, I coded a new React button component using Framer's code component feature:

import { addPropertyControls, ControlType } from "framer"
import { useEffect, useState } from "react"


export default function DynamicPromoButton(props) {
    const { text, baseURL, parameterName, defaultPromoCode } = props
    const [promoCode, setPromoCode] = useState(defaultPromoCode || "")
    const [isHovered, setIsHovered] = useState(false)

    useEffect(() => {
        // Fetch promo code from the current URL query parameters
        const params = new URLSearchParams(window.location.search)
        const promo = params.get(parameterName)
      
        // Use default if no promo is provided
        setPromoCode(promo || defaultPromoCode)
    }, [parameterName, defaultPromoCode])

    const handleClick = () => {
        const url = new URL(baseURL || window.location.origin)
        if (parameterName && promoCode) {
            url.searchParams.append(parameterName, promoCode)
        }
        // Open in new tab
        // window.open(url.toString(), "_blank")
      
        // Open the URL in the same tab
        window.location.href = url.toString()
    }

    return (
        <button
            style={{
                ...props.style,
                display: "flex",
                width: "104",
                height: "32px",
                justifyContent: "center",
                alignItems: "center",
                padding: "4px 24px",
                fontSize: "16px",
                lineHeight: "150%",
                fontWeight: "600",
                fontFamily: "'IBM Plex Sans', sans-serif",
                color: "#032B49",
                backgroundColor: isHovered ? "#D5F7F8" : "#8EE3E9",
                border: "1px solid #032B49",
                borderRadius: "128px",
                cursor: "pointer",
                textAlign: "center",
                outline: "none",
                transition: "transform 0.2s, background-color 0.2s",
            }}
            onClick={handleClick}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
        >
            {text || "Sign up"}
        </button>
    )
}

DynamicPromoButton.displayName = "Dynamic Promo Button"

// Framer UI controls
addPropertyControls(DynamicPromoButton, {
    text: {
        type: ControlType.String,
        defaultValue: "Sign up",
    },
    baseURL: {
        type: ControlType.Link,
        defaultValue: "https://www.duckbill.ai",
    },
    parameterName: {
        type: ControlType.String,
        title: "Param Name",
        defaultValue: "promo",
    },
})

This would give us a customisable Framer UI for the client to change button's properties:

The Framer UI controls for the dynamic promo button component.

2. The footer newsletter form: there is a newsletter form on the website's footer. I made it with the native forms feature in Framer.

The footer newsletter section.

On the surface it may look simple, but under-the-hood, I collaborated with the Duckbill engineering team to make this form function at the backend.

Essentially, a form in Framer needs an email, a Google Sheet connection or a webhook link for it to send the form data. We chose the webhook version since the data needs to go to Duckbill's customer.io dashboard where the team managed their campaigns.

There is no official method to connect a Framer form with customer.io, so this was a challenge from the start. We tried various methods, but at the end we settled with using a Zapier hook. So the Zapier webhook would sit in between the Framer form and customer.io:

The newsletter form workflow.

📸 Project Mockups

Hero section of the homepage.

Pricing section.

The hamburger menu, FAQs page and the About page on an iPhone mockup.

📊 The Stats

✦ Timeline: ~ 1 month

✦ Budget: $2,800

✦ Deliverables: Finished Framer project file and a published link.

💬 Client Testimonial

Vaibhav is an absolute pleasure to work with, from the first meeting we had all the way through buttoning up all of small edits I had along the way. The entire team enjoyed working with him and remarked on his professionality and skills to bring our designs to life. He also taught me a lot about Framer along the way. I look forward to continuing to work with Vaibhav and having him as a resource, and would strongly recommend him to anyone else!

― Elysia Mann, Head of Marketing at Duckbill