702332 - Firefox Flicks Wireframes

Status: RESOLVED FIXED

(mozilla.org Graveyard :: Webdev, task)

Description

[Chelsea Novak [:chelsea]]

Hi Chrissie, 

Sorry to not have filed this bug sooner. Further to e-mails from last week can you give Chris and I an update on when the wireframes will be ready?

Comment 1

[mcbmoz]

EOD today (taken from last week's email thread on this).

Comment 2

[mcbmoz]

Attachment: Wireframe 1. (with judges)

Wireframe 1. with judges

*Default Layout (992 px), can accommodate media queries for mobile devices at 768, 480, and 320 px
*Includes recommended javascript code for fixed effect

***
2 other home page layouts coming later this morning/afternoon

Comment 3

[mcbmoz]

Attachment: Wireframe 2. (with countdown clock)

Wireframe 1. with countdown clock

*Default Layout (992 px), can accommodate media queries for mobile devices at 768, 480, and 320 px
*Includes recommended javascript code for fixed effect

***
1 other home page layout coming later this morning/afternoon

Comment 4

[mcbmoz]

Attachment: Wireframe 3. (with How Flicks Works)

Wireframe 3. with how flicks works

*Default Layout (992 px), can accommodate media queries for mobile devices at 768, 480, and 320 px
*Includes recommended javascript for fixed effect

****

Next up, 2 layouts for interior page template

Comment 5

[Tara (musingt)]

adding Sean, myself, and Chris More for review and feedback.

Comment 6

[Kristin Baird]

Thanks Chrissie,

Took a pretty quick look at these. Think I am leaning towards #1. I don't think the countdown clock makes sense for these because its the countdown until the submission site opens, then do we switch it to be a countdown until its closed? Just feel like that's valuable real estate that can be used for something else. 

What if we add a call out box for the prizing and move the email entry form down? Might throw off the balance of the page, but think it would be nice to get prizes prominent. 

I like the news & update section. 

We can discuss more tomorrow.

Comment 7

[Tara (musingt)]

Hey guys, Just finished reviewing the wireframes.  Good stuff.  If it's okay, I might take these as inspiration/starting point and take a stab at a set of sketches here myself.  Will post those by eod today for thoughts / feedback.  

Spoke to Sean briefly this AM... he just arrived in KL and is available to do the site.. but he doesn't have his tablet and will be slower (+ time zone differences of course).  So, we really need to wrap up the site layout and overall direction asap if we want to get the design done by early next week.  Which is pretty darn tight right now.  But we'll do our best. 

Thanks Chrissie, Kristin, et al.

Comment 8

[Kristin Baird]

Thanks Tara. Look forward to seeing the sketches.

Comment 9

[mcbmoz]

(In reply to Kristin Baird from comment #8)
> Thanks Tara. Look forward to seeing the sketches.

Sounds great Tara/Kristin.

Tara, if you need any help please let me know, otherwise I'm going to take myself out of the loop to let you guys simplify and expedite.

Recommendations:

*Begin with a default layout for desktop at 992 px) and plan collapsing columns that can accommodate media queries for mobile devices at 768, 480, and 320 px

*http://www.mozilla.org/en-US/opportunities/  - while not optimized for mobile devices, does a good job with video management on mobile, might be helpful when planning this out for the dev team

Comment 10

[Tara (musingt)]

Thanks Chrissie.  Would still need your input on the sketches since that's all they will be -- sketches :) not designed to pixel specs or anything like that.  But will possibly shed a new perspective on layout options and content presentation.  

Also, can you let me know what the issues are with video and mobile?  maybe it's a stupid question but I"m unclear why videos are an issue for the mobile version.  what factors are involved here?  Does this mean we can't have a video box on the mobile site?

Comment 11

[mcbmoz]

(In reply to Tara from comment #10)
> Thanks Chrissie.  Would still need your input on the sketches since that's
> all they will be -- sketches :) not designed to pixel specs or anything like
> that.  But will possibly shed a new perspective on layout options and
> content presentation.  

If i can be helpful, please let me know - anything you ladies need :-)

