Dropbox Paper
How it started
I was browsing the internet for UX writing resources and stumbled on a link to an interesting document. I clicked on the link and was redirected to Dropbox Paper and prompted to request access to the document. I did this but here's where things start to get weird.
As soon as I requested access to the document, I immediately landed on an error page informing me that I "cannot request access" (hmm interesting, considering that I just performed the action of requesting access to the doc). Even weirder, the subheader simply did not give any clear information that could be helpful in understanding why I could not access the document.
Here's my take on how this error page copy could have been better approached.
Let's play "spot the issues"
Base version of error page
Misleading header
The header says I cannot request access, but the previous action I just performed was to request access, what should be said instead is that I cannot access the doc.
I have already requested access, this step only tells me that my request has been denied.
Errr...interesting subheader
What caught my attention the most was the subheader of this error page. I had so many questions
Did the owner mysteriously vanish off the face of the earth.
Perhaps, abducted by curious aliens?
The subheader does not say much (and I wonder how this would fare when localised in languages that require more context)
Adding a simple “on our platform” at the end of the copy could have significantly improved the clarity.
My approach
Understanding Dropbox's style
The first thing I did was to research Dropbox's writing guidelines. A little snooping here and there and I found that their writing principles are hinged on the following mantra:
Write for a simple, friendly, human and magic experience
Of course, being an error page, I focused on the most relevant of these principles: Simplicity.
So, my next goal was to make the copy as simple as possible for the user. By making the copy simpler, I could significantly improve the clarity of the error message.
Copy explorations & mockups
Next, I explored several copy options to test the best way to deliver the error message to the user in a clear and simple manner.
After several iterations, I settled for three copy options and then mocked these in Figma.
Copy option 1
Header: Unable to access document
Sub: This document is owned by an inactive account
CTA: Back to Paper
Why this works
Header
The header sets the right expectation (or rather matches users' expectations) at this point in the user journey. Since this error page likely pops up after an unsuccessful attempt to request access to a document, it is more relevant to let the user know exactly what has happened.
Also, I tried to convey the most crucial information here because chances are that some users might not read the subheader, and will only run with the information given in the header.
Subheader
From my experience in this interaction, I could infer that the logic behind this error message was based on the scenario where the owner of the document is no longer active on Dropbox Paper or no longer owns an account with the product.
As such, I wanted to make this as clear as possible. I used a simple and succinct approach to convey this information.
CTA
I retained the CTA copy from the base experience as this is most relevant to the user.
Variant 1 of error page
Variant 2 of error page
Copy option 2
Header: Unable to access document
Sub: The owner of this document is no longer on our platform
CTA: Back to Paper
Why this works
Header
Same as Option 1
Subheader
Using the same logic as Option 1, I opted for an even more casual approach to the subheader. I used terms that users are more likely to use in everyday language such as "no longer exists on our platform" (instead of deactivated or inactive)
However, this option might run longer when localised in longer languages, and this might cause some design friction in the mobile experience. But, since the focus at this stage is on the desktop experience, this copy option poses no issues.
CTA
Same as Option 1
Copy option 3
Header: Unable to access document
Sub: This document is owned by a deactivated account
CTA: Back to Paper
Why this works
Header
Same as Option 1
Subheader
For this option, I decided to use a conventional term like "deactivated" to make it clear why the document is inaccessible. By clearly fronting the fact that the account is no longer active, users can easily figure out why the document is not available to them.
This approach is similar to that in Copy option 1.
CTA
Same as Option 1
Variant 3 of error page
My recommendation
Option 2 for the win
Although all three options are great for optimising the copy on this error page, I would recommend option 2 as it best aligns with Dropbox's principle of simplicity and providing a HUMAN experience.
I mean, what better way to give a human experience than by speaking to your users like an actual human?