backdrop-ops / backdropcms.org

Issue tracker for the BackdropCMS.org website
https://backdropcms.org
25 stars 21 forks source link

backdropcms.org home page redesign & related changes #301

Closed jenlampton closed 5 years ago

jenlampton commented 8 years ago

TODO:

Original issue:

Now that backdrop has been out for almost 2 years, perhaps we should refocus our home page to do a better job of selling backdrop to those who are curious about it. What do we put on here, how should it be organized, and what should it look like? So many hard questions for developers!

I'm going to have a meeting with Jordan Ryan next week to discuss some of these questions and see if we can form a plan of attack. I'd like to plan to launch the new home page around Backdrop's 2-year birthday, perhaps right after 1.6 is released. We'll see how overly optimistic that is next week :)

mikemccaffrey commented 8 years ago

Let's try to discuss this at badcamp either as part of the summit or afterwards.

wesruv commented 8 years ago

borg-homepage

A few notes:

tomgrandy commented 8 years ago

Excellent!

The current site is very text-centric and this one is more visually appealing. The addition of sites that use Backdrop and the short videos would go a long way in encouraging people to see it before they download and install (though the Pantheon route makes that so much easier).

Are the top-tier menu items the ones that will be used? What options do we have for the menu?

Can we do anything that has multi-columns in the menu? We use these a great deal to allow us to put more items in the menu by sub-category and also allow users to get to what they are looking for quickly.

screen shot 2016-11-10 at 8 32 49 pm
wesruv commented 8 years ago

I think we could work that out, kind of need to given how many items are in the Handbook section. The goal is to leverage the responsive menu system in Backdrop core as much as possible, but I think we can have our cake and eat good UX too.

Looking at it some more I'm thinking the features section could use a link to a features page that's has more features and maybe a little extra meat.

tomgrandy commented 8 years ago

Agree.

You get the main idea in the feature paragraph, a visual overview with the feature video, but a read more link to the meat is a good idea.

I don't think there would be that many tiers under the main menu, but this is what the above site menu looks like on mobile:

screen shot 2016-11-10 at 8 45 12 pm
klonos commented 8 years ago

Loving this @wesruv 👍 ❤️

jenlampton commented 8 years ago

Love!

On Nov 10, 2016 9:24 PM, "Gregory Netsas" notifications@github.com wrote:

Loving this @wesruv https://github.com/wesruv 👍 ❤️

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/backdrop-ops/backdropcms.org/issues/301#issuecomment-259883841, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYSRwh7jko5f4e-SFrpwA5ml47MCREwks5q8_v8gaJpZM4KKnBa .

wesruv commented 8 years ago

Aha! Textures make some of the plainer parts of this feel a lot better. (See it at 100%) borg-homepage

docwilmot commented 8 years ago

Do this! Do it now!

wesruv commented 8 years ago

Getting some pro designer feedback... gimme the weekend before anyone hops on this.

jenlampton commented 8 years ago

Okay :)

On Nov 11, 2016 12:56 PM, "wesruv" notifications@github.com wrote:

Getting some pro designer feedback... gimme the weekend before anyone hops on this.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/backdrop-ops/backdropcms.org/issues/301#issuecomment-260053567, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYSR5NBHCuYYpm2Wa2YaGjDB3y2B-3Mks5q9NZjgaJpZM4KKnBa .

wesruv commented 8 years ago

This design will cost $15 for the background texture in the hero, but I think it's worth it 😄

image

A few notes:

wesruv commented 8 years ago

Going to try and get some crits for the Lullabot Design team, see if we can do even better

serundeputy commented 8 years ago

First of all the direction this is headed is awesmome. Thanks for all your hardwork @wesruv !

I just want to point out with regard to this bullet:

  • Changed Spin Up on Pantheon to "Try Out Backdrop", was thinking this could be a page with instructions on setting up Pantheon and/or Kalabox, and if we get any other reasonably

There is an open discussion about that button and crediting Pantheon for there support for free "try it out" infrastructure to Backdrop CMS devs, testers and, first time demos here: https://github.com/backdrop-ops/backdropcms.org/issues/192

