Closed Bug 691570 Opened 13 years ago Closed 13 years ago

Firefox Flicks Launch Landing Page

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: kbaird, Assigned: smartell)

References

Details

Attachments

(1 file)

Final copy doc
15.26 KB, application/vnd.oasis.opendocument.text
Details 
We are targeting launching Firefox Flicks Take 2 in early Nov. At time of launch we will need a landing page. The landing page will hopefully contain a video of past winning videos and compelling content to why they should participate this time. The page will need to have links to the FAQ, legal and the creative brief.
OS: Mac OS X → All
Hardware: x86 → All
Assignee: tshahian → smartell
are there wireframes / rough sketches / mocks or anything to update this bug with?  if so, please share :)
No, lets talk more about how we move this project forward. Targeting a launch date of 12/6 or 12/7.
(In reply to Kristin Baird from comment #2)
> No, lets talk more about how we move this project forward. Targeting a
> launch date of 12/6 or 12/7.

Kristin, if you want to work on a wireframe and user flow with me, I'd love to help. I'm available tomorrow and Monday. Just shoot me a Zimbra for 30 min.
I do and will schedule time.
Hey Kristin, I'd like to hear more about the content you're thinking of having on this site.  Not sure if you've already chatted with Chrissie or not, but I'd love to join in on that conversation if it's not too late.  Will catch up with you later today but here are a few questions/thoughts:

* Is this page for the initial launch announcement?  how many different "states" of the site will there be?

* Would be nice to list out the different unique pages and related content. and it might be a good idea to file a separate bug for some of these pages: 

-- landing page: promo video + information blurbs + CTA, etc
-- submission page
-- Gallery of submissions?
-- Voting page/state? is there a community vote involved here?
-- creative brief, prizes, 
-- legal, FAQ etc. 

* Would be nice to showcase more than just the winner from last time... there were a lot of other cool videos (like Duru Duru Don, my favorite) that I think can demonstrate the level of quality (and creative range) of videos that came through. 

* You might want to create a facebook page/group to generate some following there.  They did this for the mass animation project and folks could sign up via email or facebook /etc to stay up to date on the latest.
Blocks: 701521
Ok folks!  hundreds of bugs 'n emails later.  Sean is going to try and dig in today if he can.  Here's the latest for your reference:

>LATEST COPY:
Matej's post, along with follow up comments on copy bug, here:
https://bugzilla.mozilla.org/show_bug.cgi?id=691573#c26

-----------------
Firefox Flicks

Lights. Camera. Awesome.
Help us tell the story of Firefox.

Firefox is the only browser that puts users first. Now we want to put you in the director's chair to help spread our message. Just create a short video and submit it in one of four categories. Your entry will be seen by industry judges and you could meet them at one of three international events. Plus,  you'll get a Firefox prize pack and a chance at more amazing prizes. We might even feature your video in a global campaign. We'll start accepting entries in February with winners to be announced in May. For now,  start thinking about your flick and stay in touch for updates.
-----------------


>LATEST WIREFRAMES:
https://bug702332.bugzilla.mozilla.org/attachment.cgi?id=575271  

It's the one on the left to start with. But plan is to update the site with more content later.  Likely to morph into something like that on the right.


>CONTENT:
* We'll have one judge to start with, with the intention of adding more.
* Prizes will be mostly described, I have no visual assets to add here, but we should really pump these up.
* Social:  Just Twitter and Facebook for now.  May add more later.
* Kristin is ok to nix the Old Flicks section if there's no time, I'd personally like to keep it if we can.


>PRIZES:
* Grand prize:  TBD
* top 3 finalists from each region flown to winner announcement event to meet judges
* great prizes for category winners and runner ups
* Firefox prize pack just for entering


>FLICKS LINKS:

http://www.youtube.com/watch?v=3pZjRWSjRBg
http://www.youtube.com/watch?v=Avk5NDEJMtg
http://www.youtube.com/watch?v=dNPjnlJyLI0
http://www.youtube.com/watch?v=x2Ub6ZvOO7Q
http://www.youtube.com/watch?v=1M7DhrkQnQk&feature=relmfu
http://vimeo.com/5134369

I'll need to track down the names and related info per video.  Please Greek that in for now.




THANKS !
So, based on all this, I'm assuming we're not doing the teaser site first? (as Matej mentioned in comment #17 on the wireframe bug)

John had told me that we'd be having a landing page first with just a coming soon, a video, and a "why participate?", similar to the first comment on this bug.

We're skipping that right? If that would give us more time, is that still an option?
ok. the left wireframe looks about right. Just that one page for today?
(In reply to Sean Martell from comment #8)
> ok. the left wireframe looks about right. Just that one page for today?

YES please :) 

Though we *are* still trying to include:

* link to Creative Brief
* link to FAQ

Both of these can perhaps be in the header nav, or elsewhere on the page. 
Both of these still have quite a bit of polishing to do... but hopefully we can get 'em ready in time. 

* Teaser Info on Judges
* Teaser Info on Prizes

* Teaser video
* Intro blurb at the top
* etc.

And of course, The old flicks stuff at the bottom.
So, it's more than JUST a "coming soon" page. yes.
I thought that maybe you can start with the red curtain treatment at the top as background graphic that more quickly fades into black so that the content can stand out better.  

Anyway, looking forward to seeing your work :)
Desktop mockup:
http://cl.ly/2H3T0z1j470t2W1U3A3Q/o

This is built out using the Less framework grid. Very clean. Some notes:

- I didn't follow the sketches 100% as they weren't designed using the Less framework, so I adapted the layout to be more responsive friendly.
- I didn't put Firefox Flicks as the header because this is no longer just one page. We need the logo in the top left for sub pages so I went along with the copy Matej had written - the Lights! Camera! Awesome! as the main headline
- I didn't have much of the lower content so I put lorem ipsum for most of it. We'll need the final copy when building out the tablet and smartphone Less framework layouts.
- I love this page now and as is it will easily be adapted to the other layouts.
Less layout grid - desktop example:
http://cl.ly/3R1t2P0P43130J0R401O/o

(the number of columns plus column and gutter widths change per responsive layout)
Great.  Thanks Sean!  Now.. time for you to sleep :)
Hey Sean, 

