Closed Bug 781175 Opened 7 years ago Closed 7 years ago

SUMO get involved page template

Categories

(Marketing :: Design, task)

x86
macOS
task
Not set

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: rardila, Assigned: ltom)

References

Details

Attachments

(1 file, 4 obsolete files)

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
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.
Assignee: tshahian → ltom
Thanks John!

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

Cheers,
Rosana
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
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.
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.
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.
Attached image SUMO - get involved - home - 01 (obsolete) —
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.
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.
Status: NEW → ASSIGNED
Attached image SUMO - get involved - home - 02 (obsolete) —
(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.
Attachment #650822 - Attachment is obsolete: true
This is the sub-page for Join Army of Awesome. Note how the steps to get started are numbered.
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?
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
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
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.
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?
Blocks: 810529
I think we are done here? If not reopen.
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.