So, I can see if you are going to link off to a page that has more options than just Pantheon like kbox, other hosts, general installation etc, but that makes me think it should be a link under the demo button for learn more ways to demo, try, dev with Backdrop CMS and the button should remain a direct way to quickly (one click from prevalent spot on homepage) spin up a Backdrop instance on Pantheon.

Not claiming to be the end all voice here, but that is my opinion and any direction we take I'd like to make sure https://github.com/backdrop-ops/backdropcms.org/issues/192 discussions are at least considered as a factor.

thanks again, looks great! ~Geoff

wesruv commented 8 years ago

Gotcha, my thought was that we have a lot we want to get from our homepage and I don't think we have enough room to give the Pantheon spinup enough credit. I think the current UX is a bit confusing.

If you don't have a Pantheon account, you get dumped to this page: image

If you don't know what Pantheon is, or aren't very familiar with it, the likelihood that you'll fill out this form is probably very low. I don't think we've primed the user enough to know why it's worth it to fill out this form. They don't necessarily understand what they're getting, but they know they're giving away a bunch of their personal info and maybe opting into spam.

I think a separate page can give a very brief and glossy explanation of what that is and give them the option of spinning up a local quickly with Kbox, or a web environment on Pantheon. Extra click, yes, but I think it'll be more likely to succeed and provide a better UX.

I think the Download button should lead to instructions for custom host/shared host/custom local install instructions. Or if we have all instructions on the page, it should be last as it's the least simple.

Basically thinking the download button would link to something more like this, than directly to a ZIP file. image

serundeputy commented 8 years ago

all good points; I'm on board with it and we can thank/recognize Pantheon on that sub page

thanks @wesruv

docwilmot commented 8 years ago

I prefer the previous background pattern; the latest I find a bit more intrusive.

Re Pantheon button, we can do both: have the button mention "Try Backdrop on Pantheon", out of respect, and still make it navigate to a page that explains what that is. Shouldnt hurt.

At the bottom of that page, "Other ways to experience Backdrop", listing Kalabox, Automated installers on shared hosts, self-install etc.

jenlampton commented 8 years ago

I'm also not sure about the swirly background. I don't think it fits with our style guide, or the general aesthetic of keeping things simple.

On Nov 13, 2016 2:57 PM, "docwilmot" notifications@github.com wrote:

I prefer the previous background pattern; the latest I find a bit more intrusive.

Re Pantheon button, we can do both: have the button mention "Try Backdrop on Pantheon", out of respect, and still make it navigate to a page that explains what that is. Shouldnt hurt.

At the bottom of that page, "Other ways to experience Backdrop", listing Kalabox, Automated installers on shared hosts, self-install etc.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/backdrop-ops/backdropcms.org/issues/301#issuecomment-260219472, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYSR6tSpY9e5G8-v2-PobW1IpUfR5ebks5q95XGgaJpZM4KKnBa .

jenlampton commented 8 years ago

I'd also like to check in with @dariusgraza since he created the styleguide (and brand) and see what he thinks.

klonos commented 8 years ago
  • Was staring at the nav, feel like it should reflect the things that are important to us, and thought pulling Community out of Handbook might be a good way to do that

👍

...but that makes me think it should be a link under the demo button for learn more ways to demo, try, dev with Backdrop CMS and the button should remain a direct way to quickly (one click from prevalent spot on homepage) spin up a Backdrop instance on Pantheon.

Thinking the same.

If you don't know what Pantheon is, or aren't very familiar with it, the likelihood that you'll fill out this form is probably very low. I don't think we've primed the user enough to know why it's worth it to fill out this form. They don't necessarily understand what they're getting, but they know they're giving away a bunch of their personal info and maybe opting into spam.

I don't have a pantheon account and I always try to put myself in the shoes of newcomers. What you describe here is more or less how I'd feel about it too.

  • Feel like Download Backdrop should go to a "Getting Started" page that lists out some tips for setting up that also starts the download.

My initial thought was to also add that as a link under the download button, but perhaps this might work better after all. Alternatively, we can rename the "Handbook" link (which makes it sound that people will have to do a lot of reading and which in turn might be off-putting) to "Getting Started" or "Intro".

Basically thinking the download button would link to something more like this, than directly to a ZIP file.

👍

