Page MenuHomePhabricator

Homepage: layout and UI details
Closed, ResolvedPublic

Description

This task is for working on the layout of the newcomer homepage, in terms of exactly where modules are placed and their sizes relative to each other.

This task is also for finalizing the UI of each module to match the mockups of those modules.

For the initial version, all users will get the same homepage layout. The mockup of this layout will be the main expression of its specifications.

Invision mockups of layout: https://wikimedia.invisionapp.com/share/KUQV2QDJ8A7#/354711053_NH-Homepage_Layout (in places where the mockups and the specifications on this task disagree, the specifications take precedent.)

Modules will vary in terms of these characteristics:

  • Size and shape.
  • Whether they have borders.
  • Whether they are white background, or have a different color background.
  • Whether they have drop shadows and the strength of the drop shadow.

Specifications:

  • Highest hierarchy module: Start module
    • Size: large (min-size 789px)
    • Border: Module is boxed
    • Bg color: white
    • Drop shadow: strong [box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.15);]
  • Secondary hierarchy: Help module (and all future sidebar modules)
    • Size: small (one third of highest hierarchy module)
    • Border: Module is boxed
    • Bg color: light grey
    • Drop shadow: light
  • Tertiary hierarchy: All modules position in main content area
    • Size: mid (half of highest hierarchy module)
    • Border: Module is boxed
    • Bg color: white
    • Drop shadow: light

Future: this is a list of capabilities that we will need for future versions of the homepage, listed here to facilitate planning.

  • Personalization: different configurations of the homepage should be displayed for different users. This means that:
    • Different modules should be shown and not shown for different users depending on their welcome survey responses and edit history.
    • Modules could be shown in different orderings on the page for different users.
    • Some modules may have a "larger" and "smaller" mode, which would depend on the user.
    • We should be able to A/B test these different configurations.
  • Homepage should be customizable or editable by the user, for instance to permanently dismiss a module, or to cause a module's filters to be sticky.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 499919 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage layout and styling

https://gerrit.wikimedia.org/r/499919

Change 500738 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: UI tweaks

https://gerrit.wikimedia.org/r/500738

Cntlsn added a comment.Apr 5 2019, 5:11 PM

Below are the most urgent UI fixes for readability.
Let's decide if and how to fix more UI cosmetics in chat/mail :)

Module subheader
font-size: 1em;
color: @colorGray2
line-height: 15px
text should be aligned left to the right side of the icon

Start module icons
width: 34px
height: 34px
icon color: @colorGray5

Start module username
font-family: Georgia
color: @colorGray1

Start module user data
color: @ colorGray7
font-size: 0.9 em
there should be an empty line in between the num of edit and the "You've had your account for X days"

Start module normal text
color: @colorGray2

Impact module normal text
color: @colorGray2

Impact module "Views since you edited (last 60 days):"
font-size: 0.9 em
color: @colorGray7

Impact module list item
hover on .growthexperiments-homepage-module-impact .impact-row should not make the number of pageviews bold

Help module subheader
should follow the same specs as the other modules' subheader, please see above

Help module ul
margin-bottom: 1em

Change 501822 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: More styling tweaks

https://gerrit.wikimedia.org/r/501822

Catrope added a comment.EditedApr 6 2019, 12:15 AM

The patch above addresses all of these things except for the subheader thing and the impact module text, because I'm confused about what you want there (see inline):

Below are the most urgent UI fixes for readability.
Let's decide if and how to fix more UI cosmetics in chat/mail :)
Module subheader
font-size: 1em;
color: @colorGray2
line-height: 15px

By this do you mean <h3> elements with the class growthexperiments-homepage-module-subheader, or do you mean the headers on the start module's submodules (which are <h2> elements with the class growthexperiments-homepage-module-header)? It wasn't fully clear to me, because the former already have font-size: 1em, and that font size looks too small for the latter, but the alignment thing below is about the latter.

text should be aligned left to the right side of the icon