> Also, can you let me know what the issues are with video and mobile?  maybe
> it's a stupid question but I"m unclear why videos are an issue for the
> mobile version.  what factors are involved here?  Does this mean we can't
> have a video box on the mobile site?

Not a stupid question at all! We've been learning a bunch from recent campaigns, and getting better each time around.

Firefox Live used a Flash solution, which can't be viewed on mobile devices and there wasn't a fall back for mobile like a photo or slideshow. I'm sure post-phase 1 users won't be doing anything that requires Flash, but it's something to be specific about.

Currently, there are two video formats we've been using and learning from (please view both on your mobiles):

1.) Easiest implementation of a single type of video - http://www.mozilla.org/en-US/opportunities/  

2.) More complex implementation that uses a lightbox and offers users a choice - http://www.mozilla.org/en-US/foundation/annualreport/2010/

The lightbox works great on desktop, but it's not great on mobile. If you like the lightbox effect, we could plan a fall back that doesn't use it for mobile.

Comment 12

[Tara (musingt)]

Ok.  Heads up!  This is a long post.

Here are my rough thoughts on this right now.  Best I could do today with everything else going on.  Hopefully this'll help.  Once we get to a place we feel comfortable (even if it's rough), Sean can take over and turn it into awesome.


PAGES / CONTENT IN REVIEW
---------------------------

1. Main landing page
2. Judges
3. Prizes
4. Brief
5. FAQ
6. Flicks news (social)
7. Legal
8. Old Flicks
9. Submission page (to be added later)
10. Submission gallery (to be added later)


NAVIGATION:
------------

I'm a bit torn between having a top level nav bar, tabs, or a scrolling long page with anchors.  Not sure what works best on mobile, but here are my quick thoughts on each:

>Top level nav:  
this certainly works, but might clutter the header a bit since we have the Flicks logo, word mark, mozilla tab, and likely a background graphic up there.  But wasn't sure where else to put it.  I'm not a big fan of locking the top level nav to be honest, so I rather keep that the standard way.

>Tabs: 
I think if we have in-page tabs (not sure if that's what they're called) then we can scroll through Judges, Prizes, Brief, FAQ, etc… while keeping the top half of the page (with the campaign intro) locked at the top.  Could be good, but may also not be the best use of space and redundant. 

>Long scrolly page:  
The reason I like this is that we have a lot of compelling content that could benefit immediate exposure vs. hidden behind tabs and on other pages.  So, if designed well, I think this could work.  We'd still need navigation somewhere of course (perhaps it goes back to the top) but when someone lands on the page they can just scroll down and see the goods.


ROUGH SKETCHES: 
-----------------

>LANDING PAGE:

* Logo and wordmark at the top 
* Top level navs for:  Judges, Prizes, Brief and FAQ (ideally with anchors)
* Header and informational blurb to present the contest.
* We can add the CTA to submit/enter their flicks later. We'll still need something here to let folks know to come back, or subscribe to updates.
* Video box that can initially be the teaser video, then rotated to show other promo content.
* Perhaps the background graphic starts with the red curtain treatment but quickly fades into a black background to let the content show better? Leave it to Sean to figure this part out.  But we have a lot of content and it won't look right with the previous heavy curtain graphic.  


>MEET THE JUDGES

Not sure why I thought there were 5, but figured we can have a fun presentation of their headshots, along with a short bio.  

I think it's best to showcase all the judges at once (vs. a scroll approach) and try to put them all on roughy the same level.  We'd probably hurt an ego or two if a celeb judge looks like their weighted more heavily than another.

>PRIZES:

Not sure what the final prizes will be, but we should definitely highlight these in as exciting a way as we can (with visuals - whatever they end up being).

>NEWS BULLETIN (or whatever we end up calling it):

