Redesign /accounts page for Trailhead

[ejregithub]

Description

Redesign the /accounts page with content for Trailhead launch on June 4

Master project doc

Copy doc

---

💛 Success Criteria 💛

• UI designs are received by 5/7
• Interaction designs per user state are received by 5/7
• Copy is received by 5/10 (was 5/15)
• Strings are extracted by 5/21 (earlier better)

❗ Risks ❗

• This is an example of a risk. Use a checklist!
• This is an example of a risk.

Tasks

• Code page w. delivered copy and design assets
• Analytics (@sghoseWI) review

[dzingeek]

@craigcook here is the link to the latest sketch file

you will find /accounts in the far left under pages (see img for reference)

I will get you an updated hero image for users who are logged in on monday 05.13.19

[dzingeek]

@craigcook here is the latest copy doc. tweaks might happen early monday 05.13.19

[claychaffin]

The copy doc is now final. Thanks.
https://docs.google.com/document/d/14yH7BAC2qN5LKq3FsZITJS21moCFQZGgstx-014Oeyw/edit?usp=sharing

[dzingeek]

@craigcook we are removing pocket at fb container from the section titled "Get technology that fights for you."

see image for reference

[dzingeek]

@craigcook SVG files for gradient noodles!!

fx account hero imgs.zip

[dzingeek]

@craigcook here is an updated noodle for the not logged in state. let me know if you have any issues with the svg or the box link.

https://mozilla.box.com/s/7t9jdenl8wmckjhgcp553737icjqcwuz

[ejregithub]

@dzingeek - can we get an image with the final copy, please? Copy (final/approved)

[dzingeek]

I can/will but I tend to think it's not necessary. Also, no one should use a design mockup as reference for final copy..they should always go to the source of truth which should be the copy doc.

[dzingeek]

@ejregithub that link is to the wrong copy doc. it's for /new and /thanks

[dzingeek]

@ejregithub ^

[ejregithub]

Awesome, thanks @dzingeek

[ejregithub]

@ejregithub that link is to the wrong copy doc. it's for /new and /thanks

Noted and replaced, thanks!

[ejregithub]

@craigcook is going to add a sign in link under the form in the new page, effectively fixing this ask:

https://bugzilla.mozilla.org/show_bug.cgi?id=1552819

[ejregithub]

@dzingeek - tagging you regarding the 'sign in' CTA ^^

[dzingeek]

Confirming that we should add "Already have an account? Sign In." text + cta under the "continue" button for users who already know/have an account.

[dzingeek]

final design mockups with the final copy

[hoosteeno]

This page can land in prod anytime after 10am PDT 20190529.

[justinkropp]

@craigcook The demo is so nice. Great work on this! I tested the page in Opera, Fx, Chrome, and Safari and everything's consistent. 👍

Just a one piece of design feedback: on smaller breakpoints the font-size of all the headlines gets reduced, except for the two sections at the bottom before the footer. This makes those two particular headlines feel quite large compared to the other sections:

Could you make the following headlines

Help us build a better Firefox for all.
Help us keep Big Tech in check.

the same font-size as

Get the knowledge to keep you safe.

on those smaller breakpoints?

On the smallest breakpoint, it might make more sense to also center the associated icons above the headlines as well.

Does that make sense?

[hoosteeno]

@craigcook the accounts form on this page needs to pass through upstream utm parameters, if they exist. @amychurchwell previously built this; if it's not clear how to set it up, she can consult.

[ejregithub]

Placing the blocked tag as the URL for the 'privacy promise' is not yet live, the content published - so we can't take this page live as intended (10 am PDT on 5/29)

[craigcook]

This page is now controlled by the switch firefox_accounts_trailhead to unblock it from merging or pushing to production. We'll flip that switch to activate the page when we've confirmed the blog post is live.

The blog post is being translated into German and French, but that can't begin until the original English is completed and approved (targeting end of business today, May 29). Given the short timeline there's a likelihood that translations won't be complete in time for the June 4 trailhead launch, so we're playing it safe and only linking to English for the initial page launch. We can update later to add the links to German and French when they're available.