That looks great. Thank you for staying up and getting that put together on such short notice.

Tara, Sean
What's the "behind the scenes" section? Is this the old flicks content or the teaser videos? I'm not seeing it on any of the brief materials and am wondering where it came from. I don't know of any "behind the scenes" style content being developed for the launch of the marketing site. I know Kristin has gone off line for a few days, but Tara, if you had a meeting with her about this could you let me know. 

Thanks
C
Hi there.

"behind the scenes" was just a quick label I put on the sketch, it's intended to be the old Flicks stuff :)  sorry about that.
Update layout bassed on ongoing feedback:
http://cl.ly/3a0z0O2X3r0c3F3i3j3y/o

- changed the headlines to include "introducing Firefox Flicks"
- added some moar colors
- body copy changed to Calluna for easier reading for mobile
- some spacing edits
I like "the prequel" very nice. Me like!
Looks awesome! Nice work!

Here are the prizes: 
Grand Prize: $5K in video equipment or film school scholarship; plus flown to the winner event in your region.
Category Prizes: Category winners will receive $1K in video equipment and a trip to the winner event. 2nd place category winners will receive $1K in video equipment

Plus, everyone get a Firefox Prize Pack for entering. 

We are working on the judges. Copy for now should probably say something about rounding up celebrity judges, actors, directors, industry pundits, etc.
So to confirm, is this content (layout) finalized?

We need to design this for tablet and smartphone too.
Looking fly! I think the last thing we decided over on the copy bug was that we'd leave out the judges and prizes sections for now. Given that we end the copy with a CTA to stay in touch, it would probably makes sense to move the Twitter and FB links right below the intro paragraph.

I also just added this to the copy bug in case we want to keep the previous winners section:

The Prequel