This is where folks can follow Flicks' News, latest updates, etc.  
Definitely think we should focus on social media here.  Twitter and Facebook.  I suggest a new Facebook page (that we'd also promote via our official page), and a Twitter account.  These can then post frequent updates without feeling spammy.  Email works too, but not the strongest for this IMO.


>CREATIVE BRIEF, FAQ, and LEGALESE

These are all long wordy documents that can benefit from their own page.  So, perhaps at the end of the landing page, we have promos pointing off to these, along with the top header navs.  Still trying to figure this one out.

Legalese:  I don't think we need a tab for highlighting legalese.  Legalese will be something we simply link to within the body of the pages, probably from the creative brief and FAQ.  No need to waste precious space dedicating a tab to it. 


>OLD FLICKS:

The "Old Flicks" as I called it… was an idea I had for a separate page that would shed a little more light on the history of Flicks, and past success stories.  Imagine a simple page where we have a short blurb to the left, a simple collage of screenshots / photos on the right, followed by a small gallery of videos from the old Flicks.  Basically the ones we're highlighting (roughly 5-6 of them).  I think it would be great to lt people browse through the past videos to get a sense of what we got.

Comment 13

[Tara (musingt)]

Attachment: Sketched wireframe 1

This is basically what I described, with top head nav with anchors to content at the bottom.

Comment 14

[Tara (musingt)]

Attachment: Sketched wireframe 1 - zoomed in a bit

Comment 15

[Tara (musingt)]

Attachment: sketch showing tabs and suggestion for "old flicks" page

super rough sketch here, sorry.  

The left one is meant to basically show what I meant by an "in-page" tab.  It's basically the same content just on different tabs within the same page... similar to how we've done it on mozilla.com

The right one is a simple layout for what the "old Flicks" page could look like.  Again, a simple blurb to share the history / success story.  A few pictures for visual impact.  Then a quick gallery of the top 4-5 for viewing with some basic credits to the left.

Comment 16

[Sean Martell]

So I think this will work as one page with anchors. I can break up the content perhaps with solid fields similar to http://www.kaleidoscopeapp.com/ (though much more subtle)

Shouldn't take long to design as long as I have all the assets. Do we have all the judge photos?

Comment 17

[Matej Novak [:matej]]

For some reason I thought we wouldn't know who the judges are for this first round. Even if that's not true, how do we handle adding more information later (like the addition of one or more judges down the line)? Would that be easier in a multi-page approach vs. one long scrolly page? (I personally prefer the one page approach, just throwing the question out there.)

In general I was under the impression that we just wanted a simple landing page for December so we have somewhere to point people from the video, snippets, social, etc. and that we would do a more complete site in February. Do we have enough info to populate the above?

To be clear, I really like the sketches, just want to make sure we're all on the same page wrt what we're trying to accomplish this round.

Comment 18

[Tara (musingt)]

Hey Sean, I was totally thinking of a long scrolly page and breaking up the content with colors too. wohoo! There are a lot of sites that do this so well, and navigating down feels fun vs. overwhelming (especially with anchors and a smooth scroll down/up). 

Then after thinking about it, I thought that perhaps having the brief and FAQ on different pages would be a good idea since those are much more meaty and we may want to link to them directly from other places.  But it can certainly work as a long scroll.  That's actually how we did it for the FF3 t-shirt challenge (though that was a very rough site on sfx) and it worked out just fine.

>CONTENT:
Matej, very good point.  I thought we'd have those?  If not, then perhaps we'd shift towards highlighting the history of FLicks (showcasing the past videos and stories as I mentioned) vs. detailing out the judges and prizes.  Ideally we'd have something juicy to show here... even as a first round.  Otherwise, I'm not really seeing the point of creating a site and promoting this when all we're basically saying is "come back later".  And if we do, then we should be highlighting two things:  the Flicks story/history, and keeping in touch via social for updates.

>adding content
I think it would be fairly easy to add new content in a long scrolly page, magazine style, they're just blocks of content really and you can add more as you go by expanding or contracting each section.

>Kristin!!
Will let Kristin share her thoughts here as well, especially around content and what we will/won't have.

>COPY
Matej, in terms of copy... I think we should work on a good paragraph for that top intro piece.  And possibly a shorr blurb per section to introduce it.  Like, a short blurb for judges, some copy for prizes, staying on top of Flicks news, etc.

Comment 19

[Tara (musingt)]

Attachment: headshot 'creative' samples

I know this is a wireframe bug (sorry)... but, headshots could be in something like this.  I had a bunch of ideas around this, but simply wanted to cut out the heads and do a fun presentation of them (maybe even with fun hovers) but maybe that's also over thinking it (as usual). Or they could be in Polaroids or something that fits the art/film industry.

Comment 20

[Tara (musingt)]

Attachment: Sketched wireframe 2

Another option, slightly different.  

* Bigger logo at the top
* Center aligned "Firefox Flicks" header
* Center aligned header "Lights Camera Awesome"
* Center aligned intro text to present the contest
* Header nav is optional, I think.
* Background graphic at the top can be curtains fading into black to maintain that theme.  The film strip can be seen again on the right, to continue that theme.

* Video box below it.  The bigger the better.  Since this is for film students, the bigger the video box presentation the better in my opinion.
* Promo blocks to the right for navigation and to make sure the key pieces are highlighted at the top:  Judges, Prizes, Brief, FAQ, as anchor links.

* Right below, split presentation promos for:  Entering the contest, connecting via social for latest Flicks news.

* Below that, we roll in the actual content the anchors are linking to.

* I've excluded legal, again, b/c that should be a separate page we link to.
* I've excluded the Flicks history piece, which we can easily add, possibly as it's own page... I personally think we should do this page :)

