781911 - [moz.org story] redesign "about" page (design + copy)

Status: RESOLVED FIXED

(Marketing :: Design, task)

Comment 1

[Tara (musingt)]

Attachment: about landing page mockup direction, v1

Comment 2

[Tara (musingt)]

Attachment: about landing page mockup direction, v2

Comment 3

[Ty Flanagan]

Attachment: Moz.org - About Us - Redesign

So after attempting several times to find a good balance between the animated photo header, the main content, and any additional photos which could be included into the layout, i found that the best solution was to keep the header as the only image area. Incorporating more images as either a background or to complement the copy created a focal problem. This version maintains the sandstone grid and also gives additional attention to copy areas which felt "light" in the current live version of the About Page

Comment 4

[Tara (musingt)]

Thanks Ty

I think this is a great first milestone design.  No need to tinker too much knowing that we'll be ripping it apart soon for phase II.  But this is certainly a great step forward. Thanks again.

Few thoughts:

* I think the mission is a little too buried right now, we may want to re-prioritize the items here.
* Lets also add "our products" to balance out the list.
* Matej, thoughts on copy?
* Ty, have you taken a crack at the mission page? making sure that the connection between the two is consistent (visually) and makes sense.
* Collage: I think we'll need to edit the pictures a bit. We have too many foxes (some looking the same), and a lot of ex-employees. 
* Mike: can we discuss the possibility of adding some motion to the collage? can we have those tiles change/cycle through an batch of photos? it would be nice to give this page a touch more given that the design is relatively simple.
---
Reminder: designs are due by eod tomorrow.  Please let me know how I can help push things along.

Thanks again!

Comment 5

[Ty Flanagan]

Working to ready the mission page tomorrow afternoon. 

Something to keep in mind about the photos though, if we intend to make the wall of photos dynamic, the current layout is really FPO. The images will load up in different spots upon page refresh

Comment 6

[Tara (musingt)]

(In reply to Ty Flanagan from comment #5)
> Working to ready the mission page tomorrow afternoon. 
> 
> Something to keep in mind about the photos though, if we intend to make the
> wall of photos dynamic, the current layout is really FPO. The images will
> load up in different spots upon page refresh

True. Do you think that will be a big problem? We can hand pick the pictures, and only assign certain blocks to rotate if that keeps the overall collage inline with the original design.  And if the pictures are not moving, it would be nice to have some sort of a hover state, or *something* I just think it's a natural space to bring to life in some subtle way. 

Quick thoughts:
* Assign certain blocks to change, not all.
* Have the banner slowly slide revealing new pictures but essentially cycling through the same 'band' of photos.
* upon hover, have the photos pop out a little?
* upon hover have the filter go away to reveal the true colors (do these even have a filter?)
* Can we have the red block with "getting to know mozilla" drop in vs. always being there from the start? start with full collage and have that enter the page somehow?
* hmmm, anything else?

Comment 7

[Mike Alexis [:malexis]]

Adding Steven and Craig for feedback on Comment#6

Do you guys have any suggestions or feedback regarding the functionality of the mosaic or any insight or concerns about technical constraints?

Comment 8

[Matej Novak [:matej]]

Hey, sorry, I wasn't on this bug so I'm just seeing the mockup now. I think it looks great and the copy is good by me. I'd just like to go back to "Get to know Mozilla" for the headline so it's from the POV of the viewer, like the rest of the copy on the page is.

For the products link, let's use this copy:

Our products »
An overview of what we make and what we're working on

And under Get involved, please change to:

Volunteer opportunities in a number of different areas

Thanks!

Comment 9

[Matej Novak [:matej]]

Sorry, one other thing. Let's change the Mission link to:

The Mozilla Mission »

Comment 10

[Ty Flanagan]

Any particular order to the links now that we have added MISSION and PRODUCTS?

Comment 11

[Tara (musingt)]

Perhaps Holly can advise on the link order a bit?

Here is my 2 cents:

* Mission - Get Involved
* Press - Mozilla blog
* Products - Locations
* Careers - Toolkit
* Partnerships - Privacy center

Comment 12

[Matej Novak [:matej]]

(In reply to Ty Flanagan from comment #10)
> Any particular order to the links now that we have added MISSION and
> PRODUCTS?

How about this?

Mission          Products

Careers          Get involved

Blog             Press

Toolkit          Privacy

Location         Partnerships

Comment 13

[Tara (musingt)]

Matej's suggestion works for me. Thanks Matej.

Comment 14

[Matej Novak [:matej]]

Heh. I'm really fine with whatever, I just think it makes sense to have Careers and Get involved on the same line.

Comment 15

[Holly Habstritt Gaal [:Habber]]

Designs look great so far. However, it would be nice to see both this and the Mission page before deciding on it as the final version. To Tara's point up top, about having a visual connection between the pages: we should make sure that there is some variation on the theme between the pages. Is there a system for which pages would get the people-focused header vs those that do not? If necessary we can look more at the sub-page template style in the next phase of the project.

As for the link order, I think it looks good having Mission and Products up top and Careers and Get Involved side-by-side. I thought Press and Toolkit being more closely related would be a good idea, but any way I tried it ended up making Privacy and the Blog seem less important. I think that the way Matej suggested will work just fine.

Comment 16

[Tara (musingt)]

(In reply to Holly Habstritt [:Habber] from comment #15)
> Designs look great so far. However, it would be nice to see both this and
> the Mission page before deciding on it as the final version. To Tara's point
> up top, about having a visual connection between the pages: we should make
> sure that there is some variation on the theme between the pages. 

Agreed.  Ty when can we see something? Today is our deadline to turn these pages over..... 

Is there a
> system for which pages would get the people-focused header vs those that do
> not? If necessary we can look more at the sub-page template style in the
> next phase of the project.

The way I had seen it was that the /about and /mission pages would have the people centered header... if not the /about page only.  the mission page isn't really so much about 'people' but about other themes, so I think if we were to do graphics there, they wouldn't be so people centric. but we can figure that out in phase 2. 

> 
> As for the link order, I think it looks good having Mission and Products up
> top and Careers and Get Involved side-by-side. I thought Press and Toolkit
> being more closely related would be a good idea, but any way I tried it
> ended up making Privacy and the Blog seem less important. I think that the
> way Matej suggested will work just fine.

agreed.

Comment 17

[Ty Flanagan]

Attachment: Moz.org - About Us - Redesign

- Updated the links layout

Comment 18

[John Slater]

Great stuff...what's the next step here?

Comment 19

[Ty Flanagan]

I will be cleaning up the PSDs and posting them tomorrow.

Steven and Craig - Have you an had opportunity to look at this example of the animated responsive image tiling that we would like to implement:  http://tympanus.net/Development/AnimatedResponsiveImageGrid/index.html

Comment 20

[Ty Flanagan]

Here are the PSDs:

https://www.dropbox.com/s/ovh8cwegdyw9421/Moz_About_Home.psd.zip

and the photos:
https://www.dropbox.com/s/qlmxzu1re12xnch/Moz_About_Home_Photos.psd.zip

Will be pasting these links into Bug 786053 too.