941806 - Firefox Student Ambassador Landing Page Design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Katherine Naszradi [:knaszradi]]

>>Project/Request Title:
Firefox Student Ambassador Landing Page Design 

>>Project Overview:
Please find all of this information here: https://docs.google.com/document/d/1gc2c5mQHgj3N_ermmoB9md97RPUZOF1Uv3CyVIdwc0E/edit?disco=AAAAAGf4Pgs

The Websites Team has already approved of the specs and has committed to making this happen once the design is available. 

>>Creative Specs & Deliverables:
Please find all creative specs here: https://docs.google.com/document/d/1rUH8GuVHvhtd08j0dPuS6KJ6gYiD9lF9YbtO-NzHp1c/edit#



>>Launch Date:
2014-01-17

>>Creative Due Date:
2013-10-17

>>Mozilla Goal:
All

>>Points of Contact:
Not provided

Comment 1

[Katherine Naszradi [:knaszradi]]

Accidentally put the wrong due date - it would be great to have the design by December 17th, 2013. Thanks.

Comment 2

[Jennifer Balaco]

Thanks for submitting this request, Kate. I'll be in touch soon regarding next steps.

Comment 3

[Katherine Naszradi [:knaszradi]]

Thanks Jennifer! When possible, would be great to know Creative timeline so that I can inform the Websites team (and they can set their expectations accordingly). Thanks!

Comment 4

[Jennifer Balaco]

Hi Kate, 

Ty will be taking on the design for this page. I think that the Dec. 17 deadline should work, but I will make sure to let you know if this changes for any reason. 

Thanks!

Comment 5

[Katherine Naszradi [:knaszradi]]

Thanks Jennifer. Ty, if you have any questions, please do not hesitate to let me know.

Comment 6

[Katherine Naszradi [:knaszradi]]

Hi Ty, just wanted to check-in here and see if you need any additional information from me? Thanks!

Comment 7

[Ty Flanagan]

Attachment: Firefox_StudentReps_LandingPage.jpg

Hi Kate,

Sorry for the delay, its been a busy past few weeks.
Here is a layout for the Firefox Student Ambassadors landing page using the content provided in the Google doc.

I included a proposed example of the social network streams which could potentially be flagged by webdev due to privacy concerns. Please check with Chris More if this is doable. If not, we would only be able to provide URLs to each social network's respective pages/feeds.

I also wanted to elevate the Join Us section to be closer to the top of the page. Going this route will help with mobile users where content on responsive sites sit lower on the page.

Comment 8

[John Slater]

Thanks Ty!

Kate, let us know what you think. We can set up a meeting to discuss if you prefer.

Comment 9

[Katherine Naszradi [:knaszradi]]

Ty, first of all, this is amazing. Much better than I could have ever imagined (!!!)

A few small simple edits and then if you have any questions I'll set up a meeting to speak further:

*Picture on page features prominently the 'Mozilla Internship' program, which may confuse those who think this is an internship program. I'll start looking for another photo that would be more applicable to our program and let you know ASAP
*Under the first section beneath the picture to the left, I think instead of saying 'are individuals...' it can just say 'Individuals...' (delete the 'and') 
*The 'Become a Student Rep' button should changed to 'Become a Student Ambassador'
*In addition, I think the 'Currently a student, professor, or in administration with a college or university' could be changed to 'Currently a student, professor, or administrator with a college or university'
*Under 'Benefits of Joining,' 'Help grow our global community (and spread our mission) around the world can be simplified to 'Help grow our community (and spread our mission) around the world'
*Get In Touch - please also add a link to our Air Mozilla Channel: https://air.mozilla.org/channels/ambassadors/ 

I've also included Chris on this bug to get his thoughts on whether the streams would be flagged by Privacy. Chris, please let me know if I should run this by Stacy before proceeding. 

Thanks!

Kate

Comment 10

[Chris More [:cmore]]

The facebook and twitter feeds below look like their widgets, which we can't put on the website. What I was initially thinking we can do is just pull in the latest view tweets and blog posts via JavaScript on the page without having to use the social widgets, but that can still be tricky to implement and affects the performance of the page.

Since we can't use the widgets on our website, we will just have to use the default twitter/facebook icons linking to our presence on their service.

Kate: How much is it worth showing the latest few tweets or blog posts on the site automatically or is a link to the blog plus twitter/facebook icons as mentioned above suffice?

Comment 11

[John Slater]

Kate, how are we doing on timing here? Based on the above comments, am trying to figure out the next steps for Ty and when things are due.

Comment 12

[Katherine Naszradi [:knaszradi]]

Chris - I would actually say it would be worth quite a bit to be showing the actual tweets/Facebook posts automatically (and just a link to the blog). I'm willing to sacrifice time in order to get this function - please let me know how to proceed here.

