@Nirzar uploaded initial mockups for error screens, which have a ton of restrictions that Nirzar is working around, please use Phabricator to annotate your feedback so he can iterate on these designs.

@Prtksxna Whenever we have outage, the donation servers are also down so this is a fixed $5 donation via Paypal. We can think of whether to put this on 500s and 400s since the regular donate.wikimedia works at those times.

@Nirzar, I didn't mean if its a good idea technically. I meant if we should be asking for a donation when the service is possibly errorring out.

@Prtksxna hmm... valid point. I think that's why we need to phrase the donation title as "Help us improve" but yes, I see what you mean.

@Jaredzimmerman-WMF thoughts?

@violetto Sure, Jared had suggested oDesk errors for this, this is definitely a candidate for light communication, For mocks, I was using some placeholder text. I have created a spreadsheet so we can populate these with better copy.

Not all those who wander are lost - for 404?

It's a cool quote in English, but will most likely get lost in translation.

It'll be fun if we get to create illustrations of editors fixing page instead of engineers. Not everyone understands what an engineer's got to do with this page not working. Or editors arguing, investigating, etc.

@Nirzar & @Prtksxna I think the donation is fine, we should be careful around the language we use, and make sure that it definitely feels like a secondary (or tertiary) action. maybe even use language that doens't tie it to the error or an "issue" at all, but keep it more general

to @violetto's point we should make sure our humor doesn't rely too much on word play or culturally specific terms, that will be hard to translate.

Layout
Based on the feedback about the layout and styling, I have uploaded one more mock which takes care of most of the cases.
Here's how it looks in the browser, so you can get a better idea.

1. Wikimedia outage - English
2. Wikimedia outage - German
3. 500 - Internal server error - English
4. 403 - Access denied - English

Note: You can tap on "View details" to get details. which includes links for status.wikimedia.org and Wikimedia twitter account.

Imagery
I'm all up for exploring illustrative approach to go along with the copy. I have removed the warning symbol since the strong text works as an anchor right now. If we are doing illustrations then I will definitely need @violetto's help :)

Communication
Though humour is important, I think following points should be covered clearly in the communication

1. What exactly went wrong?
2. Who needs to fix it?
3. Will it be solved within next few minutes? (Whether to hang around or go about)
4. What can I (user) do about it? (Actions)

This is just a flow in which we can handle a bad situation. Few tips on communication by mailchimp It compares user's feelings and tips on appropriate response.

Code
The CSS is not optimised yet, it will much lighter than this. Using JS for hide/show. this will be removed for final version. It is just for the prototyping purpose. It's not mobile optimised, but you can see in one of the mocks above how it will look.

I like the general framework defined, and I think that the questions you try to answer are the right ones.

I also agree with @violetto that while being clear, we have an opportunity to make error pages a bit more fun. Reinforcing the idea that Wikipedia is operated by humans is a good idea. Other random ideas: focus on the inconvenience of Wikipedia not being available or illustrate some issues in this Encyclopaedic world where Van Gogh, Da Vinci and Marie Curie live together and try to fix the broken pipe that caused the error.

Regarding the donation, I think that it makes sense. We may want to explore to connect it more with the event making it clear that we provide the possibility of donating to "help these errors happen less often" or "making our systems more robust", but without increasing its prominence from the main message.

I think we need the Wikipedia globe somewhere on these pages. The Wikipedia brand is much more recognizable than Wikimedia's, we should make use of that. Maybe show the project logo when we know what project the person was trying to get to.

It might not seem like a good place to ask for donations, but I think we should give it a try.

"Fun" is a tricky thing to do right. Maybe some cute illustration like Google's 404 of broken robot.

Did I just seriously use the word 'cute'?!

@MSyed problem is in many cases we don't know if the error was triggered by xx.wikipedia.org while 90% thats probably the case it could be jarring to users if it wasn't.

@MSyed and I were talking, maybe this would be an opportunity to use the wikipedia globe and the foundation logo together in some way to tie them together for the users. Maybe play with that.

@Nizar This looks good! I think we should also add the Wikipedia wordmark with the globe too...

The logo on M15/49 looks better. Users already know what site they're in and the globe is already a well-known logo. Showing the globe-only logo will suffice.

The entire layout doesn't seem very unified, feels fragmented due to:

Making another comment here on the focus areas. The focus shifts from (described below). If that was the flow intended then you've achieved that goal!

On the typography (described below).

About using the Wikipedia globe logo: Trevor played around with using the 3D puzzle globe for an error page design a while ago. See https://s3.amazonaws.com/f.cl.ly/items/313T0Z342P360I0J1L0d/Wikipedia%20is%20Down!.jpg and https://s3.amazonaws.com/f.cl.ly/items/0i1Y0r2l300Y2T181Y0O/globe-broken.jpg

Obviously, I'm not suggesting that we use "Don't worry, Roan's on the case" as the actual text on the page, I'm just saying that since we have the 3D globe, effects like an exploded or exploding globe are possible.

two concerns I have:

1. The exploding globe makes it look more serious than it is :) has a lot of negative connotation related to explosions.
2. A full page background image will be heavy where we are trying to make a stand alone lightweight page. under 20kb.

thanks for these @Catrope the ops team has asked us to avoid raster images all together, and to get by only on svg that we can encode in the page itself, these are very cool, but I don't know that we'll be able to use this in this case.

Dummy comment to test T85950. Sorry for the noise.

I think putting a donation link on the error page is pretty inappropriate as it misleads the reader into thinking donating will directly contribute to fixing the issue, whereas in most instances insignificant down times are inevitable and quickly correctable, with very little relation to funding.

There are very few actions that users can take when they receive most types of error pages, but thankfully people very rarely encounter error pages, the left sidebar carries a donation link at all times. which is far more exposure. We can continue to iterate on the text in the donate call to action to try to address the point you're brining up.