781175 - SUMO get involved page template

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Rosana Ardila]

For implementing the changes in the new get involved pages of SUMO in the new design we will need a template. 

We are aiming for a redesign and will need 2 templates:
https://docs.google.com/presentation/pub?id=1WpkV95yRAm-thrL_h-DVpiQAi81Zf0l39nRVvUSfVZM&start=false&loop=false&delayms=3000

These templates will also provide the necessary sizes for the images requested in this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=742410 

Please let me know if there are any questions.

Thanks,
Rosana

Comment 1

[John Slater]

Assigning to Lee since he did the other SUMO templates. I would recommend that you guys connect soon to talk through any details, since the google doc above does present a few questions.

We will resume work on bug 742410 when this is complete.

Comment 2

[Rosana Ardila]

Thanks John!

Lee, let me know your convenience or check my zimbra calendar and we can arrange a meeting.

Cheers,
Rosana

Comment 3

[Lee Tom]

Hi Rosana! As John mentioned, I worked on the visual design for the new SUMO website (see https://bugzilla.mozilla.org/show_bug.cgi?id=762255 if you dare!) 

I hate to complicate things, but I would like to involve Bram Pitoyo, who's working through the UX and content components of the Support site pages. 

The illustration assets for bug 742410 shouldn't be a problem once we have a better sense of their proportions and how they'll look in context with the page - but I just want to be mindful of how Bram and rest of the SUMO team are organizing those page. 

Bram, would you at have time to consider Rosana's wireframes and make recommendations regarding size and placement, in mockups?
https://docs.google.com/presentation/pub?id=1WpkV95yRAm-thrL_h-DVpiQAi81Zf0l39nRVvUSfVZM&start=false&loop=false&delayms=3000

Comment 4

[John Slater]

That sounds like a good idea, thanks Lee. Bram, would love to hear your thoughts here so we can make things as consistent as possible with the other SUMO work that's happening.

Comment 5

[Bram Pitoyo [:bram]]

Hi Lee and John! Thanks for bringing this to my attention. I’ve talked to Rosana about this, and will see what I can do. I think we can adapt some of the templates we already have to Get Involved.

Though, I think, Get Involved differs from other parts of SUMO in that it’s designed to showcase benefits of volunteering and get people to register. So it’s more like mozilla.org. Whereas SUMO is more like MDN, a place where people consume and learn information.

So we might benefit from stealing inspirations from the likes of our Desktop Customize page (http://www.mozilla.org/en-US/firefox/customize/)

I’m starting the work on this today. Stay tuned.

Comment 6

[John Slater]

Great news, thanks Bram! We were hoping you'd be able to help out on this...looking fwd to seeing what you come up with.

Comment 7

[Bram Pitoyo [:bram]]

Attachment: SUMO - get involved - home - 01

Here’s my very first take on the layout of the top page of Get Involved.

I think there are a few issues here that I haven’t worked out yet, but it shows how the text and the graphics flow within the 12-grid layout.

Notable things:
* The page title uses the same text size as the page title on mozilla.org
* On the Google Docs template linked to on comment 0 (page 8), there are one large bit of text and one smaller below it. I chose to split these two uneven text areas into three even-sized text boxes.
* On that document, and also on page 8, there are two images mentioned: one is a motivating image and the other is an image about impact. I chose to combine the space for those two images directly below the heading, and make it a carousel-style gallery. Though there is a space issue which you can read below.
* The ‘Pick a way to get involved’ section can be expanded to contain a multiple of 4 items per line, just in case we want to have more there

A few issues:
* Keeping the page title, graphic and headings above the fold is tricky, because the existing SUMO header occupies a lot of the pixels above. So I had to make the top graphic thin. I think it should be of a sufficiently normal size, so the space can convey information. Maybe we should take out some of the SUMO header? Would this destroy the consistency across SUMO?
* The sign up area (which can also be designed into a button if we want), is located on the very bottom of the page. Is this a bad idea? I guess it depends on whether we want people to click “sign up”, or if we prefer for them to navigate the ways to get involved -- we should keep in mind that a more direct route to registration will cause less people to drop-out, but may also cause decline in the quality of people registering?

That’s about it, and I’ll work on this page some more next week.

Comment 8

[Lee Tom]

Bram, thanks so much for skinning the page and suggesting some new layout options. Rosana, does this look like a good direction to display the content you had in mind? 

One concern I have about combining picture fields for the Motivation image with the Impact image, is that they're different types of images that couple with different messages (Rosana, correct me if I'm wrong), so rotating thru them at equal-level (as we might do with multiple features or products) seems a bit weird to me. 

for example, the Motivating image will be an illustration of a character, while the Impact image might look like a component of an infographic which supports relevant data.

Comment 9

[Bram Pitoyo [:bram]]

Attachment: SUMO - get involved - home - 02

(In reply to Lee Tom from comment #8)

Hi Lee, thanks for voicing your concerns. I think you are right. Putting an image carousel would not support the kind of images that we’ll need to display on the page simultaneously. Plus, a big image would simply consume too much vertical space.

I took your advice and modularized the images here. The example I have here has 1 image + 2 paragraphs on the top row, and 1 paragraph + 1 large image on the bottom row. But we can rearrange this grid any way we like, depending on how big the image that we want to create. For example, an infographic could easily take more horizontal space.

Comment 10

[Bram Pitoyo [:bram]]

Attachment: SUMO - get involved - join army of awesome - 01

This is the sub-page for Join Army of Awesome. Note how the steps to get started are numbered.

Comment 11

[Bram Pitoyo [:bram]]

Attachment: SUMO - get involved - answer question in the forum - 01

Comment 12

[Lee Tom]

This is great, Bram - thanks! 
I think you've given us some great examples of how modular we can be with these pages depending on type/amount of content we need to accommodate. 

Rosana, let us know if this is inline with your ideas regarding the content and how you envision coupling with the new graphics. 

Bram, would you mind linking/posting PSDs for us mock up our illos on?

Comment 13

[Bram Pitoyo [:bram]]

Glad the design worked out for you guys. Here are the Photoshop files:

Home page:
http://brampitoyo.com/sumo/help_other_users_v2.psd

Sub page: Answer questions in the forum
http://brampitoyo.com/sumo/answer_question_forum.psd

Sub page: Join Army of Awesome
http://brampitoyo.com/sumo/join_army_of_awesome.psd

Comment 14

[Rosana Ardila]

Bram,

Thanks a lot for creating this pages!

I think this templates work very well and looking forward they will give us the ability to rearrange images and text as needed (our contribution areas are also growing), great job Bram.

On the "Army of Awesome" template we have the 3 steps to get involved right underneath the sing up button. We are also creating impact images for each functional area. I was wondering what would be better, to have a bigger impact image and then the 3 steps or a smaller impact image (like in Bram's actual template) or to have a bigger impact image like in the general get involved page.

Lee, it would be great to hear thoughts on this as this will determine the size of the impact images.

Thanks you!

Rosana

Comment 15

[Lee Tom]

Hi Rosana, I'm going to start posting mockups of the visual assets in bug 742410 within the pages Bram created for us in this bug. I think Sean and I will have some wiggle-room with regard to the SUMO visuals since the layout looks pretty modular. 

It will also help to start seeing all of the visuals next to the content/copy to get a sense of how they'll make sense on the page. 

If no one has any further issues or concerns with these templates, I think we can probably close out this bug.

Comment 16

[Verdi [:verdi] Best to slack me]

These designs look good to me. I have a question about how we'll implement them. Is the idea for these to be wiki pages or will they have to be hard coded?

Comment 17

[Ricky Rosario [:rrosario, :r1cky]]

I think we are done here? If not reopen.

Comment 18

[Bram Pitoyo [:bram]]

Attachment: SUMO - get involved - explanation - 01

The mobile version of get involved have been updated to reflect the new design. This series of mockups also shows the landscape version of each page.

Photoshop files:

http://people.mozilla.org/~bpitoyo/sumo/mobile/sumo_get_involved_v2.psd

http://people.mozilla.org/~bpitoyo/sumo/mobile/sumo_get_involved_landscape_v2.psd

http://people.mozilla.org/~bpitoyo/sumo/mobile/sumo_get_involved_forums_v2.psd

http://people.mozilla.org/~bpitoyo/sumo/mobile/sumo_get_involved_forums_landscape_v2.psd

http://people.mozilla.org/~bpitoyo/sumo/mobile/sumo_get_involved_army_of_awesome_v2.psd

http://people.mozilla.org/~bpitoyo/sumo/mobile/sumo_get_involved_army_of_awesome_landscape_v2.psd