The design of Search Results and Crop pages on OpenFarm has changed a lot in the last 6 months. In this blog post we’re going to show you all of the different mockups we have gone through in order to get to the current design.

April, 2014

These mockups were created very early in our journey of figuring out how OpenFarm would function. We we’re mostly focused on how best to lead the user from the homepage to relevant content suited for them. We went with a categorical approach for search results, along with filter bars similar to those found on sites like Amazon and All Recipes. Upon finding a more specific plant to grow, the user would be taken to the Crop Page, where they could then use more filters to find the right Growing Instructions for them. An important difference from here to now is that the Crop is rated with the user for compatibility, whereas today the Guide is rated for compatibility.

Beginning of June, 2014

These mockups we’re much more completed and thought through. In the search results page, we borrowed the ‘carousel’ design element that sites like Google and Netflix use. We figured that Crop filtering was going to be the most important or commonly used filter for trying to find Growing Guides and so we put it front and center. You can see that the Crop Page and Search Results pages are very similar, in fact we called them the ‘Generic Search Results’ and ‘Specific Search Results’ pages. The only difference between the two is in the top section, where the specific search page replaces the carousel with some factual Crop info. We kept the sidebar filters and moved the compatibility scores from the Crops to the Guides.

End of June, 2014

In this round of mockups, we simply moved the sidebar of Guide filters into the section header to be more mobile friendly (the list of filters would simply collapse to a menu on mobile.

October, 2014

During October I brought in Ryan McLeod for some help with refining the search results page and the user flow. He brought a lot of inspiration and insight from his work at Airbnb. We opted to change the layout of the pages to be split vertically for more intuitive scrolling through the Crops and narrower Guide cards that don’t look as awkward with a small amount of text while allowing us to limit the amount of text in general to not overwhelm the user. The design also allows for the left hand side to show a lot more information about a Crop than previously. This made it possible to move from the ‘Generic Search Results’, ‘Specific Search Results’, and ‘Crop’ pages to simply ‘Search Results’ and ‘Crop’ pages. Last, we toned back the color in order to let images and compatibility scores pop out the most. We hope that you find this user flow intuitive, efficient, and fun to use. If you have any feedback please drop us a line in our discussion forum. Thanks for reading!