Back to all case studies

Landing page for Ffern
•
Paavan Buddhdev

Contact me

Back to all case studies

product design portfolio
product design portfolio

Landing Page for Ffern

I designed Ffern’s first dedicated landing page, which we’re currently testing against our homepage…

My contribution

  • Ideation

  • Design

  • Dev handover

The team (Web team)

  • 1 × product designer

  • 1 × FE dev

  • 3 × growth lead

Project length

6 weeks (amongst other things)

The task

Until c.4 weeks ago, Ffern had never had a dedicated landing page.

Customer acquisition is primarily achieved through social ads, but these all led to our homepage. The homepage isn’t purely focussed on the product, as it has info about Ffern films, Ffern artists and more.

I was tasked with designing a landing page, and working with our dev to implement it, which highlighted the experience of receiving the Ffern package.

Our hypothesis was that having a landing page with more focus on the Ffern core product would lead to higher conversion.

My process

I started by researching what similar companies (luxury d2c) were doing for their landing pages. 

Then, as I’d been working on our component library in Figma, I jumped straight to high-fidelity design.

I created three landing page variations, each with a dedicated focus:

  1. Natural ingredients

  2. Free sample

  3. Social proof

I collected feedback from our head of growth, which brought in insights from previous parts of the website, and included creative feedback from our founder.

I also worked with our Head of Growth to design a testing plan, worked with our CTO to decide on implementation, and wrote a photography brief for our brand team.

  • Testing plan

  • Testing plan

  • Testing plan

  • Tech implementation

  • Tech implementation

  • Tech implementation

  • Photography brief

  • Photography brief

  • Photography brief

The final design

The final design had a mix of videos, interactive elements (expanding cards) and a phone number input that could be accessed through the page.

Dev handover

Implementing this page took a lot longer than I initially expected. I had to work through a lot of QA revisions for our FE dev to get everything matching pixel perfect.

The drawer component we used (shadcn) also proved to have some visual flickers and bugs, so we needed to code a new one from scratch.

This process led to me discovering Pixelay, which has since been a game-changer for QA.

Results & next steps

Some key results are as follows

  • People spend more time on landing page (12s) than homepage (8s)

  • 26% of landing page visitors click a button

  • 10% of landing page visitors join the waiting list, which is slightly higher than homepage (controlling for various factors)

However, we are still waiting on actual conversion data. Because of Ffern’s model, joining the waiting list doesn’t necessarily mean a visitor becomes a Ffern member, so it will still take 2-6 weeks to get more data through.

We’re going to continue iterating on new landing page designs, and see how they perform.

One new hypothesis is as follows: the Ffern homepage gets so many sign ups because of the waiting list popup, which opens automatically after 2 seconds.

We are shortly planning to run a test of the landing page which has the drawer popup automatically, instead of requiring an interaction.

Because of the delay in FE implementation, I am planning to use Framer, a no-code web dev tool, for the next versions of our landing page.

This will allow me to iterate faster with design work, without relying on devs or pulling their focus from other company projects.

Back to top