These images are screenshots of the desktop and mobile versions of a website I created for my undergraduate thesis project, for which I worked on several websites around the idea of designing my own version of the web with the goals of collaboration, community, creativity, and craft. This website was built and designed from scratch by me, using Socket.IO, JavaScript, HTML, and CSS. The GIF is part of the process work, as I made it to visualise all the growth states of the garden flowers.
This website is a community garden, where on your phone, you can use sliders to design your own flower, which is then named and sent to the desktop version which houses the full garden. Everyone's flowers start as a sprout and grow over the course of several days. There are 5 stages of growth which update every 17 hours, until at stage 5, it displays the user's designed flower. The flowers need water every 3 days or they turn brown and can be returned to life by using the water button. Socket.IO allows all changes to appear instantly on the page for all users, no need for refreshing.
My goal with this project was to create a similar experience of being a part of a community garden but in an online space that can be used anywhere. I wanted to use my own interest in plants and plant growth to create something that people would want to come back to and feel proud of their communal progress. I created several animations of animals and added different states based on time of day, so when you return to the garden it will look different and give you a reason to come back. It is a quiet, slow space on the web, contrary to the fast, ad-pushing web we usually see.
I spent 12 weeks on this project, from designing user flows and thinking about the information architecture, to visual development, to web development for 6 weeks. I learned a lot about code for this and it's one of the coolest things I've ever made.
Mobile version of the garden website.
Day version of the garden.
Sunset version of the garden.
GIF of flower growth cycle.
