About GardenLetters
On the surface, GardenLetters is a digital board where people can write, decorate, and post letters to a shared public board or their own private gardens. On a deeper, more vulnerable level, it’s a quiet corner of the internet for confessions, encouragements, unsent messages, or notes to future selves.
As the sole designer and maker, I led GardenLetters from idea to launch: defining the core concept and emotional feel, creating all key flows in Figma, crafting the visual language, and then using Figma Make and Supabase to turn those designs into a responsive, live product.
Sketching the garden, letters, and letter creation flow.
To capture the metaphor of a “garden”, I began ideating around these core areas:
✱ The look and feel of the handwritten letters
✱ The flowers selection
✱ How the “garden” should look
I started by exploring visual references for bouquets, envelopes, and textured paper. I then sourced a public domain bouquet illustration that I liked from Unsplash, and extracted individual flowers from it with the help of ChatGPT. This yielded a library of floral elements that could be recombined in different ways on each letter, allowing users to “arrange” their own bouquet while creating a letter.
Back on my canvas on Figma, I visualized what the public board of letters would look like, what an individual letter would look like, and how one might create a letter.
Sending designs to Figma Make and beginning the iteration loop.
Once I was happy with the look and feel, I selected three foundational frames (representing the public garden, a private garden, and the letter creation flow) and sent them to Make with a prompt describing the overall product.
The initial output held closely to my designs, which made me really optimistic. From that baseline, I iterated intensively, fixing the details in terms of alignment, behaviors, interactions, and layouts.
Refining interactions and mobile responsiveness.
Once I was happy with the desktop experience, I shifted my focus to mobile (which in hindsight, I should have started with first considering most people would use the site on mobile). When prompting Make, I defined how the layouts should adapt: sticky primary buttons for key flows, vertically stacked notes for readability, a hamburger menu for top nav actions, and preserved decorative elements on individual letters.
The mobile behavior was refined over multiple iterations. Each round of adjustments brought the live experience closer to what I envisioned, until it felt cohesive across device sizes.
Creating the data layer on Supabase.
To make the public and private gardens accessible to the public, GardenLetters needed a data layer (obvs!). I chose Supabase as the backend and database, and used AI guidance within Make to configure and connect Supabase to the front end.
Make walked me through account setup, configuration, and integration through guided UI, which I really appreciated. It was all set up within minutes, which surprised me.
Picking a domain and going live.
For launch, I opted to connect a custom domain from Namecheap. While GardenLetters could have remained on the default figma.site domain, a dedicated domain aligned better with the experience I was aiming for. And hence, GardenLetters.online was officially born. 🚀
Distribution (and unexpectedly going viral).
Before I’d even had time to think about distribution or a social strategy, people somehow caught wind of GardenLetters. It all started when I came across a post on Instagram titled “the most whimsical websites on the internet“, featuring GardenLetters on the first slide after the cover.
It was from an account on whose videos I had casually commented on before, mentioning GardenLetters and encouraging them to check it out. They ended up loving it and chose to feature it in their next carousel. Within a couple of days of that post going live, GardenLetters crossed 1,000 letters, which was already far beyond what I’d expected.
The real boost came shortly after, when a second creator on a different account shared a video about GardenLetters that reached around 1 million impressions. On that single day alone, 7,600+ new letters were posted, pushing the total count to roughly 20,000 letters.
Today, GardenLetters has over 100,000 letters posted on it. 🎉
Migrating from Figma Make to Claude Code, GitHub, and Netlify.
When GardenLetters crossed 100K letters, it became clear that Figma Make wasn't sustainable for the frontend. Every change was a one-way push with no real version history, so I was always one accidental edit away from overwriting work I couldn't get back.
At this scale, that risk wasn't one I wanted to keep taking. I wanted finer control over the codebase and the freedom to explore changes properly: to test, branch, and roll back without the fear of breaking something live.
So I moved the frontend to GitHub + Claude Code, and switched hosting to Netlify, which deploys the site automatically every time I push a change and lets me preview updates before they ever go live.
This setup gives me full version control, a safety net for every change, and room to experiment; all while the database and all 100K letters stay exactly where they are.
Creating admin tools for moderation.
I knew that any product built on user‑generated content would inevitably attract spam, duplicates, or potentially harmful notes, so I designed a lightweight admin layer to keep the public garden healthy.
Before migrating my frontend, I initially had a hidden moderation mode: A password protected toggle that, when activated in the build environment, reveals delete controls on each note.
With Claude Code, I was able to create a more robust password-protected moderation tool for myself, that would automatically flag notes that contain profanity or keyboard spam, and allow bulk-deletion.
New animations, transitions, and visuals.
While experimenting on a sandbox with Claude Code, I ended up giving GardenLetters a visual refresh aimed at making the garden feel more alive.
I had a radial gradient on the top left corner of the screen to play the role of a "sun", an immersive loading animation that illustrates the idea of entering a garden through tall stalks of flowers, and gentle swaying motions on the flowers to create a sunnier, windier feel on the garden.
Hovering over the flowers now triggers a playful response where they sway in response to the touch of the cursor. And switching between day and night modes now tucks the sun away and brings in the moon, shifting the garden from a bright, sunlit sky to a softer, moonlit palette.
Reflections and findings, six months and 100K letters later.
Private gardens were a good call.
I set up a custom live artifact on Claude that showed me how GardenLetters was performing both from on a high level perspective and on a day-to-day basis, pulling data from its database on Supabase.
It was interesting to observe that 57% of total letters posted were private, which was way more than what I had expected. It was surprising considering that posting anonymously was already an option on the public garden.
What this suggests to me is that “Anonymous” doesn’t automatically feel safe enough when the content is emotionally charged. Even if names aren’t attached, the idea of broadcasting something personal and mushy to a completely open audience probably still feel exposing. My guess is that the private gardens give people clearer expectations on who their letters are exposed to, which ultimately gives them more reassurance to be vulnerable.
This was an eye-opening pattern in human behavior that perhaps surfaces in similar ways in other apps or products.
People are the same at heart, no matter where in the world they are.
It was really heartwarming to see letters written in different languages: English, French, Tagalog, Korean, Spanish, Indonesian, Arabic, Italian, and more.
GardenLetters has unexpectedly crossed cultural and geographic boundaries, even without any intentional localization. The fact that other languages are showing up on a shared layer that’s English by default only shows how strong the organic reach has been.
What an absolute honour to host people of all cultures.
By designing to delight myself, I am also designing for many others like me.
The overwhelmingly positive reception of GardenLetters validated this belief I’d quietly held for a long time.
In a corporate setting, this can get muted. Design decisions are often framed in terms of metrics, and it can become difficult to defend instinct when every choice is expected to come with numbers and graphs. But as designers, our taste and intuition are our superpowers. Our taste and intuition encompass the ability to predict what makes people happy, and that ability to predict helps us bring our visions of perfection and beauty to fruition.
Trusting my judgment as a designer, and honoring it enough to execute on it, was the decision that led to the success of GardenLetters. And I’m really happy that this project has been a testament for that.
© Zoe Chin 2026