739401 - [Firefox Flicks] Design Pages to Announce Winners

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Christie Koehler [:ckoehler]]

The Firefox Flicks contest is closing 5/1 and winners will be announced on 5/17. We need a way to showcase winners on the site.

We'll need to have designed finalized in time for implementation and a string freeze on on 5/2.

cc'ing Jinghua so she can advise on UX.

Project info:
https://wiki.mozilla.org/Websites/Firefox_Flicks

Comment 1

[Tara (musingt)]

Hi there


Can you please clarify next steps and the ask here?  Are we receiving wireframes ? can someone provide more content direction on what is needed and related design considerations?

cc-ing Lee who has been working on the Flicks designs so far.

Comment 2

[Christie Koehler [:ckoehler]]

I don't know if UX will be providing updated wireframes, that's why I've cc'd Jinghua.

Bram did some wireframes during the initial phase of this project:
https://wiki.mozilla.org/Websites/Firefox_Flicks#Wireframes

But they should be reviewed to make sure they still make sense.

The look and feel of the homepage and/or winners pages should match what is currently on the site.

There will be 16 grand-prize winners, across 4 categories and 4 regions. There might now be additional winners to showcase as well. Chelsea can jump in with that info.

Comment 3

[Chelsea Novak [:chelsea]]

Hey all, 

Yeah, we just keep on getting more and more potential winners:

*There will be 16 grand-prize winners, across 4 categories and 4 regions. 
(do we also want to feature runners up, as they get prizes too)
*A grand prize Panavsion prize winner
*A winner for the Bay Area Youth Coalition
*Various prizes awarded by Adobe (no number on this yet)

Needless to say, finding a way to organize this content so people can enjoy it after the contest is important. 

Happy to hop on the phone to talk it through some more.

Thanks!
C

Comment 4

[Jinghua zhang]

Crystal will help take a look

Comment 5

[Crystal Beasley [:skinny, :crystal]]

@ckoehler Bram should continue the UX since he's familiar with it. I added him to the cc. I'm happy to join any meeting you feel I'd be helpful in.

Comment 6

[Bram Pitoyo [:bram]]

(In reply to Tara (musingt) from comment #1)
> Can you please clarify next steps and the ask here?  Are we receiving
> wireframes ? can someone provide more content direction on what is needed
> and related design considerations?

I will review the initial set of wireframes and then see if there is anything that needs updating. My guess is yes. We will need to design pages containing more winners from more categories—versus the initial estimate of just 16.

Comment 7

[Chelsea Novak [:chelsea]]

Copy bug added.

Comment 8

[Bram Pitoyo [:bram]]

Attachment: Spotlights around video

One idea we could do to distinguish winning entries from everything else is by putting a spotlight in the background of those entries.

Comment 9

[Bram Pitoyo [:bram]]

Attachment: Winners page - by category

Comment 10

[Bram Pitoyo [:bram]]

Attachment: Winners page - by region

Comment 11

[Bram Pitoyo [:bram]]

Attachment: Winners page - by region (table-style layout)

Comment 12

[Bram Pitoyo [:bram]]

Attachment: Text setting for the winners page

Note that there’s no videos attached here, yet. I’ll tackle that in another mockup.

Comment 13

[Kristin Baird]

Thanks. I assume that the top level nav will still be on the page? Also assume the social links to FB, twitter and the blog will still be on the page? 

Re: the winners by region page. There is also a grand prize winner from each region. How does that video get displayed on the winners page? Right now it looks like it just shows the category winners. Also, what's the nav on this page? I'd like us to still have the links to the social outlets and the judges link would be good as well.

I like the winners page divided by region vs category.

Comment 14

[Chelsea Novak [:chelsea]]

Hey Kristin, 
We just had a call about this. Can we talk through it when you get in?

C

Comment 15

[Bram Pitoyo [:bram]]

Attachment: Winners page - by region - desktop

In this mockup, we will still be using the existing three-column grid.

* The first two column will be reserved for the grand prize winner
* The last column is reserved for a listing the 4 category winners
* Below these two is a thin horizontal area that occupies all three columns and lists the 4 runner ups

The Panavision and Bay Area Youth winner will get their own sections. They will be subsets of the regional winner layout, that will contain just the two-column sized video.

Comment 16

[Bram Pitoyo [:bram]]

Attachment: Winners page - by region - mobile

This doesn’t lay out the entire site, and it’s also missing the introductory paragraph, but it shows that this layout can look awesome on mobile if we are willing to custom-scale the sizes of the heading font.

Even if we can’t, it will still look pretty good, with large enough clickable text areas, and side-bearings so user can scroll without accidentally touching any link or video.

Comment 17

[Bram Pitoyo [:bram]]

Attachment: Spotlight PSD

Comment 18

[Lee Tom]

Attachment: Winners Homepage - by region - mockup

Attached is a mockup based on Bram's wire-frame from Comment 15

Comment 19

[Chelsea Novak [:chelsea]]

Comment on attachment 619640 [details]
Winners Homepage - by region - mockup

This looks great Lee. Kristin, what do you think?

Comment 20

[Kristin Baird]

Thanks for sharing. I just showed this to Pete and we had a few comments/questions. 

Assuming that when all of the other regions are added this is a long scroll page? Current attachment is missing Latin America and North America. 

Overall, we feel like we need to make this page more exciting since it is the winner announcement page. Is there something we can do at the top of the page for example that is a collage of all of the winning videos showing a thumbnail image of the video and when you click on one of the videos it pops up another window and plays that video? Next to this there would be nav that lists the regions taking you down to that section on the page where that region is listed with it's winners.

In the region sections right now it has the grand prize winner and then lists all other winners. We could keep it this way or just highlight the grand prize winner showing a thumbnail for the video and then link into a regional page that has all of the winners and the videos on that page from that region? Copy would be something like: View all winning submissions from Latin America. On this page we would show thumbnails of each of the winning videos so people can get excited to view the video as through the pic they will know if its animation or not for example. If we have regional pages this will help with tagging through social and other areas that are market/region specific. For example we can drive from LatAm FB page directly into the LatAm winner page.  

This might be confusing, I am sorry so please let me know if you want to set up time to chat.

Comment 21

[Chelsea Novak [:chelsea]]

Okay, trying to decipher this for Lee as he's got really limited bandwidth with all the Kilimanjaro stuff going on. 

1) Make sure all regions are included (4 regions in total)
2) More excitement - I don't know if we can do the pop up with the resources we have for design and dev - but in essence you're looking for some kind of visual element to create a snapshot of the winners, yes?
3)We decided against doing pages for each region (mostly so that people could find all the winners in one place). Each section on the winners page will be anchored so we can drive regions like LatAm to their section of the page. 

