Modular space for announcements and content

[ajparsons]

What I'd like is a more nuanced version of our banner announcements, where we can more easily roll out a rotation of things to promote through the site - and have these running all the time (the banner loses its impact if run all the time).

For instance, we might have multiple messages in rotation:

• Donate to support mySociety's work
• Read latest blog post [x]
• Take part in our user survey
• Cross-site promotion of CAPE/WDTK, etc

These messages would ideally be in the admin with a light-weight interface rather than deployed through the code.

I'd like to integrate into:

• Homepage
• Email alerts
• MP summary pages

For a display pov, these different locations suggest slightly different designs. An extra complication is we might sometimes want some elements that have custom html or forms (e.g. subscribe to newsletter), we we might (see https://github.com/mysociety/supporters/issues/2) want to experiment with integrating donation forms directly into sites. This feels special-caseable once the basic setup is in place.

In terms of the fields to store, an announcement has a:

• Title
• Short description
• URL
• Large image
• Thumbnail
• Format (for future special casing - e.g. 'link', 'donate', 'newsletter').
• Currently live (booelan)

The first steps is some light mock-ups of what this would look like, and then scope out with design what is possible with available time.

[zarino]

Notes from my discussion today with @lucascumsille:

Potential locations on homepage:

• Banner below the navbar (like Scorecards methodology banner)
• Replacing the (not used much) "random debate" and "topics in the news" below the hero

Potential locations on MP page:

• Banner below the navbar
• Replacing the yellow COVID panel
• Below the in-page nav sidebar (making the sidebar wider too)

@lucascumsille is going to mock up how a blog post (as just one example of a type of content) might look in those five positions, so we can see whether that sparks any ideas.

Meanwhile, we noted that donations feel like a different kind of content to blog posts etc – they feel less timely. @lucascumsille wondered whether we should treat them differently, visually. Thoughts, @ajparsons ?

We also wondered whether we actually need an image? Especially on our blog posts, the generic unsplash images always feel like filler. What’s the image for? If it’s to attract attention, we wondered whether that could that be achieved through colour alone?

[ajparsons]

I don't mind different approaches on the image - possibly a generic image for the blog series overall might be fine rather than for each post.

I'd be interested in seeing ideas on how donations could be treated differently - my main thought here is that I want it quite prominent, and to be able to easily tweak the messaging over time.

[lucascumsille]

I have made some mockups for the TWFY homepage:

Banner for navbar

Pros

• We can announce any topics: Blogs, partner services, and donations.
• It could be present all the time, not only in certain places.
• Personally, I don't find it distracting from the main content. An easy way that the user can access that information after have scrolled the page/site.

Cons

• Because of the space limit, an image wouldn't be a great idea. We could use an icon so the user can scan easily when it is a blog, service or donation; also, it would make it stand out a bit more without being too intrusive.

Using the current layout below the hero section

Pros

• Good to highlight the interesting content.

Cons

• I wouldn't use it for donations. For current users might not look bad, but for new users that might not even know what the page is about, asking for the donation in such a highlighted way might not sit well. Unless we use the Wikipedia technique when they are raising money and have a compelling web copy. More than a "Contribute to this project" and "donate" without new users not even having tried our service.

Note: I changed the layout for the component below the hero section. Personally not a huge fan of making content compete with each by locating them horizontally to each other, especially when there are a lot of interactive elements within them.

Here are a few mockups

[lucascumsille]

I'll be working on the MP page, I'll send some mockups shortly.

[ajparsons]

On the homepage, I'm confused on if we already did something like this in a previous wave and are just not using it, or if we didn't do that and just took things off the homepage at that time.

#1532 (comment)

[lucascumsille]

@ajparsons We talked about that comment with @zarino yesterday. The difference is:

• This component won't take the attention from the first look at the homepage(hero section).
• It's not as prominent, especially because the "Large image" won't be as big. Which there is not really a point on giving such as starring position to an image, that might or might not be relevant to the content right next to it (Eg. using the classic unsplash image).
• Because of the first point there wasn't much incentive to actually use the component on Review the TWFY homepage and help pages #1532 because unless there was something incredible essential you would be taking space from the main content of the website. This wouldn't be the case in these mock ups.

[ajparsons]

That's cool - as long as we're actively discarding it.

My opinion on the homepage stuff is roughly both - a more permanent homepage 'banner' we can adjust, and a space we can promote a few previous blog posts below the main hero section. I'm not concerned about crowding out too much of the existing content, because it's all still there further down and I don't think it's the main way people find it.

Would agree images aren't essential given we're just trying to make sure we catch people here.

On the other hand, I would want a space for prominent donation messaging on the home page (possibly below a short blog section). My current concern is less growing the site through new visitors, but making the site sustainable (in part, if not entirely, but presenting clear donation asks to our millions of existing users).

In general we just need to be much less shy about asking for money prominently, where the task is then making sure we have messaging that justifies the prominence.

[lucascumsille]

MP page

CTA main container
Not sure how I feel about putting a CTA as first component for the content. Unless it was something really related to it.

Side bar
I prefer this approach. This would give us enough space to have both CTA (Donation + something else)

[lucascumsille]

PD: With the first mock up I didn't change the yellow background colour, but it's unlikely to be yellow.

[ajparsons]

This is great, I like the sidebars. There's a trade-off here between wanting prominence on our most visited pages, and in associating the specific MP with the content. I think the sidebar manages that.

On Mobile I think the current sidebar disappears. 2/3 of current users are on desktop so that's fine I think to get started.

I think we'd want to be able to do a few widgets down the side - but this could be done manually in advance of sorting out the backend.

--

I guess a general question on the new navbar banner you've proposed.

My thoughts in the first place was I wanted to be able to make the current 'banner announcements' less disruptive to the layout so we can just announce things all the time.

I think on the homepage, that works fine and can be there all the time. I was wondering "is what we actually want to replace the current banner announcement with one that sits below the navbar" all the time on all the pages?

Mixed feelings:

• Pro: More integrated than current banner. Existing backend to use to support it.
• Con: Introduces noise everywhere rather than being folded into specific pages like the sidebar here.

Any opinions?

[lucascumsille]

Sorry the late response @ajparsons

So I think there is a couple of things to consider before leaning toward one option:

The op navbar banner will be present on each page, but I don't find it disruptive personally. Because of the amount of space and info, it shouldn't take much space. This is a double-edged sword because it won't be suitable if you want to display more info. For me, its purpose is to be easy access to something and make it pop up more than just a button or a link in the navbar. Unlike the banner after the hero, this would be visible immediately when a user accesses any page. The banner we are relying on the user will scroll down and look at the homepage. Not sure if we have the data to back that up.

Having this in mind, I would probably go for the following:

• Having the top navbar banner, but for short messages, such as Donations or something that we really want to bring attention to. I could change the background colour to something more modest that pop-up less and still is present enough.
• Include the banner below the hero to display current and relevant info; that one line won't suffice.
• We can include the sidebar on the MP's pages.

I don't think by doing this, we wouldn't include much noise on the webpage.

Let me know what you think

[ajparsons]

Sorry I missed this comment.

I think those sound like the correct approach (It's nice to have a few different choices for how to promote something to be sensitive to the length of the message).

[lucascumsille]

TODO for myself

• Having the top navbar banner, but for short messages, such as Donations or something that we really want to bring attention to. I could change the background colour to something more modest that pop-up less and still is present enough.
• Include the banner below the hero to display current and relevant info; that one line won't suffice.
• We can include the sidebar on the MP's pages.

@ajparsons
Not sure if you know, but double checking do we already have a the first TODO implemented? I haven't checked, but I might need to tweak the style in case already exist.

[ajparsons]

So the current banner sits at the very top of the page:

theyworkforyou/www/includes/easyparliament/templates/html/header.php

Lines 79 to 88 in 598d660

	<?php if ( $banner_text ) { ?>
	<div class="banner">
	<div class="full-page__row">
	<div class="banner__content">
	<?= $banner_text ?>
	</div>
	</div>
	</div>
	<?php } ?>

This could be moved and adapted. I can't see that we'd want both.

[zarino]

PR here: #1711

[ashapond]

I imagine this is already on your radar, but given the importance of the newsletter as a way for us to onboard new supporters, should 'sign up to our newsletter' be one of the messages on the navbar banner?