Ship interactive snippet for Webmaker Campaign

RESOLVED FIXED

Status

RESOLVED FIXED
5 years ago
3 years ago

People

(Reporter: jcollings, Assigned: jcollings)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [snippet] [july25] [critical])

Attachments

(2 attachments, 4 obsolete attachments)

(Assignee)

Description

5 years ago
Kicking off a snippet animation/interaction for the Webmaker campaign in August. 

Next steps, Foundation to put together a prototype of concepts which we'll pass by Pete for approval. 

After that Foundation will on development/production (with Chris More's guidance/consultation) and QA testing.
(Assignee)

Comment 1

5 years ago
In addition to Pete's approval, will need to make sure John S. from the creative team approves as well.
(Assignee)

Updated

5 years ago
Summary: Interactive gaming snippet for Webmaker Campaign → Interactive snippet for Webmaker Campaign
Here is the working prototype:
http://labs.toolness.com/temp/webmaker-firefox-snippet/

Jean do you want to use this bug for collecting feedback on this prototype and moving the prototype into production / implementation?
(Assignee)

Comment 3

5 years ago
Collective feedback on design/experience: 

- Can the description of "background" stay up a bit longer?  It popped up then went away quickly and it didn't quite register the first time (experience needs to slow way down for first time users)
- Pre snippet click-thru, it feels like the Webmaker mark is dangling a bit, and for the uninitiated, it's not clear why there's an "m" on the Firefox page; should the logo come up after people click-thru and are informed about the Mozilla Maker Party? And can we make some kind of connection between Mozilla Maker Parties and Firefox in that supporting copy?
- Is there a way for the call out tag (black quote bubble) to animate from the center where the snippet text is?  
- Having the text: "Hooked? Mozilla Webmaker can help you go further. Sign up and we’ll send you more ways to mess around with code, design and make things on the web."  animate in after some interaction may be better as it can be called out in a much more readable way, white text on a black quote bubble similar to the definition text at the beginning, with the text suggestion box up it is hard to read the call to action. Really tough to read on dark backgrounds.
-This is much more complicated: the text becomes unreadable on darker backgrounds, having an outline/dropshadow/glow on the text will help separate it from the dark backgrounds. Having a matrix may be too much for this application.

CTA and Copy feedback: 

-Lead in copy - not important that this is the first time you can customize this page.  what's important is that you can learn to code right now.  and it's easy
-Signing Up for a Maker Party from any CTA seems like a big disconnect. Can we take them to this page
(https://webmaker.org/en-US/tools) where they can learn how to code more things. Or directly to the X Ray Goggles Page or Thimble page that they can share with friends or find cool. Seems like once they get building, we can then promote the Maker party (on the page or through a time revealed message)
-What happened to Meme Maker?  Seems like this is would be a great next steps also for beginners, and something they could share.  (https://openmatt.makes.org/thimble/meme-maker)
side comment: It's not too hard to make the text color switch to white for background colors that are darker-than-neutral.  Lots of code snippets on the google to help.
Just talking (in person!) with Mike and Chris Moore and next step is for Brian to meet directly with Chris and Mike about next steps. Mike is going to track Brian down :)
Flags: needinfo?(mkelly)
Summary: Interactive snippet for Webmaker Campaign → Ship interactive snippet for Webmaker Campaign
Whiteboard: [july25] [snippet]
Mike is walking me through how to do local testing on snippets and I'm working on cutting bytes. Once that's all figured out, I'll come back around to the feedback listed above!
Flags: needinfo?(mkelly)
* One additional note: the experience should probably *end* by taking users to http://welcome.webmaker.org/
* That way, it can feed into the same funnel process we're working on with Andrea right now
Matt, David – do we have a minimum version of Firefox we should be targeting with this? (There are apparently rules for >26 and >16, need to know how many versions back I should test).
Current is v 30, so I think >26 is safe, but will defer to others with more data.  It'd be good to know how things degrade for <26, though.
(In reply to Brian Brennan [:brianloveswords] from comment #8)
> (There are apparently rules for >26 and >16, need to know how
> many versions back I should test).

To clarify for others, we are able to limit the snippet to only be shown to users on a certain version or above, and already have rules for "Show to anything > 26" and "Show to anything > 16". So if you're okay with only being seen by users on 26 or above then we'll limit it to that (and I generally do for semi-complex snippets just to make testing feasible).
(Assignee)

Comment 11

5 years ago
Hi Brian,

Can you let us know the timing of when we can see the next round? Would like to know so I can set expectations, that's all! Thank you!

Jean
Hey Jean! I should have the second round Friday afternoon, got the build down to a reasonable size and working on the functional changes now.

Matt: Any idea on the versions? I'm gonna default to >26 unless you think it's super important that we target between 26 and 16. I have to test the snippet in each version, so if we have to do >16, it's gonna take longer to test, but if we have metrics to prove that it's worth it, I'm down.
(Ah, just figuring out how to use the `needs-info` feature!)

Matt, can you advise on some of Jean's suggestions (copy, whether the logo should be pre/post click-thru)?

So far I have the longer background tooltip (2.5s instead of 1s) and the light/dark text switch working at https://brianloveswords.github.io/webmaker-firefox-snippet/

Mike: I'm hovering just around 100k (93,403 bytes, 35,550 gzipped). IIRC, the upper limit is 200k so we should be good, but I set up a build system so I can quickly experiment with cutting/minifying various things – I figure every byte counts when it's getting sent out as many times as a snippet is.
Flags: needinfo?(matt)
* @Brian: Yeah need-info is essential for tapping people on the shoulder. :) 
* Hannah and Andrea are going to project manage this one to the finish line. Hannah can you help?
* I'll try to summarize and number the specific notes from comment 3 below. To make them easier to catalogue and address one-by-one.
* Jess can also help address some of these design aspects.
Flags: needinfo?(matt)
Flags: needinfo?(jess)
Flags: needinfo?(hannah)
Flags: needinfo?(andrea)
SUMMARY OF NOTES
+ questions and next steps
from comment 3

SPEED
1) make the description of "background" stay up a bit longer.
* it pops up then goes away quickly. it may not fully register for users.
* the experience needs to slow way down in general for first time users

LOGO / BRANDING
2) consider changing the branding / Webmaker logo treatment
* pre-snippet click-thru, it feels like the Webmaker mark is dangling a bit.
* for the uninitiated, it's not clear what the Webmaker logo *is* -- or why there's an "m" on the Firefox page (this is an excellent point)
* should the logo come up *after* people click-thru and are informed about the Mozilla Maker Party? 
* can we make some kind of connection between Mozilla Maker Parties and Firefox in that supporting copy?

