Edible Oasis
a comprehensive garden planning app for the budding gardener
Background
Being a gardener myself, this was a passion project that was born as I stared at my garden, dreaming of spring, thinking of the peas, green beans, potatoes, tomatoes, cantaloupes and cucumbers, not to mention herbs, that were all on my wish list for my garden this year. As I struggled to visualize how these plants would be laid out, and researched the individual growing needs of each, I thought, wouldn't it be nice if there was something that could let me know what I could and could not fit in my particular garden and let me lay it out visually, while also giving me some basic planting information? While I realize, there are apps like this out there, I thought I would use this as an opportunity to create my own vision.
It's difficult to visualize your garden and be confident you have the space necessary to grow the plants you want.
Considerations
Space needed for each plant in the garden
Space for walking lanes between the plants to harvest
New gardeners may have difficulty visualizing their own particular garden space and exactly what can be grown within it.
New gardeners may want information about plants
Goals
Allow users to put in the specific dimensions of their garden
Allow users to select fruits, vegetables and herbs and automatically calculate the space each plant will require in their garden.
Provide useful information for each plant so users can have a more successful gardening experience
Defining the key features
With the challenges and goals understood, these were the key features I identified as necessary.
Garden workspace
Allows the user to enter the exact dimensions of their garden. This will be the dominant area of the user interface and will provide the user with a complete view of their garden layout within the Garden Workspace.
Save
Allows the user to save their garden.
Plant List
Provides the user with a list of Vegetables, Fruits and Herbs that can be used as the building blocks of their garden. Users will be able place items from the plant list into the Garden Workspace.
Create new
Allows the user to create a new garden.
Plant info cards
Once plant list items are placed into the Garden Workspace, users will be able to click on each to access Plant Information Cards. These will provide detailed plant growing and care information.
Resize
Allows the user to change the dimensions of their garden.
Concepts and Ideas
I began with doing some research to understand the data and facts needed for the individual plant information cards that would be part of the experience. Then I took the concept through rounds of sketches to explore flow, layout and functionality. By this point I was getting a little excited so I began to create a garden layout to roughly visualize the Garden Workspace, using my own backyard garden as the basis.
The user flow
I had NO IDEA how crazy this would get but it was a great learning experience to see it all laid out like this. For me this is one of the many fun elements of this process which feels like a big satisfying puzzle.
Low-Fidelity Wireframes
Once I had my user flow worked out, I started on my low fidelity wireframes. You can see a few examples below.
Medium Fidelity Wireframes
As I was working on the medium fidelity wireframe I repositioned some elements so they would be more natural for the user. You can see a few examples below.
Going beyond UX. Messaging and naming…
Make it stand out.
I created a content matrix to explore copy and establish word count. The naming exercise was a fun process, sorting through and categorizing words then exploring the tone, feel and emotions I wanted users to feel when using the app.
Branding Exercise
One of my favorite exercises was creating the branding elements. Here I had the chance to play, sketch and illustrate. I knew I wanted the elements to feel cheerful, lively, fun and inviting...to convey the excitement of spring after a long winter.
4 different directions…
The following examples represent the logo on the left and foundational art on the right.
These were the four I chose from a series of many.
I liked the playful nature of the font and the idea of adding vegetables to the logo. I kept the illustration simpler.
This was playing with a different font style. I added rays on the sun, as well as a watering can, which to me conveyed elements of growth
I loved this playful font. I added a shovel, removed the rays so the illustration would be more contained, but added water to show more interaction with the watering can.
I had my winner…
This version combined my favorite font treatment with some of the gardening elements into the logo.
This one resonated with me more then the others. I found it cheerful and inviting.
So then I got curious "how would this logo look on shirts, cups ...?"
UI Design
Now that I had developed my branding, I worked on the UI. Below are a few screens of my final High Fidelity wires.
Conclusion
This project was a fantastic learning experience from beginning to end. It stemmed from something I love which is gardening and became a great exploration into UX and UI. I could see features added down the line such as a Notes section that would allow a user to add notes about their garden or certain plants. Another feature could be links to public gardens to visit for inspiration and links to local nurseries and stores specializing in garden equipment. The idea was to create an app that would make gardening easier for the new gardener, but I think it could be useful to all gardeners alike.