Periodically, I go into the analytics of MADE and see where people get stuck.

As of December 2019, the pages that our users most commonly stop at include the expected: the various intro screens, where someone who is just curious about MADE is likely to stop before entering any real information; and the download page.

However, there are a few pages in the top exit pages that signal a problem with the user experience:

  1. Signature page
  2. Jury trial selection
  3. Reasonable accommodation request
  4. Contact information for the landlord’s attorney
  5. Explanation of why the tenant needs time to move

Of these, the signature page actually has the smallest problem: a relatively low “bounce” rate of 7.5%. But it’s surprising and troubling people would drop the interview only a minute or so away from being able to download their forms. In addition, the problems on this page appear to be design problems, while the problems on the other screen are more likely to have to do with wording. MADE is live in 6 languages, so that makes extensive wording fixes hard to implement.

Here’s what the signature page looks like right now:

The MADE signature screen from launch through early December, 2019.
The MADE signature screen from launch through early December, 2019.

Looking at it today, it’s a pretty confusing mash of text and images. Believe it or not, it went through a few versions before this version went live.

The biggest problem I see on this screen is the large QR code that appears with the default selection “Send a link to my phone.” It’s convenient that it saves a click for someone who is expecting it, but it dominates the view and is confusing to understand.

I decided to separate this into two separate screens that would be easier to understand, especially for someone who chose not to add a digital signature.

This was the first, simple mockup:

Text-based buttons labeled “Sign on your phone”,”Use this computer” and “Print and sign later”.

Next, I added icons to the buttons. I also worked with Jonathan Pyle, Docassemble’s author, to improve the layout and formatting of the icons in the upstream Docassemble code base. Below I show the “help” button on its own line; this fix is not yet in the upstream version of Docassemble, but it will hopefully be ready soon.

Images of a phone, computer, and printer labeled “Sign on your phone”, “Use this computer” and “Print and sign later”.

Finally, after working on this a bit, I realized I could improve the phrasing of the button labels so that each button contains an action:

Buttons labeled “Sign on my phone”, “Sign on this computer”, and “Sign after I print” with images of mobile phone, computer, and printer, respectively.

Next, I turned my attention to the QR code. The instructions are a little loose in the original. In addition, the text option isn’t clearly explained. Here’s my first pass at improving it:

If someone clicks the “text me a link” button, a field pops up to enter a cell phone number.

This still a little bit of a work in progress, but hopefully the live version can be updated to include these design fixes soon. It’s complicated to update an app in 6 languages, but I’m expecting these changes will reduce the number of our users who give up before delivering their paperwork to court.


Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.