** OPTIONS: 
a) replace the Webmaker Logo with the Maker Party logo. That logo is probably less confusing than a big dangling "M." Plus add some copy connecting Firefox to Maker Party. http://party.webmaker.org/resources
b) don't use a logo at all. Use some other generic icon or symbol that fits with the experience. 
c) ??? something else... ???

ANIMATION
3) animate call-out tag
* animate the call-out tag (black quote bubble) to animate from the center, where the snippet text is

LEGIBILITY
4) make call to action text more striking and easy to read
* this text: "Hooked? Mozilla Webmaker can help you go further. Sign up and we’ll send you more ways to mess around with code, design and make things on the web"

a) animate
* animate this text in after user interaction, so it can be called out in a much more readable way
b) color
* change the coloring to make it more readable. 
* with the text suggestion box up, it's too hard to read the call to action. 
c) drop shadow / outline?
* having an outline/dropshadow/glow on the text will help separate it from the dark backgrounds. (although: having a matrix may be too much for this application)

COPY
5) CTA and copy feedback: 

a) Lead in copy 
* it's not important that this is the first time you can customize this page.  
* what is important is that you can learn to code right now.  and it's easy.

** QUESTION: Andrea: can you provide updated copy for this?

b) Maker Party CTA
* signing Up for a Maker Party from any CTA seems like a big disconnect. 
* should we consider an alternate CTA? 

* e.g., we could take them to:
** meme-maker: (new and improved landing page for this is coming next week)
** the Webmaker tools page (https://webmaker.org/en-US/tools) where they can learn how to code more things. ** directly to the X Ray Goggles Page or Thimble page that they can share with friends or find cool. 


** SUGGESTION: the new funnel experience we are building should address these CTA notes quite well.

Andrea: do you agree? We'll take them to our new welcome sign-up experience, where they:
a) take a quick survey. to say more about what they're specifically interested in. 
b) then get invited to make a meme, or teach someone else how to.

I think this flow we're building will address their notes nicely. What do you think?
Whiteboard: [july25] [snippet] → [snippet] [july25] [critical]

Comment 16

5 years ago
Created attachment 8458160 [details]
Screen_Shot_2014-07-17_at_1_07_08_PM.png

I've attached a graphic that displays how the snippet and mark should be aligned (using the current snippet). 

With regards to the animation:

The mark (the Webmaker "m") should be persistent. If it's not persistent the copy will fade into the background and it will feel like a mistake. That said, when the rest of the copy animates, and the line about "visit webmaker.org to create and remix the web" comes on, the "m" should lightly bounce. 

Additionally, the "m" should link to Webmaker.org
Attachment #8458160 - Flags: review?(brian)

Comment 17

5 years ago
I hit send too fast! I agree with the Maker Party logo being more grock- able on first read. I think that to the uninitiated, the words "maker party" on their own will have more resonance.
Flags: needinfo?(jess)

Comment 18

5 years ago
Jess and I just chatted. We agreed that we should use the Maker Party logo, and change the copy as follows:

