enhance(signup): replace "Get MDN Plus" with "Sign up for free" #9357
Conversation
Also replaces "Upgrade to MDN Plus" with "Log in to MDN Plus".
There was a problem hiding this comment.
Two technical notes, otherwise UX ones which aren't blockers - though I feel quite strongly about them, "log in" should be reserved for clickable things (which log you in), I remember in my days working on Mozilla IAM us finding out users are incredibly prone to confusion in log in/sign up flows, and they need to be as straightforward as possible.
Co-authored-by: Leo McArdle <[email protected]>
The Playground banner already had this.
| @@ -6,7 +6,7 @@ import { FXA_SIGNIN_URL, KUMA_HOST } from "../../../env"; | |||
| import "./index.scss"; | |||
| import { useGleanClick } from "../../../telemetry/glean-context"; | |||
|
|
|||
| export default function SignInLink({ | |||
| export default function LogInLink({ | |||
There was a problem hiding this comment.
the className below should be updated to login-link as well
| const loginUrl = useLoginUrl(); | ||
|
|
||
| const href = toPlans ? plansUrl : loginUrl; | ||
| const label = toPlans ? "Upgrade Now" : "Sign up for free"; |
There was a problem hiding this comment.
The longer length of "Sign up for free" in the header causes weird behaviour just prior to the breakpoint:
There was a problem hiding this comment.
| @media screen and (min-width: $screen-md) and (max-width: ($screen-lg - 1)) { | ||
| > span { | ||
| /* Show text (in two lines) on the left, while "Log in" / "Sign up" are (in one line) on the right. */ | ||
| display: flex; | ||
| flex-direction: column; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: ($screen-lg - 1)) { | ||
| .auth-container { | ||
| /* Always keep "Log in" / "Sign up" (in one line) in bottom-right corner. */ | ||
| align-self: end; | ||
| flex-flow: row; | ||
| justify-content: flex-end; | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
|
|
||
| @media screen and (max-width: ($screen-md - 1)) { | ||
| /* Show text (in one line) above "Log in" / "Sign up" (in one line). */ | ||
| flex-direction: column; | ||
| gap: 0.5rem; | ||
| } | ||
| } |
There was a problem hiding this comment.
This is way too complex just to make the button wrap nicely on small screens.
There was a problem hiding this comment.
Summary
Problem
We don't make it very clear that signing up for MDN Plus is actually free (on the Core plan).
Solution
Replace the "Get MDN Plus" button (linking to the MDN Plus offer overview page) with a "Sign up for free" button (linking to the login/signup workflow).
Also extracts the login banner as
PlusLoginBannerand improves its responsiveness.Screenshots
Playground
Before
After
Updates
Before
After
AI Help
Before
After
Responsiveness
How did you test this change?
Ran
yarn && yarn dev(with rumba running) and visited the following URLs without being authenticated: