664625 - NEW Firefox Affiliates Program - visual design

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Jane Finette]

We've engaged Zemoga an external agency to create wireframes for the new Affiliates program. They will also be responsible for the from end web development. 

Please can you help us with the front end web design? 

Wireframes will be delivered 6/17 and design would need to begin week commencing 6/20. We are looking for a super quick turn-around for design to be completed by 6/25. 

The new program will live on mozilla.com/firefox and all materials and design should follow the look and feel of our current Mozilla Firefox branding.

Comment 1

[Tara (musingt)]

Thanks Jane.  Can we have a quick chat about this tomorrow so I understand the details?  The more I know in advance, the more confidently I can say that 6/24 is doable (25 is a Saturday).  Should be fine, but just want to hear a little bit more about what we're actually getting, how complex the content is, etc. and lock down a designer for you :)

Do you already have copy for the site? or did you need copy support as well?  If so, that's another bug for Matej, and we should discuss that asap as well.

Comment 2

[Tara (musingt)]

Assigning to Ty for now.

Comment 3

[Jane Finette]

Thanks Tara and of course, I'll send an invite for Chelsea, Ty and you. 

Chelsea did you already file the copy bug? Tara, Chelsea will work on the copy, but will need Matej to work it over etc.

Comment 4

[Chelsea Novak [:chelsea]]

Haven't yet, but I will file it shortly.

Comment 5

[Tara (musingt)]

Hey guys, can someone update this bug so we all know where things stand?  I'm not able to follow basecamp too closely and it would be great to put key milestones in here so everyone is in the loop (including myself) on where we stand with design.  Thanks.

Comment 6

[Chelsea Novak [:chelsea]]

Hey Tara, 
We're going over the second review of the wireframes today at 3 PT. I think will have the final wireframes for Ty to start working on shortly after that.

Comment 7

[Tara (musingt)]

Thanks Chelsea.  If you don't mind simply updating this bug here and there when key milestones are passed for the design, I'd appreciate it.  Just so we're all in the loop .  And if there's anything that needs my attention, please yell or flag ;)

Comment 8

[Chelsea Novak [:chelsea]]

Hey Tara and Ty, 

I'm about to attach the approved wireframes for design. Chris M has some updates to them that he will post in the bug after me. I'm going to set up a call for us to go through them tomorrow so we can kick off design!

Cheers, 
Chelsea

Comment 9

[Chelsea Novak [:chelsea]]

Attachment: Affiliates wireframes

Comment 10

[Chris More [:cmore]]

There are a few changes in the wireframes that we would like to note to be included in the visual design. They are relatively minor and it made more sense to approve the wireframes and move on to the design phase.

1) On page 2, (0000.home), within the "Don't have an account" form on the homepage, the fields should be "Full name", "Email", "Password" (additional field), and the "By clicking this box I agree..." checkbox (additional field). We are removing the second register page (0010.Home-Login) and combining it into one and removing the username field and adding a password field.

2) On page 4 (0010.Home-Login), the only difference from 2 is the display of the login form. Please change the "Send" button to "Login".

3) On page 8 (0100.UserProfile), remove text boxes for the fullname, email, and password. You can repeat the name and email, but it should just be text on a page and not something editable. 

4) On page 8 (0100.UserProfile), add a username field with suggestions as seen on page 5 (0020.Register) after the email address field. On page 8, the order should be Full name, Email, Username, "I wish to receive.." checkbox, and then all the address fields.

Thanks!

Comment 11

[Chelsea Novak [:chelsea]]

Attachment: Affiliates site copy

Attaching the copy for the site.

Comment 12

[Ty Flanagan]

Attachment: Ffx Affiliates - Homepage

Comment 13

[Ty Flanagan]

Attachment: Ffx Affiliates - Confirmation/Thank You

Comment 14

[Ty Flanagan]

Attachment: Ffx Affiliates - User Profile

Comment 15

[Ty Flanagan]