"Hooked? Maker Party, Mozilla's annual campaign to teach the web, can help you go further. Sign up to learn more."

(Will leave an extended comment in a minute, responding to the other stuff in Matt's Comment 15.)
Flags: needinfo?(hannah)

Comment 19

5 years ago
Hey Brian,

Jess and I have chatted, and we'd like to request the following for the next iteration. I think these will address most of the issues in comment 15. :)

Once you've been able to make all of these changes, let's share an updated version with Andrea, Jean, and others.

SPEED

* Seems this has already been adjusted, because the instructional text is staying on screen for much longer now.

LOGO / BRANDING

* Use the Maker Party logo, and the alignment described in comment 16
* Change the default bg color to gold, rather than deep sky blue, to better match the MP logo.
* It should appear the entire time (from the first time the user sees the snippet to the end), but should animate a bounce/wiggle along with the final CTA animation

ANIMATION

* the animation of the call-out tag seems good now
* Change the copy from "Try pressing backspace a few times" to "Try typing a color name, like red"

LEGIBILITY

* Let's remove the background color when the CTA animation happens. That might help a lot.

COPY

* Lead in copy in latest version has already been changed to: "Hey you, maker! Want to redesign this page? Click here to change the background." That's good.
* Please change the CTA copy to: "Hooked? Maker Party, Mozilla's annual campaign to teach the web, can help you go further. Sign up to learn more."
* Please change the instructional copy (currently,"background is the style property that...") to "A webpage has many parts that can be styled—the "background" property allows you to set a color."

TARGET PAGE

* For now, let's continue to use welcome.webmaker.org
* When we have the new funnel, we can send the user there

Comment 20

5 years ago
Rather than changing the entire background for the call to action, let's try putting white background with padding around just the call to action (that is persistent). This way it will always have a strong presence on the page.

Comment 22

5 years ago
Yay! I think this looks rad, and seems to address all of the feedback so far.

Others?
(Assignee)

Comment 23

5 years ago
Whoo hooo super excited about this! My feedback and I'm more than happy to hop on a call for this next week:

1) I think the "body [background] color" part needs to be highlighted with a white box so it's clear that this is the area where you type the code and change. Have that as the first step and the only focus on the page 
2) And then show the "The webpage has many parts" pop up box - only after the background color has been changed
3) And then invite people to type in their color - however it's not clear that they need to delete "gold" to type in "red" - can we get rid of the "gold" automatically (if timed perfectly, having had time to read the black pop up on the left side?)
4) And then show the bottom snippet "hooked?"

Right now there's like 4 or 5 things popping up all at once and I think it may be better to do it one step at a time.

In addition, it's not clear what "Mozilla's annual campaign to teach the web" really means - I think it needs to be a bit more descriptive.

Comment 24

5 years ago
+1 to all of Jean's feedback.

Re: the copy, does this work better? "Mozilla's global campaign to teach the web through hands-on making"
(Assignee)

Comment 25

5 years ago
How about something along the lines of ...campaign to teach users how to make the web.....or something like that? My challenge is "teaching the web" - it sounds like we are teaching the web literally (as in telling the web here are some things to learn) as opposed to actually teaching people how to make stuff on the web.

Comment 26

5 years ago
It's a branding thing. We use "teach the web" all over the place (see http://party.webmaker.org/).

I understand that it may not be easily grokked by a wider audience, though. What about "Mozilla's global campaign to teach web literacy". Does that work?
(Assignee)

Comment 27

5 years ago
I like that better! 

Sorry one more thing - the CTA (Webmaker Party) is still a bit disconnected from our snippets highlighting "Maker Party".

Option 1) Possible to include the word "Webmaker" as part of the snippet copy?
Option 2) Include the Maker Party logo on the landing page https://welcome.webmaker.org/ OR somehow call out Maker Party a bit more? It gets lost in the copy.

Just trying to make a better connect from our snippet copy to the CTA landing page, that's all!

Comment 28

5 years ago
Where are you seeing "Webmaker Party"? We try to only say Maker Party.

I'd vote for Option 2. I think adding "Webmaker" back into the snippet copy would be confusing, but hyping up "Maker Party" on the welcome page would be fine.
(Assignee)

Comment 29

