Search Results and Crop Pages Design

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.

Search April

Crop April

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.

Search June

Crop June

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.

Search June 2

Crop June 2

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!

Search November

Crop November

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s