Mailform started as a simple, step-by-step process that enabled a user to snail mail a document. The original flow looked like this:
I recruited five people for a moderated testing session with the goal of sending a real piece of mail. I noted anything out of the ordinary. Fortunately, everyone was able to mail a document, but not without issue.
For this case study, I'll focus on just one issue from testing - where Sarah said after she uploaded a file, "Wait, did my file get uploaded?".
Here's some formatted storytelling to understand her use case:
When a user uploads a file [Situation], they want to see that it uploads successfully [Motivation], so that the right file will be mailed [Expectation].
More broadly, we began to understand that the overall idea was to give more access/transparency to the user's uploaded files. Not only did we want to provide Sarah with file upload feedback, we wanted to allow broader control of uploaded files including deleting, adding more, and previewing.
For the final design we basically added a half-step in the user flow:
I wrote the markup and I did most of the UI iterations in the browser, using a fork and our staging enviroment to test designs. After a file is uploaded, a graphic of the file is dynamically displayed with a loading bar animation and confirmation options. A user has the option of adding more files and deleting them.
The "Add More Files" and "Delete Files" feature were kept, as they were being used.
Combined with a new visual design and other solutions found in this usability test, I ultimately increased the conversion rates of the product by 3x.