Fern brings signals from client conversations into a shared view of relationship health, risks, and next steps. The website needed to explain that value to agency leaders and the teams managing their client accounts.

The existing website was functional, built through rapid AI-assisted development. The founder wanted a substantial redesign: a clean, modern experience with distinctive graphics, thoughtful motion, and a clear story leading visitors toward booking a demo.

I worked directly with the founder to reshape the page structure and connect the client management problem with Fern’s capabilities.

The core copy was already available. I refined the messaging and recommended where to shorten, rewrite, or reposition content, explaining how each change could improve clarity and support the page narrative.

The story moved from recognizing overlooked client signals to understanding the platform, exploring its features, and booking a demo.

I used AI (Claude, Codex with skills, and Figma AI) to explore visual directions, support research, refine content, and develop ideas for graphics and animation. This helped me compare alternatives quickly and bring concrete options into discussions with the founder.

AI also supported the preparation of motion documentation, helping translate animation ideas into guidance for development.

I developed the visual style, custom product graphics, animations, and responsive layouts in collaboration with the founder and developer.

I documented the intended motion and responsive behavior for implementation. The developer built the website directly in code and brought the approved design to launch.

The “Why Fern” section connects three ideas-clarity, a shared source of truth, and guidance-with focused product illustrations.

Tabbed explanations let visitors explore each idea alongside relevant interface details. Client summaries, relationship signals, and communication history make the platform’s value tangible.

Designed a bento section around follow-up tasks, recurring client issues, relationship health, and recommended actions.

Each card pairs a short explanation with a custom interface illustration, showing how the capability fits into everyday work. Different card sizes create a visual hierarchy while keeping the section easy to scan.

The integrations section presents the tools agency teams already use in a simple, recognizable grid.

A dedicated MCP section extends the story to AI tools such as Claude and ChatGPT. I created a visual diagram showing how Fern supplies client context to those tools, making an abstract technical connection easier to understand.

Adapted the layouts, typography, and product graphics across screen sizes.

On desktop, the feature explanations sit beside large visuals. On mobile, the visuals appear directly beneath their related explanations, while the bento cards stack into a single column to preserve a clear reading order.

Cream backgrounds, serif headlines, muted green accents, and natural landscape imagery give Fern a calm, distinctive presence.

I combined this direction with translucent cards and detailed product illustrations, balancing an expressive marketing style with a clear presentation of the software. The type scale and reusable components—navigation, buttons, cards, and integration logos—are collected in a UI kit.

The redesigned website was successfully developed and launched, giving Fern a cohesive visual presence and a clear story connecting the client management problem with the platform’s capabilities and a path to booking a demo.

The client was happy with the design from the first presentation, and clients also gave positive feedback. Close collaboration with the founder and developer carried that direction into the live website, supported by custom graphics, responsive layouts, and documented motion.