712810 - Air Mozilla Landing Page [design + copy]

Status: RESOLVED FIXED

(Marketing :: Design, task)

Comment 1

[Tara (musingt)]

* mrz (et al), please provide a quick outline for the scope of this page and content requirements.

* cc-ing matej for copy
* cc-ing ltom for design

* chrissie, please update this bug with the wireframe once it's done, and link this bug to the wireframe bug for tracking.

Comment 2

[Richard A Milewski[:richard]]

This page should provide an overview of past, current, and future Air Mozilla events.

There should be a summary list (or nav to a list) of upcoming events for at least the current week and the next week.

There should be a summary list (or a nav to a list) of events for the past two weeks.

There should be a link to the Air Mozilla live streams (There may be more than one).

There should be a link to a search page for the Air Mozilla Archive.

Comment 3

[Tara (musingt)]

Hey guys, some quick questions regarding the landing page (Comment #2) and site in general:



* On average, how many air mozilla events do we have per week? 

* On average, how many air mozilla events do we have streaming live at the same time? max?  Try to get a sense of whether this is a normal or rare occurrence. 

* To search through the archive of videos, do you want to use a keyword search field, or search by categories? or both?

* Do we have existing categories? If so, how many (and what are they?)

* Would it help to have categories like:  Featured, and "most viewed"?

* Are you able to track number of views to display for past videos? is this even something that you'd find useful?  If there are any other stats per video session you'd like to surface, please let me know.

* In general, would you say that the air Mozilla events have compelling/unique images to use as a thumbnail graphic (from the video) or would we just want to list them as links? I'm leaning towards the latter -> with good sort/filter/search capabilities.  Please advise! 

* For live streaming events, we'll have the IRC chat box below the video.  Do we also archive these for past videos?  If so, do you want to show these by default or can we include them as a collapsed element that users can expand if they choose to view the chat log?  I guess the same question goes for live streaming videos :)

* Do you want people to use social sharing per video?

* How do we handle private vs. public air mozilla streaming?  Are we only focusing on the Public facing air mozilla here?



I'm sure I'll have more questions, but if you can help answer these for now that'd be great.  Thanks.

Comment 4

[Richard A Milewski[:richard]]

Great set of questions!

Q: * On average, how many air mozilla events do we have per week? 

A: Right now it varies from 2 to 9 per week, but as we turn up more offices (London, Berlin...) and refit the commons areas in existing offices (MtView, Vancouver, Paris...) I expect that number to grow.  Eventually (18-24 months) between more live activity, and re-streaming some events to accommodate viewers in other time zones, I expect air mozilla to be streaming something 24/7.

Q: * On average, how many air mozilla events do we have streaming live at the same time? max?  Try to get a sense of whether this is a normal or rare occurrence. 

A: I think the record to date is 2 simultaneous streams. But because we're working on empowering mozilla communities to originate streaming, that number WILL go up. 
(The Mozilla community in Tunisia streamed a two day event earlier this month, without anyone from MoCO actually visiting).  The streaming and origination infrastructure we're building is designed to scale to very large numbers.  8 or 10 simultaneous streams from an event like a Summit would be possible, and there is really no upper limit.  After we empower more local mozilla communities, a "Mozilla Streamfest" might have us with dozens of simultaneous streams.

Q: * To search through the archive of videos, do you want to use a keyword search field, or search by categories? or both?

A: Both.  I would also like to see a tag cloud.  Searching by date would also be a help.  I'm still trying to find the original recording of Moxie Marlinspike's great security brownbag from 2010. ...and failing miserably.  One of the goals of this project is to capture enough metadata BEFORE the event so we don't do that to ourselves again.

Q * Do we have existing categories? If so, how many (and what are they?)

A: There are the obvious ones Engagement, UX, Security, Metrics, Mozilla Mission.  But I've opened bug #721054.  I'll take that and develop an initial list.  However, as we move forward I'm certain that new categories will emerge, so whatever we build needs to give us a fairly flexible interface for quickly and easily changing the category list.

Q: * Would it help to have categories like:  Featured, and "most viewed"?

A: Yes, and we should have a way for people to vote for their favorites.


Q:  Are you able to track number of views to display for past videos? is this even something that you'd find useful?  If there are any other stats per video session you'd like to surface, please let me know.

A: We'll figure out how to capture that data.  I'd like to know by country as well. It's going to depend upon what stats we can gather from our CDN, but I don't think that will be a problem.   We want to give folks the ability to play with these videos with popcorn.js and add universal subtitles as well, so stats like "most subtitled" and "most buttered & salted" would be nice to have.

Q: * In general, would you say that the air Mozilla events have compelling/unique images to use as a thumbnail graphic (from the video) or would we just want to list them as links? I'm leaning towards the latter -> with good sort/filter/search capabilities.  Please advise! 

A: The wirframe I did for the event scheduler has a place for event organizers to upload a picture of event speakers on the speaker profile page.  We should maybe have a similar capability for the overall event.  We could supply some "category graphics" clip art for events that don't want to supply their own. 

Q: * For live streaming events, we'll have the IRC chat box below the video.  Do we also archive these for past videos?  If so, do you want to show these by default or can we include them as a collapsed element that users can expand if they choose to view the chat log?  I guess the same question goes for live streaming videos :)

A: We don't currently capture the irc stream, but we should. (bug #679750) With popcorn.js we could synchronize the irc stream to the video timeline.


Q: * Do you want people to use social sharing per video?

A: Yes, absolutely!


Q: * How do we handle private vs. public air mozilla streaming?  Are we only focusing on the Public facing air mozilla here?

A: The site should support, but not require a login.  Users who log-in with a MoCo LDAP credential should get access based on the LDAP access rules.  We need to make sure this integrates well with the Mozillains Phone Book.   We will be archiving the videos in an LDAP enabled DAM.   Initially three level of access probably make sense MoCo, Mozillian, and Public.   This topic deserves further discussion.

Comment 5

[Tara (musingt)]

(In reply to Richard A Milewski[:richard] from comment #4)
> Great set of questions!
> 
> Q: * On average, how many air mozilla events do we have per week? 
> 
> A: Right now it varies from 2 to 9 per week, but as we turn up more offices
> (London, Berlin...) and refit the commons areas in existing offices (MtView,
> Vancouver, Paris...) I expect that number to grow.  Eventually (18-24
> months) between more live activity, and re-streaming some events to
> accommodate viewers in other time zones, I expect air mozilla to be
> streaming something 24/7.
> 
> Q: * On average, how many air mozilla events do we have streaming live at
> the same time? max?  Try to get a sense of whether this is a normal or rare
> occurrence. 
> 
> A: I think the record to date is 2 simultaneous streams. But because we're
> working on empowering mozilla communities to originate streaming, that
> number WILL go up. 
> (The Mozilla community in Tunisia streamed a two day event earlier this
> month, without anyone from MoCO actually visiting).  The streaming and
> origination infrastructure we're building is designed to scale to very large
> numbers.  8 or 10 simultaneous streams from an event like a Summit would be
> possible, and there is really no upper limit.  After we empower more local
> mozilla communities, a "Mozilla Streamfest" might have us with dozens of
> simultaneous streams.

Based on the two answers above, would you say that the landing page should be more of a high-level view of everything going on vs. jumping straight into a particular video?  The latter seems to be what we normally do --> jumping straight into the current video that's playing vs. a gallery of video events to choose from.  And if we're going to accommodate more than one live stream, seems to make more sense to present options to the user first before streaming anything by default, right? 

> Q: * In general, would you say that the air Mozilla events have
> compelling/unique images to use as a thumbnail graphic (from the video) or
> would we just want to list them as links? I'm leaning towards the latter ->
> with good sort/filter/search capabilities.  Please advise! 
> 
> A: The wirframe I did for the event scheduler has a place for event
> organizers to upload a picture of event speakers on the speaker profile
> page.  We should maybe have a similar capability for the overall event.  We
> could supply some "category graphics" clip art for events that don't want to
> supply their own. 

Thanks.  I do like the pictures for speakers very much (would be cool if these were tied to their phonebook profiles).  I would like to avoid clip-art here, as well as people uploading things like low res files or screenshots and so on (which can be boring).  I guess thumbnails are easier on the eyes when browsing a gallery than nothing... but it might also be easier to just provide search through a list, vs. thumbnail view.  Either way, we always have the air mozilla logo to fall back on as a default thumbnail graphic (much nicer than stock art) :)


> 
> Q: * For live streaming events, we'll have the IRC chat box below the video.
> Do we also archive these for past videos?  If so, do you want to show these
> by default or can we include them as a collapsed element that users can
> expand if they choose to view the chat log?  I guess the same question goes
> for live streaming videos :)
> 
> A: We don't currently capture the irc stream, but we should. (bug #679750)
> With popcorn.js we could synchronize the irc stream to the video timeline.

I'm not too familiar with how this works, can people expand the IRC box or is it a fixed box to chat in? 

> 
> 
> Q: * Do you want people to use social sharing per video?
> 
> A: Yes, absolutely!

Ok great, what would that include?  Facebook, Twitter, general share icon.

Comment 6

[Tara (musingt)]

Hi there.

Here's a first rough draft of the landing page, with some comments and caveats:

>>Caveat / Disclaimers:

* This is rough :)  I usually sketch with pencil and paper which gives me more freedom to draw out ideas... but I went to illustrator as that saves more time.  But my illustrator skills are very very rusty.  

* I'm not a ux/ui/ia designer so much of this is initial my initial suggestion, left as FPO, and needs lots of discussion.

>>Header:
* Assuming a general masthead with logo and wordmark.  Designer can obviously "design" this :) it's just FPO.  Intention is not to consume too much of the vertical height, but wanted to have a compelling landing page with the logo.

>>Nav:
* P1 header Nav for basic things:  about air mozilla, search/explore/browse, creating an event.  Other desired elements? Would we want to have a search bar up here or in a designated search space further down?

>>Live Streaming: 
* If we have live streaming, that's the first layer of content.  Depending on how many we see at a given time, we'll highlight just the one, or multiple... I showed thoughts on both.  The idea is to have a "hero" space, and thumbnails which we could rotate through.  These would be flagged with the appropriate visual cues (colors / icons/ etc) to suggest that it's "live"  "on air", etc.

