739378 - [Firefox Flicks] Design Contest Closed Homepage

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Christie Koehler [:ckoehler]]

We'll need a version of the Firefox Homepage to run after the contest has closed but before winners are announced.

The deadline for this will depend on how much new copy there is to be localized. Ideally we should be done by 4/18 for the 5/1 release.

cc'ing Jinghua so she can advise on UX.

Comment 1

[Tara (musingt)]

Thanks, ccing Lee and Matej.  Though I'm not clear on what the content direction is and whether there are wireframes we're referencing or not.  More information / clarification would be helpful.

Comment 2

[Christie Koehler [:ckoehler]]

There's a two and a half week gap between the close of the contest and the announcement of winners. The current homepage design is entirely geared towards promoting submissions, which won't make sense after the contest is closed. 

Chelsea should be able to jump in and explain what should be promoted on the homepage while submissions are being judged.

We don't have wireframes for this iteration, which is why I've cc'd Jinghua.

Comment 3

[Chelsea Novak [:chelsea]]

I'm also open to suggestions about what we should feature. Clearly we need to convey that the contest is closed, but we also want to encourage people to watch the videos and generate excitement about the announcement on or about the 17th of May. 

Should we have a call to talk it through?

Comment 4

[Jinghua zhang]

Christie, is it a Q2 goal for you? I will talk with Bryan, Bram's manager, to see if he can get squeeze some time for you.

Chelsea, if you plan to schedule a call, please invite Bryan Clark.

Comment 5

[Crystal Beasley [:skinny, :crystal]]

Can we use the recent videos page and add some copy at the top that says the contest is closed, judging will be announced at x date, etc? In that case, all we need is to write some copy, format it at the top, and switch it over to being the home page.

https://firefoxflicks.mozilla.org/en-US/recent

Comment 6

[Tara (musingt)]

Please welcome Lee to the design stage !!  wohoo. 
Please invite Lee to the related calls surrounding wireframes/design.

Comment 7

[Crystal Beasley [:skinny, :crystal]]

Something like this... http://cl.ly/3V2q1z0w0h3Q3S21450u

Comment 8

[Christie Koehler [:ckoehler]]

(In reply to Jinghua zhang from comment #4)
> Christie, is it a Q2 goal for you? I will talk with Bryan, Bram's manager,
> to see if he can get squeeze some time for you.

Yes it is a Q2 goal. The contest is already live and has a fixed dates for the contest close and announcement of winners.

Comment 9

[Bram Pitoyo [:bram]]

Attachment: Contest closed with red curtain

We can also extend the red curtain (note that this mockup has rough edges) to give more weight to the message.

Comment 10

[Chelsea Novak [:chelsea]]

Matej, could you write up some copy for this page. What we want to convey is that 

1) The contest is closed
2) Winners will be announced on May 17
3) People should still view and share flicks entries while they wait

Let me know if you have any questions on this. 

If you could do this in the next few days, it would help Bram and Lee in terms of making sure the design fits the copy we use. 

Thanks :)

Comment 11

[Matej Novak [:matej]]

Here you go. Let me know what you think and if it fits the page.


That's a wrap!

Thanks to everyone for the awesome flicks. Our judges are now sequestered (with plenty of popcorn) to choose the winners, but you can still watch the entries and share your favorites while you wait for the big announcement on May 17.

Comment 12

[Chelsea Novak [:chelsea]]

+1 from me. Kristin, is there anything we're missing?

Comment 13

[Kristin Baird]

Like the copy, lets go with it. I'd like to see the layout as soon as we have it. Thanks.

Comment 14

[Bram Pitoyo [:bram]]

Attachment: Contest closed with red curtain

The background curtain is now fade to black, which should be easier to implement and scale to small sizes.

Comment 15

[Bram Pitoyo [:bram]]

Attachment: Contest closed with red curtain

Updated with a longer image that shows the fade to black effect in full.

Comment 16

[Bram Pitoyo [:bram]]

Attachment: Orange text

Comment 17

[Bram Pitoyo [:bram]]

Attachment: Orange text, white highlights

Comment 18

[Bram Pitoyo [:bram]]

Attachment: White text

Comment 19

[Bram Pitoyo [:bram]]

Attachment: White text, orange highlights

Comment 20

[Chelsea Novak [:chelsea]]

I like the orange text one. Kristin, can you have a look and let us know. This is for the contest landing page between May 1 and May 17.

Comment 21

[Kristin Baird]

I like the orange text as well. I shared these and here are a few quick thoughts from Pete and myself: 

3 quick things.  

Since this is still the main page for the contest, lets include the trailers above the submitted content. (our trailers)  They're still the best content we've received.  

I'd put the drop down menus against a black background (like the film thumbnails) so that the controls are tied to the content.  

If it can be done well, I'd find a way to put a "Download Firefox" bug somewhere under the main paragraph.

