Closed Bug 964919 Opened 10 years ago Closed 10 years ago

Redesign Firefox Nightly First Run page with a clear call to action

Categories

(Marketing :: Design, task)

task
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: davidwboswell, Assigned: tyronflanagan)

References

()

Details

Attachments

(3 files)

Opening a bug to redesign the Firefox Nightly First Run page.

The current version of the page is at: http://www.mozilla.org/en-US/firefox/nightly/firstrun/

Goal: Create a very clear next step about how to contribute to QA for people who use the Nightly build.  The current page has 22 links on it and it's not providing a clear pathway for people.

Audience: The group of people who have chosen to download and use Nightly builds who are interested in our development and/or testing processes.

Priority: Creating a functioning pathway for connecting with QA contributors is a key part of the 2014 goal of growing the size of the community by 10x.  Having a Nightly First Run page with clear actions on it is a critical part of creating that QA pathway.
Blocks: 964928
Thanks David. Am trying to get a sense of what the content needs are for this page. Do we need anything else besides a call to contribute?

Laura, anything else you'd like to say from a product marketing perspective?
(In reply to John Slater from comment #1)
> Thanks David. Am trying to get a sense of what the content needs are for
> this page. Do we need anything else besides a call to contribute?

I think it would be useful to also have some simple instructions for how to file bugs would be useful.  I'll check with the QA team about the specific text.

Can you give us a deadline for when you need this by?  I don't want to block things on your end if you have a time when you could work on the design.
I'm working on this over on GitHub.
Hi Mike. Which aspect are you working on? The QA text?

If we can assemble all the needed content here in the bug, we should be able to build out this page pretty easily. Would like to wait until after the Australis work is done, though (which probably means doing it in early April). So, that gives us a little time to figure it out.
I've pruned out a bunch of dead links and added in a bunch of new ones that point to current onboarding, engagement and community-building efforts.

You can see the first run at it here: https://github.com/mozilla/bedrock/pull/1740/files

I'd like to be able to turn this around quickly and iterate on it rather than wait until Australis ships. That's a long way away.
Hey Mike. That sounds fine to me. Can you point me to a working HTML prototype of what you've done? I'm not very good at translating github activity.

Also, to clarify, I meant that my team would be able to focus on this more once we've done our portion of the Australis work...that will likely be about 3-4 weeks before it actually launches. You starting the process before then would be good, though.
Unfortunately, it looks like the recommended process for contributing to Bedrock is to spin up an entire virtual infrastructure that looks like Bedrock, which haha. 

For what it's worth, while I'm deciding whether or not I want to do that, I'd like you to imagine the standard Nightly First Run page - http://www.mozilla.org/en-US/firefox/nightly/firstrun/ - except with no video and looking kind of like this:

http://bespokeio.com/moz/fnfr.html

But with correct styling, obviously.

- mhoye
Mike, thanks for taking a pass at this.  As John said, getting started now thinking about content will let us move quickly as soon as his team is ready.

I looked at what you've put together and wanted to share some thoughts:

* I really like the emphasis on Thank You and how you're calling it out in a stronger way than the current page.  Could we emphasize the recognition element even more?  I'd love to see a Nightly User badge made out of the Nightly icon featured here and invite people to claim it from this page?

* I'd love to radically cut down on the number of links (we can lose the right hand nav links and cut back on the ones in the body of the page).  Instead of all those links, can we have a clear ask and one link for people to follow who want to do that thing?  For instance, test this feature we're focused on this week and then file bugs in this component.

* Can we pick 3 or 4 secondary links that are relevant?  Maybe the bug writing guidelines, a link to What Can I Do For Mozilla? and one or two others?  Those could be in the design, but shown in a way that clearly separates them from the main ask.

For next steps, maybe you, me, Michelle and the QA champions hack on this a bit and report back to John in the bug?
OK, I've updated the pull request (though I'm not going to update the demo page above) to cut down the number of links and include a call to action.

