Loomio

Home Page Redesign

DU simonv3 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.

RA

Rory Aronson Wed 24 Sep 2014 7:10PM

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.

RA

Rory Aronson Wed 24 Sep 2014 7:42PM

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

RA

Rory Aronson Wed 24 Sep 2014 7:47PM

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

simonv3 Wed 24 Sep 2014 11:32PM

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?

RA

Rory Aronson Wed 24 Sep 2014 11:47PM

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?

RA

Rory Aronson Wed 24 Sep 2014 11:56PM

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

MB

Mike Beggs Thu 25 Sep 2014 2:51PM

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.

RA

Rory Aronson Thu 25 Sep 2014 3:54PM

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

simonv3 Sat 27 Sep 2014 6:33AM

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

simonv3 Wed 1 Oct 2014 5:03AM

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

Load More