1271424 - Improve copy and UX on some /contribute/signup tasks

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[Jonathan Petto [:jpetto]]

The newly merged /contribute/signup tasks [1] could use some small improvements to copy and/or UI.

Not yet an exhaustive list:

1. In the "Joy of Coding" task video, the host (Mike) mentions links to past and upcoming shows "below". There are no such links on the page.

2. Also in the "Joy of Coding" task, after completing the video, the thank you copy says "Thanks for getting involved", which may be better stated as "Thanks for watching".

It's probably worth doing a good once over of each task to ensure copy and UX is appropriate and consistent.

[1] https://github.com/mozilla/bedrock/pull/4101

Comment 1

[Alex Gibson [:agibson]]

May I suggest we also hide the "Want to get involved? Here’s how." section on /contribute/ until users can submit their email again?

https://www.mozilla.org/en-US/contribute/

Right now it suggests clicking "Get started" will let them select their areas of interest and, submit their email, and ultimately get a Mozillians account. With the new page this is (currently) no longer possible.

I understand the long-term aim is to enable this again, but during the test we did have at least one bug report from a visitor who was confused by this. It should be pretty easy to hide temporarily.

Comment 2

[Alex Gibson [:agibson]]

For the 'Joy of Coding' I suggest we add a link to the /livehacking channel on Air Mozilla:

https://air.mozilla.org/channels/livehacking/

This lists all past episodes, as well upcoming shows in the side column to the right.

Suggested copy: "View more Joy of Coding videos on Air Mozilla"

Comment 3

[Alex Gibson [:agibson]]

Looks like the App Store button link on this page is also 404:

https://www.mozilla.org/en-US/contribute/task/firefox-mobile/

Comment 4

[Alex Gibson [:agibson]]

For the Dev Tools Challenger task, "Learn more" feels like a bit more like a secondary action, as opposed to a primary CTA?

I'm going to suggest we change the button copy to something along the lines of "Visit devtoolschallenger.com"

Comment 5

[Alex Gibson [:agibson]]

OK, based on the above here's what I'm proposing to do:

1.) Hide the "Want to get involved? Here’s how." section on /contribute until we have email signups again.
2.) Add a link underneath the Joy of Coding video that says "View more Joy of Coding videos on Air Mozilla"
3.) Change the Joy of Coding thank you message from "Thanks for getting involved" to "Thanks for watching".
4.) Change the Dev Tools Challenger CTA button from "Learn More" to "Visit devtoolschallenger.com".
5.) Fix the broken App Store button link on the firefox mobile task page.

Holly, any thoughts or suggestions here? Does this all sound ok?

Comment 6

[Alex Gibson [:agibson]]

Attachment: GitHub pull request

Comment 7

[Holly Habstritt Gaal [:Habber]]

Thanks for the need-info. I'll take a look at these more closely tomorrow morning.

Comment 8

[Alex Gibson [:agibson]]

Thanks Holly,

One additional change for review to go together with Comment 5:

6.) Change the encryption task title from "Take the pledge" to "Become an encryption champion". See Bug 1272023 for context. TL:DR is using the same "Take the pledge" string for both title and button creates difficulty translating for some locales.

Comment 9

[Holly Habstritt Gaal [:Habber]]

See below for responses to each item + 2 additional items:
 
1.) Hide the "Want to get involved? Here’s how." section on /contribute until we have email signups again.
- How about only removing the inaccurate images and copy so that we don't lose the repeated primary CTA. I've removed the images and replaced copy with string from top of page ("Join a global community of game-changers") + “Get Involved” copy in CTA. Like this - http://cl.ly/1N093a0p2e03 

2.) Add a link underneath the Joy of Coding video that says "View more Joy of Coding videos on Air Mozilla"
- works for me

3.) Change the Joy of Coding thank you message from "Thanks for getting involved" to "Thanks for watching".
- works for me

4.) Change the Dev Tools Challenger CTA button from "Learn More" to "Visit devtoolschallenger.com".
- Will this require a string change or do we already have a string for "visit" and adding just the URL was done to avoid a new string? Putting the URL in a button isn't very friendly. "Go to DevTools Challenger" seems more appropriate. Not ideal as it repeats the headline, but I thought was better than "Visit DevTools Challenger" or any alternative I could come up with quickly. If time allows, I could get Troy involved or you can just pick one of the suggestions. 
- Additional fix for this page: Expand width of text container for non-dev tools browser warning, so that it doesn't wrap to 3 lines (and more for other locales) http://cl.ly/2b1231431L2g There is a LOT of text before the actual task, so any avoided wrapping helps. 