5 years ago
(In reply to hannah from comment #28)
> Where are you seeing "Webmaker Party"? We try to only say Maker Party.
> 
> I'd vote for Option 2. I think adding "Webmaker" back into the snippet copy
> would be confusing, but hyping up "Maker Party" on the welcome page would be
> fine.

Sorry my bad, I meant to say that the CTA Webmaker page!
With the new language that doesn't suggest backspacing, if the user just follows the instructions, they end up with the color "Goldred" which doesn't work.

How about we select the "Gold" text before the popup talking about typing color names, so that the selection will be replaced by whatever the user types?

Comment 31

5 years ago
I think that this has been updated in the latest iteration, which makes the "Goldred" comment outmoded, but to confirm, it works nicely by automatically removing the copy and then adding in the auto complete with the color names.
Just reviewed the latest iteration -- it looks and works really well. I just have a few minor language suggestions that connect all the various hints and sentences a little more cohesively.

"Hey you maker" might be cool, or it could be a little too informal for people to understand. I don't have a strong feeling, but we might try a different salutation at some point to see if it affects CTR.

I was a little worried about using "CSS" and "body" without any context, since most people have no idea what those two things mean. My suggestion:
https://www.evernote.com/shard/s202/sh/32c3cd63-d0f4-4c7b-ae45-243bef42f921/a17d82d6b26eab6ae9ef4c9fa0508607/deep/0/about-home-Snippet-Preview.png

To make the "background" bubble connect to the instructions I suggest:
https://www.evernote.com/shard/s202/sh/08fd6ccf-31a5-4389-b12b-df3563579396/58024e0f7e81c4b025a519240ddf7acf/deep/0/about-home-Snippet-Preview-and-Skype.png
Flags: needinfo?(andrea)

Comment 33

5 years ago
I hear what you are saying Andrea. I would like to still reveal that this is a coding language that they are seeing. What if instead of saying "CSS" we said something along the lines of... "here is the code required to change the color of the background of the webpage"? 

+1 to feedback about body, although, I wonder if this word would sound strange to a new user without context. If that's the case, then yes, I think we should remove the word "body" from the dialog.

@brian - thoughts on the use of the word "code" in this context?

Comment 34

5 years ago
+1 for Andrea's comments...I think that helps.

(Andrea, thanks for the email nudge.)

Comment 35

5 years ago
re I agree with all of @Andrea and @Jean's comments and we should try it out on the next iteration except for "I think the "body [background] color" part needs to be highlighted with a white box so it's clear that this is the area where you type the code and change." - because it will compete for the users attention with the search box and potentially could be confusing. 

We are going to incorporate all of the other feedback into the next iteration.
Okay, next revision is up: https://brianloveswords.github.io/webmaker-firefox-snippet/

Changelog:
- Style input to make it clearer that it is editable.
- Lower the flyout on the left so it's more centered with the snippet.
- Change the suggested color from "red" to "orange" to be less abrasive
- Adjust interaction:
  - Click (transition, 1.5s delay) -> 
  - Ghost writing (1.5s delay) -> 
  - Show flyout hint (5s delay) -> 
  - Hide flyout hint ->
  - Show "type a color" hint (show until user starts typing) ->
  - [once user has successfully typed a color] bounce icon (1.5s delay)->
  - Show webmaker call to action.
(Assignee)

Comment 37

5 years ago
Brian - Liking it! Per comment 26, can we change the post click snippet copy?

Andrea or Hannah per comment 27, 28 - is it possible to add a Maker Party logo to the landing page: https://welcome.webmaker.org/ to make the connection with the copy better?

Once I get answers to the two questions above and if no one else has feedback, the next steps is for me to show Pete and Mary Ellen and get their feedback.
This looks really great! I have two minor edits based on this iteration:

1. The delay until the "try typing a color name" seems just a bit long. Change to 4 seconds?

2. The more I read it the more I don't think the "hey you, maker" salutation is right for this audience. Can we change it to one of the following: 

A. You can be a maker of the web and redesign this page. It's easy -- just click here to change the background. 

B. Anyone has the power to build the web, starting with this page. Click here to change the background.
One more note:

(In reply to Brian Brennan [:brianloveswords] from comment #38)
> Jean – post-click copy updated!
> https://brianloveswords.github.io/webmaker-firefox-snippet/

I don't see the Maker Party logo? I think that's what Jean is asking for (I agree it creates more visual connection between the about:home experience and the landing page). Possible?
Andrea – I made a new build, this one will let you make some comparisons:

A copy: https://brianloveswords.github.io/webmaker-firefox-snippet/?intro=a
B copy: https://brianloveswords.github.io/webmaker-firefox-snippet/?intro=b

4s delay: https://brianloveswords.github.io/webmaker-firefox-snippet/?delay=4000
5s delay: https://brianloveswords.github.io/webmaker-firefox-snippet/?delay=5000

(delay timings are in milliseconds)

I decided on a 5 second delay in the build before this one by reading the flyout text out loud at a normal pace to try to reasonably approximate the speed at which someone might try to understand it seeing it for the first time. At 4 seconds, I was unable to finish it before it started fading away. I'd personally want to err on the side of too long than too short, but I'll let you compare the timings and defer to your judgement.

I thought Jean's comment about the post click snippet copy was referring to the call to action box that shows up, with the text "Hooked? Maker Party, Mozilla's global campaign to teach web literacy, can help you go further".

Comment 42

5 years ago
:thumbsup: in terms of design.

My preferences: B copy, 5ms delay 

I agree about the landing page, when I talked with Hannah, I was under the impression that   https://welcome.webmaker.org/ would be "jazzed up" to feel more welcoming and makery.

Agreed with Brian re: the post click snippet. Jean/Andrea -can you provide clarification?

**so close**
(Assignee)

Comment 43

5 years ago
Hi all,

We are all good on the post click snippet copy - Brian updated it as requested and it looks good. 


The only remaining piece left is to update the landing page: https://welcome.webmaker.org/ with a Maker Party logo or make it "more welcoming and makery" as Jess mentioned. Brian I'm not sure if you're responsible for updating that page as well?

Heads up - gave Pete and Mary Ellen these final versions last night and I'm hoping to hear back from them soon - unfortunately, Pete is out until Monday so we may not hear from him until then but I'll keep chasing.
I'm sold on 5s delay! This looks good.

Jean how hard would it be to test A or B copy versions? I'm curious to test both. I'm going to flag need info from both Adam and Matt about how to best add a Maker Party logo to the landing page.

Adam: Because making this change will impact our landing page optimization testing (it will likely change results)

Matt: Because he knows who should actually make the edit itself. I think this is an important change to make in the context of this specific hack-the-snippet, so we might simply want to clone the current page and add a Maker Party logo that we use for this specific snippet. 

I defer to Adam and Matt's guidance. We do have a little time since we won't be launching this until August, but it would be good to button it up well in advance. :)
Flags: needinfo?(matt)
Flags: needinfo?(adam)
Jean – I'm not currently responsible for the welcome page. If no one else is, I certainly can be (assuming it's cool with David) but I'll have limited availability tomorrow and Friday as I'll be down in Philly helping the OpenNews team with SRCCON.

