Homepage redesign
closes https://gitlab.com/minds/ux/issues/2 closes #2112 closes #2313
Testing
- logged out, go to the homepage. There's a 50/50 chance that you will either see a mobile phone on the right, or the register form. You can change it manually by modifying the experiment key in the local storage from 'base' to 'form' and vice-versa.
- everything should look like in Michael's designs, for mobile, tablets and desktop.
If you're on the homepage version with the mobile phone:
- "Join Minds Now" buttons should redirect to
/onboarding
where you'll only see the registration form. - Registering should go to the next step for onboarding
- Skipping this should redirect you to homepage
If you're on the homepage version with the register form:
- Registering should redirect to the first step of the onboarding
- Skipping it should redirect to newsfeed
Testing the onboarding steps TBD
depends on engine!395
added scoped label
changed the description
added 7 commits
- 4c3d6e23 - (feat): renamed HomepageComponent to HomepageV1Component
- 5be586b4 - (fix): no background colour for the form
- 8484f94e - (feat): responsive design for register form and top-left corner decoration
- 867ec072 - (fix): several styling fixes for mobile resolution
- 2afc5b4f - (fix): app buttons
- 11be027c - (feat): added m-grid__column__skip-#{$i} for desktop and mobile
- 507c3221 - (fix): quotation and links styling fixes
Toggle commit listadded 74 commits
-
507c3221...35070b4f - 73 commits from branch
master
- cc521451 - Merge remote-tracking branch 'upstream/master' into feat/homepage-redesign
-
507c3221...35070b4f - 73 commits from branch
added 1 commit
- bd99718e - (fix): added images that got deleted while merging master
mentioned in merge request engine!395
unmarked as a Work In Progress
changed title from design to design
changed the description
added scoped label
marked as a Work In Progress
added 2 commits
added 11 commits
-
dec3617e...a0d1737e - 10 commits from branch
master
- 57e73e13 - Merge remote-tracking branch 'upstream/master' into feat/homepage-redesign
-
dec3617e...a0d1737e - 10 commits from branch
changed the description
added 17 commits
-
18ccfa82...32c47ab2 - 13 commits from branch
master
- 76833369 - (feat): remove last section and correct items in "our principles"
- fb30ca6f - (feat): add join button
- dbe902ab - (fix): tringle thingy
- 011c75d7 - Merge remote-tracking branch 'upstream/master' into feat/homepage-redesign
Toggle commit list-
18ccfa82...32c47ab2 - 13 commits from branch
added 1 commit
- 3607b826 - (fix): "Join Minds Now" on the bottom should only appear for base experiment
unmarked as a Work In Progress
- Developer
Link? ;)
- Owner
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Mark Harding
- Resolved by Marcelo Rivera
- Resolved by Mark Harding
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- Resolved by Marcelo Rivera
- OwnerResolved by Marcelo Rivera
@michaelfbradley Why are we using a different green on the homepage to elsewhere?
- Last reply by Mark Harding
- Owner
@eiennohi there looks to be lots of discrepancies between implementation and mockup. Also the AB testing does not appear to be working at all. Please revert those changes.
added scoped label and automatically removed label
added 1 commit
- 09e8059c - (fix): reverted lint on tasks/extract.i18n.xlf.ts
added 1 commit
- c8d26f1c - (fix): don't use document for accessing the topbar
- Owner
The topbar is not consistent with the mockups either and appears unfinished. . Also the margins of the bulb and the signups buttons appear to be off.
Edited by Mark Harding - Owner
I am unable to get the A/B testing platform to work without a manual override of the local storage. Does it work for you @eiennohi ?
There is a major discrepancy between this form and the one in mockup. These need to be pixel perfect.
Edited by Mark Harding - Owner
added scoped label and automatically removed label
changed the description
assigned to @eiennohi
assigned to @michaelfbradley
- Developer
@michaelfbradley please, provide your feedback here.
- Developer
Here are some general notes relating to the larger, desktop view of the homepage (with phone graphic).
See attached design for reference.
- 1 - On wider screens, the above yellow shape should continue to grow with the page
- 2 - The light blue/purple shape should also grow so its full width of the viewport.
- 3 - Remove 1px spacing at top of yellow triangle
- 4 - Header should be relatively positioned. i.e. it should scroll with the page.
- 5 - The size and styling of the phone graphic isn't quite right. See notes.
- 6 - text sizing and spacing is incorrect.
- 7 - The text styling of the 'Wired' quote doesn't match the designs correctly.
cc @eiennohi
Note: Consider using Pixel Perfect (https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi) or something similar to overlay original designs with your browser. Great way to catch little issues like this.
I'll do another review now for the mobile (small) screen.
I will need to provide you with a design for medium screens. Currently we are going from large to small, but ideally this should be large -> medium -> small.
- Developer
See below notes and attached images review the mobile responsive view of the new homepage.
- 1 - Remove footer/navigation. This shouldn't be visible on the homepage.
- 2 - Styling and positioning issues related to the iPhone image.
- 3 - Font size of 'Join Minds Now' button should be modified to match designs.
- 4 - Spacing between the Download App icons should be reduced slightly
- 5 - Text styling at top of page needs correcting
- 6 - the positioning and colouring of the links in the header should be modified to match the designs.
- 7 - The 'Wired' quote text needs to be styled accordingly.
- 8 - Spacing under the wired quote to be reduced to match designs.
- 9 - reduce spacing - see attached image for further context
- 10 - 'Our principals' text styling and width needs to be addressed.
- 11 - 'Take Back Control' call to action at the bottom of the page needs addressing.
- 12 - Minds logo should be brought to the top if the footer.
cc @eiennohi
Edited by Michael Bradley - Developer
-
Can we possibly introduce a
min-width
of320px
to the page container, so we avoid the page getting necessarily squashed like this.
cc @eiennohi
-
Can we possibly introduce a
- Developer
Is there a way I can access the other variation of the homepage, the one with the signup form on the page itself?
- Developer
@eiennohi - I've added a new screen for medium sized screen
Responsive layout for medium sized pages -> https://invis.io/KWU1X9IEB2U#/396882909_Home_Page_-B-_Medium