Onboarding
Closes #2270 (closed) Closes #2262 (closed) Closes #2342 (closed)
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:Homepage121119betweenbaseandform. - 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
changed the description
Developer@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
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
Toggle commit listadded 56 commits
-
4fdfdb28...ac8ca735 - 54 commits from branch
master - ed4d6317 - (feat): updated tooltips
- c084dec4 - Merge remote-tracking branch 'upstream/master' into feat/onboarding
-
4fdfdb28...ac8ca735 - 54 commits from branch
added 1 commit
- 2b75b647 - (fix): homepage should redirect to onboarding
unmarked as a Work In Progress
added scoped label and automatically removed label
changed the description
added scoped label and automatically removed label
![Mark Harding](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38"><rect fill-opacity="0"/></svg>)
Resolved by Marcelo Rivera- Owner
Is this slight yellow border supposed to be here?
- Owner
I'm still finding lots of issues. We need to make sure we're really happy with what we're doing here.
Edited by Mark Harding - Owner
Should we not be using font-smoothing/text-rendering tags to improve legibility?
- Owner
There is a line on the topbar here and it doesn't fit in with the homepage
added scoped label and automatically removed label
- Owner
Homepage Pro Marketing 
See the difference between these two screenshots. Homepage should look like pro. Are we not using the same css classes?
Edited by Mark Harding - Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Developer
@markeharding solved all those issues
Updated topbar margins
it looks like this if you disable the
register_pagesfeature 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
Toggle commit listadded 2 commits
- Resolved by Marcelo Rivera
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
Toggle commit listchanged the description
- Owner
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
- Developer
just pushed a fix for both issues
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Brian Hatchet
- Developer
fixed!
changed the description
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
changed the description
added 2 commits
added 2 commits
resolved all threads
added 1 commit
- 42585598 - (fix): disable old onboarding service if the new onboarding feature is enabled
added scoped label and automatically removed label
added scoped label and automatically removed label
- Developer
Functionality
- The review site was giving me a 404 so I only tested locally... Maybe that has something to do with the issues below
- 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.
Edited by Olivia Madrid - Developer
At
/tokens, the spacing between the two links was collapsed
- Developer
- "revolution" should be capitalized
- "login" should be capitalized
- the "login" link should be the same font weight 400 as the "already have an account?"
- Developer
- 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
- Developer
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
- Developer
I think the form padding is too cramped when you get below 760px width
- Developer
Also the padding at the bottom of the form is bigger in the mockup
(it's especially cramped on mobile)
- Developer
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?)
Edited by Olivia Madrid - Developer
form input labels are too dark and don't have enough padding between label and input
- Developer
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
- Developer
This is a known bug, but I haven't been able to reproduce it except once. You can see here that the modal has a route blacklist: https://gitlab.com/minds/front/blob/master/src/app/modules/modals/signup/signup-on-scroll.ts#L71-74 , so it shouldn't be appearing
- Developer
I don't get it every time but have had it appear at least 10 times in the past couple of days... I wonder if we need it at all anymore, or if we can do a check so we only show it on mobile? @markeharding @michaelfbradley thoughts?
- Developer
active form input outline should be 1px and $m-blue, as per https://projects.invisionapp.com/share/KWU1X9IEB2U#/screens/390489084
- Developer
it detracts from this beautiful popover when the checkmark appears and changes the line height
- Developer
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
- Developer
- 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
Edited by Olivia Madrid - Developer
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?
- Developer
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?)
Edited by Olivia Madrid - Developer
Validation popover should be able to overflow. On mobile it gets cut off
- Developer
- Doesn't look like any of these font weights match the mockups
- Also some padding issues here
- The hand emoji should be yellow
- Developer
This link should be cursor=pointer
- DeveloperResolved by Olivia Madrid
Missing graphic of little people walking around
- Last reply by Bill Ottman
- Developer
- "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
- Developer
"Continue" should be heavier font weight than "Skip"
- Developer
- You should be able to click anywhere inside this box to select/deselect (currently only works if you click on the text. Unselected boxes should have transparent borders so they don't move when selected
- Developer
- "optional" should be italic
- birthday select styles dont' match mockup
- "Mobile Phone Number" input label padding is smaller than the other fields
- birthday "Optional" should be inline with input label
- Month should expand to fit the entire month if there's extra space
- Why is there a grey checkmark at the end of the mobile phone field?
- Location input text size/color/padding
- "i"s should be darker/bolder and same height as the field labels
Edited by Olivia Madrid - Developer
Tooltip text looks off vs. mockup
- Developer
I'm assuming this shouldn't happen on the live site... but still the font is so tiny
added 23 commits
- ab0ad58f - (fix): update topbar style throughout all marketing pages
- 6f7b1f87 - (fix): Revolution should be capitalized
- 3ed069d9 - (fix): checkbox styles
- ff881887 - (feat): hide auth buttons if on auth pages
- 970babee - (fix): topbar margins in mobile resolutions
- 487ab229 - (fix): styles for labels
- 60ab2f54 - (fix): input outline styles
- 51d95b01 - (fix): password popover styles
- 21e5bf5f - (fix): title and input colours
- 89389174 - (feat): inline errors
- 2a43a410 - (fix): username title should be bold
- 791b42ae - (fix): emoji should be yellow
- cbe49fdf - (fix): titles
- 5dcec32a - (fix): skip link's cursor should be a pointer
- b41f3eaa - (fix): "Profile Setup" should be bold
- 81dcdb56 - (fix): spacing in progressbar items
- 201ae9f1 - (fix): "select some hashtags..." should have less top margin
- c85c0489 - (fix): remove #
- 2174a30f - (fix): fonts on buttons
- c9908a73 - (fix): hashtag items
- 85f1cad0 - (fix): date dropdowns styles
- 0df9c772 - (fix): channel and group lists empty message
- 0b853f91 - (fix): several styling fixes
Toggle commit list- Last updated by Emiliano Balbuena
17 18 <h2 ngPreserveWhitespaces i18n> 19 Earn for your ideas 20 </h2> 21 22 <p class="m-marketing__description" i18n> 23 Free your mind and get paid for creating content, driving traffic and 24 referring friends. A place to have open conversations and bring people 25 together. 26 </p> 27 <p class="m-marketing__description" i18n> 28 Take back control of your social media. 29 </p> 30 31 <button 32 class="mf-button mf-button--alt m-homepage__joinButton m-homepage__joinButton--first" - Developer
Reminder - onboarding slides still not showing up after registration
- Developer
• can we have the username input autofocused so cursor is already there on load?
• links should both be $m-blue
• bottom link should be font-weight 400
• Input border should be red when the field is invalid
• Can we get the validation checks to run on blur so they don't appear while I'm typing it for the first time? (password check, username min. length)
• Validation errors should appear in the existing empty space below the input field so the other elements don't jump around when validation state changes
- Developer
email validation check is a lil' buggy
- Developer
Turns out emails without dots are valid: https://stackoverflow.com/questions/20573488/why-does-html5-form-validation-allow-emails-without-a-dot
- Developer
change font size of
m-popover .m-popover__wrapper .m-popover__content ul.m-popover__rules li::beforeto 21px to prevent glitchiness
- Developer
This link shouldn't change color on hover (unless all the links are going to behave the same way)
- Developer
- still think this padding gets too small too early
- still think password link should be moved to the bottom (and be font weight 400)
- shouldn't this page have something like "Don't have an account? Join Minds now" link?
Edited by Olivia Madrid - Developer
Fixed paddings. As for the rest, I'm actually following the design here: https://projects.invisionapp.com/d/main?origin=v7#/console/18532170/398184415/inspect
that said, I do believe it'd be better to have "forgot your password" below the inputs, an add something like "Don't have an account? Join Minds now" as a subtitle.
@michaelfbradley what are your thoughts on this?
- Developer
bottom needs more padding
- Developer
- Can we do the username validation check on blur? (i think there's an example in pro settings isDomainValid) and keep the error message in the same location as the other ones?
- Button should have disabled style applied
- Developer
I'm not sure that there's a way to do a performant query for username existence, as we have all the entities in the same table and it would require an
ALLOW FILTERINGclause. That's why I didn't add it to the form validation
- Developer
- Bulb not vertically centered and overflowing from white stripe
- White stripe is behaving strangely
- It would be nice if we could make enough space for the bulb in the left margin so that we didn't have to show the white stripe at all here... or have it fade in so it's not so jarring when it appears
- Developer
I'm hiding the topbar since we don't have anything to show besides the logo and I couldn't find a way not to make it look broken
- Developer
- Seems like there's still enough space to keep the whole "welcome to the minds community" message?
- "No thanks" should be centered and below the button
Edited by Olivia Madrid - Developer
The design specifies that title and that button order for mobile: https://projects.invisionapp.com/d/main?origin=v7#/console/18532170/392536389/inspect
- Developer
The button row should be left-aligned
- Developer
- letter spacing:1.5px
- font-size: 13px
- Developer
too much vertical padding inside boxes and not enough padding between them
- Developer
mockups don't display the top (or bottom) nav bars during onboarding. Should these not appear only after they've pressed "No thanks" or completed the steps?
Edited by Olivia Madrid - Developer
- Birthday month input should have a min width of ~130px or something so the entire word is always visible
- Birthday select arrows should be grey
- grey checkbox is still there next to mobile phone?
- Birthday selects should have same font size as the other fields
- (I'm ignoring the phone input because I have to make changes to that for wallet anyway)
- All of these inputs have box shadows on the mockup
- "i" should be darker and bolder
- more padding between label and input
- padding between each field should be same (needs more above Location)
- Developer
grey border should become blue when checked and white line too thick
- Developer
tooltip font size/spacing
- Developer
Colored border should replace the grey border and have rounded corners
- Developer
Welcome message too bold and privacy message not bold enough
added 21 commits
- 11c80468 - (fix): reloads on language change prevents redirection
- 250b32d8 - (fix): remove fixed height to minds-form-register
- 0d1cdb7d - (fix): autofocus on username field
- 1145f9ac - (fix): correct link colours
- 774977ba - (fix): properly handle form errors
- c6bf75dc - (fix): popover glitch
- 814dbf5c - (fix): login form padding
- 14b5dfb2 - (fix): bottom padding on mobile login form
- ea3bc4a8 - (fix): topbar margins
- 4888cb66 - (fix): layout margins
- 88cd1cd7 - (fix): button margins for onboarding notice
- ba7b61d2 - (fix): also show red outline on homepage form
- 1cf8ced3 - (fix): removed username validation for now
- 8ae0c522 - (fix): max-width to onboarding wrapper
- 6614021d - (fix): correctly justify action buttons in onboarding notice step
- 451ba750 - (fix): progressbar step name font style
- 681bdbc3 - (fix): hashtags margins and paddings
- 5ac6bc2a - (fix): hide sidebar, topbar and bottombar when in onboarding
- 7d1a341e - (fix): label spacing in form
- 886cc885 - (fix): checkbox border should be blue when checked
- e55fac14 - (fix): sizing and spacing between date dropdowns
Toggle commit listadded 21 commits
-
9da4ed23...7b93f3f1 - 20 commits from branch
master - 93552d17 - Merge remote-tracking branch 'upstream/master' into feat/onboarding
-
9da4ed23...7b93f3f1 - 20 commits from branch
approved this merge request
added 1 commit
- e3d1bb5f - (fix): redirect to onboarding after registering if necessary
approved this merge request
- Developer
OMG, that's such a big improvement over the existing system. Great work team!
approved this merge request
approved this merge request
- Owner
Can not merge because it says its dependent on !623 (closed)
- Developer
Just removed the old dependency, @markeharding
mentioned in commit 7bf29175
merged
![:speech_balloon:](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><rect fill-opacity="0"/></svg> ":speech_balloon:"){kind=small}