I struggled with this a lot intially, but upon reflection I realized that I can use flexbox for this, so this is now fixed.

Start module icons
width: 34px
height: 34px
icon color: @colorGray5

Done. We can't set arbitrary icon colors, we only have green (constructive), red (destructive), pure white (inverted) or pure black (default). So I used the pure black icons that we were using before, and put opacity: 0.65 on top of it. Full black (#000000) at an opacity of 0.65 corresponds to #595959, and @colorGray5 is #54595d

Start module username
font-family: Georgia
color: @colorGray1

Done.

Start module user data
color: @ colorGray7
font-size: 0.9 em
there should be an empty line in between the num of edit and the "You've had your account for X days"

Done. I simulated an empty line by setting a top/bottom margin of 1em, let me know if that needs to be tweaked.

Start module normal text
color: @colorGray2
Impact module normal text
color: @colorGray2

These were technically subheaders, which is why they had a different color; fixed by changing the color of start module submodules' subheaders to @colorGray2.

Impact module "Views since you edited (last 60 days):"
font-size: 0.9 em
color: @colorGray7

Right now the text People are viewing the articles you edited! Views since you edited (last 60 days): is on one line and in one i18n message. Do you want me to split this into two lines, as shown in the mockup? Should the two lines be styled differently, or should they both be 0.9em and Gray7? (For now I've styled the combined line with 0.9em and Gray7.)

Impact module list item
hover on .growthexperiments-homepage-module-impact .impact-row should not make the number of pageviews bold

Done. This was the only hover effect, so with this having been deleted there are no hover effects left on the impact module list items. Is that intended, or did you intend for there to be a different hover effect? Should hovering the pageview number itself make it bold?

Help module subheader
should follow the same specs as the other modules' subheader, please see above

Not done yet because of questions above.

Help module ul
margin-bottom: 1em

Done.

Change 502347 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Split impact module subheader messages

https://gerrit.wikimedia.org/r/502347

Change 501822 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: More styling tweaks

https://gerrit.wikimedia.org/r/501822

Change 502347 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Split impact module subheader messages

https://gerrit.wikimedia.org/r/502347

Change 502898 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Don't make help module button bigger than the others

https://gerrit.wikimedia.org/r/502898

Change 502898 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Don't make help module button bigger than the others

https://gerrit.wikimedia.org/r/502898

Moving to Design Review with one comment:

  • In IE 11 the icons look different (Edge displays them fine)
IE11Edge

@Catrope Here are the final UI tweaks!

Page layout

  • #contentSub margins
.page-Special_Homepage #contentSub {
  margin: 1.4em 0 1.4em 0em;
}
  • content margins
.growthexperiments-homepage-group-main > .growthexperiments-homepage-module {
  margin: 1em 1em 1em 0;
}

.growthexperiments-homepage-module-impact, .growthexperiments-homepage-module-mentorship {
  width: calc(50% - 1.5em);
}

.growthexperiments-homepage-module-impact {
  margin-left: 1em;
}

.growthexperiments-homepage-group-sidebar > .growthexperiments-homepage-module {
  margin: 1em 0em 1em 1em;
}

All modules

  • module border color:
border-color: @colorGray12;
  • module divider line below title:
.growthexperiments-homepage-module h2.growthexperiments-homepage-module-header {
  border-color: @colorGray12;
}

Start module

  • vertical separator lines:
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module {
  border-color: @colorGray12;
  border-radius: 0;
}
  • copy fix: "You've had an account for X days" in place of "You've had your account for X days"
  • account created submodule, profile data text:
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-section-editcount, .growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-section-accountage {
  font-size 0.85em;
  letter-spacing: .02em;
}
  • primary buttons style:
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button

should instead be

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement > .oo-ui-buttonElement-button
  • is it possible to make the h2 icons smaller?
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon .oo-ui-iconElement {
  background-size: 18px;
}

Help module

  • horizontal divider line above button