Comment 21

[Chelsea Novak [:chelsea]]

Hey Tara, (and all)

I really like these. Your sketches always make things so clear. 

A couple of things to consider:

(caveat, I'm going off of information from last week, so I don't know if things have changed - if so please disregard - if not, regard :) )

1) As I understand it we won't have all (or possibly any) of the judges confirmed for the launch of the marketing site and will likely have to add them in later. I think this was why we were looking at having the judges as a separate page. Given that information, do you think you can make this design work? I like it and am just trying to figure out how to make it work with our current constraints.

2) Same goes for prizing (unless more of it has been confirmed, in which case, please ignore). 

3)News bulletin - I 100% agree about social. Also, since we're only expecting to get a few hundred people interested in learning more, it makes more sense resource-wise to communicate via social channels. I think we were looking at just having an e-mail address people could send questions to, rather than a sign up form. I'm back and forth on this as the sign up form gets us people to contact directly, but I know we're going for lightweight and quick. Would love thoughts on this. 

4) With the old flicks content, do you have some contenders for what we might feature there? Also it might make sense to hear back from cmore in terms of where those videos will be hosted (as I think they've being moved off their current home when we launch this site). I think it's a cool idea, but I know we're trying to get something really lightweight up quickly and just wanted to be sure that there aren't hidden complications with it - Chris can you comment on that?

5) With the teaser video, you show the other videos below. Would the design still work if we launched with just the one teaser that we'll have ready for launch and then add in the new teasers later? Or could we do something like "coming soon" boxes, with a note to check back later?

Comment 22

[Tara (musingt)]

Thanks Chelsea, inline!


 
> I really like these. Your sketches always make things so clear. 
Thank you :) Happy to help.

> 1) As I understand it we won't have all (or possibly any) of the judges
> confirmed for the launch of the marketing site and will likely have to add
> them in later. I think this was why we were looking at having the judges as
> a separate page. Given that information, do you think you can make this
> design work? I like it and am just trying to figure out how to make it work
> with our current constraints.
> 
> 2) Same goes for prizing (unless more of it has been confirmed, in which
> case, please ignore). 


Not ideal, but perhaps I misunderstood.  We can certainly tweak, and collapse this information for now, but leave a nice cliff-hanger so folks are still drooling when they visit the teaser site.



> 3)News bulletin - I 100% agree about social. Also, since we're only
> expecting to get a few hundred people interested in learning more, it makes
> more sense resource-wise to communicate via social channels. I think we were
> looking at just having an e-mail address people could send questions to,
> rather than a sign up form. I'm back and forth on this as the sign up form
> gets us people to contact directly, but I know we're going for lightweight
> and quick. Would love thoughts on this. 

