Addons-frontend: Add a link to the extension workshop from the main nav

[muffinresearch]

Add an explicit link for the extension workshop to the header nav for both logged-in and logged out states.

Placement and exact copy TBC by UX.

In the discussion about this, we talked about having a link that was clearer about the intent e.g. copy like "Learn how to create an add-on" or similar.

Placements

UX to confirm but a likely location is up near the current "Developer Hub" link. This position is present for both logged-in and logged out.

We might also want to add it here:

[caitmuenster]

@pwalm, do you have a few minutes this week to help out with this?

As @muffinresearch mentioned, we'd like to change the "Developer Hub" link to go to Extension Workshop, and change the link copy to something more descriptive.

I'm also a +1 to add a link to EW from the drop-down menu.

[willdurand]

As @muffinresearch mentioned, we'd like to change the "Developer Hub" link to go to Extension Workshop, and change the link copy to something more descriptive.

I believe we want to keep the Developer Hub link and add the Extension Workshop next to it, not replace the existing link.

[muffinresearch]

As @muffinresearch mentioned, we'd like to change the "Developer Hub" link to go to Extension Workshop, and change the link copy to something more descriptive.

I believe we want to keep the Developer Hub link and add the Extension Workshop next to it, not replace the existing link.

Yep, I think that's preferable, we'd still want a visible link to the developer hub (although we could consider renaming that link too). Note the eventual plan will be that /developers/ becomes only a logged-in view so hitting that would start the login flow at that point.

It's also worth noting right now, the developer hub link disappears on small viewports, the extension workshop link probably shouldn't.

[muffinresearch]

Downgrading this for now since we're depending on UX.

[caitmuenster]

Since @pwalm's plate is full this week, I'll take first pass at this.

1. Add link near "Developer Hub" on top of page:
2. Link text: "Build extensions for Firefox"
3. Link target: https://extensionworkshop.com/
4. Clicking on the link should open a new tab (like what happens when you click on Developer Hub)

5. Link will show on smaller viewports

6. Add link above "Developer Hub" on footer

7. Link text: "Extension Workshop"
8. Link target: https://extensionworkshop.com/
9. Clicking on link won't open a new tab

I'm not sure if we want to add a link to the drop-down menu.

/ cc @jvillalobos & @pwalm

[jvillalobos]

I think the URLs should be, respectively:

1. https://extensionworkshop.com/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=header-link
2. https://extensionworkshop.com/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=footer-link

The header link text is a bit long, IMO, maybe @MeridelW has ideas for that.

I don't think the drop-down needs another one of those.

[MeridelW]

Disclaimer: I know I am late to the discussion on this and decisions have already been made. Here are my thoughts!

The intention was for the Extension Workshop to replace the landing page of the Developer Hub. It is a pretty confusing experience to have the Developer Hub landing page continue to co-exist next to the Workshop on AMO. And, it makes labeling these links difficult since they essentially serve similar purposes and have duplicative content.

If you aren't signed into the Developer Hub, you are taken to the developer hub landing page to sign in. Why not just send them to Extension Workshop and they sign in there, instead?

I understand that the reason we want to keep the Dev Hub landing page is so we don't throw off current developers and their workflow. To that end, I'd recommend the following:
-Communicate to developers (via email or newsletter) about the change, and add temporary message on AMO itself and on Extension Workshop landing page alerting devs to the transition.
-Replace Developer Hub link on AMO with Extension Workshop link.

If we can't do any of that, and we are stuck with linking to both, we do need to be more descriptive so it's clear what the Workshop provides vs. Developer Hub. So, some options:

Build Extensions
Build and Port Extensions
Build Your First Extension
Get Started (This would need to be a drop down from Developer Hub)

[email protected] - what do you think?

[pwalm]

Cosigned ⬆️

[mconca]

The original intent was to replace the logged-out view of the DevHub (/developers/) with the Extension Workshop landing page, and not change anything else. For technical reasons, this isn't possible.

I would like UX/UR to help guide us on what would be the best way to 1) guide new, interested developers to EW, and 2) accommodate existing developers on AMO.

[caitmuenster]

After the conversation in today's Add-ons Cross-Functional meeting, it sounds like we are going to move forward with two things:

1. Add "Extension Workshop" to the left of "Developer Hub" on the header, and link to https://extensionworkshop.com (@jvillalobos to provide the UTM parameter). Clicking on this link should open a new tab.