Attachment: Ffx Affiliates - User Profile w/Tooltips

Comment 16

[Ty Flanagan]

Attachment: Ffx Affiliates - First Time User - Landing Page

Comment 17

[Chris More [:cmore]]

Ty: These are looking good!

Team: We should have a chat and get the homepage finalized and over to Zemoga as soon as possible. Let's review them on our 9:30am PT call.

Thanks!

Comment 18

[Chelsea Novak [:chelsea]]

Hi all, 
I'm back! Ty these are looking great. Can someone let me know where we got with the design revisions?

Thanks!
Chelsea

Comment 19

[Sean Martell]

+1 on these designs. Only concerns would be l10n on the imagery. As long as the CSS framework was flexible, the actual page framework shouldn't be an issue.

I think the modular feel of the pages is good for user flow in situations like this, helps frame content that requires a sub menu system in a portal style site, and it's also a great adaptation of the toolkit layout.

Comment 20

[Chris More [:cmore]]

Chelsea/Sean: The changes we proposed is mainly on the homepage and to remove some of the boxes around other pages that are not 100% needed. The homepage will be changing to a graphic without words because of l10n reasons. Ty should have something new to review later today.

Comment 21

[John Slater]

Thanks for the update Chris. I thought the modular design was working well for the interface steps, but definitely support making the pages as l10n friendly as possible.

Comment 22

[Chris More [:cmore]]

John: yeah, agree that the modular design on the step-by-step creation of a banner looked great.

Comment 23

[Ty Flanagan]

Attachment: Ffx Affiliates - Homepage - Revised

Comment 24

[Ty Flanagan]

Attachment: Ffx Affiliates - Confirmation/Thank You - Revised

Comment 25

[Chris More [:cmore]]

Ty: On the confirmation page, you don't need to make the email and change button look like a form. It should only display their email in text and then a button/link to change. The change button will just link back to the homepage where they can fill out the form again with the correct email. I'm afraid that in the current form, that the confirmation page looks like you are able to re-type the email address in the form, and click "change" to submit.

Comment 26

[Chelsea Novak [:chelsea]]

Hey cmore, 
Jane mention that you needed some "about affiliates copy" for the homepage. How many lines? Let me know and I can crank that out.

Cheers, 
C

Comment 27

[Chris More [:cmore]]

Chelsea: Max of a 2-3 short paragraphs. Just an overview of the affiliates program in more detail then we should stick on the homepage. It is what will link to the "Learn More" link in the wire frames.

Comment 28

[Chelsea Novak [:chelsea]]

Would it make sense to link them to the faq, where we say

"Firefox Affiliate buttons are a bit of html code that you put on your website or blog to encourage visitors to your site to download Firefox. When a visitor to your site clicks on a button on your site and downloads Firefox, you get credit for that download. Affiliates who get a lot of downloads through their site will be featured on our leaderboard and be eligible for fun stuff like Firefox T-shirts. While we do send out prizes and gifts to our affiliates from time to time, Firefox Affiliates does not offer monetary rewards for hosting Firefox buttons."

?

Comment 29

[Chris More [:cmore]]

Chelsea: We could, but from the wireframes, it looks like the FAQ is only available to the logged in users. If the FAQ is available to everyone, we could just link it from the "Learn More" and also the FAQ link for logged in users. If that was your intention then I'm fine with that.

Comment 30

[Chelsea Novak [:chelsea]]

Sounds good to me. Let's do it.

Comment 31

[Ty Flanagan]

Attachment: Ffx Affiliates - Confirmation/Thank You

Comment 32

[Ty Flanagan]

Attachment: Ffx Affiliates - First Time User - Landing Page

Comment 33

[Ty Flanagan]

Attachment: Ffx Affiliates - First Time User - Step 2

Comment 34

[Ty Flanagan]

Attachment: Ffx Affiliates - First Time User - Step 3

Comment 35

[Ty Flanagan]

Attachment: Ffx Affiliates - FAQs