I don't think email is the right channel for this.  We want folks to opt-in for more regular updates than what email can offer without seeming spammy.  Also, having that social layer is a big part of this.  Email is just too dry and boring right now for something like this.  So, I suggest we remove email.  BUT, we should add email when folks submit their entry, on the entry form.  But I think we should focus on twitter and facebook  We can leave email, but we would have to only send a note for key milestones:  voting, judges, etc.  vs. more frequent updates that other channels can accept. 


> 4) With the old flicks content, do you have some contenders for what we
> might feature there? Also it might make sense to hear back from cmore in
> terms of where those videos will be hosted (as I think they've being moved
> off their current home when we launch this site). I think it's a cool idea,
> but I know we're trying to get something really lightweight up quickly and
> just wanted to be sure that there aren't hidden complications with it -
> Chris can you comment on that?

Yup, Here are a few:
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

As I showed roughly in the attachment, I'd like to also have a short blurb to tell the background... a few screenshots, and quick video gallery.  Sounds more complex than it should be.  But if it's going to be a super lean site at the december launch, I think this could go a long way.  It also helps to really showcase the success of the past Flicks contest, which right now is scattered around the web and doesn't look all that great.


> 
> 5) With the teaser video, you show the other videos below. Would the design
> still work if we launched with just the one teaser that we'll have ready for
> launch and then add in the new teasers later? Or could we do something like
> "coming soon" boxes, with a note to check back later?

Yep.  We can nix the thumbnails and design the page with the plan to add later. My 2 cents.

Comment 23

[Chelsea Novak [:chelsea]]

(In reply to Tara from comment #22)


> Not ideal, but perhaps I misunderstood.  We can certainly tweak, and
> collapse this information for now, but leave a nice cliff-hanger so folks
> are still drooling when they visit the teaser site.

Yeah, I agree, it's not ideal, but not totally in our control. Thanks for suggesting the collapse idea. 

> BUT, we should add email when folks submit their entry, on the entry
> form. 

Perfect. 

> > 4) With the old flicks content, do you have some contenders for what we
> > might feature there? 
> 
> Yup, Here are a few:
> 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
> 
> But if it's going to be a super lean
> site at the december launch, I think this could go a long way.  It also
> helps to really showcase the success of the past Flicks contest, which right
> now is scattered around the web and doesn't look all that great.

The blurbs shouldn't be hard to do. I'd just like to know what it would add to the dev time. So Chris, if you can let us know when you have a moment?


> Yep.  We can nix the thumbnails and design the page with the plan to add
> later. My 2 cents.

Yay!

Thank you!!

Comment 24

[Kristin Baird]

Hi, 

Sorry for the delay in responding I am sitting at the doc with my son waiting, waiting and waiting for them to come take him. Why does it always take so long? Anyway......the sketches are great. Thanks so much! Here are my comments. I'll start with content (in no particular order, addressing it as it pops into my head) and then address the sketches.

Judges: we are really hoping to have one judge confirmed by launch. We will want to use his/her headshot and a little info on who they are. I have a call this afternoon to try and finalize one potential judge. Fingers crossed. The rest of the judges will likely come post announcement and we will need to update as they come on board. 

Prizes: the bulk of the prizes are confirmed. we are asking for prize donations and those are not confirmed. the big ticket items are confirmed. 

Old Flicks: I like showing these to show the type of content/quality we are looking for. 

News & Updates: I am sold on having these all be pushed through social now and not trying to collect email addresses. Tara, you convinced me yesterday. I have reached out to William to see about our own FB page. 

Teaser Video: Chris approved the copy on this so we should be good to go. How do we update with the new videos as those are made? Maybe we show a thumbnail of all of the videos and people can click to view???

The sketches look great. I really like the last one Tara posted that I think uses the anchors to drive to additional content on the page. We will need links to the FAQ and to the legal. I am torn on what's more important prizes or judges? If we really get A list Hollywood judges which is the plan then maybe the judges but if they end up being more B list which hopefully won't happen then maybe its prizes. Curious as to what others think? 