Comment 22

[Osmose [:osmose, :mkelly]]

Just a note that the highlights will cause an l10n change and will have to be confirmed before tomorrow morning's string freeze. Also, if adding the trailers needs new strings, we'll need that before tomorrow as well.

Comment 23

[Chelsea Novak [:chelsea]]

I don't believe adding the trailers creates new strings, since they're already on the current homepage. Please use the descriptions that are currently there. 

I believe the only additional string would be the "Download Firefox"

Cheers, 
C

Comment 24

[Bram Pitoyo [:bram]]

Attachment: Curtains background for contest closed

Put in the background layer

Comment 25

[Chelsea Novak [:chelsea]]

Mkelly - did you add the 'download firefox' for the merge?

Comment 26

[Osmose [:osmose, :mkelly]]

I did. Download Firefox made it in. Per IRC discussion, we're going with the orange text, and then this page should be finished.

Comment 27

[[github robot]]

Commits pushed to develop at https://github.com/mozilla/firefox-flicks

https://github.com/mozilla/firefox-flicks/commit/ee8aa294f97ff05d5f11b38ec452f1043e08193c
added background image and text colour; fix bug 739378

https://github.com/mozilla/firefox-flicks/commit/ff201eadab2b1183a010b08a184e1b91caac1ba5
Merge pull request #94 from ednapiranha/bug739378

added background image and text colour; fix bug 739378

Comment 28

[[github robot]]

Commits pushed to develop at https://github.com/mozilla/firefox-flicks

https://github.com/mozilla/firefox-flicks/commit/decef2eeff097d9b0e8a3e17949ea165eec52c4d
added download firefox button; fix bug 739378

https://github.com/mozilla/firefox-flicks/commit/9acac0d29f5c3db085a0464f1a94ae4ed8bfee15
Merge pull request #95 from ednapiranha/bug739378

added download firefox button; fix bug 739378

Comment 29

[Kristin Baird]

Is there a revised mock up with this page that includes the download firefox button?

Comment 30

[Chelsea Novak [:chelsea]]

You can see it here: 
http://firefoxflicks-dev.allizom.org/en-US/

I thought the button was going to be at the top.

Comment 31

[Matej Novak [:matej]]

Sorry if this was already discussed and I missed it, but is there a reason we're not using the download button with the logo on it, like this one:

http://cl.ly/1Z2k37452l3M2g3w3x0Z

If not, I think that's what we should be using.

Comment 32

[Chelsea Novak [:chelsea]]

Mostly because that's a link made to look like a button. In order to meet the deadlines we have a the l10n cycle, we couldn't go with the typical button. 

Jen, Mike, is that explanation basically right? Jet lag is making things a bit of a blur.

Comment 33

[Matej Novak [:matej]]

My concern is that doing something that doesn't follow our brand guidelines looks unofficial and therefore could look like a mistake. John, Lee, what do you guys think?

I also wonder if there's some way to make the trailers stand apart from the other videos so it's clear they're not entries to people visiting this site for the first time (maybe that's the plan anyway, I just don't see them at the top of the current page).

Comment 34

[John Slater]

It would certainly be nice if the button could look a little more Firefoxy. Almost more than the lack of a logo, it just seems a little oddly placed right there at the bottom. Not sure if there are any options at this point...not a crisis if it has to stay where it is, but it does feel a bit unfinished.

Comment 35

[Osmose [:osmose, :mkelly]]

Attachment: Button in top bar

Perhaps adding a logo and putting the button in the top bar? Here's a mockup (positioning and sizing isn't quite right, and the edge of the green button is visible at the side, but bear with me here) with something that might work. 

Bonus here is that the download button appears on every page.

Comment 36

[Chelsea Novak [:chelsea]]

Comment on attachment 617910 [details]
Button in top bar

That looks great to me. Matej, John, does that help with your button concerns?

Comment 37

[Matej Novak [:matej]]

Yes, that looks much better to me. Thanks.

John, should we keep the Georgia there or should that be Open Sans?

Comment 38

[John Slater]

Georgia is fine - thanks!

Comment 39

[Osmose [:osmose, :mkelly]]

Attachment: Final design for logged out view

Comment 40

[Osmose [:osmose, :mkelly]]

Attachment: Final design for logged in view.

Does this look good?

I talked with Chelsea and we decided that the button would not be visible in mobile layouts, since it currently links to "https://www.mozilla.org/firefox/new" which only covers the desktop version of Firefox, and the logic for detecting the device is out-of-scope (and I'll be gone on PTO before I can finish it :x).

Comment 41

[Chelsea Novak [:chelsea]]

Comment on attachment 618029 [details]
Final design for logged in view.

Looks great Mike. Thank you.

Comment 42

[Kristin Baird]

Looks good. Thanks!

Comment 43

[Matej Novak [:matej]]

Love it, thanks!