Comment 36

[Ty Flanagan]

Attachment: Ffx Affiliates - LoggedIn - Landing Page

Comment 37

[Ty Flanagan]

Attachment: Ffx Affiliates - LoggedIn - Landing Page (ALT)

This Alternate page contains a content navigation to switch/filter through categories

Comment 38

[Ty Flanagan]

Attachment: Ffx Affiliates - LoggedIn - Create New Banner

Comment 39

[Ty Flanagan]

Attachment: Ffx Affiliates - Homepage

Comment 40

[Chelsea Novak [:chelsea]]

Hey Ty, 

It's looking great. A couple of questions

1) Do we need a wireframe for "About Affiliates" and for "Share This?"
2) Can we use the following copy from the copy deck for the About Affiliates section:
Firefox Affiliates is the go-to place for Firefox fans and Mozillians to get promotional buttons and links that encourage users to download Firefox. While we do send out prizes and gifts to our affiliates from time to time, Firefox Affiliates does not offer monetary rewards for hosting Firefox buttons. That warm, fuzzy feeling in your heart will have to do.

3)For the "learn more" link off the homepage, I'd like to use a variant of the copy above:

Firefox Affiliates is the go-to place for Firefox fans and Mozillians to get promotional buttons and links that encourage users to download Firefox. We do send out prizes and gifts to our affiliates from time to time, but Firefox Affiliates does not offer monetary rewards for hosting Firefox buttons. That warm, fuzzy feeling in your heart will have to do. Sign up and become an affiliate today!

Comment 41

[Ty Flanagan]

Alright, after a very lengthy battle with my FTP client, here are the PSDs:
http://mozilla.tyflanagan.com/artwork/Affiliates/site/Ffx_Affiliates_PSDs.zip

and... the PNGs for previewing:
http://mozilla.tyflanagan.com/artwork/Affiliates/site/Ffx_Affiliates_PNGs.zip

Comment 42

[Chelsea Novak [:chelsea]]

woo! Looks awesome Ty. cmore, are you good to send to zemoga?

Comment 43

[Chris More [:cmore]]

Chelsea: heading over to Zemoga now! Thanks, Ty.

Comment 44

[Chris More [:cmore]]

Ty: on this screenshot: https://bug664625.bugzilla.mozilla.org/attachment.cgi?id=546973

What does the "Update Details" button do on the top right? That was not in the wireframes and I assume it is meant to update the name and/or email address.

Please let us know. Thanks!

Comment 45

[Ty Flanagan]

Chris: You're correct sir. We could remove this option and only give the the ability to change the name/email once the user has reached the banner dashboard

Comment 46

[Chris More [:cmore]]

Ty: I'm just trying to determine if it makes sense to keep the editing of the name/email separate from the rest of your account details? What if someone makes changes on that page and then clicks "Update Details" on the top right and thinks that is the button that submits the changes to the form below?

What do you think? Zemoga will surely ask when they get to this page and I want to have a clear answer on what they should do with it. Also, when you click "Update Details", don't have a design of what that should look like. Light box or another two field form with save?

Comment 47

[Ty Flanagan]

Attachment: Ffx Affiliates - User Profile - Revised

Comment 48

[Ty Flanagan]

Attachment: Ffx Affiliates - Complete profile (after email confirmation)

Comment 49

[Ty Flanagan]

And the updated two PSDs:
http://mozilla.tyflanagan.com/artwork/Affiliates/site/Ffx_Affiliates_UserProfile_PSDs.zip

Comment 50

[Ty Flanagan]

There was an issue with the latest PSD/Zip file uploaded to my FTP. I have re-uploaded both the PSDs and PNGs here:


PSDs:
http://mozilla.tyflanagan.com/artwork/Affiliates/site/Ffx_Affiliates_UserProfile_revised.zip

PNGs:
http://mozilla.tyflanagan.com/artwork/Affiliates/site/Ffx_Affiliates_UserProfile_revised_PNGs.zip