Thanks. Nice job

Comment 25

[Chelsea Novak [:chelsea]]

(In reply to Kristin Baird from comment #24)

> I am torn on what's more important prizes
> or judges? If we really get A list Hollywood judges which is the plan then
> maybe the judges but if they end up being more B list which hopefully won't
> happen then maybe its prizes. Curious as to what others think? 

Well, I think we should start with the prizing as the focus, as that's what we know for launch. Should we get some amazing judges, move them up the page as the focal point once we have them. It would mean a bit of additional work later on, but it is doable.

Comment 26

[Kristin Baird]

I can get behind that. For launch prizes are the priority and if we get awesome judges we can change hierarchy.

Comment 27

[Tara (musingt)]

Attachment: Sketched wireframe 3

Adding another thought given the more lean content.  We can use this for the initial site, then update (perhaps).

* Same general header direction
* Bigger splash video box.  Though this is a little redundant for those who click over having already seen the video.  But that's not the only way we're promoting this so... should be okay, I hope.

* three-split promos for: 

-- Celebrity Judges:  We'd have to pump it up with words, and if we have a headsshot, then we can add it in here.  

-- Prizzes:  again, pumping with words vs. visuals perhaps.
  
-- Flicks News: pushing social media and letting them know to keep in touch

* "Behind the scenes" or whatever to share the past Flicks Story.  Some screenshots, a paragraph to explain what it's all about, and results from both US and Japan.  Then thumbnails of the videos to browse through. For mobile, overlays aren't good so... we can do something else for mobile, or revert to the layout shown in my other attachment for the "old flicks" page.

Comment 28

[Tara (musingt)]

(In reply to Kristin Baird from comment #24)

>
> Maybe we show a thumbnail of all of the videos and people can click to view???

Yup.  The little boxes underneath the video box are the thumbnails you'd click on.


> 
> The sketches look great. I really like the last one Tara posted that I think
> uses the anchors to drive to additional content on the page. 

That's my preferred layout as well.  Thanks.


>
>We will need links to the FAQ and to the legal. 

FAQ was included as one of the boxes on the right pointing to anchors.
Legal shouldn't need to be called out, we can link to it from the FAQ and the Brief. In the footer, too.


>
>I am torn on what's more important prizes
> or judges? If we really get A list Hollywood judges which is the plan then
> maybe the judges but if they end up being more B list which hopefully won't
> happen then maybe its prizes. Curious as to what others think? 

I think they're both important.  Judges and exposure to the industry are part of the allure and prizes here.  Even if they are B-list.. it's still better than nothing.  It's still exposure.

Comment 29

[Chris More [:cmore]]

Hey everyone! I am really liking the direction of this and I will leave the creative decisions up the experts in this thread. I am tied up with a mozilla-wide project management initiative and I apologize for not responding sooner.

I would like to wrap up the mock ups by COB on Friday if possible so we can move forward. If not, the chances of landing this pages by 12/8/2011 is highly unlikely.

Comment 30

[Tara (musingt)]

We've got a slight extension to the 12/8 deadline.  But not by much (considering Thanksgiving holidays are ahead).  Sean is in KL, but will do his best to give us a comp soon. 

Thanks for the feedback Chris.  If anything stands out as a potential issue, please do flag asap so we don't design anything that can't be coded or will cause wrinkles. 

Light speed !!! onward...

Comment 31

[Chris More [:cmore]]

Tara: As soon as we can agree on the wireframe/mockup, we need to ping Steven Garrity at Silver Orange for a reality check. Anything is technically possible, but he is going to be doing the coding for the landing pages and will be able to tell us if what we want is possible within the time frame.

p.s. Nice job on the sketches.

Comment 32

[Tara (musingt)]

Thanks Chris.  Moving the conversation over to the design bug now as Sean digs in. That's bug #691570 for your reference.  Feel free to follow along if you wish.  I'll be sure to flag updates though so you're in the loop and can review.