When Users Put Fruit In a Coffee Maker & Find The Appliance Useless
An analogy for the problem we’re facing and a case study at how to explain “You actually need coffee beans to make it work!”
We just launched a new product. New to us. New to the industry. In our asking “how do we get people to use it?” we must first answer “how do we get people to understand it?”
So what’s this “new product”?
No, it’s not a coffee maker — it’s the Template Builder and it’s our crack at streamlining the back-and-forth paperwork process that hundreds of businesses waste hundreds of hours on.
This product lets users add fields on top of their existing document to create one template that is reusable…
and easy for their recipients to fill out.
The Analogy
With limited context, the first step to successfully using, no — just understanding, the Template Builder is uploading the right type of document. I mean…
Imagine filling a coffee maker with fruit and expecting a smoothie. You won’t get the type of drink you want and the coffee maker will seem useless.
In our case, the “Template Builder” is the “coffee maker” and “documents with blank fields for someone to fill out and send back” are the “coffee beans.” So peer evaluation forms, freelancing contracts, job applications — all different types of coffee beans and all qualified for the Template builder! A “fruit” would be any PDF you need to edit (we have a different tool for that.)
What’s Really Going On
Simply put, the Template Builder workflow looks like:
- Upload a qualified PDF (“coffee beans”)
- Add fields on top of the PDF to make the template
- Send out the template
- Receive responses from the template
Our data showed that:
- No one with an unqualified document completed this workflow
- Every person who finished this workflow started with a qualified document
So this current assignment is focused on increasing the number of qualified uploads because without the correct type of document, there’s little chance for the user to understand and continue on with the product.
Sample Document: Our First Attempt
We thought a sample document would be a good idea to test because this can:
- Serve as a demo of sorts, on-boarding even
- Explicitly illustrate the type of document users should be uploading
- Act as a perfect example of what the Template Builder can do
- Prevent users from uploading random documents just to test the new product out (which we saw happening) — the equivalent of adding fruit to the coffee maker!
After a couple weeks of testing the sample document that Ronnie (one of our designers) did, we realized that:
- Almost no one completed the instructions on the document
- A lot of the contract is cut out of frame
- There’s no clear starting point
And so we made the assumption moving forward that:
Users want to do as little as quickly as possible to learn about the new product; and they would rather upload their own documents right away.
Sample Document: Another Attempt
We saw some improvements in the number of qualified uploads and decided to squeeze more juice out of the sample document idea.
Update #1: Accommodating for Size Restraints
While reducing the negative space and font size of the sample document, I realized the sample document didn’t have to be the uploaded document — meaning, I could have a document within a document…
This would allow me to fit the first few instructions above the fold.
And the instructions could be placed right by what the instruction was referring to. For instance, the “Click Preview” instruction is positioned and pointing at the actual “Preview” button.
Takeaway: Think inside the box. Use the constraints of what you’re working in to your advantage.
Update #2: Guiding the User in the Right Direction
At first the copy was in a backward “7” layout, starting right to left then top-down. This felt unnatural, so I moved all the text into a single vertical column.
The instructions were made easier to find when they were grouped by a contrasting background color, a dark blue.
Lastly, I thought “Step 1, 2, 3…” could imply the starting point. I even circled the text in a bright red. But this “implicit” design requires an extra step of thinking for the user so I added the actual word “Start.” The text’s size, weight, and casing were all used to establish information hierarchy.
Takeaway: Utilize the natural flow of reading and visual perception to make the work you want your users to do less taxing. Oh, and make the obvious OBVIOUS.
Update #3: Reducing Action Steps and Copy
To reduce, we really had to prioritize what instructions were the most important.
We conducted many user interviews before we launched the product and realized the “Ah-ha!” moment is when users saw the “Preview” for what recipients see. This made labeling all the fields make sense. So the first two steps were dedicated to identifying and explaining the “Preview.”
From the previous sample document, we noticed that almost no users wanted to interact with the tools.
The most common action after leaving the sample document was uploading a document. We decided to make this experience even easier by having an upload at the very bottom.
Why not at the top with the rest of the prominent CTAs? We want to encourage users to upload a document but still, at the very least, glance through the sample document instructions before doing so.
Takeaway: “If everything is important, then nothing is.” If someone can only remember 1 thing about your teachings, what would you like it to be?
The Final Version & How We’ll Test It
So this is what we have for now.
We’ll look at how many users click “Upload” and, of these, how many upload a qualified document after viewing the sample document. We’ll also consider the number of clicks on “Preview” and pre-made fields and if any user makes their own field on the sample document.
Now, fingers crossed for correctly brewed coffee… 🤞☕️
Make Yourself a Cup of Joe
All this yibber yabber about the Template Builder… might as well link it here. You’ll need an account (it’s free!) and some coffee beans…
A Group Effort
A medium article and project not possible without the insight, guidance, and critiques from my team — especially Elisa, Ronnie, and Brittany. Thank you for the pep you give to my steps! 🤪