I've cut the sidebar, trimmed the number of links and tightened the categorization as well.
I'm assigning this bug over to Ty. However, just a quick note that this is not a priority for him until after finishing up work on Australis over the next several weeks.
Assignee: jbalaco → tyronflanagan
Status: NEW → ASSIGNED
No longer blocks: 983453
How about embedding the @FirefoxNightly twitter feed which keeps users updated about new features/changes on Nightly? https://twitter.com/FirefoxNightly
(In reply to Matthew N. [:MattN] from comment #11)
> How about embedding the @FirefoxNightly twitter feed which keeps users
> updated about new features/changes on Nightly?
> https://twitter.com/FirefoxNightly

+1 -- this would be a great way to get timely information on to the page without needing to have manual updates.
Due to Mozilla's privacy policy, we cannot use Twitter's official timeline widget. A custom timeline widget is being developed in Bug 965823 and will be available soon!
OS: Mac OS X → All
Hardware: x86 → All
Depends on: 1001100
Hey guys - what's the status of this project? Thanks!
(In reply to Lizz Noonan from comment #14)
> Hey guys - what's the status of this project? Thanks!

Lizz, redesigning the page with a clear call to action to contribute is still a priority for me.  I believe things had been on hold for this while the team was preparing for Australis -- it would be great to revisit this now that that's done.
Hey David. I talked to Ty earlier today, and we're officially getting going on this project - thanks for your patience.

Quick question - how do you see the main CTA working? Should there be a button asking people to join our QA community? And if so, where would that lead? Or, should there be functionality that actually lets you file a bug? Am not entirely sure how that process will work...any direction would be very helpful.
John, great news.  Very excited to hear that you and Ty are getting going on this.

I'll share my thinking on this and then we can get feedback from the other main stakeholders to see if things are on the right track.

At a high-level, I'd like us to re-imagine this page by considering how it's part of a pathway of contribution.  The people seeing this page have already taken action to support Mozilla (download, install and run a Nightly build) and we want to recognize that initial step and encourage them to take additional steps on their journey.

We can recognize the contribution they've already made at the top by thanking them and by possibly also offering them a Nightly User badge.

Then we should explicitly state the contribution opportunities they can choose from and then get them to click through to find out more about how to get more involved in the opportunity they're interested in.  From earlier discussions, I think QA, Coding and Localization are each areas that Nightly users can help with -- for each of those I would like to provide just one very clickable link.  This would replace the current selection of ten links in the middle of the page

When we talked earlier, we did discuss possible ways to allow people to contribute directly from the page, by having a way to enter bugs from the page, for example.  I'm open to that and it may be something we want to experiment with.  I think the main issue to fix here though is that people don't know what we're asking them to do and we can fix that through clear design and clear content instead of adding functionality to the page.

I did a very rough mockup to show a visual of what I'm thinking.  Hopefully that will serve as a strawman that we can iterate on.  Will post that next.
Hey David,

I like the idea of the 3 main CTAs. I think its definitely a clearer & stronger direction for this page. I was wondering whether the 3 links direct to the same Get Involved page on mozilla.org, or were you at all thinking that there would be signup form on this page instead versus relying on the Get Involved page?
If we are going to redirect our new technical contributor to /contribute, could we at least make sure that the message sent by those contributors are different? (Like using a special email topic for those users)

For instance we could do:

For a user contacting its community directly from /contribute:
Inquiry about Mozilla Localization

For a user contacting its community from /contribute but coming from nightly firstrun:
[Nightly first run] Inquiry about Mozilla Localization

This way people answering the huge amount of messages can easily detect message from potentially technical people, and make sure to process them in priority (Since people from nightly/firstrun have a really different profile from people coming from /contribute).

Does that make sense?
(In reply to tflanagan from comment #19)
> Hey David,
> 
> I like the idea of the 3 main CTAs. I think its definitely a clearer &
> stronger direction for this page. I was wondering whether the 3 links direct
> to the same Get Involved page on mozilla.org, or were you at all thinking
> that there would be signup form on this page instead versus relying on the
> Get Involved page?

Since the audience is people who have already taken a step on a contribution pathway, I'd recommend not sending them to the Get Involved page -- the audience for that page is people who want to do something but haven't started down a pathway yet.  

Instead I would send people to get more details about one of those 3 contribution areas.  For instance, if you say you want to do localization, there are great docs specifically about getting involved with that area, such as:

https://wiki.mozilla.org/L10n:Contribute

I'd ask each of those three teams to identify the most appropriate place for someone to go to get more details about getting involved in that area and then link to those.

For coding, it is probably this getting started with the codebase page:

https://developer.mozilla.org/docs/Introduction

For QA, we'd need to talk with them to find out what's best.

The links may also change for locales.  For instance, Mozilla Hispano has good get involved pages for each area on their site, so for the Spanish version we may want to point there.
Blocks: 1009883
(In reply to Théo Chevalier [:tchevalier] from comment #20)
> If we are going to redirect our new technical contributor to /contribute,
> could we at least make sure that the message sent by those contributors are
> different? (Like using a special email topic for those users)
> 
> For instance we could do:
> 
> For a user contacting its community directly from /contribute:
> Inquiry about Mozilla Localization
> 
> For a user contacting its community from /contribute but coming from nightly
> firstrun:
> [Nightly first run] Inquiry about Mozilla Localization
> 
> This way people answering the huge amount of messages can easily detect
> message from potentially technical people, and make sure to process them in
> priority (Since people from nightly/firstrun have a really different profile
> from people coming from /contribute).
> 
> Does that make sense?

+1 to Theo's ask. Is it possible to tag inquiries coming through the form on /contribute with the user's version of Firefox? If we know that the user is using Nightly upon arriving at /contribute we could also consider displaying relevant conditional messaging more prominently on /contribute and not just tagging the inquiry. 

This bug is focused on the Nightly First Run page, but it's worth addressing this here or in our discussions for the upcoming /contribute redesign.
Hey guys - can I get a deadline up in here? 

Thanks
Flags: needinfo?(jslater)
I would like our communities to have more control on messaging on this page, the current nightly page allows a custom block that our community can update with the data that they think is relevant to their specific needs and that they can change as they see fit. For example the current messaging on the French nightly firstrun is to promote the "meet the community" event tomorrow in the Mozilla Paris office, while the German one promotes the Firefox OS App days they will have in June in Zürich.

If the information in the page is something that is in the top results if you google it, IMO it doesn't fit the needs of the technical public that is using nightly builds.
(In reply to Lizz Noonan from comment #23)
> Hey guys - can I get a deadline up in here? 
> 
> Thanks

Hey Lizz-

Mike worked on this schedule with John S

https://app.smartsheet.com/b/publish?EQBCT=e46660a400684f24b0ecaba4541dbd29

Thx,
Jen
Hi David-

What would be a generic link for the QA community?

Thx,
Jen
Flags: needinfo?(dboswell)
(In reply to Jennifer Bertsch [:jbertsch] from comment #26)
> Hi David-
> 
> What would be a generic link for the QA community?
> 
> Thx,
> Jen

Removing the needinfo for David and making it Michelle instead.
Flags: needinfo?(dboswell) → needinfo?(mmarovich)
Hi all,

Here's a draft of the copy:

https://docs.google.com/a/mozilla.com/document/d/191SEpk5rsq7Ez08GrQdV_EmNWkY4XfFFinkCP-8w7d0/edit

The only major change from the mockup is that I moved the mention of the badge to the bottom section, combined it with the messaging there and gave it a CTA.

Please feel free to leave comments directly in the gdoc.
Hi all,

Here is the Nightly First Run mockup based on the wireframe and includes Matej's copy.
(In reply to Jennifer Bertsch [:jbertsch] from comment #27)
> (In reply to Jennifer Bertsch [:jbertsch] from comment #26)
> > Hi David-
> > 
> > What would be a generic link for the QA community?
> > 
> > Thx,
> > Jen
> 
> Removing the needinfo for David and making it Michelle instead.

Per QA the link you need to direct to is this: https://oneanddone.mozilla.org
Flags: needinfo?(mmarovich)
Flags: needinfo?(jslater)
(In reply to Ty Flanagan from comment #29)
> Here is the Nightly First Run mockup based on the wireframe and includes
> Matej's copy.

Looks great :)

For the Nightly User badge image, I'm CC'ing Lukas on this -- she set up the Nightly User badge on badges.mozilla.org and we can check with her about updating the badge image to reflect this design.  We can also confirm the right link to use -- I believe it is

https://badges.mozilla.org/en-US/badges/badge/Nightly-User

Ty, for the icons used for QA, coding and l10n -- I really like them.  Are those specifically for this design or can we reuse them when talking about contributing to these functions in other places?  Is the plan to create similar icons for contributing to other functions (like creative, documentation, etc)?
Flags: needinfo?(lsblakk)
(In reply to David Boswell from comment #31)
> (In reply to Ty Flanagan from comment #29)
> > Here is the Nightly First Run mockup based on the wireframe and includes
> > Matej's copy.
> 
> Looks great :)
> 
> For the Nightly User badge image, I'm CC'ing Lukas on this -- she set up the
> Nightly User badge on badges.mozilla.org and we can check with her about
> updating the badge image to reflect this design.  We can also confirm the
> right link to use -- I believe it is
> 
> https://badges.mozilla.org/en-US/badges/badge/Nightly-User
> 

I designed this badge as a placeholder image since the current Nightly badge was a bit dark to use within that space. If Lukas would like to use it, we would need to adjust for proper badge sizing.

> Ty, for the icons used for QA, coding and l10n -- I really like them.  Are
> those specifically for this design or can we reuse them when talking about
> contributing to these functions in other places?  Is the plan to create
> similar icons for contributing to other functions (like creative,
> documentation, etc)?

The icons are part of the latest Font Awesome set which we have been using a fair bit since last year's Summit. We can reuse them as, and where needed.
(In reply to David Boswell from comment #31)
> Ty, for the icons used for QA, coding and l10n -- I really like them.  Are
> those specifically for this design or can we reuse them when talking about
> contributing to these functions in other places?  Is the plan to create
> similar icons for contributing to other functions (like creative,
> documentation, etc)?

For l10n source should be this
http://www.languageicon.org/

Will we still have space to add extra localized content like we have in the current first run page?
(In reply to Francesco Lodolo [:flod] from comment #33)
> (In reply to David Boswell from comment #31)
> > Ty, for the icons used for QA, coding and l10n -- I really like them.  Are
> > those specifically for this design or can we reuse them when talking about
> > contributing to these functions in other places?  Is the plan to create
> > similar icons for contributing to other functions (like creative,
> > documentation, etc)?
> 
> For l10n source should be this
> http://www.languageicon.org/

Yup, that is the same icon used in the design :)

> 
> Will we still have space to add extra localized content like we have in the
> current first run page?

The design is modular and would be capable of including additional content, but what kind of extra content would you be looking to include on the FR page?
Flod, thanks for showing those examples -- good to see what some local communities are doing.

Stepping back a bit, the goal for the new design is to provide clear next steps and to move away from throwing lots of content at people who are wanting to get more involved.

Here's an idea -- for local communities that are interested in adding content, could they take over one of the 3 contribution boxes and put something there that could link to more information?

For example, we could have an optional "Local" box that said something like "Get involved with community members near you" and then the button could take them to a page where they could get the details that teams want to share?

Pascal and Flod, do you think that would address the need coming from local communities in a way that would keep the page simple?
(In reply to David Boswell from comment #36)
> Flod, thanks for showing those examples -- good to see what some local
> communities are doing.
> 
> Stepping back a bit, the goal for the new design is to provide clear next
> steps and to move away from throwing lots of content at people who are
> wanting to get more involved.
> 
> Here's an idea -- for local communities that are interested in adding
> content, could they take over one of the 3 contribution boxes and put
> something there that could link to more information?
> 
> For example, we could have an optional "Local" box that said something like
> "Get involved with community members near you" and then the button could
> take them to a page where they could get the details that teams want to
> share?

I like the idea, I just want to make sure whatever that local box is that it fits with the format of the headlines all being short, concise verbs:

TEST | CODE | LOCALIZE
Depends on: 1017851
(In reply to Matej Novak [:matej] from comment #37)
> I like the idea, I just want to make sure whatever that local box is that it
> fits with the format of the headlines all being short, concise verbs:
> 
> TEST | CODE | LOCALIZE

Sure, being consistent makes sense.  For a verb, maybe 'Connect' works?  Connect with community members near you...
(In reply to David Boswell from comment #36)
> Here's an idea -- for local communities that are interested in adding
> content, could they take over one of the 3 contribution boxes and put
> something there that could link to more information?

(I see Jen organized a meeting next week, so we're going to talk more about this then).

I think the 3 columns and the badge should stay, we could use the space after that for more text, either inside the badge box or in a following separate box.

What scares me is that this design is hard to read for long text (dark background, not enough contrast).

We have only a bunch of locales using this space (cs, de, fr, it), since the number of locales actually working on Nightly is very limited.

> Pascal and Flod, do you think that would address the need coming from local
> communities in a way that would keep the page simple?

I can tell you what are the needs of the Italian community (German and French are using it to highlight events and try to involve more people with hacking skills): explain how they can contribute to the community and where to find us on the Web, that they should expect to see untranslated strings in the interface from time to time, where to report translation errors and discuss features, etc.

Right now my main problem with nightly is that it's impossible to find, but that's not a problem of the firstrun page ;-)
+1 to what Flod said. 

Currently the first run page works for French to get contibutors because nightly users get precise information about the real needs and news of the French speaking Mozilla community.

I am also not convinced by the Localize block (btw, when I reach out to potential contributors, I use the term Translate, not localize, because localize is jargon). We say there  "Make Firefox available (and better) in more languages around the world". That is fine for the en-US page which probably has a lot of non-English speakers, but that's not going to work for localized builds basically because the work is done and if I am German using a German Nightly build that is fully localized I will just think "ok, obviously they don't need my help there". So for localized builds I would prefer a more direct message, like "We need your help to maintain Firefox in your language".

The badge block is a nice idea but I would prefer using this space to communicate directly with these advanced users, for example currently on the French one we are promoting the bug squashing event we will have in June in the Paris office, promoting such an event below the 3 tiles would make more sense in my opinion than promoting the badge because nightly users are exactly the population we want to target, the badge would be fine as a fallback when there is no event or specific needs to promote for example.

Generally speaking we need more flexibility on this page, we need it to be localized and not translated, that means having messaging that corresponds to the needs of a specific community, not the same message to everybody. That means we need ways to customize areas of the page that don't break the design.
I think we could change the l10n block like this:

Translate

Help maintain and improve Firefox in your language.

Start translating »


I also like the idea of calling a potential modular block "Connect," as David suggests in comment 38.
Here is the PSD to start working with:

https://www.dropbox.com/s/u62esvk3yeovou0/FFx%20Nightly_FirstRun_PSD.zip

We can make changes to add the additional locale content block once we have content sorted out.
Hi All-

I spoke some more with Theo and Flod about an additional "community" text block below the badges area.

I like the idea of calling it "Connect" and would like to include it on the page.  We definitely want to test how the Connect text block impacts clicks to the 3 content areas at the top of the page.

Additionally, I have asked Ty to check with the text/background contract against accessibility standards.

Thx,
Jen
Please point me to what icon I should use to update the badge
Flags: needinfo?(lsblakk)
Here is the updated Nightly Badge. If you need the size adjusted, please let me know
Is there any responsive design planned? (Do we want the page responsive?)

Do you have a preference on how the 3 boxes should behave with different text lengths?
Flags: needinfo?(tyronflanagan)
I guess we can close this one, it's been live for a while :)
https://www.mozilla.org/firefox/nightly/firstrun/
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Flags: needinfo?(tyronflanagan)
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.