* In terms of the content, this needs further discussion... but I FPO-ed a few things:  Picture of lead speaker + basic info like name etc below it, name of talk, description, perhaps dial-in/location information, etc.  and a CTA to "play" or "watch" it now.   If we have multiple speakers, we'll have to figure out a solution there.  Perhaps we have a designated "lead" speaker / owner... that has the main avatar, with others listed below him/her in text or in smaller image boxes.

>>No Live Streaming: 
* When there is no live streaming, we can switch to other content:  featured content, most viewed, recent, etc.

>> Upcoming, Popular, Recent:
* Second layer of content is broken into 3 columns:  Upcoming events, Most Viewed/Popular, Recent
* Again, the content here makes a lot of assumptions.  I included an avatar for the key speaker, room for Event title and category

>>Search/Browse
* Block for browsing the inventory of videos by category (this area needs work)
* Called it "explore" air mozilla, but this is essentially the categories / search box.

>>Promos:
* Next to it, a promo block for creating a new event (size can be adjusted)
* Below that, a MISC promo block for content TBD.

>>Other?
* Are there other pieces of content we want on the landing page?  Im sure I've missed things, please let me know. 

---------

I did a lot of sketches for the video in-event page too... but will just pause right now and see if this is in the right direction or not.
Comments? Thoughts? Questions? Concerns?  Please let me know.

Thanks

Comment 7

[Tara (musingt)]

Attachment: airmozilla wf landing pg R1 - live stream multiple

Comment 8

[Tara (musingt)]

Attachment: airmozilla wf landing pg R1 -live stream single

Comment 9

[Tara (musingt)]

Attachment: airmozilla wf landing pg R1 - featured

Comment 10

[matthew zeier [:mrz]]

(omg i got so excited seeing those mockups!)

Comment 11

[Tara (musingt)]

thanks mrz.  should I assume from your comment that it means I'm in the right direction?  I can continue with a few more pages and post later today / early AM tomorrow... and then we can discuss if that works for folks.  Meanwhile, please do share any thoughts/feedback you have.  I don't want to do too much without discussing details.

Comment 12

[Richard A Milewski[:richard]]

Attachment: Brownbag Slide

Comment 13

[Tara (musingt)]

hmmm,  Richard, I'll wait for more context regarding Comment #12 :)

Comment 14

[Richard A Milewski[:richard]]

I think mrz understated it.   ABSOLUTELY LOVE THE MOCKUPS!

Re questions in comment #5.   I agree that the landing page needs to be a high level view of everything that's going on.  Taking the Live Stream Multiple as an example can we take the title block that now says "Streaming Live Now" and make that 'adaptive', so it says "Streaming Live Now" when something is live and "Next on Air Mozilla" between live streams.  

We have a lot of work to do to get to the point where we're really 24/7 and that way the design works now when we still have dead air gaps between programs, but automagically works when we get our content ducks in a row.

As for the image uploads; We certainly want to reach into the phonebook for profiles and mugshots whenever possible.  I think doing that will give us a much higher probability of coming away with a picture and a bio sketch, and will make the scheduling process easier for event managers.  

By clip-art I was thinking of a few stock images for when the event manager has nothing.  These would probably be fall-backs by category supplied automatically if the event manager fails to upload anything.   We will want to have a bunch of program intro slides anyway and we could co-ordinate the graphics.   Stuff like Brownbags, Monday Meetings, MoCO Meetings, WebFwd, etc...   It would be an evolving list.     