.growthexperiments-homepage-module-help .growthexperiments-homepage-module-body {
  border-color: @colorGray12;
}
  • bulleted list
.growthexperiments-homepage-module-help .growthexperiments-homepage-module-body > ul li {
  line-height: 1.8em;
}

Impact module

  • h3
.growthexperiments-homepage-module h3.growthexperiments-homepage-module-subheader {
  padding-top: 0;
}
  • subtext
.growthexperiments-homepage-module-impact .growthexperiments-homepage-impact-subheader-subtext {
  font-size: 0.85em;
  letter-spacing: .02em;
}
  • can we have the article icon (only in the case of the article icon and not the article thumb) a little smaller?
.oo-ui-icon-article, .mw-ui-icon-article:before {
  background-size: 26px;
}
  • pageviews link padding right
.growthexperiments-homepage-module-impact .impact-row .pageviews {
  padding-right: 9px;
}
  • impact module footer margin top
.growthexperiments-homepage-module-footer {
  margin-top: 1.4em;
}

Mentorship module

  • mentor username vertical position
.growthexperiments-homepage-mentorship-userlink > a > span:last-of-type {
  vertical-align: middle;
}
  • mentor info text style
.growthexperiments-homepage-mentorship-mentorinfo {
  font-size: 0.85em;
  letter-spacing: .02em;
}
  • intro text margin bottom
.growthexperiments-homepage-mentorship-intro {
      margin: 0.5em 0 1.4em;
}

Moving to In Progress so that @Catrope can make the final UI changes.

@Cntlsn -- what do you think about @Etonkovidova's comment about IE11 icons?

Change 506013 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: UI tweaks per Alessandro at T218966#5130398

https://gerrit.wikimedia.org/r/506013

  • content margins
.growthexperiments-homepage-group-main > .growthexperiments-homepage-module {
  margin: 1em 1em 1em 0;
}
.growthexperiments-homepage-module-impact, .growthexperiments-homepage-module-mentorship {
  width: calc(50% - 1.5em);
}
.growthexperiments-homepage-module-impact {
  margin-left: 1em;
}
.growthexperiments-homepage-group-sidebar > .growthexperiments-homepage-module {
  margin: 1em 0em 1em 1em;
}

This would misalign the impact module and the start module, since the impact module would have margin-left: 0 but the start module would still have margin-left: 1em. Did you intend to do that? Or should the start module also have margin-left: 0?

All modules

  • module border color:
border-color: @colorGray12;

This was using @border-color-base, which seems like a standardized border color, but happy to change it (done).

Start module

  • vertical separator lines:
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module {
  border-color: @colorGray12;
  border-radius: 0;
}

Wow, good catch on the border-radius there, I didn't realize it was being set by a different rule.

  • copy fix: "You've had an account for X days" in place of "You've had your account for X days"

Done, but if you want translations to reflect this change you may have to ask @Trizek-WMF to ping the translators.

  • primary buttons style:
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button

should instead be

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement > .oo-ui-buttonElement-button

I've removed the "progressive" flag from all buttons on the home page (except inside the help panel), and I also removed the "primary" flag because it has no visual effect if "progressive" (or "destructive") isn't set.

  • is it possible to make the h2 icons smaller?
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon .oo-ui-iconElement {
  background-size: 18px;
}

It's possible, and I'll do it if you really want me to, but the icon SVGs are designed to be rendered at 20x20px, and rendering them at 18x18px makes them blurry. This doesn't seem to be an issue for the check mark icon, but you can see this on the book icon (in the tutorial submodule) for example.

Impact module

  • can we have the article icon (only in the case of the article icon and not the article thumb) a little smaller?
.oo-ui-icon-article, .mw-ui-icon-article:before {
  background-size: 26px;
}

Sure, we can do that. I'm going to use 26px for now, but that makes the icon a little blurry (though it's not too bad). The icon is designed for 20x20, so if you're OK with making it a little smaller still, using background-size: 20px would make it look crisper. (In the status quo it's also crisp, because 40x40 is a round multiple of 20x20.)