In terms of copy, I thought we were final with that (you and Matej were working on that in the google doc above. If we want to change that, we have to do it today as it's string-freeze day. :)

Let me/us know.
C

Comment 22

[Osmose [:osmose, :mkelly]]

Just a thought while looking at the last mockup:

Those large video thumbnails need to be 600x337 (if they aren't already) since that's the size of our video player. I assume we will be making video stills for the front page once the winners are chosen. Who will be handling that?

Comment 23

[Kristin Baird]

Ok, let me try and answer. 

1) yes, all 4 regions need to be included. Assumed they would be but they weren't on the mock up so wanted to call that out. 

2) the copy is fine, was hoping to get more excitement out of using a visual or something at the top to call out the winners. one idea we had was to do a square and the square would contain a thumbnail image of each video, we originally thought that by clicking on the square it could pop up the video to play but if that doesn't work if that image links down to that video on the page so you can see what that video won and play it. our feeling was the current layout really only shows one thumbnail video above the fold and we were trying to get more video images up above the fold to generate more excitement. does this make sense? If not happy to get on a call. 
3) re: pages for each region. ok. as long as there are anchors at the top. if linking from FB LatAm for example is it possible to link into the LatAm area of the page since that's the section those people will be most interested in? 

HOpe this helps better explain. Happy to get on a call or chat with Lee or anyone else directly.

Comment 24

[Chelsea Novak [:chelsea]]

Cool. All regions will be included and we can anchor directly to those sections. 

Bram, does what you were discussing in channel yesterday solve what Kristin is talking about in point 2. I'm forgetting how you described it, but if you could put that screen cap in the bug to illustrate it, that would be a huge help.

Comment 25

[Lee Tom]

Attachment: Winners page - Nav Bar > anchor to winners content

Here's a rough mockup of a bar-type navigation that will announce multiple winner categories above fold, and follow user down the page to each category. The top graphic is not fully flushed out, but we could introduce the trophy icon there as we're going to be dropping the icon into the video list, and video pages to denote winners.

Comment 26

[Kristin Baird]

ok, i am cool with this. Like it much better! Thanks so much!

Comment 27

[Lee Tom]

Attachment: Winners Page - revised hero image with trophy

Hi all, Here's a revised hero image (with trophy graphic) for the Winners homepage

Comment 28

[Lee Tom]

Attachment: video list page - winners

Here's the video list page with trophy icon, highlighted border, and winner category included in thumbnail caption

Comment 29

[Bram Pitoyo [:bram]]

Attachment: Video list page - winners text

I like Lee’s idea of adding yellow texts below the video author/country, and propose to clarify the wording.

Putting the winners line before the video category and region makes the text logical. A user would read it from top to bottom as:

“Have You Met Firefox was made by Jim Truong in Japan. He is a grand prize winner for the New Technology category in the Asia, Africa & Australia region.”

The texts that we can put in are:
* Grand Prize
* Category Winner
* Runner Up
* Winner: Panavision Prize
* Winner: Bay Area Video Coalition

Comment 30

[Chelsea Novak [:chelsea]]

We can't really change the text now since it's already gone to l10n :(

Comment 31

[Kristin Baird]

I sort of feel like the winner info gets buried. I was wondering if it made more sense to have it listed in this order: winner, title, author, region. So it would read Grand Prize winner is "Have You Met Firefox" made by Jim Truong, Japan.

Comment 32

[Lee Tom]

sorry for the gargantuan file:
http://cl.ly/3O2l151v1T3B3U1V2u1I

Comment 33

[Lee Tom]

Attachment: Winners trophy icon for video thumbnails

Comment 34

[Osmose [:osmose, :mkelly]]

https://gist.github.com/2630459 is the list of strings that were actually merged at the string freeze (just for developer reference).