1. Add Extension Workshop to the footer between Blog and Developer Hub.

[caitmuenster]

We are hoping to land this in the next 1 - 2 weeks. @championshuttler, @suhailsinghbains, or @xu3u4, do you have any interest in picking this up?

Note: anyone is welcome to work on this! If this is your first contribution, please refer to https://wiki.mozilla.org/Add-ons/Contribute/Code on how to get started.

[championshuttler]

@caitmuenster Sure, Let me try to take a look , in the meantime if someone else is able to raise PR, feel free to do that :)

[jvillalobos]

the URLs should be, respectively:

1. https://extensionworkshop.com/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=header-link
2. https://extensionworkshop.com/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=footer-link

First one for the header, second one for the footer.

[willdurand]

Given that we don't have a lot of space on small screens, should we also hide the link to this new website? (dev hub link is hidden).

[jvillalobos]

Yes, I think it's okay to hide the header link on narrow screens. It will still be present in the footer, along with the Dev Hub link.

[RS357]

Hey all! I am new to open source - this would be the fourth bug I have worked on. Could you assign this to me please? This would be the most advanced bug I have worked on so far.

Also - is there a strict two-week time limit on patching it? Cheers :)

[willdurand]

@RizwanSyed357 hey, sorry. I think this issue has been taken already :/

[RS357]

Oh, I see. Thanks. It is still listed as 'open' and labelled as unassigned.

[willdurand]

Yes. It's open until it's closed by a patch that is merged into the main branch. And, it is unassigned because only Mozilla employees can be assigned on issues..

[ioanarusiczki]

@muffinresearch @caitmuenster @willdurand @jvillalobos
This was verified on AMO dev - FF65(Win10 & Android 8.0)
EW is available on AMO dev's homepage as mentioned here by Caitlin.
On small devices it will be available only in the Footer of the page and once clicked it won't open in a new tab.
The link when clicked from the header is https://extensionworkshop.com/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=header-link
The link when clicked from the footer is https://extensionworkshop.com/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=footer-link

Other observations:

1. Results on Win 10 for the Register/Login buttons
   The first Register/Login button on the right top of the page
   Button redirects to fxa page and it requires credentials -> Once a login or register is made -> user is redirected to AMO prod Manage my submission page
   The second Register/Login button from the Menu Bar will redirect to AMO prod’s Dev Hub logged out view page. If the user logged in using the first button, the landing page is the Dev Hub logged in view.
   In both cases, when going back to EW page, the state of these buttons remain the logged out view , there is no indication that user is already signed in dev hub.

On Android

• the first Register/Login button from the header of the page is not available. Only the one next to the drop down menu is displayed after scrolling down and once clicked it redirects to AMO prod Dev Hub logged out view page. Signing in will then display the logged in view. Going back on EW page the button’s state is Register or Log in.

"Get Started" button from "Build Across Browsers" section requires a login on AMO prod and then the landing page is AMO prod - Manage my submissions page.

1. I took a look at the entire page.
   Does the UX have a document explaining how the EW should be working right now?
2. On both platforms the Menu Bar available to choose a section of the page will direct to them correctly.
3. Clicking the links from the page, they all seem to be taking you on a landing page, I can’t tell if it’s correct though.
4. I did notice the video’s content from How to Build An Extension is ending at min 5:00 and there’s 1:26 min left without any content. Also, in the "Attract Users with Content and Design" section, the video will start with a delay. The “Watch the video” blue link - needs a couple of seconds too before starting.
5. On Desktop the Sign up for Extensions Developer Newsletter won’t work. I did not have this problem on Android.
6. On Desktop -> A better UX experience would be if “Jump to” text would be available next to “✓” (the way Android displays it now).

[ioanarusiczki]

@caitmuenster @muffinresearch @pwalm @mconca

Thanks @jvillalobos for answering here https://github.com/mozilla/addons-server/issues/10909

I filed all the followup issues. From my point of view the first 3 from the list below are more important.
https://github.com/mozilla/extension-workshop/issues/138, https://github.com/mozilla/extension-workshop/issues/132, https://github.com/mozilla/extension-workshop/issues/139, https://github.com/mozilla/extension-workshop/issues/134, https://github.com/mozilla/extension-workshop/issues/135,
https://github.com/mozilla/extension-workshop/issues/137

Please note that the EW page is available right now on both testing servers AMO dev and AMO stage. If the push in production is planned somewhere around April 15 it should only be available on AMO dev right now.