Also, since this layout is very similar to some existing controls (like the suggestions in the VE link inspector), I would recommend talking to Jess and/or Volker about whether this change should be made there too, and/or if we want to keep ours big for consistency.

Change 506013 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: UI tweaks per Alessandro at T218966#5130398

https://gerrit.wikimedia.org/r/506013

@Catrope

This would misalign the impact module and the start module, since the impact module would have margin-left: 0 but the start module would still have margin-left: 1em. Did you intend to do that? Or should the start module also have margin-left: 0?

Sorry I confused the impact module for the mentorship module. Then it should be:

.growthexperiments-homepage-group-main > .growthexperiments-homepage-module {
  margin: 1em 1em 1em 0;
}

.growthexperiments-homepage-module-impact, .growthexperiments-homepage-module-mentorship {
  width: calc(50% - 1.5em);
}

.growthexperiments-homepage-module-mentorship {
  margin-left: 1em;
}

.growthexperiments-homepage-group-sidebar > .growthexperiments-homepage-module {
  margin: 1em 0em 1em 1em;
}

Which means that all the modules have margin-left:0, and the mentorship module has margin-left:1em and the sidebar modules have margin-right:0
Makes sense?

  • copy fix: "You've had an account for X days" in place of "You've had your account for X days"

Done, but if you want translations to reflect this change you may have to ask @Trizek-WMF to ping the translators.

That's what we have in the specs, so I guess translators already translated from the correct source?

  • primary buttons style:
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button

should instead be

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement > .oo-ui-buttonElement-button

I've removed the "progressive" flag from all buttons on the home page (except inside the help panel), and I also removed the "primary" flag because it has no visual effect if "progressive" (or "destructive") isn't set.

I'm not sure about which class would do the job, but anyway the buttons in the start module should be this kind: https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonWidget-progressive
When the submodule is checkmarked then they should be this kind https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonWidget-normal

It's possible, and I'll do it if you really want me to, but the icon SVGs are designed to be rendered at 20x20px, and rendering them at 18x18px makes them blurry. This doesn't seem to be an issue for the check mark icon, but you can see this on the book icon (in the tutorial submodule) for example.

I don't see much of a difference on retina. But no worries, let's leave it as it is now.

Sure, we can do that. I'm going to use 26px for now, but that makes the icon a little blurry (though it's not too bad). The icon is designed for 20x20, so if you're OK with making it a little smaller still, using background-size: 20px would make it look crisper. (In the status quo it's also crisp, because 40x40 is a round multiple of 20x20.)

20px here would be fine, thanks!

Also, since this layout is very similar to some existing controls (like the suggestions in the VE link inspector), I would recommend talking to Jess and/or Volker about whether this change should be made there too, and/or if we want to keep ours big for consistency.

I will ask ;)

Change 506189 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: More UI tweaks

https://gerrit.wikimedia.org/r/506189

Which means that all the modules have margin-left:0, and the mentorship module has margin-left:1em and the sidebar modules have margin-right:0
Makes sense?

Turns out I did almost that, but I forgot to put the margin-left back on the mentorship module. Fixing that now.

  • copy fix: "You've had an account for X days" in place of "You've had your account for X days"

Done, but if you want translations to reflect this change you may have to ask @Trizek-WMF to ping the translators.

That's what we have in the specs, so I guess translators already translated from the correct source?

No, the source they translate from is the English strings that you see in the interface.

I'm not sure about which class would do the job, but anyway the buttons in the start module should be this kind: https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonWidget-progressive
When the submodule is checkmarked then they should be this kind https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonWidget-normal

OK, so it sounds like you want the buttons to be progressive (blue text, white background) for incomplete modules, and normal (black text, white background) for completed modules.

Sure, we can do that. I'm going to use 26px for now, but that makes the icon a little blurry (though it's not too bad). The icon is designed for 20x20, so if you're OK with making it a little smaller still, using background-size: 20px would make it look crisper. (In the status quo it's also crisp, because 40x40 is a round multiple of 20x20.)