As a general note about the buttons: I think they'd be better in the hero (or perhaps right underneath it) rather than lower in the home page. Reason is that when people visit our site, these links should be prominent without requiring scrolling to find them.

I prefer the previous background pattern; the latest I find a bit more intrusive.

I'm also not sure about the swirly background. I don't think it fits with our style guide, or the general aesthetic of keeping things simple.

Same here.

klonos commented 8 years ago

How do you guys feel about main menu subtitles (it would help menu items like "Extensions" with something like "Modules / Themes / Layouts")?

bizvektor-subtitles-menu-items1

wesruv commented 8 years ago

Re Pantheon button, we can do both: have the button mention "Try Backdrop on Pantheon", out of respect, and still make it navigate to a page that explains what that is. Shouldnt hurt.

I think it does. The current homepage is waaaaaay too text heavy, I'm getting feedback on my design that it's too text heavy. The homepage can only do so many things successfully.

If we have a slick page explaining what spinning up a Pantheon environment means, and that it's free (for everyone until they want to launch) and how quick it is and how cool the features are, then we'd be doing something good for them; we could be sending over actual leads.

If we want a special thanks section, or a supported by section, let's do that. But we shouldn't muddy up the UX of this part of our homepage as a hat tip or thank you.

demo button for learn more ways to demo, try, dev with Backdrop CMS

@klonos @serundeputy is there a current demo button that I'm missing? Or is this referring to the other thread?

As a general note about the buttons: I think they'd be better in the hero (or perhaps right underneath it) rather than lower in the home page. Reason is that when people visit our site, these links should be prominent without requiring scrolling to find them.

On this kind of site scrolling doesn't usually effect conversion rate until it gets much further down the page. My theory is that we should do a better job convincing them to try it before the hard sell.

We may get fewer downloads, but my hope is that we get more sites and users which is our real goal.

wesruv commented 8 years ago

I'll have a few more mock ups soon

docwilmot commented 8 years ago

I think it does

Pretty sure we're saying the same thing. I was suggesting keeping the word "Pantheon" in the button text, but otherwise do what you said.

wesruv commented 8 years ago

I'm saying "Try Backdrop on Pantheon" is too much text for the area as well as a misnomer if we have more than one way to try out Backdrop.

wesruv commented 8 years ago

Ok, I think I can have my cake and everyone else can also have cake...

image

Try Out at the top goes to the page we were talking about before

The gray bar links directly to the form (I think that's more than enough prompting for why you'd fill out the form).

Got the download buttons up top and it doesn't look like crap (really had a hard time with that for some reason)

... this is why I like code more 😬

wesruv commented 8 years ago

I also changed the nav more...

I think News can live under community, and it's on the homepage.

Added Download, because we want people to do that, that link should go to a 'Getting Started' page that kicks off a download.

docwilmot commented 8 years ago

Still like it. :smile:

Not so sure about the Nav though. Community can also be under Support, and Extensions are also Downloads. And the difference between the Handbook and Support is also unclear. But that could be another discussion.

wesruv commented 8 years ago

Agreed... I'm kind of mixing a lot of tasks into this one 😛

jenlampton commented 8 years ago

We don't use the word "extensions" in backdrop. Today we are using "add-ons". Should we open a bikeshed issue to change it?

I don't like "download" in the nav either. The existing button should be enough, and it's a better cue to users about what will happen when you click it (there is no download page yet, is there?).

If the button to try backdrop will go to a normal page and not to a place to try backdrop, we should also make it not look like a button anymore (or at least, look different from the download button, if they behave differently).

I'm also not sure we have anything to say about community yet, and I don't think the design should dictate content or were likely not to get anything done. But more to the point...

Can we use the nav items we already have in this issue (consolidating is fine), and work on reworking the nav in the other issue we have about reworking the nav? We're starting to go way beyond a home page redesign here :)

Things we need in the nav today:

We can change nav links at any time, and getting consensus might be hard. let's get back to finalizing design :)

Jen

On Nov 15, 2016 8:47 AM, "wesruv" notifications@github.com wrote:

Agreed... I'm kind of mixing a lot of tasks into this one 😛

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/backdrop-ops/backdropcms.org/issues/301#issuecomment-260696269, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYSR8zw3GwoAJr6qxlCbupIBjmbdR84ks5q-eIDgaJpZM4KKnBa .

