Closes #2270 Closes #2262 Closes #2342

Testing

Homepage

• logged off, go to http://localhost, there're two variants that can appear in the homepage. One's with a registration form and another has a mobile phone and "Join Minds Now" buttons
• to trigger the other variant, you can either try by entering through another browser/device, or change the localStorage key experiments:Homepage121119 between base and form.
• if you have the variant with the mobile phone, clicking on any "Join Minds Now" should redirect to /onboarding/registration, where the register form will appear. After successfully registering, you will be redirected to the next onboarding step.
• if you have the variant with the register form, after registering, you should go to the first onboarding step: /notice

Onboarding

• skip buttons should go to the next step, except for the last, which should redirect to the newsfeed
• In hashtags step, it should only allow to continue if you've selected at least 3
• In the channel info step, it should allow you to set and verify your mobile phone (this may require some tweaking in the review sites)
• In the recommended groups and channels steps (which is basically the top feed filtered by your hashtags), you should see channels and groups which you can subscribe to (may require tweaking in review sites)

Feature Flags

'homepage-december-2019' => true,
'onboarding-december-2019' => true,
'register_pages-december-2019' => true,

changed milestone to %Onboarding #rollout

added scoped labels

added 1 commit

• 7dd2814c - (feat): populate channels and groups lists using top feed

Compare with previous version

added 3 commits

• 37cca5b2 - (feat): e2e tests
• bc8df38a - (fix): groups list should query groups, not channels
• 2432f706 - (feat): added tests gor groups and channels

Compare with previous version

changed the description

@eiennohi please change this from WIP when it's ready

added 1 deleted label

added scoped label and automatically removed label

mentioned in merge request engine!423

added 1 commit

• 02d6dcd5 - (feat): add confirmation code

Compare with previous version

mentioned in merge request !623 (closed)

added 18 commits

• d6391a4b - (fix): remove 1px white line on top of body
• cf56948e - (fix): trapezoids and register form
• cfad1238 - (fix): re-aligned as featured in and quotation
• 4c7f1ac8 - (fix): dots behind mobile phone
• 7f9e690b - (fix): updated z-indexes to various things so they display as they should
• 55a0c42e - (fix): updated principles list
• 92a6332f - (fix): decreased margin
• 4b866996 - (fix): yellow trapezoid for mobile
• c0ccf2e9 - (fix): styled "take back control of your social media" on the bottom
• 52497d1a - (fix): mobile footer
• 35b9136d - (fix): min-width: 320px
• 2405cd24 - (fix): change responsive breakpoints
• a741a78c - (fix): hide join minds now in intermediate resolutions as it screws up the layout
• 3fd08895 - (fix): ::after trapezoid
• 07f6fdca - (feat): add background to topbar when scrolling
• 82fb8323 - (feat): don't show bottom navbar if we're in the homepage
• cfb0a02c - (fix): register form size and positioning
• 4fdfdb28 - Merge remote-tracking branch 'upstream/feat/homepage-redesign' into feat/onboarding

Compare with previous version

added 56 commits

• 4fdfdb28...ac8ca735 - 54 commits from branch master
• ed4d6317 - (feat): updated tooltips
• c084dec4 - Merge remote-tracking branch 'upstream/master' into feat/onboarding

Compare with previous version

added 1 commit

• 5043b526 - (feat): show errors in channel info step

Compare with previous version

added 1 commit

• c3a564ef - (feat): show errors in channel info step

Compare with previous version

added 1 commit

• 2b75b647 - (fix): homepage should redirect to onboarding

Compare with previous version

added 2 commits

• 1c4c6578 - (feat): added validations for the hashtags step
• 300ab9a1 - (fix): moved everything to homepage-v2 and onboarding-v2 and cleanup

Compare with previous version

unmarked as a Work In Progress

added scoped label and automatically removed label

changed the description

added scoped label and automatically removed label

added 1 commit

• 12051743 - (fix): spec tests

Compare with previous version

added 1 commit

• 071431f0 - (fix): updated phone image

Compare with previous version

Is this slight yellow border supposed to be here?

I'm still finding lots of issues. We need to make sure we're really happy with what we're doing here.

