Foundation.mozilla.org: Increase shares after voting

[kristinashu]

A lot of people are voting but very few are sharing.

Currently we have about 29k creepiness votes in analytics and only about 29 vote shares, that’s 0.1%. Let’s try and get 5 out of 100 voters to share!

We might be able to test different options if Pomax is done setting that up in time.

Ideas

• remove link to comments
• make share title larger and say something like Share! or Invite your friends to vote!
• make icons bigger??
-

Current state

cc @xmatthewx

[xmatthewx]

Excellent. Design-wise, let's try and land on 2 options: one bolder, one super bold. Will be fun to test!

[beccaklam]

@kristinashu @xmatthewx Here are two quick ideas: https://redpen.io/p/utee9e897aa82628cd
Let me know what you think!

[beccaklam]

@xmatthewx

Bold Option:

Bolder Option

Kristina already pointed out this is probably too much and the UX for this coupled with the donation ask would be a bad experience. Probably going to nix it, was just trying out ideas

Post-vote pop-up:

After user closes pop up:

[xmatthewx]

Cool, cool. Looking great! Yep, pop up is probably too much to tackle.

One idea: move 367 votes from the top to your new heading: 367 Votes. Invite your friends! I'm thinking that people like to share stuff that's validated by other people's engagement.

[beccaklam]

Thanks for the feedback! Here are two new options: @kristinashu @xmatthewx
https://redpen.io/p/utee9e897aa82628cd

Bold:

(Mainly just switching the size of the headers and making the buttons larger)

Bolder:

(Really upping the size of the header and making the buttons larger and changing the colour to have more contrast)

[xmatthewx]

Excellent.

• The top headline in option 2 (bolder) is very effective. Great idea. We could remove the line of text "Thanks for ... results" and make this box all very clean and simple. I think results infographic speaks for itself. If you disagree we could just label it "results".
• I'll step back now and let you and Kristina decide button color and make the final call on all of this.
• I'm very _very_ curious to see if we this helps dial up engagement!

[beccaklam]

@kristinashu @xmatthewx
Feedback based on crit and matthew's comments -- Bold option remains the same, some updates to Bolder option:

• eliminated sub header line
• changed colour of buttons to reflect social platform brand (when applicable)

https://redpen.io/gs490ea2b6eb47dbb7

[kristinashu]

I think you could group the titles in the bold option, like you had on the bolder option. It makes for better hierarchy and feels less clustered.

[xmatthewx]

I really like it with no subhead. If you make them both the same with button color as the only variable, then an A/B test will give us unambiguous info on why one performs better than the other.

[kristinashu]

May be one could have the number of votes in the large text and the other with the smaller text?

[xmatthewx]

I worry a little about 2 things:

1. info overload - this little space has so much text, numbers, buttons competing for attention. I think it's better without subhead.
2. test results - if test A does better than test B, we won't know if it's because of button color or the headline.

Implementation

• When you file implementation, please ask dev to make sure we keep GA Event on share buttons.
• If we do A/B test, ask dev to "prepend GA Event Label with test A: and test B:"
• I'm super excited!

(I'm going to unsubscribe from this thread now 😉 )

[kristinashu]

Oh sorry, I misunderstood! I thought you didn't want buttons to be the only variable between A and B. But yes, I think they should be the same (except for buttons)!

[beccaklam]

Edits after above feedback, I think we're close!

Variant A (Black and white buttons)

Variant B (Colourful buttons)

@kristinashu @xmatthewx

[kristinashu]

Looks good to me!

@xmatthewx is the idea that once pomax has implemented A/B testing on the site, will can test these live?!

[xmatthewx]

I think we should go ahead and implement one of them for v-day. you pick. we should have enough traffic to compare new version against holiday version. If a/b testing does land, we can go further and test color vs b&w buttons, but let's not wait for that.

[beccaklam]

That sounds good to me. My vote would be Variant A, it follows button styles we've already introduced on the page and the colour combination is the most accessible. @kristinashu do you have a preference?

[kristinashu]

Yes, Variant A please!

[kristinashu]

Could you do a mobile version, show hover state, clean up the file, make sure we're using our existing styles, and then open up an implementation ticket?

[beccaklam]

Here's the mobile version for Variant A. Closing this ticket for now, implementation ticket opened: #2510

@kristinashu @xmatthewx