Garden is a web application giving users the chance to learn more about the benefits of growing at home in the hopes of reducing their food waste. They will start by learning about three topics. They will then go through a questionnaire that will give them a few recommendations of plants to grow at home based on their answers.
This web application was part of two courses: a design course and a development course. Working in teams, we had to come up with an idea to help with sustainability. My idea was to promote growing at home to reduce food waste and help users finding plants that could work for them. Through a period of 20 weeks, we took multiple steps to design and build the final version of what Garden is. We had weekly meetings with both teachers and were working closely with each other to create this web application. At the end of this process, we presented our idea to all of the students part of our program.
Based on research and user surveys, we learned that most of our respondents want to do more for the environment. They think food waste is a important issue and they would like to do their part in helping reducing the amount wasted yearly. They are willing to learn and put time into growing food at home.
Garden was designed as a way to help with these issues. By growing food at home, they would have a better sense of what they have on hand and make sure to use it. With the users putting work into growing their own food, they wouldn’t look at their fruits and vegetables as disposable like in grocery stores. The plants they would have at home would also stimulate the bees’ population and give them more options to go to and pollinate.
For this project, we started by identifying issues regarding sustainability. We brainstormed on ideas for web applications that would provide a solution to one or multiple of these issues. After selecting our idea for Garden, we started with sending a questionnaire to identify our users and their needs for this web application.
To better understand the user’s needs regarding the application and its use, we conducted a user survey containing a variety of questions. These 22 questions were going from their demographics to their knowledge in growing at home. We also asked them what resources they have on hand and how much effort they are willing to put in.
of our survey takers do have experience with growing plants
of our survey takers would be interested in growing plants based on recommendations
of our survey takers would prefer inexpensive and unchallenging plants to grow
After conducting our user survey, we analyzed the data we gathered to identify our users and theirs needs for our web application. We established different personas for different demographics. We were also able to establish their pain points and must haves for our application, Garden.
After establishing who our users are, we started looking into the functionality of the app. We did a design sprint to understand the key features of the app and create user flows for our users. We also created task models for our persona on how they would use the app, allowing us to visualize their process to achieve their goals.
We started the ideation for Garden by establishing what we wanted in the web application. Following determining our features, we used a flow chart to help us visualize these features on each page. We were then able to understand how the user would navigate the web app and get to the end goal.
With the help of the user flow, we were able to generate a task model. This showed us the process that the user would go through in the hopes of achieving their goal. For Garden, the main goal of the user is to get recommendations for plants to grow at home.
The logo is a representation of the feeling of reward after growing fruits and vegetables for a full season and finally being able to enjoy them. I was inspired by Link’s movement when collecting rupees in the Legend of Zelda series for the hands. I then replaced the rupee by a plant growing to get the final result.
With the user research done and the brand design established, we started building the prototype. We made sure the overall user experience was intuitive, as we wanted in the beginning. The project grew and went through different iterations before reaching its final version.
The first iteration of the web application was more straightforward. The user would be prompt into answering some questions before getting a few recommendations. They could then add some of the recommendations to an inventory to refer to them later.
The second iteration of the Garden kept the same flow as the first iteration. The main difference was the design for the interface. We established the branding that we wanted to go with at that stage.
After doing a few rounds of usability testing, we established that we were missing an educational section in our web application. Some users mentioned they wanted to know more about the importance of growing at home and why they were getting recommendations with Garden. We then designed an infographic to go with our web application where our users would learn how growing at home can help with sustainability, wellness benefits, and bees. This educational section would be introduced before the user takes the questionnaire to get plants recommendations.
Following our research and ideation process, we jumped into user testing. We conducted these testing sessions with our target audience to gather their thoughts on the design and process of Garden. We applied the changes that were pointed to us to create the best version that we could build for our web application.
Some participants expressed confusion as to where they were located in the learning section of web app. We then changed the way the active tab was looking compared to the other ones.
Some users mentioned that they could identify a bee icon, without being able to explain the purpose of it. We changed the image to the same bee image located in the learning section and made the icon clickable to show a small text saying the bees love this plant.
For the first question in the quiz, the users needed to specify their climate zone. A few users were confused about what answer to choose, so we added a legend under the map to help them.
Our biggest challenge with Garden was to create a flow from the learning section to the quiz that made sense. At the time of testing, most of our users were expecting a quiz on what they learned. We then added short explanations on two different pages of what to expect in the navigation of the web application. We have found these quite efficient in resolving the issue, and so did a few participants that were tested afterwards.
For the final version of Garden, we decided to give our web application a makeover and polished our design branding. We decided to go with an animated background, a gradient with all the background colors that we could find in the prototype, with moving clouds. We decided to go with a cleaner look to give more focus to the content.
View final version