Should we not be using font-smoothing/text-rendering tags to improve legibility?

There is a line on the topbar here and it doesn't fit in with the homepage

added scoped label and automatically removed label

Homepage	Pro Marketing

See the difference between these two screenshots. Homepage should look like pro. Are we not using the same css classes?

@markeharding solved all those issues

Updated topbar margins

it looks like this if you disable the register_pages feature flag:

I'm updating helm in a bit. These are the new feature flags:

'homepage' => true,
'onboarding' => true,
'register_pages' => true,

About the yellow border on the left. It does look yellowish, but when you zoom in you can see it's not:

added 7 commits

• f172a664 - (feat): new registration and login views
• 82bf42e9 - (fix): separate homepage and onboarding in two different feature flags
• f3fa6754 - (fix): remove placeholders
• bd4061c9 - (feat): remove background when in login and register pages
• 65d96c40 - (fix): onboarding paths
• 6db8cf80 - (fix): remove topbar code from onboarding page
• be34f540 - (feat): added antialiasing

Compare with previous version

added 2 commits

• 5505c665 - (feat): added antialiasing
• 6c6618a7 - (fix): spec tests

Compare with previous version

added 1 commit

• ab3e3a32 - (fix): remove f

Compare with previous version

added 12 commits

• 7a73c292 - (feat): build date of birth picker to a new component
• 34bab8ca - (fix): remove unused variable
• 1633b11b - (fix): prefix component names
• 9b4e6ab2 - (fix): remove unused styles
• 3520438a - (fix): renamed HomepageContainerComponent selector name
• 1f183894 - (fix): new homepage doesnt have videos, so remove flags
• 4c725d7e - (fix): rename focus and blur event handlers
• 55c0aaab - (fix): add return types to popover component's methods
• 16188829 - (fix): renamed m-popover--validation to m-popover
• 4e43c7fd - (fix): replaced m-join with old subscribe/join buttons
• d8d94349 - (fix): add waving hand emoji asset
• bbddf0a1 - (chore): code cleanup

Compare with previous version

added 1 commit

• fdbe2cda - (chore): code cleanup

Compare with previous version

added 1 commit

• 607dc38f - (fix): update e2e tests

Compare with previous version

changed the description

Currently having a big issue with navigation when logging in. .

Also I am getting onboarding every login which shouldn't happen.

mentioned in issue #2286

added 2 commits

• b4142ffc - (fix): remove custom topbar styling when leaving login and register
• c3fb90ae - (feat): only show onboarding once

Compare with previous version

just pushed a fix for both issues

fixed!

changed the description

added 2 commits

• ab8843b6 - (feat): remove HomepageV2Module from root module
• c068e0d4 - (fix): change feature flags names

Compare with previous version

changed the description

added 2 commits

• a975f240 - (fix): register form doesn't fit in mobile
• 08ab9bd7 - (fix): e2e tests

Compare with previous version

added 6 commits

• 6d4107dd - (fix): margins
• 3aca5840 - (fix): description right padding
• 5239d1cf - (fix): titles sizes
• b4b76801 - (fix): footer links alignment
• 7526a204 - (fix): Download Whitepaper size
• 5bb23e12 - (fix): footer links layout

Compare with previous version

added 2 commits

• b99414cb - (fix): onboarding notice stylings
• 154d09e3 - (fix): margins around quotation

Compare with previous version

added 3 commits

• f7a0c147 - (fix): merge request image and gray tick
• 30294588 - (fix): spacings for the tail section
• 5c822e40 - (fix): font sizes

Compare with previous version

added 2 commits

• 77a37780 - (fix): several styling fixes to onboarding
• 8f06abbe - (feat): move phone verification logic to a new component

Compare with previous version

resolved all threads

added 1 commit

• 42585598 - (fix): disable old onboarding service if the new onboarding feature is enabled

Compare with previous version

added 1 commit

• 1e3a9cff - (fix): hashtags colour and font-weight

Compare with previous version

added 1 commit

• 606d9dd7 - (fix): highlight current section

Compare with previous version

added 1 commit