20px here would be fine, thanks!

Done.

Change 506189 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: More UI tweaks

https://gerrit.wikimedia.org/r/506189

The latest screenshot with progressive buttons:

IE11 still have some minor display issues:

@Catrope

Turns out I did almost that, but I forgot to put the margin-left back on the mentorship module. Fixing that now.

the sidebar modules still need

.growthexperiments-homepage-group-sidebar > .growthexperiments-homepage-module {
  margin: 1em 0em 1em 1em;
}

No, the source they translate from is the English strings that you see in the interface.

Ok thanks, @Trizek-WMF could you please refer to the translator that the correct string to translate is "You've had an account for X days"? Thanks

Change 506723 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Homepage: Remove margin-right from sidebar modules

https://gerrit.wikimedia.org/r/506723

Change 506723 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: Remove margin-right from sidebar modules

https://gerrit.wikimedia.org/r/506723

Etonkovidova moved this task from QA to Design Review on the Growth-Team (Current Sprint) board.EditedApr 27 2019, 12:37 AM

Checked in betalabs:


Note: some really minor UI issues filed as T222007: [minor] Homepage UI issues in IE11 and Monobook skin

Cntlsn added a comment.EditedApr 29 2019, 1:31 PM

For convenience, I'll post here my list of UI fixes for the before-release-review.
Sorry for duplicates / x-posting.

Layout

  • modules header icon?

Start module:

  • links "create user page" submodule should be placed above the CTA buttons
  • "confirm your email" icon state should have border-color: @colorProgressive