wesruv commented 8 years ago

I think it might be best if I explained what I'm thinking on a call this week.

If it's not clear, I'm thinking of where I might like to see the site, not just what we can do right now. If I only focused on the latter I think I'd be doing a disservice.

We can scale down all of this to make the MVP attainable in a reasonable time-frame and shelf anything that's not quite there or polished that isn't necessary for the MVP.

We did the same thing with Basis, and got a great MVP while I was mocking up and thinking about first run UX with "Getting Started" and how the user nav laid out and I think that process went great.

We don't use the word "extensions" in backdrop. Today we are using "add-ons". Should we open a bikeshed issue to change it?

For some reason I thought it was Extensions, lol, I have no dog in that fight, Add-ons works for me.

(there is no download page yet, is there?)

Nope, I'm saying we should have one and I'm going to design that and the Try Out Backdrop pages next.

I'm also not sure we have anything to say about community yet, and I don't think the design should dictate content or were likely not to get anything done.

I'm not trying to add content with that change, I'm thinking we shuffle things around.

I think Handbook > About Backdrop is more to do with describing our community, and less to do about our Handbook and I think it's worth pulling out as a top level item.

Although thinking through the goals and UX of the homepage is exactly the right time to suggest content if there's a hole.

I think we are 'content light' where content could be key, I am suggesting a few new pages:

If the button to try backdrop will go to a normal page and not to a place to try backdrop, we should also make it not look like a button anymore (or at least, look different from the download button, if they behave differently).

They are both calls to action, and they should both go to a page.

Download will kick off a download and then should have helpful content/next steps. These might be installation instructions, links to gitter/github issues/other support channels, ways to get involved or engaged with the project.

