Improve UX on campaign pages

[kristinashu]

Continuation of https://github.com/MozillaFoundation/Design/issues/271

Create wireframes to explore ways we can enhance our campaign pages. This could be new features like recommending similar campaigns, better social share options, better thank you and confirmation when signing a petition, better mobile options...

Could also update old benchmarking deck.

[kristinashu]

Oh adding localization to this. Currently there is this hack. Our solution will also probably have to be a bit of a hack but I'm sure we can do something better.

[kristinashu]

cc @vojtechsedlak

[vojtechsedlak]

Just to flesh out some of the desired user flow, when someone submits the form and has checked the checkbox for newsletter signup, we should give them the following message above the share buttons:

"Thanks! Please check your inbox to confirm your subscription.

If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us."

If they haven't checked the subscription checkbox, they can just get a regular thank you message and the share buttons.

Please let me know if there is anything else I can help with on this. Thanks!

[xmatthewx]

As we work on this, let's consider easy incremental improvements (like better thanks/confirmation and a language picker), along side ambitions for the future (like suggested campaigns/projects from a pulse tag). After a bit of design we can organize phased implementation.

[beccaklam]

Re: @vojtechsedlak's suggested post sign user flow I found a good example today from change.org. I mocked it up and put it in our current campaign template redpen (near the bottom): https://redpen.io/p/gz26fa3bd26ec0cb81 Let me know what you think! cc: @kristinashu @xmatthewx @taisdesouzalessa

[taisdesouzalessa]

@beccaklam I added some comments there and I loved your suggestions. I think it would be great if we could implement some of the ideas from there since they are clearly improvements in the user flow and experience. 🔆

[kristinashu]

Yeah there are some awesome ideas in there @beccaklam!

I think it'd be useful to see a high-level flow diagram of possibilities. So less about what the page looks like and more about when and what we prompt users with.

[kristinashu]

@vojtechsedlak please share any insights you have from testing and analytics or if you have any other suggestions!

[vojtechsedlak]

These look amazing! I'd suggest looping in Jon, Will and Sara, who have a lot of knowledge about improving conversion rates on action pages. Ideally we would want to test the impact of individual elements on conversion and action rates, so a modular design, where elements such as counters, recent signers etc. can be added and removed would be best.

[sabrinang]

+1 to vojtech's comment above - I like the idea of displaying a countdown or deadline that helps communicate a sense of urgency to signers too for campaign pages

[beccaklam]

@vojtechsedlak I mocked up some tests we could do in the redpen (the wireframe flows near the end): https://redpen.io/p/gz26fa3bd26ec0cb81. Not sure what next steps would be to refine these and get some testing implemented?

[kristinashu]

I've made some UI updates in Sketch but I'm still working on it.

Shared deck with campaigns team. They are excited and are prioritizing which features/modules they want first and then Alan can estimate on time.

@beccaklam curious if you have any thoughts or benchmarks for displaying prompts after people sign? Lightbox/popup style vs bring users to a new page vs stay on the page but replace the form with new content?

I suspect lightbox style will be the easiest and most flexible to implement but we might want to do something different for mobile. Mocked up a quick example where there is a lightbox and then if a user dismisses it then the form space is updated https://redpen.io/p/gz26fa3bd26ec0cb81

[kristinashu]

@vojtechsedlak do you have any analytics that might help guide design of the petition pages? Like what are the most common screen sizes and do more people share on FB than Twitter or email?

[vojtechsedlak]

I will pull some metrics together today @kristinashu. Will update the ticket.

[vojtechsedlak]

Here is a rundown of some of the metrics, I will keep adding to this doc: https://docs.google.com/document/d/1W2mTcYlQbhbHexAwWH16r1phq8LBfF-myqEm4WlthAQ/edit#

Let me know if there are any specific questions to focus on that would help with the design process.

[kristinashu]

Super interesting! Thank you Vojtech. I'm going to share this with the rest of the design team since I think they'll also find it interesting.

Otherwise, I'm going to close this ticket and continue UI design in https://github.com/mozilla/foundation.mozilla.org/issues/1459