Impact module:

  • thumbnails should be squared and fit into a 40x40 px container (for instance if a thumb pic is originally 40px width and 55px height, it shouldn't be resized to fit 40px height, but should have 40px width and be masked in height by the 40x40 container -- ideally the masked picture should be aligned center-center and not top-left to the 40x40 container)
  • missing pic icon should be opacity: 0.38 and contained in a 40x40 px container with background-color: @colorGray14

Mentorship module:

  • footer should have wider top margin .growthexperiments-homepage-module-footer { margin-top: 1.4em; }

Help module and Mentorship module bulleted lists:

  • they can be better styled with
.growthexperiments-homepage-module-help ul {
    list-style-image: none;
    list-style-type: none;
    margin: 0.3em 0 0 .6em;
}
.growthexperiments-homepage-module-help ul li:before {
    content: "\2022";
    color: #0645ad;
    margin-right: .6em;
}

Your recent questions:

  • might need some styling fixes but waiting for it to be up on beta or test wiki

Mobile

  • how do we set the viewport until the mobile version is ready?

Change 507117 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Impact: article thumbnail

https://gerrit.wikimedia.org/r/507117

Change 507200 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Homepage module: increase footer margin-top

https://gerrit.wikimedia.org/r/507200

Change 507200 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage module: increase footer margin-top

https://gerrit.wikimedia.org/r/507200

Change 507117 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Impact: article thumbnail

https://gerrit.wikimedia.org/r/507117

Change 507310 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Homepage: bullet styling

https://gerrit.wikimedia.org/r/507310

Change 507310 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: bullet styling

https://gerrit.wikimedia.org/r/507310

Layout

  • modules header icon?

What is this about?

Start module:

  • links "create user page" submodule should be placed above the CTA buttons

done

  • "confirm your email" icon state should have border-color: @colorProgressive

done

Impact module:

  • thumbnails should be squared and fit into a 40x40 px container (for instance if a thumb pic is originally 40px width and 55px height, it shouldn't be resized to fit 40px height, but should have 40px width and be masked in height by the 40x40 container -- ideally the masked picture should be aligned center-center and not top-left to the 40x40 container)

done

  • missing pic icon should be opacity: 0.38 and contained in a 40x40 px container with background-color: @colorGray14

done

Mentorship module:

  • footer should have wider top margin .growthexperiments-homepage-module-footer { margin-top: 1.4em; }

done

Help module and Mentorship module bulleted lists:

  • they can be better styled with [...]

Done but I had to improvise to apply it to the recent questions. Please review and let me know if further improvement is needed.

Cntlsn added a comment.EditedApr 30 2019, 5:19 PM

@SBisson thanks for all the fixes!

Layout

  • modules header icon?

What is this about?

Don't worry about it!

Help module and Mentorship module bulleted lists:

  • they can be better styled with [...]

Done but I had to improvise to apply it to the recent questions. Please review and let me know if further improvement is needed.

Please find styling improvements below

Mentorship module
.mw-body-content h3 is overwriting the font-size property in .recent-questions-growthexperiments-help-questions h3, .recent-questions-growthexperiments-mentor-questions h3, the latter should have priority.

Fixes recent questions title padding

.recent-questions-growthexperiments-help-questions h3, .recent-questions-growthexperiments-mentor-questions h3 {
    padding-top: 0;
    margin-top: 1.4em;
}

Fixes bulleted lists left alignment

.growthexperiments-homepage-module-help ul, .growthexperiments-homepage-module-mentorship ul {
    margin: 0.3em 0 0 1em;
}
.recent-questions-growthexperiments-help-questions .question-link-wrapper, .recent-questions-growthexperiments-mentor-questions .question-link-wrapper {
    margin-left: .2em;
}
.recent-questions-growthexperiments-help-questions .question-posted-on, .recent-questions-growthexperiments-mentor-questions .question-posted-on {
    margin-left: .3em;
    margin-bottom: .6em;
    line-height: 1.3em;
}

Help module
Fixes button font-size

.growthexperiments-homepage-module-help .mw-ge-homepage-help-cta {
    font-size: 1em;
}

Fixes bulleted list alignment

.growthexperiments-homepage-module-help ul {
    margin-bottom: 1em;
}
.growthexperiments-homepage-module-help ul li a {
    margin-left: .2em;
}

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /

More beautification tweaks below (not needed for this release, just putting them here to remember later):

Start module
Fixes header margin bottom

.growthexperiments-homepage-module.growthexperiments-homepage-module-start > h2.growthexperiments-homepage-module-header { 
    margin-bottom: 1.4em; 
}

Fixes submodules padding

.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module {
    padding-top: 0;
    padding-bottom: .5em;
}

Fixes submodules' headers alignment

.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header {
    justify-content: left;
}

Fixes submodules' icons size

.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon {
    width: 34px;
    height: 34px;
}
.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-icon .oo-ui-iconElement {
    width: 34px;
    height: 34px;
}

Fixes submodules' headers line height

.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-header-text {
    line-height: 1.2em;
}

Fixes submodules' content top alignment

.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-body {
    padding-top: 0;
}

Fixes Account created editcount alignment

.growthexperiments-homepage-module-start > .growthexperiments-homepage-module-body .growthexperiments-homepage-module-start-account .growthexperiments-homepage-module-section-editcount {
    margin-top: 0;
}

Impact module
Fixes subheader text color

.growthexperiments-homepage-module h3.growthexperiments-homepage-module-subheader {
    color: #222;
}

Fixes thumb padding

.growthexperiments-homepage-module-impact .impact-row .article-image {
    padding: 3px 0 3px 3px;
}

Change 507486 had a related patch set uploaded (by Sbisson; owner: Sbisson):
[mediawiki/extensions/GrowthExperiments@master] Homepage: UI fixes

https://gerrit.wikimedia.org/r/507486

Just merged the patch, should be on beta in ~30 minutes.

Change 507486 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Homepage: UI fixes

https://gerrit.wikimedia.org/r/507486

Cntlsn closed this task as Resolved.Wed, Aug 7, 11:56 AM

I have checked all the proposed fixes as per last comment, and all seem to have been addressed. Future UI fixes will be addressed at T230014.
Resolving the ticket.