Swissonal
A seasonal planting calendar for hobby gardeners in Switzerland
View live here
Project overview
Role
Designer and developer
Timeline
May 2024 – Jul 2024
Team
1 designer/developer
Tools
Figma, Nuxt 3, TypeScript, UnoCSS, GSAP, Lenis, PostHog, Vercel
Role
Designer and developer
Timeline
May 2024 – Jul 2024
Team
1 designer/developer
Tools
Figma, Nuxt 3, TypeScript, UnoCSS, GSAP, Lenis, PostHog, Vercel
Swissonal started with a personal problem.
I wanted a simple way to know what to plant and when to plant in Switzerland.
The information existed, but it felt scattered, dense, and visually unhelpful for someone just getting started.
So I turned that gap into a product.
This became a self-initiated project where I combined brand strategy, UX/UI, front-end development, and content structuring into one tool.
Research and direction
I began with brainstorming, references, and possible competitors.
Then I moved into discovery and brand strategy using my own project questionnaire.
That phase helped me define the purpose, the audience, the tone, and the future ambition of the product.
I wanted Swissonal to feel alive. Gardening as a hobby should feel rewarding, not heavy.
Content architecture
The hardest part was not visual.
It was informational.
I researched Swiss sources and used AI as support to reach a useful approximation of what could be planted each month in Switzerland.
I structured the content into three main groups:
The core architecture was: language → month → plant type.
Design system and UI
Once the structure was clear, I moved into wireframes and interface design.
I built the visual language around bold typography, strong contrast, cartoon-like stickers, and Swiss references.
The stickers came to life using Midjourney AI.
What I built
I designed and coded the project myself.
This was before the current wave of vibe coding tools.
The implementation was manual and structured.
Swissonal was not a static website. It was a multilingual, content-driven product.
I used Nuxt 3 and organized the codebase around reusable Base components and Section components.
Base components used a B-prefix. Page-level sections used an S-prefix.
That made the interface easier to compose and easier to extend.
Technical highlights
Nuxt 3 with SSR
@nuxt/content for structured content rendering
i18n for English, German, and Italian
GSAP and Lenis for motion and smooth scroll
sitemap and robots for search visibility
PostHog for analytics
Vercel for deployment
The most important technical decision was separating content from presentation. New months, new categories, or new languages could be added without redesigning the whole interface.
Pages and interactions
I kept the product lean.
The site was split into three main pages: home, about, and benefits.
On top of the content system, I added motion and interaction where it helped the experience feel more polished.
loading states
typewriter effect in the hero
smooth scroll
scroll-based motion
horizontal movement in the benefits page
filtering by month and category
Distribution and measurement
After launch, I treated Swissonal like a real product.
I created content for Instagram, Facebook, TikTok, and newsletter formats.
I also recorded short gardening videos to support distribution.
I did not stop at launch. I also measured how people found and used the product with PostHog.
Outcome
Swissonal became more than a visual exercise.
Brand, structure, interface, code, launch, marketing and measurement all came together in one project.
A personal gardening problem became a multilingual digital product with its own brand, content system, front-end architecture, and launch strategy.