This isn't our first Firefox Flicks. We ran the contest back in 2006 and received almost 300 entries from fans and filmmakers around the world. They were amazing! Have a look at the winners to get inspired or just enjoy the show.
(In reply to Sean Martell from comment #19)
> So to confirm, is this content (layout) finalized?
> 
> We need to design this for tablet and smartphone too.

RE: mobile

Sean, you may want to include a fall back state for mobile devices that hides the larger chunks of text, like the opening paragraph in a "read more" format.  Good example (view this url on your phone) http://www.etsy.com/listing/83592645/vintage-milady-royal-blue-hat?ref=cat_gallery_23

Also, the four video formats don't appear to be listed, not sure if they are supposed to.
(In reply to mcbmoz from comment #21)
> 
> Also, the four video formats don't appear to be listed, not sure if they are
> supposed to.

They're in the Creative Brief. "Four categories" should probably be a link to that. Good catch.
(In reply to Matej Novak [:matej] from comment #22)
> (In reply to mcbmoz from comment #21)
> > 
> > Also, the four video formats don't appear to be listed, not sure if they are
> > supposed to.
> 
> They're in the Creative Brief. "Four categories" should probably be a link
> to that. Good catch.

We might be referring to different things, I'm referring to the user-facing video viewing options:

WebM format
Ogg Theora format
MPEG-4 format
Other languages (Universal Subtitles) format
we'll have to redesign that thumbnail section if we have to offer 4 formats per video.

Thoughts?
I think the site's layout works well on mobile as is for fallback. it's in a nice vertical column and is pretty clean.

We can build in the tweaked mobile layouts in phase 2.
I think now we're to the point where we should think of this as phase 1 & phase 2.

Phase 1:
- standard site layout for desktop viewing

Phase 2:
- add tablet, mobile layout options
- add info about other video formats

I'm pretty sure Sean can have phase 2 done very soon, but if we can go ahead and hand off phase 1 today that will at least give WebDev something to start with.

Kristin? Chelsea? How does that sound?
So here's another option - if I can have until EOD Monday to do these, I can have the desktop/tablet/smartphone layouts + subpage designs complete.

Is that deadline doable?
I just chatting with cmore and as we're pressed for time Phase 1 is good. The landing pages as designed will be viewable and they are fairly simple to still be able to consume on mobile.

So it sounds good to me :)
Awesome.

Ok, so here is the latest layout: http://cl.ly/0l3t2U1L0x3Q3V2i092U/o

I can whip up the subpage on Monday.

Do you want the PSD for the homepage now or just package up the home + sub for Monday?
If it's not a hassle can you give us the PSD for the homepage now, just in case we need it while you're away?
HOMEPAGE:
http://people.mozilla.org/~smartell/engagement/FxFlicks-LessGuides4-10col-v2.psd

I'll design/upload the subpage on Monday.

Enjoy!
Chris - PSDs for the landing page for Silver Orange above. Let me know if you have questions. 
Cheers, 
C
Chris B. thought the page looked great with one change. He would like to remove the word "Introducing." 

He also had a few copy edits which I posted to the copy bug. 

Let me know if there are questions.

Thanks.
(In reply to Kristin Baird from comment #33)
> Chris B. thought the page looked great with one change. He would like to
> remove the word "Introducing." 

I'd really like to keep this if we can. I think it adds excitement to the announcement and plays off the film/video aspect. Another thought is to make it Presenting Firefox Flicks, but I think Introducing is stronger.

We're also using this in the video supers, so let me know if we need to make a change there as well.
Good feedback. Making our case to keep it.
Just posted this over at the copy bug, but what if we made it "Mozilla presents Firefox Flicks" to reinforce Mozilla right off the top?
Not sure if everyone here is also on the copy bug, so please see https://bugzilla.mozilla.org/show_bug.cgi?id=691573#c59 for the latest. I'll update if there are further changes.
(In reply to Sean Martell from comment #31)
> HOMEPAGE:
> http://people.mozilla.org/~smartell/engagement/FxFlicks-LessGuides4-10col-v2.
> psd
> 
> I'll design/upload the subpage on Monday.
> 
> Enjoy!

Hey Sean, just wanted to check to see if the subpage PSD will be finalized and uploaded today? We are on a major time crunch to get everything over to Silver Orange.

Thanks!
Subpage: http://cl.ly/0i2d3g0T2g0W0m2R0o1X/o

Simple page, straight content, thin column for easy mobile consumption.

I just threw a few examples in there of specific formats for text (links, subheads, bullets)

Copy doc is king for actual content.
Attached file Final copy doc — 
Speaking of that - here's the final copy doc :)
page is simple enough, but here is PSD just in case needed: http://people.mozilla.org/~smartell/engagement/FxFlicks-LessGuides4-10col-v2-sub.psd
I want to confirm the go live date for this campaign so the PR team can plan the announcement. Can we have this go live on 12/13?
Kristin: I can give you a tentative yes that 12/13 seems reasonable. Per bug 704640, I'm waiting on an ETA on Silver Orange on when the front end code will be completed. I will get QA lined up to review the pages. We won't need security on this site as it doesn't have any functionality. Also, pushing to production will be relatively painless due to it being on moz.org.
Great. Thanks. That's helpful. Just trying to line up the PR activities.
That also depends on the teaser video and l10n, right? I'll follow up with Chris, but want to make sure l10n is also confirmed for that release date.
Hey guys.  I'm going to close this bug out since it was for the initial landing page.  Please file new bugs for the next phases / pages / states of the Flicks site. Happy to discuss if needed. But I'd like to keep the bugs separate. so, I'm closing this out.

Thanks!
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: