Design a 403 page

[kristinashu]

Request via @jzinner and @anilkanji: improve our 403 Forbidden oage on donate.mozilla.org based on the issue raised in slack.

Screen cap of 403 error:

Currently, donors who use a VPN see a 403 error page. This is expected behaviour since it is intended to help prevent fraud however current design is the default and needs to be more inline with Mozilla's branding to improve the user experience.

Todo

• [ ] Decide on copy (I'd recommend something about suggesting users to disable their VPN and if they continue to see the error then to contact donor care)
• [ ] Mockup the page in a similar style as the 404 page https://donate.mozilla.org/en-US/404/
• [ ] Share with stakeholders (Stephanie Lowry and Anil) for feeback
• [ ] Open ticket for dev implementation, cc @jzinner in the dev ticket since Jen will need to add the redirect from the default page to our stylized page

Screen cap of branded 404 error:

Note related tickets https://github.com/mozilla/donate-wagtail/issues/1645 https://github.com/mozilla/donate-wagtail/issues/1650

[cdanfon]

We will do the dev work for this ticket under #1650

[kristinashu]

@sabrinang will link to the svg file for the 404 illustration so it can be updated to 403

[mofodevops]

I'm sure designers are on top of of this already, but just for clarity. Donate will still need the 404 page.

Ideally, make a copy of the 404 page and use it as a template to generate a separate 403 page.

[sabrinang]

SVG file here: https://drive.google.com/open?id=0B3b1KWRwjxtoWE1tcjNPMmpmTEE&resourcekey=0-EOSUAf9SsBkvwTl6JYa6VA&authuser=sabrina%40mozillafoundation.org&usp=drive_fs

Feel free to assign design work to me as I've iterated on this 404 graphic before

[anilkanji]

Is this the right place to suggest copy? Something like:

One Moment - Action Required - VPN

Supporters like you make possible our fight for a healthy internet - thank you. We take your privacy very seriously; However to minimize fraudulent payments we're asking supporters to disable VPN when donating to the Foundation.

Please disable your VPN and then navigate to donate.mozilla.org again - thank you.

[and then some other option - i.e. through paypal if they really don't want to disable VPN]

[anilkanji]

note to incorporate feedback from this thread: https://mozilla.slack.com/archives/C4M19QU2Z/p1650914868532369?thread_ts=1648500286.230469&cid=C4M19QU2Z

[sabrinang]

@anilkanji Here's a redpen to a mockup and some 403 emoji variants: https://redpen.io/p/mb226ac6a7d095211a

• I think the title can be shorter or have less dashes
• If you have copy for paypal option I can include that too
• Steph L also mentioned about directing users back to their email campaign URL so that can be in the copy as well

[kristinashu]

Thank you @sabrinang! Maybe try sharing this in the slack thread with Anil and Stephanie?

[anilkanji]

Thanks Sabrina - copy requests in redpen -ping me on slack if they're confusing. Stephanie and I also put together a quick supporter journey map which made me realize this is happening after a donor has input all of their payment details. Just FYI .

[sabrinang]

@anilkanji Thanks for the copy and I updated the redpen https://redpen.io/p/mb226ac6a7d095211a with your comments. Let me know if there is anything else and if that emoji expression works for the 403 graphic.

[jencohoon]

Hi @anilkanji - sorry to step in - as I am very happy with Sabrina's help and progress on this. Thank you

But wanted to say that the 403 page will occur BEFORE users have input their information.

The WAF evaluates what IP a users is connecting from, and based on that IP address will either send them a 403 or allow them to pass on to the donate site.

[sabrinang]

@anilkanji I got copy from the slack thread and updated the redpen: https://redpen.io/jhf067d89912be0736

[anilkanji]

Thanks @sabrinang -one small edit in redpen requested, but then I think we should be good to go.

[sabrinang]

Updated the redpen @anilkanji!

[anilkanji]

Thanks again - looks good to go to me!

[sabrinang]

Mockup: see redpen

Illustration: exported svg file

Copy for Devs:

Action Required - VPN Issue

Please disable your VPN and visit donate.mozilla.org again.

We take your privacy very seriously. To minimize fraudulent payments, we’re asking supporters to disable their VPNs when visiting our donate page.