...and we probably don't want to show these to the event manager at the time they schedule because then they will just get lazy and take the default.   Letting them think they really should supply something specially crafted for their event will probably get us better images.

Comment 15

[Tara (musingt)]

Thanks guys, really happy to hear that you like where this is headed so far. 

quick responses inline:

 (In reply to Richard A Milewski[:richard] from comment #14)

> Re questions in comment #5.   I agree that the landing page needs to be a
> high level view of everything that's going on.  Taking the Live Stream
> Multiple as an example can we take the title block that now says "Streaming
> Live Now" and make that 'adaptive', so it says "Streaming Live Now" when
> something is live and "Next on Air Mozilla" between live streams.  

Definitely agree and it's how I had designed it (though it may not be as obvious in the wireframe):  you'll see a version with "live streaming" and a version for fall-backs:  Featured content, recent, most popular, etc.  I used "red" to signal "live", and purple for featured (just as suggestions) but the idea was to pull colors from the logo and use them as design elements for the site.

> 
> As for the image uploads; We certainly want to reach into the phonebook for
> profiles and mugshots whenever possible.  I think doing that will give us a
> much higher probability of coming away with a picture and a bio sketch, and
> will make the scheduling process easier for event managers.  
> 
> By clip-art I was thinking of a few stock images for when the event manager
> has nothing.  These would probably be fall-backs by category supplied
> automatically if the event manager fails to upload anything.   We will want
> to have a bunch of program intro slides anyway and we could co-ordinate the
> graphics.   Stuff like Brownbags, Monday Meetings, MoCO Meetings, WebFwd,
> etc...   It would be an evolving list.     

Noted.  Thanks.  I think these should go into the categorization so people can sort and filter by "channel".  So, instead of categories, perhaps we call these "channels" (more on this in the in-event view... which I would like to propose as "in-channel" view)  

We'll see what we can do in terms of illustrating some basic icons for key things that can be repurposed.  Will hold off on this till later as it's part of the many details we need to figure out at later stages, in design.

Comment 16

[Tara (musingt)]

fwiw, this is what I have so far:

Categories:

* Popular (by community vote, # of views, etc)
* Featured (manually selected)
* Live/Now 
* Upcoming (next two weeks)
* Recent (last two weeks)


Channels:
(by department, teams, products, subject)

* Engagement
* UX
* Security
* Metrics
* Mozilla Mission
* Launch events
* Brownbags
* Monday Meetings
* MoCo meetings
* WebFwd
* Other -- more to be added.

Comment 17

[matthew zeier [:mrz]]

(In reply to Tara (musingt) from comment #11)
> thanks mrz.  should I assume from your comment that it means I'm in the
> right direction?  

I made the wife drop was she was doing to look at the mockups.  Assume what you'd like :P

Comment 18

[Tara (musingt)]

Attachment: air mozilla wf landing page options

Hey guys

Played around a little more... 
I'm not sure if it's going to be productive for me to continue sketching wireframes anymore since there's a lot of details to discuss and figure out before moving forward.  But, here's another high level pass at landing page options. 

I looked a few different sites, including:
* Vimeo
* Youtube
* Ted Talks
* Flickr
* and a few others

I think as part of next steps, we should start an etherpad and start listing out content per page so we can better inform design per page vs. guessing.

Attached you can see three options:

>Landing - A:
More or less what you had already seen.  Featured content at the top, three columns below that for "most recent", "most popular", "upcoming events".  An "Explore air mozilla" module that includes categories and tags to click through, along with promo modules for creating an event, and other things.

>Landing - B:
Keeps a featured content layer, but wipes out the rest.  Instead you have a side nav bar for sorting and searching.  With the search results to your right and pagination.  

>Landing - C:
Wipes out featured content layer and turns the landing page into a giant search results page focusing on discoverability, while also highlighting live streams, and so on.


-----

Lets chat more on Wednesday...

Comment 19

[matthew zeier [:mrz]]

I have a conflict on Wednesday and won't be there.  

I like A.  A lot.  It's a visual thing, the page feels balanced.  It also makes me feel that the content is more discoverable with the middle three boxes.

Comment 20

[Richard A Milewski[:richard]]

I like A as well.  But I think maybe we need the top (live) block to alternate between the one in A and the one in B, depending upon how much live content we have.

C might be a good design for the result of pressing a "more" button in the Upcoming, Most Viewed, and Recent blocks.

Comment 21

[Tara (musingt)]

Ok, great.  Thanks guys.  Then we'll lean towards A as the high level outline for the page.  I just wanted to try and explore a few other options.  We can easily turn C into the "explore" / search page.  

Once we chat more and crisp up the content, we can massage the wireframes further or simply jump straight into design.  We need to figure out how these apply to the mobile environment as well. 

Lee will be joining us on Wednesday to chat further.

Comment 22

[Lee Tom]

Attachment: Air Mozilla Landing 01

Comment 23

[Lee Tom]

Attachment: Air Mozilla Landing 02

Comment 24

[Lee Tom]

Attachment: Air Mozilla Landing 03

Hi everyone,
Attached is the latest mockup of the Landing page - this time with a more developed visual style that supports the new Air Mozilla logo (dark theme, like you're sitting in a movie theater.) 

Some content re-organization consists of eliminating Category listings and focusing on Upcoming Talks, Recent Talks, and a more comprehensive Explore column which gives users the ability to use a search form, browse through curated Tags and/or go to directly to dedicated search-result pages. The details of this need to be ironed out, I'm sure but this is a suggested list.  Tara and I felt that the Create Event function should be elevated to the top navigation of the page for accessibility. 

I'll be using these styles and building out a Live (on air) page next. I hope you all like where this is headed. Stay tuned!

Comment 25

[Richard A Milewski[:richard]]

I like the design.  Not sure though that "Talks" is the right word.  While we do stream lots of brownbags, there are non-talk-like things such as Monday Project Meetings, MoCo Meetings, MozFests, and conference sessions that will be an increasingly large portion of the content.

Comment 26

[Lee Tom]

(In reply to Richard A Milewski[:richard] from comment #25)
> I like the design.  Not sure though that "Talks" is the right word.  While
> we do stream lots of brownbags, there are non-talk-like things such as
> Monday Project Meetings, MoCo Meetings, MozFests, and conference sessions
> that will be an increasingly large portion of the content.

Would it be more of a catch-all to use, "Videos"?

Comment 27

[Richard A Milewski[:richard]]

I think that's better.   Anybody else have an opinion?

Comment 28

[Lee Tom]

Attachment: Air Mozilla Landing 04

Latest landing page attached. Replaced the word, "Talks" with "Videos"

Comment 29

[Lee Tom]

Attachment: Air Mozilla Live page 01

Attaching mockup of a Live page here.

Some notables:
- modules in the right column (under Feature video's description) are undefined at the moment. For placement only, I made them Related Videos etc.
- IRC module underneath Feature video is suggested visual design - not sure this is possible
- Included social links (FB and Twitter) under Feature video

Let me know what you think! Lee

Comment 30

[Tara (musingt)]

Thanks Lee.  Great first pass at the Live page.   Some quick thoughts:

* I really dig the darker background with glow effects.. nice touch and really highlights the video while keeping the other information present (but appropriately muted).

Focusing on the live page for now:

* I'm not sure if we want to add these later.. but we had talked about adding a "vote" section in addition to the # of views and social media bits.

* How will we denote that this is on-air live? assuming this goes where the current time stamp is for when this was filmed.  

* Did we lose the speaker avatars? I liked that as it helps highlight the people/community.  I'd also suggest putting the speakers below the talk synopsis.

* the talk/ video synopsis should probably account for more text, I think people need more space to fully outline the scope of their talk and add in additional information , links, etc.  

* Missing tags.  I think it would help to break up a section for other resources (as was the case in the wireframes) if people want to have a short description of the talk, and additional resources for people to review.  Like, links to previous blog posts, etc. 

* Related videos is great.   Not sure what "other things" are meant to be.

* IRC box is great.  Would be great if we can customize the IRC/chat window so it looks as nice as what Lee did.

* Otherwise, / in general --> looks great so far. 

---------

Should we keep things organized and post updates to the live page in the related bug?  Just want to make sure we don't lose track of things.  There was a separate bug for the live page I think.

Comment 31

[Tara (musingt)]

Here's that bug btw:  Bug #712812  the old wireframe and conversation is there as well.

Comment 32

[Richard A Milewski[:richard]]

I like it.  

Freenode has a webchat page that implements a full irc client and I believe it's javascript.   I think we can take that as an existence proof.  It's at http://webchat.freenode.net/?channels=wikipedia-en-help

Comment 33

[matthew zeier [:mrz]]

(In reply to Richard A Milewski[:richard] from comment #32)
> Freenode has a webchat page that implements a full irc client and I believe
> it's javascript.

http://www.qwebirc.org/

That looks so much better than the mibbit thing we have.

Comment 34

[Tara (musingt)]

Placing these bugs on hold for now until we figure out the next steps and deadlines for the second wave of updates to these pages.

Comment 35

[Tara (musingt)]

Hey all, going ahead and closing these out.  Please re-open or ping if you need anything.  Thanks!