About GardenLetters
GardenLetters is a digital “garden” where people can write, decorate, and post letters to a shared public board or their own private gardens via unique links.
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. I owned interaction design, UX for public and private boards, content moderation tools, and even debugging with AI as my technical pair.
Sketching the garden, the letters, and the 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.
Public as default, and private as an option.
I designed GardenLetters around two complementary spaces: a shared public garden for everyone, and optional private gardens for more intimate sharing. The idea was to keep it open and communal, while still giving people a way to post deeply personal letters in a more private setting if they prefer.
✱ The public garden is a shared board where anyone can create letters and post openly.
✱ Private gardens extend this interaction model into more intimate circles. People can create a private garden, copy its unique code or URL, and share them with specific people. Only those with the link or code can then view and add letters, which makes it well-suited for small groups like teams, families, or friend circles.
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.
Giving the frontend a backend to connect to via 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.
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 without complicating the main experience.
Using Make, I added a hidden moderation mode: a toggle that, when activated in the build environment, reveals delete controls on each note.
This moderation view is only accessible to me and never exposed to public users, allowing quiet, on‑demand cleanup while preserving a clean, distraction‑free interface for everyone else.
Animations, transitions, and visual tweaks.
Final pedantic fixes were reserved towards the end, before going live, to make sure the experience is well-rounded and flawless. This included loading states, spacings, copy, colors, and other granular details.
Picking a cutesy domain and finally 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 on Instagram).
Before I’d even had time to think about distribution or a social strategy, people somehow caught wind of Garden Letters. 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 inflection point 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 50,000 letters. 🎉
Reflections and findings, four months and 50K letters later.
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.
Private gardens were a good call.
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.
When I design to delight myself, I’m 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 or taste when every choice is expected to come with numbers and a slide. Subjective opinions get brushed off with "Okay, but that's just how you feel." when in reality, how we feel is why we're designers in the first place. Our taste for what works encompasses 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 own taste and judgment as a designer, and honouring 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.