have you ever lost someone?
An Interactive Mobile Web Experience
Overview
Crafting a digital community garden for reflection, remembering, and sharing of grief.
Created in Spring 2023 as a response to recent loss in the Yale community and a lack of physical space for grieving on campus. Users are invited to share one thing they would say to someone they’ve lost and plant their words in a digital memorial garden, alongside other submissions from the community. Everyone’s journey through grief is unique, but the project seeks to remind people they are not alone on that journey while maintaining a certain level of privacy for users.
TOOLS
Figma, Vanilla HTML/CSS, Airtable.JS
Figma, Vanilla HTML/CSS, Airtable.JS
ROLE
Primary Designer & Developer
Primary Designer & Developer
TIMELINE
3 weeks in spring 2023
Context
Yale is a difficult place to grieve. The university offers students 1-1 therapy and other individualized resources following loss, but makes little space for community gathering around grief and takes down physical memorials after a few days. There’s a pressure to move on quickly and continue with busy collegiate life, leaving little time for students to slow down and process their feelings with each other.
When asked to imagine ‘a website as a billboard’ that could be installed on campus for my interaction design class, I wanted to use the project to address this campus issue. My project partner Alice had also recently lost a friend, and we talked about the experience of sharing grief with people who can only offer surface level condolences because they have not gone through something similar. While sincere, it’s a frustrating experience and can make you feel even more alone in your grief.
We imagined a digital space where people could gather around shared experiences of loss, overcoming physical and time barriers to in-person community gatherings, while also allowing users to only share as much as they were comfortable with.
parallels between cemetaries and community gardens:
places of rest, filled with flowers, stewarded with love
Process
Billboard → Digital Garden
The site-specific nature of the project presented a unique challenge of carving out a space for students to pause and reflect in an otherwise kind of hostile landscape.
- We began with the idea of a gallery-like display of letters to lost loved ones, but after mocking up a couple potential designs, we decided it looked too much like tombstones/a graveyard, which was a bit too morbid.
- I’ve always thought of cemeteries as places for a celebration of life, having grown up visiting lush memorial gardens in California and with traditions like Chinese tomb-sweeping day and Dia de Los Muertos. I felt that a digital environment filled with plants and symbols of life would set a better tone for reflection and remembrance, which led me to the idea of a community garden.
- Neighborhood gardens not only provide sustenance and beauty, but also can be a place of rest and gathering for community members. I liked the idea of a space that would be seeded by the community themselves, we decided on the idea of a digital memorial garden, where every flower can be clicked on to show a someone’s note to a loved one
most routes lead to the garden, but some lead to dead ends
Mapping User Journeys
To encourage reflection, our website brings the user through a series of questions about recent experiences with loss. As we were sketching out possible routes through the questions, some key concerns for us were:
- Who should be able to access the memorial garden? Privacy vs. gatekeeping
- Alice felt strongly about only sharing the garden with those who had also experienced loss, but we chose to leave loss up to interpretation (could be either death or just someone no longer in your life) to widen our audience
- Users are told “this memorial isn’t for you” if they answer no to “have you ever lost someone”
- Went back on forth on if users who do not want to share their note should be able to read the rest of the notes in the garden, ultimately decided yes
Designing to respect users’ privacy
- Given the sensitive and personal nature of our work, we didn’t want to exploit grief for the sake of art so we made sure users were given the option to control how much they shared
- Ask them if they want to talk about it, asking permission to plant in the garden
Building the Website
Given that I was still relatively new to making websites from scratch, my goals for coding the website were to create a lightweight web application that felt handmad, with simple but effective design choices using vanilla HTML/CSS.
BACKEND
User submissions were stored in a table using the airtable.js API, with each row of the table corresponding to a flower in the garden that would be un-hidden as the table filled up
SIMPLE AND HANDMADE UI
We kept the UI design fairly flat and clean to focus on the experience/questions.
Having a handbuilt feeling was important to emphasize the community nature of the memorial, so we chose a serif font for the questions and added details with ASCII art.
each note is planted as a seed that blooms into an ASCII flower
Final Web Application + Installation
Our project was
exhibited with other projects from our interaction design class and members of the Yale community were invited to come demo each of the projects. We received 50+ notes in the garden over one weekend, a couple of them made me cry.
I invite you to experience the web app for yourself!
Click the phone below (best on mobile)
TAKEAWAYS
If this were to grow into a larger project and be shared with a larger audience, I would want to
1) Add a couple more handmade details to make the UI more interesting
2) Add features to the garden to make it feel more like a proper garden
3) Give more thought to the physical installation / have a more engaging way of accessing the app besides a QR code, which feels less intimate that I’d like.
I hope people find solace in reading each others words. You are not alone in this grief