John - in respect to the looming holiday (a great thing), I'm thinking it would probably be best to push back and have all of the design edits to be done at the end of the first week of January. Doable? 

Thanks!

Comment 13

[John Slater]

Sounds good to me re: timing. We'll need to get this finished soon anyway, as Ty has many other web projects looming after this one.

Comment 14

[Chris More [:cmore]]

(In reply to Katherine Naszradi [:knaszradi] from comment #12)
> Chris - I would actually say it would be worth quite a bit to be showing the
> actual tweets/Facebook posts automatically (and just a link to the blog).
> I'm willing to sacrifice time in order to get this function - please let me
> know how to proceed here.
> 
> John - in respect to the looming holiday (a great thing), I'm thinking it
> would probably be best to push back and have all of the design edits to be
> done at the end of the first week of January. Doable? 
> 
> Thanks!

We can't pull in Facebook posts in a secure way, but we can Tweets since Twitter is public by default and has RSS feeds. Blogs and Twitter posts can be done via JavaScript within the page, while Facebook makes you use their widgets. So, this means that we can only link to Facebook, but we cannot show any content on the page.

Options:

1) Twitter and Blog feeds plus Facebook button - More complicated

2) Twitter/Facebook button and blog link (no feeds) - Less complicated

Comment 15

[Katherine Naszradi [:knaszradi]]

Attachment: Option for Landing Page Photo - 1

Comment 16

[Katherine Naszradi [:knaszradi]]

Attachment: Option for Landing Page Photo - 2

Comment 17

[Katherine Naszradi [:knaszradi]]

*Uploaded two alternative options for landing page photo. Ty, let me know what you think. 

*Chris, possible to compromise? Do a Twitter feed and then just link to the blog and facebook? I think it's going to be a strong pull to be able to engage with one of our social channels directly on the page (and encourage further action within the program) so if at all possible, would prefer to pursue this option.

Thanks!

Kate

Comment 18

[Chris More [:cmore]]

(In reply to Katherine Naszradi [:knaszradi] from comment #17)
> *Uploaded two alternative options for landing page photo. Ty, let me know
> what you think. 
> 
> *Chris, possible to compromise? Do a Twitter feed and then just link to the
> blog and facebook? I think it's going to be a strong pull to be able to
> engage with one of our social channels directly on the page (and encourage
> further action within the program) so if at all possible, would prefer to
> pursue this option.
> 
> Thanks!
> 
> Kate

That works. Ok, so twitter feed and a link to the blog/facebook. 

Ty, can you do a design change based on this requirement?

Thanks!

Comment 19

[Ty Flanagan]

(In reply to Katherine Naszradi [:knaszradi] from comment #16)
> Created attachment 8350771 [details]
> Option for Landing Page Photo - 2

Katherine, are you able to get a larger/high-res version of this photo?

Comment 20

[Katherine Naszradi [:knaszradi]]

Ty - asking Carmen - will get back to you with an answer ASAP. Thanks!

Comment 21

[Katherine Naszradi [:knaszradi]]

Hi Ty, here's the link to the high-resolution version of the photo: http://www.onetimebox.org/box/rGTz8BQ5kQDLkHmdq

Comment 22

[Chris More [:cmore]]

Ty: Are you doing a new design for the page with revisions in comment 17 and comment 18? Thanks!

Comment 23

[Ty Flanagan]

Attachment: Firefox_StudentReps_LandingPage_rev.jpg

Hey Katherine,

Here is the latest mockup with the changes that were discussed.

Comment 24

[John Slater]

Looks great to me, thanks Ty.

Comment 25

[Katherine Naszradi [:knaszradi]]

Ty - looks awesome - thanks so much.

Comment 26

[Ty Flanagan]

I readied the PSD, you can grab it from here:

https://www.dropbox.com/s/i9zt3ifn55qclhk/FFx_StudentsAmbassadors.psd.zip

I also used Font Awesome icons which can be found here:
http://fontawesome.io/

Here is the list of icons to include:

Email:   fa-envelope ()
URL:   fa-globe ()

Social network glyphs (including some that might be used later on):

Facebook:   fa-facebook-square ()
Twitter:   fa-twitter ()
Google+ :   fa-google-plus-square ()
Flickr:   fa-flickr ()
Tumblr:   fa-tumblr ()
YouTube:   fa-youtube-play ()
Instagram:   fa-instagram ()

Comment 27

[Kohei Yoshino [:kohei]]

The landing page is live!
http://www.mozilla.org/en-US/contribute/studentambassadors/

Comment 28

[Katherine Naszradi [:knaszradi]]

Thank you all for your hard work - this is HUGE for our program! (and looks incredible!)

Comment 29

[Chris More [:cmore]]

Nice job everyone! Welcome Kate!