(Re)designing For The Future – Paperform V2

{ 🤔 } – Why a redesign?

Two years ago we released the first version of Paperform, which is a tool for building forms online. We took inspiration from the beautiful creation-experiences of sites like Medium and created a form builder that felt more like writing a rich document than yet another drag-and-drop tool.

You could use your own fonts, brand colors, imagery and video right along with questions in answers.

Fast-forward to the start of 2018, and in the year since we launched, we had added over 60 features to Paperform. Our MVP was starting to feel all grown up.

The only issue was that after we’d initially designed the editor interface, we had little idea what the future of the product would look like. So when it came to adding in all of this new functionality, it had turned into a game of Tetris (i.e. inserting features wherever they fit best).

We had an architectural problem. Instead of the clean, well-defined interface that we’d started with, our product was slowly turning into a Frankenstein monster, one odd appendage at a time.

Paperform V1
Why is the Submit button label under Confirmation pages? …WHY!?

It was time to stop, take a breath, and assess where Paperform was headed and what we were going to do about it. If we could jump in a time machine and go back to the beginning, what would be different?

A redesign was in order.

The ground rules

Redesigning a product that is being used by thousands of people is scary.

Whatever happened, we needed V2 to be visibly better than V1. Here are the rules we followed through the process to make sure we’d still have happy customers at the end.

1. Don’t Change Stuff For The Sake Of Change

“No duh,” you might say, but when you’re excited during the design process it’s surprisingly easy to prefer a design just because it’s yours (AKA the “IKEA effect”).

We had a strong base of users who seriously loved our product, and we had to make sure the core product was the same…just better.

2. Learn from your mistakes

The best thing about a ground-up redesign is that you probably already have an idea of what mistakes you made the last time, and now you have an opportunity to have a fresh stab at them. We had hundreds of conversations with customers full of useful UI and UX feedback and suggestions to reflect on.

For example, in the initial version we had ended up with a lot of functionality hidden and nested away in a “settings” popup, which meant that a lot of users submitted feature requests for features that we already had, they just couldn’t find them intuitively.

Whatever our new design would be, it had to intuitively expose what Paperform could already do.

3. You don’t know what you don’t know – Build to adapt

One of the biggest lessons from V1 was that there are invariably things you don’t know that you don’t know. For V2 this meant that we needed to factor in the room for the product to grow, without adding unnecessary complexity for new or existing users.

This meant that unlike V1, we needed to have a plan.

Paperform V2

Design & Build

So how did we go from our ground rules to a finished release? We started by breaking down the redesign into the following phases.

  1. Evaluate the existing feature set, and functionality that we might want to add in the future (as far as we can plan for).
  2. Group the features into logical categories (or groups, taxonomies, whatever you want to call them).
  3. Wireframe several different ways of reflecting on this new organization, taking into account that this new organization might need to grow, shrink, or be rearranged in the future.
  4. Decide on wireframes as a team and then implement them! We’re lucky since at this time, I was the solo developer/designer of Paperform, which meant that I could make a lot of the smaller design decisions on the fly while building it out, so it was lightning fast.
  5. After we had something built, we had several rounds of internal review, design, and implementation. Because the development cycle was so short, it made sense to design in code, then have the team play with the actual product and gather feedback directly as opposed to separating out the design from the build.
  6. Iterate, iterate, iterate. I know this is the same as the previous point, but to me, iteration is the single most powerful tool for coming up with well-designed solutions. No matter how great you think your first design is, it is rarely the one that ends up in the product.

Three months later we had a new version of Paperform that we were really happy with, and it was time to share it!

Releasing V2

If you’ve worked around software for long enough you must have heard the folklore that “users hate change”. I don’t think that’s true.

I think users hate surprises, especially when the surprise is something they know and understand being replaced with something that they don’t, with no explanation of why things had to change or why it is better the new way.

Tell all the people, change is a-comin’

To combat this kind of horrible experience, we brought our users into the process way before we rolled out access to anyone. We keep up weekly communication with our users through the Paperform newsletter, so that was the first place where we reached out to our audience and let them know that a new version was coming. For our most engaged users, we also included an invitation to apply to a limited release beta of V2.

Beta of Paperform V2

Running the Beta

Releasing a Beta was essential for us. As a small team, a Beta is a great way to pick up unexpected UX issues and to make sure that the whole product makes sense to a group of people who haven’t been playing with the new version for months.

Note that the beta isn’t for bug testing. If real users are going to be interacting with a new version of the product it needs to have a certain degree of polish.

We rolled out access to several batches of testers on a weekly basis for a few weeks, making sure that we got a good sample of users that had a varying range of experience with the product (from very new users to veterans who’ve been using the product for years). To gather feedback, we surveyed each batch after their first and second week of trialing the Beta, so that we could quantify what the testers’ experience of the new product was.

After a month or so of receiving Beta feedback, we were confident in letting our new baby go out into the world.

Set it live

Thankfully, after the beta process, releasing the product to the rest of the Paperform community went remarkably smoothly. We had actually built in the feature for users to roll back their account to V1 in anticipation of users being surprised by the release (not everyone reads emails…), but in the end, we didn’t get a single request to go back!

Wrapping it up

At the end of the day, designing and releasing V2 was a success because of the following insights;

  1. Communicate with your audience. People are remarkably welcoming of change when they understand why it’s happening.
  2. Make a plan, and follow it. This is true for just about every stage of the process, design, development, customer communications, beta programs, release plans, PR, marketing. Everything runs a whole lot more smoothly if you try and think through all of the gotchas before you run into them.
  3. Count on the unexpected. Every plan needs some flexibility. Sometimes the unexpected is a disaster, and you need room for contingencies. On the other side, you don’t want to miss out on opportunities that always seem to pop up at the last second!

Of course, there was a whole lot more involved in the V2 release of Paperform, we rebranded, re-wrote a huge amount of documentation, and after the product, released a whole new version of our public website. See the end results for yourself at paperform.co.

If you want to contribute to next the issue of Phase Magazine, just drop us a line:

Dean McPherson Avatar

Dean McPherson / Co-Founder @ Paperform.co

Co-Founder of Paperform.co. Maker of things. Going grey and loving it.