Croppo, an app to grow your own vegetables
A Coursera Interaction Design Capstone Project
Do you know how the vegetables you eat are grown?
The problem I’m attempting to solve is about changing to a healthier diet. I realized that a lot of people buy their vegetables in stores or supermarkets instead of growing them in their houses. These vegetables usually are grown using lots of pesticides and different chemicals that can be bad for your health. The way they are grown can also have an impact on the land. That is why I have made a prototype of a mobile application to help people grow their own vegetables.
I found that people usually buy their vegetables in stores or supermarkets not because they prefer it over home-grown but because of several other issues. If these issues are tackled in some way, people would change to a healthier, home-grown vegetables diet.
1. People don’t really know the benefits of home-grown vegetables
People don’t really know how the vegetables they buy were grown. Sometimes a lot of pesticides are used which are really bad for your health. Home-grown vegetables are healthier and you can follow the progress so you know exactly how it is grown.
2. People don’t know how to grow their own vegetables
Some people would rather eat home-grown vegetables but they just don’t know how to grow them on their own. They have a lot of misconceptions about how to grow.
3. People who don’t have time to grow don’t know where to buy home-grown vegetables
Some people don’t really have time to grow vegetables but they still would like to buy healthier vegetables. If they had a list of places that sell home-grown they would definitely buy them.
Meet Croppo, an app for solving the three problems listed before.
Croppo Prototype
Main screen
The main page shows the vegetables you are growing, it also shows the weather, so you can take better care of your crops. Below, you can see what your friends share, so you can see their progress and encourage them to keep going. It also motivates you to continue growing your crops!
Add screen
In the add page, you can easily add a post sharing pictures of your crops, or you can add a recipe to share with the rest of your friends. But the most important feature is adding a vegetable to your garden. You can simply choose a vegetable from the suggested ones or you can type in the search bar. Then you select the vegetable you prefer and you see how much time it takes to grow. You simply tap on ‘Add to my garden’ and you are ready to start growing that vegetable.
My garden screen
In this screen, you can see all your vegetables that you are currently growing. If you tap on one, you are redirected to another screen where you can see the grow progress and the reminders. If you tap on the icon of the vegetable, you can learn all about it and you can also see tips on how to easily grow it at home. Reminders are push notifications which remind you of central tasks that you have to do to grow your crops successfuly, for example it reminds you of watering your plants, transplanting them, using fertilizer, etc.
Search screen
In the search screen, you have three different sections. You can search for friends, you can search for recipes or you can search for stores that sell home-grown vegetables. This way, you can find out which stores are in your town, you can take a look at their profiles, see what kind of vegetables they sell and contact them to ask them anything. Now you can choose between supermarket or home-grown stores.
Design process
There were many stages of the design process, these included needfinding, ideation, storyboards, wireframing, heuristic evaluations, interactive prototypes, user tests, and A/B tests. I will list them below to explain how I got to the final prototype.
1. Needfinding
In order to find out the real needs of the potential users of the app I conducted intercept interviews for three people outside a store and found the real needs people have regarding store-bought and home-grown vegetables which gave me lots of design opportunities.
2. Ideation
Based on the user needs, I defined a Point of View: People often buy vegetables in the supermarket instead of growing them themselves not because they prefer it but because of a series of reasons. Most people don’t know how to grow them or don’t have time to do it, or
they just simply find it more convenient to buy them at the supermarket. It would help a lot if people had quick access to information about home-grown vegetables (how to grow them,
the benefits, where to buy home-grown, etc). This way people could change to a healthier lifestyle.
3. Storyboards
The next step was creating storyboards. The storyboard displayed here showcases a scenario with one of the user needs (tips on how to grow vegetables) and a way to solve this problem through the app.
4. Paper prototypes based on the storyboards
This sketch shows the home screen of the app, where the user can choose to add a vegetable to his garden. The user then gets redirected to the Add vegetable screen, where he chooses the vegetable and is able to see some information on how to grow it. Finally the user can choose to add the vegetable to his garden and see the grow progress.
5. Heuristic Evaluation for paper prototypes
Once the paper prototypes were done, I tested it using the heuristic evaluation technique with three people. After the results, I revised the sketches and went on to design a low-fidelity interactive prototype.
6. Low-fidelity Interactive prototype
Based on the heuristic evaluation results, I created a low-fidelity interactive prototype using InVision, paying attention to the main features and interactions and leaving the details such as color or fonts for later iterations.
7. User testing of the interactive prototype
I tested the prototype with two people and found some problems, for example, there were several search bars for different types of search, there wasn’t any help options, there were no edit options on some of the features. Taking all this into account I went on to redesign the prototype.
8. Hi-fidelity prototype
Taking into consideration the changes suggested in the user testing of the low-fidelity prototype, I designed a hi-fidelity prototype. This time I not only took into account the main features but also things like color, typography and icons.
9. User testing of hi-fidelity prototype
I onced again tested the prototype with two users. I noticed that the users didn’t immediately notice the ‘Done’ button in the top bar of the ‘Add vegetable’ screen, so I decided to make two prototypes. One of them would have the button as it is, while the other would have a bigger button popping up in the center of the screen
10. A/B test
With the two prototypes ready, I conducted A/B tests to see in which of the two prototypes was easier to add a vegetable to my garden. The test results showed that the bigger button was fastest, so I implemented that to my prototype and it was ready for the final touches.
Final prototype
Conclusion
It’s been about a year since I started this course without knowing much of Interaction Design or User Experience, but with a lot of curiosity. Throug the lessons I learned the value of research, ideation, storyboarding and mainly the power of iteration. This course gave me the foundations to go on to become hopefuly a successful UX designer.