• 0b8c40da - (fix): highlight current section

Compare with previous version

assigned to @omadrid

added scoped label and automatically removed label

added scoped label and automatically removed label

@eiennohi

Functionality

• When I finished registration, no onboarding slides appeared. Tested a few times. Could only get to onboarding if I manually went to /onboarding
• nginx forbade me from going to minds.com/ ... idk what's going on there??
• I'm getting a few "GET is not supported for this endpoint" console errors on blur of username input
• Clicking "skip" on the hashtags step brought me to step 4, not step 2
• Local storage never had a "experiments:Homepage121119" key so I could only see one variant. Maybe I was doing something wrong?

Style

Looks great!! Love the resizing of the crazy shapes and the way the password validation popup appears :)

Please see comments below for observations and opinions about styles... I wasn't checking for pixel perfection but just taking quick looks at the general feeling of spacing/balance/colors vs. mockups.

At /tokens, the spacing between the two links was collapsed

• "revolution" should be capitalized
• "login" should be capitalized
• the "login" link should be the same font weight 400 as the "already have an account?"

• checkbox borders too thick
• link sould be same font weight 400 as label
• I think the button should go to a new line instead of wrapping the checkbox text when the screen is narrow.
• The checkbox label should have padding between itself and the button If you're not going to add the button to a new line, vertical alignment with label should probs be top instead of center

According to https://projects.invisionapp.com/share/KWU1X9IEB2U#/screens/390489084 , selected checkboxes should have blue fill:

I made one for Pro Settings if you want to copy it... though it might look weird next to the teal button. idk

I think the form padding is too cramped when you get below 760px width

Also the padding at the bottom of the form is bigger in the mockup

(it's especially cramped on mobile)

Shouldn't these links be hidden when you're on the login/register pages?

---

The items in the top bar should have equal padding on top and bottom when the white strip appears

(vertical skew is more extreme on mobile... also should the white be there at all when you're scrolled to the top of the page?)

form input labels are too dark and don't have enough padding between label and input

I scrolled a bit on the register/login pages and the devil's popup appeared... doesn't seem user friendly considering I'm already registering

active form input outline should be 1px and $m-blue, as per https://projects.invisionapp.com/share/KWU1X9IEB2U#/screens/390489084

it detracts from this beautiful popover when the checkmark appears and changes the line height

Screen_Recording_2020-01-02_at_7.30.19_PM

I can't find a mockup for this but I think the placement of "Forgot your Password?" gives it too much attention. Maybe it should be on a single line below the password input

• Font color of h3 and input should be lighter grey (currently default rgba(0, 0, 0, 0.87)
• Not enough spacing above the "username" field or between the form fields

Register form validation

• Seems like this message needs to be changed
• I think this is a bit too much padding for an error message
• I think that the button background color change from disabled->enabled is more confusing than helpful, because the validation rules are incomplete...for example, the button can become enabled even if you don't enter a real email address, if you haven't checked the checkbox, and if your passwords don't match.
• Probably too late for this, but it would be good if the form error messages were inline (as per https://projects.invisionapp.com/share/KWU1X9IEB2U#/screens/390489084), or at least could display multiple messages at once (e.g. when I left the checkbox unchecked and put in a random string as an email address, I only got one error message even though there were two things wrong with my inputs.
• You shouldn't have to scroll to see the error message after you click the "join minds now" button. Maybe it should be at the bottom of the form instead of the top?

The bottom nav bar should be hidden here, as all 3 icons lead back to the current page. (Also top nav login links are redundant and should be hidden too?)

Validation popover should be able to overflow. On mobile it gets cut off

• Doesn't look like any of these font weights match the mockups
• Also some padding issues here
• The hand emoji should be yellow

This link should be cursor=pointer

Missing graphic of little people walking around

page background should be grey all the way to the bottom of the page

• "Profile" font weight should be higher
• Step titles (hashtags/info/etc..) seem to have different letter spacing in mockups
• more space needed above the dots
• less space above "select some hashtags..."
• there aren't any "#"s in the mockup Step 4 shouldn't be allowed to overflow

"Continue" should be heavier font weight than "Skip"