The Try Out Backdrop should have the quick and (relatively) easy ways to setup a site quickly. At the top of the list, Pantheon and a short explanation of what it is, second I vote Kalabox as a way to quickly spin up a local environment, then we could have links to more 'custom' installation steps. (e.g. how to setup with MAMP/WAMP, Ubuntu installation instructions, Drupal VM instructions, whatever how to's we can muster.)

wesruv commented 8 years ago

image

jenlampton commented 8 years ago

Okay. I'm onboard with all of that, except maybe the handbook. I'd argue that the about backdrop section is exactly what should be in the handbook, and all the other things are questionable. (But we do have a separate issue to rework the handbook after dOCs are done)

We could also Rename the handbook If people are confused about what the heck we meant that to be. Esp coming from what Drupal did with their "handbook", there is going to be confusion around that word too.

Words are hard :(

On Nov 15, 2016 11:20 AM, "wesruv" notifications@github.com wrote:

[image: image] https://cloud.githubusercontent.com/assets/5607236/20320103/a8c62058-ab3e-11e6-8f76-12d2fcd3a85d.png

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/backdrop-ops/backdropcms.org/issues/301#issuecomment-260739175, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYSRxfT7gz_FS0RIkvqnQuGK4_1Cpbaks5q-gYPgaJpZM4KKnBa .

tomgrandy commented 8 years ago

FWIW, "Handbook" has never had clarity for me. By definition, the Handbook section does both what it can do (a book giving information such as facts on a particular subject or instructions for operating a machine) but is it one or both?

About Backdrop can stand on its own for clarity.

Documentation is where all the other items residing in the current Handbook section make sense to live.

Within Documentation (as a broad area) you can have multiple subject areas:

  1. System Requirements
  2. Installation
  3. User Guide
  4. Developer Guide
  5. Backdrop API

Two cents.

docwilmot commented 8 years ago

I suggest a new issue for bikeshedding the Nav. I've already created a new one for killing off the handbook. See https://github.com/backdrop-ops/backdropcms.org/issues/312. Lets leave this issue for the visual redesign. edit: new issue #313

tomgrandy commented 8 years ago

Thanks for the clarification @docwilmot

Somehow I missed the above. Agree with #312 - call me a newb.

wesruv commented 8 years ago

Made an issue for the Try Out Backdrop CMS page: https://github.com/backdrop-ops/backdropcms.org/issues/314

wesruv commented 8 years ago

Latest and greatest

image

wesruv commented 8 years ago

Download page: https://github.com/backdrop-ops/backdropcms.org/issues/315

bd0bd commented 7 years ago
  1. I offer NOT to use "Try out Backdrop" wording. It is better (winning solution) to use single word "Demo". Buttons color should be contrast - for example, red.

  2. I offer to keep the current colors scheme - black (grays) & white. No blue (but I do understand why it is used by @wesruv). Only the buttons should be another color scheme (for example, red).

Thank you!

jenlampton commented 7 years ago

It is better (winning solution) to use single word "Demo".

If you remember we started by using the word "Demo" but we were asked by Pantheon to change it since that tool is not a demo. What you get is your own Backdrop site - one you can launch! If we do come up with a demo service then it may be better to put a link to that on the home page using the word "Demo" (on simplytest.me maybe?) but the pantheon button needs a more accurate word than that.

bd0bd commented 7 years ago

@jenlampton, I understand you.

When I say to use "Demo" I mean you have your own demo on your website (not on Pantheon).

Any visitor could click on this button and a new demo site would be created and installed within 15-90 seconds. No any registration. No any fields to type in for a visitor.

jenlampton commented 7 years ago

exactly, and the whole thing would be erased in a half hour or so.

wesruv commented 7 years ago

In real world implementation land, this is what I've got so far (not done though). From our Design meeting last week, sounds like we'll be putting this up on dev when it's a little more polished. Since we're changing the theme to be something that uses Basis/more core functionality it's causing a redesign of some other pages. Trying to keep that manageable so we can get something out for the release.

My screen grab tool is clipping of the right side a bit... but you get the idea.

Homepage

Desktop

image

Tablet (closed menu)

image

Phone (closed menu)

image

Phone (open menu)

image

Modules page

Desktop

image

... more coming soon 😄

Not wed to anything yet, let me know if there's feedback!

jenlampton commented 7 years ago

Looks good!

On Dec 26, 2016 7:03 PM, "wesruv" notifications@github.com wrote:

In real world implementation land, this is what I've got so far (not done though). From our Design meeting last week, sounds like we'll be putting this up on dev when it's a little more polished. Since we're changing the theme to be something that uses Basis/more core functionality it's causing a redesign of some other pages. Trying to keep that manageable so we can get something out for the release.

My screen grab tool is clipping of the right side a bit... but you get the idea. Homepage Desktop

[image: image] https://cloud.githubusercontent.com/assets/5607236/21488465/0779bd14-cbae-11e6-9f32-020ff590647f.png Tablet (closed menu)

[image: image] https://cloud.githubusercontent.com/assets/5607236/21488471/20ab97da-cbae-11e6-842b-a92ca526486b.png Phone (closed menu)

[image: image] https://cloud.githubusercontent.com/assets/5607236/21488487/67bd8854-cbae-11e6-8fc7-553ab35fc358.png Phone (open menu)

[image: image] https://cloud.githubusercontent.com/assets/5607236/21488486/5a6859cc-cbae-11e6-8606-34f70a6d0dbe.png Modules page Desktop

[image: image] https://cloud.githubusercontent.com/assets/5607236/21488500/98f4a38a-cbae-11e6-9a83-16fdaeeac73d.png

... more coming soon 😄

Not wed to anything yet, let me know if there's feedback!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/backdrop-ops/backdropcms.org/issues/301#issuecomment-269257808, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYSR6tnsoFM1SZCNyj2yPUeEPPRCmybks5rMHHqgaJpZM4KKnBa .

klonos commented 7 years ago

Yep, looking good. Any specific feedback once we have it up on the dev server.

klonos commented 7 years ago

...we are not redesigning only the home page.

tomgrandy commented 7 years ago

@wesruv - Is the dev site available to view?

wesruv commented 7 years ago

Not yet, there were more layouts than I thought o_o

wesruv commented 7 years ago

Time to check it out! http://borg.wesruv.com/

A few caveats:

I'll get to those things, but I thought it'd be good to get people looking at this and banging on it and figuring out what else needs help.

Make sure to check out pages like: http://borg.wesruv.com/requirements http://borg.wesruv.com/modules/ http://borg.wesruv.com/project/mediaelement http://borg.wesruv.com/news http://borg.wesruv.com/account/wesruv http://borg.wesruv.com/search/node/devel