In the meantime, now that we have a more-or-less finalized version, I'll start testing against older versions of Firefox. 

Hannah – Did we decide that >26 was okay? As of yesterday the latest version of Firefox is 31.
Flags: needinfo?(hannah)
(In reply to Brian Brennan [:brianloveswords] from comment #45)
> Jean – I'm not currently responsible for the welcome page. If no one else
Yeah, Brian see comment 44, the landing page is not you. I flagged it for Adam and Matt who can handle. Thanks for the offer but you're swamped, no doubt. :)

> is, I certainly can be (assuming it's cool with David) but I'll have limited
> availability tomorrow and Friday as I'll be down in Philly helping the
> OpenNews team with SRCCON.
> 
> In the meantime, now that we have a more-or-less finalized version, I'll
> start testing against older versions of Firefox. 
> 
> Hannah – Did we decide that >26 was okay? As of yesterday the latest version
> of Firefox is 31.
(Assignee)

Comment 47

5 years ago
(In reply to Andrea Wood from comment #44)
> I'm sold on 5s delay! This looks good.
> 
> Jean how hard would it be to test A or B copy versions? I'm curious to test
> both. I'm going to flag need info from both Adam and Matt about how to best
> add a Maker Party logo to the landing page.
> 
> Adam: Because making this change will impact our landing page optimization
> testing (it will likely change results)
> 
> Matt: Because he knows who should actually make the edit itself. I think
> this is an important change to make in the context of this specific
> hack-the-snippet, so we might simply want to clone the current page and add
> a Maker Party logo that we use for this specific snippet. 
> 
> I defer to Adam and Matt's guidance. We do have a little time since we won't
> be launching this until August, but it would be good to button it up well in
> advance. :)

Unfortunately, with a special snippet with this file size I can only run one at a time so we wouldn't be able to test it unless we did a day for one and a different day for the other but again you know we wouldn't be able to get true results from one day.
For Firefox versions, I tested back to v16 and the snippet still works, so we can use the >16 rule.
Flags: needinfo?(hannah)
(In reply to Jess Klein from comment #42)
> :thumbsup: in terms of design.
> 
> My preferences: B copy, 5ms delay 
> 
> I agree about the landing page, when I talked with Hannah, I was under the
> impression that   https://welcome.webmaker.org/ would be "jazzed up" to feel
> more welcoming and makery.
> 
> Agreed with Brian re: the post click snippet. Jean/Andrea -can you provide
> clarification?
> 
> **so close**

Jess how about we compromise on A + B? Can we just add "It's easy -- just click here to change the background color" to your version B? I like the "it's easy" language a lot, I think newbs will find it comforting.

That's the last copy edit, I swear. :)
(In reply to Andrea Wood from comment #44)
> Adam: Because making this change will impact our landing page optimization
> testing (it will likely change results)

General FYI for people on this ticket. That current page might look a little boring, but it's performing amazingly well. We've run a couple of copy optimizations on it, but are totally open to testing new content and design. With the caveat that, only changes that increase performance will survive. :)

> I defer to Adam and Matt's guidance. We do have a little time since we won't
> be launching this until August, but it would be good to button it up well in
> advance. :)

Thanks, I'm actually looking for the next things to test on that landing page so please add any ideas to Bug 1032224 and I'll post the results of the tests there too.
Flags: needinfo?(adam)
* Excited that this is so close! Nice work team. :) 

* I agree with Adam -- I don't think making changes to welcome.webmaker.org should be a blocker here

* As Adam mentioned, the page is converting very well right now. We have the ability to A/B test variants. We can add a more "Maker Party-ish" variant to that mix as we go forward, but that should not be a blocker here. I vote for just pushing ahead.
Flags: needinfo?(matt)

Comment 52

5 years ago
Ok so thumbsup to Andrea's recommendation for the snippet in Comment #49 

With regards to the landing page, I agree that it shouldn't be a blocker, however there feels like a lack of visual continuity with this experience, plus... it doesn't feel super makery. Those are just my two cents. All I imagine that I would do to fix this would be to put a simple, clean spot illustration (like the cat on browser gif on the webmaker landing: https://webmaker.org/img/browser-on.png) to the left of the copy in the green panel.
Hi Jess, adding the cat-on-browser gif is fine for us to test. At the moment, we need to ship the functional, final snippet -- and we can firm up the landing page testing we want to do when we launch in august. If you want to work with Adam to build a variant that includes that illustration, that's fine, Adam's point is that our current form is converting really well, so a landing page with your illustration simply has to beat the current highest-performing version to stay live in the long-term. Conversion has to be our #1 priority in this case (due to traffic volume and opportunity).

Comment 54

5 years ago
From conversations with Hannah, I was under the impression another designer would be working on this. Unfortunately, I am currently committed to another project. All things considered, I would move forward as is, in order to not hold anything up.

Comment 55

5 years ago
I think I was talking about another bug/thread going on where a new landing page experience is being built, but that's probably not relevant to this conversation. (Sorry, that was confusing of me to mention!)

+1 with moving forward w/o changes to the landing page for now.
(Assignee)

Comment 56

5 years ago
Pete hasn't provided feedback yet but just want to flag that he may not be comfortable with the landing page if we don't add or make changes based on his original rounds of comments. Will follow up, thanks!
Now I'm confused.

Jess: Are you saying you can't make the text changes to the snippet words? Or you can't work on the landing page? The landing page is not something you need to work on. Does this mean you can't make the changes noted in comment #49?

Jean: We are building separate elements. The snippet can be completed soon. The landing page version with a Maker Party logo is something that will get done, but isn't done right now. I'd rather not wait to show pete the snippet in case he has some major red flag with it that we need to change. You don't feel comfortable telling him the design he recommended will be one variant we test but we don't have it ready to show him? The current page is getting a 6 - 8% conversion, which is very good. Adding a Maker Party logo may or may not improve conversion. We don't know yet.
(Assignee)

Comment 58

5 years ago
(In reply to Andrea Wood from comment #57)
> Now I'm confused.
> 
> Jess: Are you saying you can't make the text changes to the snippet words?
> Or you can't work on the landing page? The landing page is not something you
> need to work on. Does this mean you can't make the changes noted in comment
> #49?
> 
> Jean: We are building separate elements. The snippet can be completed soon.
> The landing page version with a Maker Party logo is something that will get
> done, but isn't done right now. I'd rather not wait to show pete the snippet
> in case he has some major red flag with it that we need to change. You don't
> feel comfortable telling him the design he recommended will be one variant
> we test but we don't have it ready to show him? The current page is getting
> a 6 - 8% conversion, which is very good. Adding a Maker Party logo may or
> may not improve conversion. We don't know yet.

Andrea - no worries, he has the snippet in his inbox (he's out on an offsite this week) - so I'm expecting him to respond next week. I did let him know that we were considering variants to the landing page but based on the above conversations I thought it sounded like we weren't going to test the different pages at all so I just wanted to flag. But if we are then that's fine.
(In reply to Jean Collings from comment #58)
> (In reply to Andrea Wood from comment #57)
> > Now I'm confused.
> > 
> > Jess: Are you saying you can't make the text changes to the snippet words?
> > Or you can't work on the landing page? The landing page is not something you
> > need to work on. Does this mean you can't make the changes noted in comment
> > #49?
> > 
> > Jean: We are building separate elements. The snippet can be completed soon.
> > The landing page version with a Maker Party logo is something that will get
> > done, but isn't done right now. I'd rather not wait to show pete the snippet
> > in case he has some major red flag with it that we need to change. You don't
> > feel comfortable telling him the design he recommended will be one variant
> > we test but we don't have it ready to show him? The current page is getting
> > a 6 - 8% conversion, which is very good. Adding a Maker Party logo may or
> > may not improve conversion. We don't know yet.
> 
> Andrea - no worries, he has the snippet in his inbox (he's out on an offsite
> this week) - so I'm expecting him to respond next week. I did let him know
> that we were considering variants to the landing page but based on the above
> conversations I thought it sounded like we weren't going to test the
> different pages at all so I just wanted to flag. But if we are then that's
> fine.

Oh great! Thanks so much Jean, just wanted to make sure you knew we definitely want to test his variant (I think it's a great thing to test), but we just don't have bandwidth at this second.
FYI, we are now testing variations of the Maker Party logo on the landing page. :)

Please see Bug 1032224 for the screenshots and use that ticket for questions about the landing page.
Depends on: 1045106
(Assignee)

Comment 61

5 years ago
Hi all,
Down to the final stretch! Mary Ellen had a few pieces of feedback but all with the copy so these are easy fixes :)

1. In this copy: "Here is the code required to change the color of the background of the webpage" - will regular Firefox users understand that the name of the color is "code"?   Is there a different way to make it feel accessible but also teach people that "code" and "words" are the same thing?  Something like "Coding the background the webpage is as simple as typing in a new color"

2. "campaign to teach web literacy" sounds very technical and hard. (Let's revert back to Hannah's suggestion of - "Hooked? Maker Party, Mozilla's global campaign to teach and learn the web through hands-on making, can help you go further".)

Comment 62

5 years ago
(sorry about the earlier confusion, I was just referring to not being able to work on welcome.webmaker.org - I am helping Brian get to the finish line with the copy changes).
Okay, pushed a new build that should have all the latest copy changes: https://brianloveswords.github.io/webmaker-firefox-snippet/
(Assignee)

Comment 64

5 years ago
(In reply to Brian Brennan [:brianloveswords] from comment #63)
> Okay, pushed a new build that should have all the latest copy changes:
> https://brianloveswords.github.io/webmaker-firefox-snippet/

Sweet! Is the next step to get this coded and to hand it over to me (not sure if Mkelly has provided you with directions)? Let me know! Thanks again.
Created attachment 8464175 [details]
snippet

Jean, Mike: I loaded the snippet into the staging server (https://snippets.allizom.org/admin/base/snippet/34/) and I'm also attaching it here.
Attachment #8464175 - Flags: review?(mkelly)
Comment on attachment 8464175 [details]
snippet

Looks good for the most part, just two comments, one of which doesn't really have any action:

- You add "Snippet" and "$" into the global scope, which might interfere with other snippets. Please remove them from the global scope.

- You have some hard-coded IDs, which is fine except if we ever run two copies of this snippet (after modifications, perhaps for some A/B testing or whatever) the IDs will conflict. With snippet templates we can avoid this because they can use a variable that fills in with the snippet ID, but for Raw code snippets like this one we don't yet have the ability to do that.

This is mainly a note to make sure that whenever we create a snippet from this code we clearly mark it as "ONLY ONE COPY AT A TIME".
Attachment #8464175 - Flags: review?(mkelly) → review+
Created attachment 8464260 [details]
snippet, no globals

Mike – I removed the `Snippet`, `jQuery` and `$` exports, so nothing should be affecting the global scope now.
Attachment #8464175 - Attachment is obsolete: true
Attachment #8464260 - Flags: review?(mkelly)
(Assignee)

Comment 68

5 years ago
Looks great! Apologies for not catching the error sooner but the copy should be fixed to "Coding the background of the webpage is as simple as typing in a new color." 

Hannah or Andrea can you please double check that the copy makes sense? Thanks!
Created attachment 8464285 [details]
snippet, copy fix
Attachment #8464260 - Attachment is obsolete: true
Attachment #8464260 - Flags: review?(mkelly)
(Assignee)

Comment 70

5 years ago
Andrea, Hannah -
I think we're good to close this bug? I put the code in the snippet service and it looks good! Let me know as well the timing you would like me to push this out!
Flags: needinfo?(hannah)
Flags: needinfo?(andrea)

Comment 71

5 years ago
+1 from me, but I'd like to get Andrea's as well.
Flags: needinfo?(hannah)
Comment on attachment 8464260 [details]
snippet, no globals

o/
Attachment #8464260 - Flags: review+
See Also: → bug 1046321
To keep this group in the loop: 

The test to include the Maker Party logo on the current snippet landing page reduced conversion rates. Full results for that test can be seen here: https://bugzilla.mozilla.org/show_bug.cgi?id=1032224#c18
Yay! Jean did you talk to Pete?

I need to confirm with our team when we want to launch. Would it be possible to test it to say 5 - 10% traffic for 48 hrs or so soon? Just to make sure it is flawless and that it doesn't bomb. :/
Flags: needinfo?(andrea) → needinfo?(jcollings)
(Assignee)

Comment 75

5 years ago
We are all good - Pete gave his approval :)

As for testing - we can try testing on GA but maybe it'd be better to test on the beta channel?
(Assignee)

Comment 76

5 years ago
Hi Brian, 

Do you mind updating the latest code in your link: https://brianloveswords.github.io/webmaker-firefox-snippet/ so I can show stakeholders what's coming up?

In addition, please make sure there's a period at the end of the word "further" (I already changed it in the code on the snippet service).

Let me know if that's possible, thanks!
Flags: needinfo?(brian)
(Assignee)

Comment 77

5 years ago
(In reply to Jean Collings from comment #76)
> Hi Brian, 
> 
> Do you mind updating the latest code in your link:
> https://brianloveswords.github.io/webmaker-firefox-snippet/ so I can show
> stakeholders what's coming up?
> 
> In addition, please make sure there's a period at the end of the word
> "further" (I already changed it in the code on the snippet service).
> 
> Let me know if that's possible, thanks!

Hi Brian, just following up on this! Thanks.
Hey Jean, sorry for the late reply – I'm on PTO this week, but since I already made the mistake of checking email I might as well make those fixes :)

I added the period after the "further", are there any other differences that aren't reflected? The build that's up now *should* be totally up to date, let me know if something looks awry.
(Assignee)

Comment 79

5 years ago
Thanks Brian!!!

Mkelly - Brian has tested this and it looks ready to go. But I wanted to double check to see if this still needs to go through review or QA? Let me know, thanks!
Flags: needinfo?(mkelly)
(In reply to Brian Brennan [:brianloveswords] from comment #78)
> Hey Jean, sorry for the late reply – I'm on PTO this week, but since I
> already made the mistake of checking email I might as well make those fixes
> :)
> 
> I added the period after the "further", are there any other differences that
> aren't reflected? The build that's up now *should* be totally up to date,
> let me know if something looks awry.

Brian thanks SO much for the PTO work on this!
(In reply to Jean Collings from comment #79)
> Thanks Brian!!!
> 
> Mkelly - Brian has tested this and it looks ready to go. But I wanted to
> double check to see if this still needs to go through review or QA? Let me
> know, thanks!

Brian's self-QA work is good enough for me. Go for it!

(And of course let me know if any action is required from me :D)
Flags: needinfo?(mkelly)
I'm getting a "server not found" when I try to access the snippet at Brian's link:
https://brianloveswords.github.io/webmaker-firefox-snippet/

I want to make sure I have the correct link to share this on the Monday Project call.
Oh strange – that link works just fine for me. Maybe it was a temporary blip on github's end?
Flags: needinfo?(brian)
yup must have been a blip, working fine now. 

FYI Jean had to disable the interactive snippet because it was somehow affecting layouts of all other snippets.
(Assignee)

Comment 85

5 years ago
Hey Brian,

I think as part of the testing, we need to test the "hack the snippet" alongside with other snippets to make sure it doesn't break any other snippets. 

Please use this link: https://github.com/Osmose/snippet-switcher and/or reach out to Mkelly for further clarifications. 

Once we complete that, we'll push this on Nightly/Aurora channels to make sure nothing breaks.
Flags: needinfo?(brianloveswords)
Flags: needinfo?(brian)
Ack, sorry it somehow messed up the other snippets! I tested it across browsers but I tested it in isolation, I didn't know how the snippets would interact with each other. I'll reach out to mkelly and figure out what's going on.
Flags: needinfo?(brian)
Created attachment 8475155 [details]
snippet, CSS fix

This adds a new parent class, `webmaker-hackable-snippet` and attaches all our styles to descendents of that instead of simply `.snippet` to avoid messing with the other snippets that get loaded in.
Attachment #8464285 - Attachment is obsolete: true
Flags: needinfo?(brianloveswords)
Okay, I tested the original snippet with the snippet-switcher and was able to reproduce the problem – the text was overlapping the icon. I made some CSS adjustments and retested and it looks like the problem is fixed (https://i.cloudup.com/u75oKte63B-3000x3000.png, screenshot of another snippet loaded).
(Assignee)

Comment 89

5 years ago
(In reply to Brian Brennan [:brianloveswords] from comment #88)
> Okay, I tested the original snippet with the snippet-switcher and was able
> to reproduce the problem – the text was overlapping the icon. I made some
> CSS adjustments and retested and it looks like the problem is fixed
> (https://i.cloudup.com/u75oKte63B-3000x3000.png, screenshot of another
> snippet loaded).

Thanks so much Brian, so sorry you're doing this while you're on PTO! So does that mean the attachment in comment 87 is good to go? Let me know and I'll push it in the Nightly or Aurora channel just to double check nothing is broken. Thanks again!
Comment on attachment 8475155 [details]
snippet, CSS fix

Late request that any link to https://welcome.webmaker.org be updated to https://welcome.webmaker.org/signup/learners/
Created attachment 8476230 [details]
snippet, updated link

@aki – link fixed!
Attachment #8475155 - Attachment is obsolete: true
(Assignee)

Updated

5 years ago
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
See Also: → bug 1067324
(Assignee)

Updated

3 years ago
Flags: needinfo?(jcollings)
You need to log in before you can comment on or make changes to this bug.