Loomio

Home Page Redesign

DU
[deactivated account] Public Seen by 31

With the kickstarter campaign over I want to start kicking about ideas concerning the Home Page.

I think it could use a bit more information, and this needs to be properly designed, rather than just tacked on one by one (like we're doing right now with the blog, mailing list, etc).

Any thoughts welcome. I'll start putting together a proposal for this once the guide flow has been finished.

Rory Aronson

Rory Aronson September 24th, 2014 19:10

Here are some ideas I like:

  • Center align the openfarm logo
  • Make a search box kind of like the one on http://www.instructables.com/ but have it actually function as an input field, not just link to search results. The tagline "Learn to Grow Anything" can be tied into this: "Learn to Grow _____"
  • Add a full-screen video background with about five 10-second clips of being in the garden (watering, planting seeds, leaves rustling, butterflies, etc) Examples: https://www.airbnb.com/ and https://www.boost.vc/.
  • Below the search box, have a prominent link to "About OpenFarm" which can go to a page about how the website works, how to get involved, why making an account is useful, how to contribute, etc. In the future, we can make a cool animated video describing OpenFarm - it could be brought up in a lightbox. For now we could even just use the Kickstarter video.
  • Have a footer with the blog, mailing list, social profiles, etc.
  • Make the header background transparent with links to login and signup in the top right

I'll make a quick mockup for these ideas right now.

Rory Aronson

Rory Aronson September 24th, 2014 19:42

Here is the mockup. Imagine the wheat lightly swaying in the wind :)

Rory Aronson

Rory Aronson September 24th, 2014 19:47

Looking at this mockup I think: OpenFarm is a place to learn.

What is missing is: OpenFarm is a place to share, to conenct with a community, and maybe even: to discover.

Hmmm...

DU

[deactivated account] September 24th, 2014 23:32

Yeah my concern with the home page as it is right now is that it's kind of a cover of what's inside. There's no clear indication of how the site works. I think having the search box front and center still works, but maybe it shouldn't just be what's in the view?

I'm also a bit concerned with having the video as the background. It's cool, but it's fairly bandwidth heavy, not something I want to saddle people with?

I'm trying to move this discussion into the design and user experience group, but not with much success. Maybe you can as an admin Rory?

Rory Aronson

Rory Aronson September 24th, 2014 23:47

I agree that there is no indication of how the site works, but I imagine that is what the lightbox video could be used for, and in the meantime it would just be a link to a page describing everything - maybe some graphics that are screenshots with arrows point to each section?

As far as video backgrounds, what if we did a highly compressed looping gif for like 3 seconds? lol. I just think it adds such a neat touch and puts people in the mindset of being in the garden to have that subtle movement. Also, the fallback would just be a static image - default for mobile.

I tried moving the conversation but when I click the button, there are no options in the subgroup dropdown.... May be a bug?

Rory Aronson

Rory Aronson September 24th, 2014 23:56

Figured it out. I had to join the Sub Group before I could move anything to it.

MB

Mike Beggs September 25th, 2014 14:51

My two cents: Fast switching or looping videos are annoying to me (even if they don't suck up the bandwidth) because I don't know if I'm supposed to watch them or read the other text on the page and I wonder if I need to be ready to click on something before it disappears. I do like the idea of an animated plant swaying in the breeze or clouds floating by a field of plants, or other subtle movement, serene, pastoral backgrounds.
Could there be a set of such loops that are randomly selected when the page is refreshed or returned to so that the page appears fresh and dynamic, yet not frenetic?

Having the search also be the portal into the site is a neat idea. And I like the invitation: "Learn to grow..." or "Learn about growing..." However, the magnifying glass icon could be replaced with a "Go" icon because the magnifying glass icon implies to me it is a link to a search function and not necessarily how to enter the text typed into the preceding space, (after entering the text I would just hit "return" rather than reach for the mouse to click the magnifying glass anyway.) Also, I would look to the magnifying glass field as a way to search the entire web site and not just the growing guide pages as implied by "Learn to grow..."

To address the question of "what is this site?", maybe a static vignette of growing guide screen shots could be displayed along the bottom. I find the colors and graphics used to be very inviting and informative. Almost like the row of seed packets at the garden store where I can pick one up and read all about the plant. The screen shots displayed could be from a set of many images from which 5 or 7 are randomly grabbed and displayed each time the is accessed. Thinking about that, it also occurs to me that the images could also be hyperlinked to their respective guides with the screenshots being displayed selected from guides that are trending/most popular, most recent, most active, etc.

Rory Aronson

Rory Aronson September 25th, 2014 15:54

Oooo I like the idea of having some type of link/image to popular/recently commented on/new/random Growing Guides in the bottom. Their could a set of 20 or so that cycle through to make the site feel active.

Another idea is to have ~20-40 Guides down below. Maybe categorized by popularity, newness, etc, or maybe not. See http://instructables.com for the example.

Certainly fast switching or too much motion video backgrounds would be annoying. I think sticking to subtle movement shots is ideal and can really set the mood.

Its interesting to hear how you perceive the text field and button to be separate. I imagined both hitting return/Enter and clicking the button would do the same thing: take the user to the search results page for the terms that they entered.

Perhaps the styling makes them look disconnected and changing the magnifying glass to "Go" might help link the two elements in the mind.

DU

[deactivated account] September 27th, 2014 06:33

This just popped into my head while doing some codes on the guide page: We need a big fat disclaimer saying the site is currently still a work in progress, and that it should be considered a toy at the moment, rather than an actual way to store guides.

DU

[deactivated account] October 1st, 2014 05:03

One of the things we talked about which the current rendition doesn't handle: make it clear that people can create guides.

Rory Aronson

Rory Aronson October 1st, 2014 12:48

@simonv3 good point. Perhaps it could look like:

Learn to Grow ____ [Search]
- or -
Create a Guide for ______ [Go]

Ryan

Ryan October 10th, 2014 18:16

Oops, I missed this discussion! I think video is fine for bandwidth as long as it loads after the placeholder image (as Airbnb does) and if there's really a concern it can at least be disabled on mobile. Keeping the video calm and behind an overlay of color makes it clear that it shouldn't be vying for your attention.

Simon makes a good point, good copy is a big part of design here and careful succinct wording that helps paint of a picture of how the site works. Additionally I think a quick little three step sketch below the search could be immensely helpful; something as simple as "1) explore to find crops you want to plant —> 2) find a community written guide that compatible with your garden be it a small farm or windowsill —> 3) get email updates, and share what and how you grow with the community!" with some cute images for each step. I think it's great to also provide some popular guides for people to click if they come to the site not exactly knowing what to search.

Ryan

Ryan October 10th, 2014 18:50

Another great examples I'd love to copy is Khan Academy. They have great simple graphics and also use some subtle video background. It'd be awesome if we didn't even need the video primarily and could teach through really simple background video (ie. "Find a guide that makes sense for you" (then a subheader with more detail) while the background shows someone navigating through OpenFarm results/filters…), etc.

Geocaching also has a cute 1, 2, 3 but my eye is everyone on their page and it's not that actionable.