5.) Fix the broken App Store button link on the firefox mobile task page.
- thanks

6.) Change the encryption task title from "Take the pledge" to "Become an encryption champion". See Bug 1272023 for context. TL:DR is using the same "Take the pledge" string for both title and button creates difficulty translating for some locales.
- Works for me. The button copy will maintain "Take the pledge" copy, correct? Just making sure that we don't have to make any updates to the image on the page which has this language (could be an issue having english text in the img, but probably out of scope to update the image at this time).

----
Additional:
7.) Display "learn more" copy and link below CTA on Stumbler task as we have done on Encryption task. See correct Encryption task hierarchy/layout with Learn More link below CTA - http://cl.ly/3o0U0N1c2C3A. Current Stumbler layout that should be updated http://cl.ly/1R2Y241Y0m0I

8.) Has button copy casing from bug 1270200 been addressed separately?

Comment 10

[Alex Gibson [:agibson]]

(In reply to Holly Habstritt Gaal [:Habber] from comment #9)
> See below for responses to each item + 2 additional items:
>  
> 1.) Hide the "Want to get involved? Here’s how." section on /contribute
> until we have email signups again.
> - How about only removing the inaccurate images and copy so that we don't
> lose the repeated primary CTA. I've removed the images and replaced copy
> with string from top of page ("Join a global community of game-changers") +
> “Get Involved” copy in CTA. Like this - http://cl.ly/1N093a0p2e03 

Sounds good to me, will update as suggested.

> 4.) Change the Dev Tools Challenger CTA button from "Learn More" to "Visit
> devtoolschallenger.com".
> - Will this require a string change or do we already have a string for
> "visit" and adding just the URL was done to avoid a new string? Putting the
> URL in a button isn't very friendly. "Go to DevTools Challenger" seems more
> appropriate. Not ideal as it repeats the headline, but I thought was better
> than "Visit DevTools Challenger" or any alternative I could come up with
> quickly. If time allows, I could get Troy involved or you can just pick one
> of the suggestions. 

I'm trying to avoid repeating the same string for both the headline and button copy, so as not to introduce localization issues (as seen in Bug 1272023). If explicitly stating the website address is a no-go, then ""Visit DevTools Challenger" works for me. 

> - Additional fix for this page: Expand width of text container for non-dev
> tools browser warning, so that it doesn't wrap to 3 lines (and more for
> other locales) http://cl.ly/2b1231431L2g There is a LOT of text before the
> actual task, so any avoided wrapping helps. 

Will do.

> 6.) Change the encryption task title from "Take the pledge" to "Become an
> encryption champion". See Bug 1272023 for context. TL:DR is using the same
> "Take the pledge" string for both title and button creates difficulty
> translating for some locales.
> - Works for me. The button copy will maintain "Take the pledge" copy,
> correct? Just making sure that we don't have to make any updates to the
> image on the page which has this language (could be an issue having english
> text in the img, but probably out of scope to update the image at this time).

Right, the button copy will remain "Take the pledge". The proposed updated headline matches text already in both the image and the actual encryption website. Having English text in the image is not ideal, but that's another bug (the website itself is English only also).

> ----
> Additional:
> 7.) Display "learn more" copy and link below CTA on Stumbler task as we have
> done on Encryption task. See correct Encryption task hierarchy/layout with
> Learn More link below CTA - http://cl.ly/3o0U0N1c2C3A. Current Stumbler
> layout that should be updated http://cl.ly/1R2Y241Y0m0I

Will do.

> 8.) Has button copy casing from bug 1270200 been addressed separately?

Right, this bug is for addressing copy and general UX. Button CSS styling is being addressed in bug 1270200.

Comment 11

[Alex Gibson [:agibson]]

Ok, all comments from Holly's feedback have been addressed in the PR. Going to mark this one as ready for review & ping Flod for localization.

Thanks all!

Comment 12

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/90060ce49461f15e2c5ff3ff6896fd76b68cad99
[fix bug 1271424] Improve copy and UX on some /contribute/signup tasks

https://github.com/mozilla/bedrock/commit/a742aa3ce49996488de6b521b294c87bbcaf8c8f
Merge pull request #4134 from alexgibson/bug-1271424-improve-ux-contribute-signup-tasks

[fix bug 1271424] Improve copy and UX on some /contribute/signup tasks