Fern Website

01 / custom website

Fern Website

https://getfern.app/
custom website responsive frontend brand development beta onboarding email automation

A marketing site for Fern, a wellness app in beta. The goal was to introduce the product without making it feel clinical, technical, or over-explained.

Fern is a wellness app designed to help people notice patterns across symptoms, routines, food, energy, and everyday life.

The website was built to introduce the product clearly and support early beta growth without relying on heavy marketing language or dense onboarding flows.

Context

The product already had a strong visual direction before the site was developed. The challenge was translating that feeling into a usable web experience without losing clarity.

Most wellness websites lean heavily into productivity language, medical framing, or oversized claims. Fern needed a calmer presentation that felt more personal and reflective.

The site also needed to work well across mobile devices since most early visitors were expected to come from phones.

Fern website mobile layout
Fern website visual system

Process

The project started in Figma with a full visual system covering:

  • typography
  • spacing
  • color hierarchy
  • buttons
  • navigation
  • onboarding forms
  • reusable UI components

The visual direction was built around soft lavender tones, minimal layouts, layered imagery, and low-contrast environments pulled directly from the product experience.

The frontend was then developed from scratch using:

  • CSS
  • TypeScript
  • HTML
  • JavaScript

The structure of the site was kept intentionally simple. Visitors could move through the product explanation, understand the app quickly, and request beta access without being pushed through multiple pages.

The desktop and mobile layouts were designed separately so spacing, pacing, and navigation felt natural on both.

Fern website desktop and mobile
Fern website mobile interface detail

Outcome

The final site introduced Fern in a way that matched the tone of the product itself.

The onboarding flow stayed lightweight, the interface remained easy to navigate across devices, and the visual system carried consistently from the website into the app and onboarding emails.

The project established the foundation for Fern’s early beta rollout and public-facing identity.

Fern website mobile final view

View all work