Planter Web App

OVERVIEW: Plant3r’s goal is to promote food freedom in urban spaces using the latest in small-scale planting best practices and growing technology. The upcoming Plant3r Assistant will guide a brand-new gardener through the garden creation process.

PROBLEM: Picking up a new hobby is intimidating enough but when someone is under the impression they’ll need a ‘green thumb’ to be successful, it makes it that much harder to start. There are other concerns that come to mind when someone wants to start growing their food. What kind of soil do I buy? What kind of plants can I grow? How often do I water? When will I see results?

SOLUTION: Plant3r seeks to provide a solution and an answer to those questions with the software that tracks your garden’s growth and its projected progress. It will also give step-by-step instructions for growing and taking care of the plants

MY ROLE: UX/UI Software Development Intern

TIMELINE: Ongoing

Below is a large Plant3r product made for gardening in small spaces. It has staggered slits for each plant to grow in.

I was asked to design a page to use with The Plant3r Mini which is similar, it also has staggered slits but has 8 of them on each side.

This was the rough Figma design that I inherited from my design partner. It notes which “spot” in the garden the user is tracking and graphs their progress from seedling to growth to harvest time.

In the next version, I tried to simplify the graph and make it more comprehensible by adding labels and using progressive green colors to illustrate the growth each seedling is experiencing in the graph.

We also added a staggered layout to mirror the Plant3r Mini physical product. As well as a toggle to show which side of the product is being displayed.

After feedback that the graph was still too complicated, we decided to implement individual progress bars and get rid of the large graph.

Below is the version of the application that is not staggered because it is for users that are not using the physical product, but a regular garden box.

Below is an expanded version of one of the spots which shows the progressive color gradient along with each label on a progress bar.

We were asked to translate our designs from mobile app to a web app. Below is the beginning phase of designing out these ideas and transferring them from Figma into Bubble.io.

This process is is still in progress as I am still learning the capabilities of Bubble.io, watching YouTube videos, and studying this program. In my opinion what we have above is a rough starting point because I think each spot is a bit too large and would require too much scrolling for someone to process.

Remember to check back in a few months to see how it turns out!