OpenForms onboarding

The challenge

The first handful of OpenForms users were people our company — OpenCities — already had a relationship with. Most already used one of our products. That meant we could onboard them face-to-face through training sessions, a dedicated account owner and more.

With the public launch of OpenForms as a SaaS offering, we knew that eventually we’d no longer be able to provide a 1:1 training and support experience. As we scaled, we needed a 1:many solution that would allow users to get started with little to no human interaction on our end.

We also knew that users who complete onboarding prompts within 24 hours are 80% more likely to convert to paid users than those who don’t — we needed great onboarding to move users through the funnel from activation to revenue and retention.

The empty state users see before they create their first form

The scope

We were tasked with reviewing OpenForms’ current onboarding, observing how real users fared with it, researching best practices, making recommendations for improvements, and designing and implementing the highest value changes.

Some of these changes would be rolled out individually, and others would be delivered as part of a UI revamp we were working on at the same time that would bring OpenForms in line with our newly created design system.

My role

  • Acted as project lead for the Discovery phase

  • Designed our research and testing methodology with our business analyst

  • Conducted preliminary research into best-practice onboarding

  • Ran or acted as observer during user testing sessions

  • Synthesised research findings and recommended improvements with our business analyst

  • Wrote or reviewed all UI content

  • Gave input into information architecture, visual design, and interaction design

  • Updated our content guidelines

  • Communicated the changes to clients

The process

Defining our ‘wow’ moment

Our first step was to figure out the point in a new user’s journey at which they’d start to see value in the product: the ‘wow’ moment.

As a first-time OpenForms user on a free trial of the Basic plan, I want to publish a form and view a response quickly and easily.

This helped define the goal and scope of the project. Our goal was to get users to this point of value as fast as possible. And our scope was the steps between a user signing up for a subscription, and viewing the first form response received.

Figuring out how we stacked up

We needed to get a sense of how we were doing compared to others. We audited the current OpenForms onboarding experience, reviewed what our competitors were doing, and did a deep dive into best practices for product onboarding.

Observing users in the wild

Our business analyst and I visited the workplaces of a group of users, and observed them signing up for OpenForms and building their first form. We tried to find users who worked for councils already using our products, but who hadn’t yet trialled OpenForms. This was as close as we could get to mirroring the conditions of those most likely to onboard to OpenForms in the future.

Testing with a user from one of the councils using our products

Synthesising user feedback

We got some great feedback, and… some not-so-great feedback. It was clear that we’d uncovered some common frustrations.

Ouch

Users struggled to find the features and settings they needed — and if they did find them, they weren’t always clear on the purpose of them. Users were also overwhelmed by text-heavy screens, and confused by technical terms.

The solution

A tour that gets straight to the point

We already had a product tour that launched automatically when a new user first logged in. But our testing confirmed what we suspected: most users found it too in-your-face, and many dropped out before the end — too many steps, and too many words to read!

I revised the content to make it more concise, while still retaining the intended meaning. This resulted in a reduction from 387 words to 183 words, and an improvement in readability level from Grade 7 to Grade 3. I also cut down the number of steps.

Additionally, we got our developers to stop the tour from playing automatically. With our new empty states (more on that next), it was no longer necessary to be so aggressive.

One of the steps in our product tour

More compelling empty states

This was our opportunity to give our empty states the love they deserved, and promote our features in a clear and persuasive way. Our visual designer came up with a new look, and I tackled the wording. I consulted with our product owner and marketer to make sure the copy was aligned with how we talk about these features at other client touchpoints.

It was important too that we included links to our help centre, so users had an avenue to learn more. I also collaborated with our visual designer to ensure that the words and graphics worked in harmony to tell the same story.

An empty state for the Themes page

Surfacing the settings users need

Many features were housed deep within the settings area rather than being offered to users at the point at which they needed them.

One example was in the form publishing workflow. After publishing a form, users were unsure as to where the form now lived, and what options they had for incorporating it into their site.

We decided to duplicate this information — until then only available in the settings area — within the last step of the publishing workflow so users didn’t have to go searching for it.

Link and embed options are now included in the form publishing workflow, not just on the settings page

A clear path to help content

Despite there being a help icon at the top of each screen, most users didn’t bother accessing our help content when they were stumped. When we probed, we found that many didn’t notice the icon at all, and others weren’t quite sure where it went.

It was clear that we needed to make it more prominent. We added the text label ‘Help’ to the icon, and also included a link to the help centre in the last step of the product tour.

Our new header with ‘Help’ clearly spelled out, and the last step of the product tour

A more useful welcome email

Our welcome email — the first one users receive after signing up — was perfunctory to say the least. We knew we were missing an opportunity to teach users a little about the product, introduce them to some of our ‘stickier’ features, and set them up for success.

After reviewing a whole heap of both direct and indirect competitor welcome emails, I created a wireframe of what a better version might look like and say, incorporating insights from our product owner on what our stickiest features were. Our third-party design agency brought it to life.

Wireframe and design for our new welcome email

Updating our content guidelines

Internally, we needed to document how to work with our new content elements. For example, in scenarios where both empty state content and persistent feature description content would appear on the same screen, it was important to delineate the differences between the two. I added usage notes and examples to help clarify things.

Guidelines I created for our new content elements

Communicating the changes to clients

We had both onboarding changes plus a revamped UI wrapped up in a single release. Some onboarding changes were only relevant for future users who would never see this comm, but others would be super obvious to existing clients as soon as they next logged in.

We knew we needed to emphasise the benefits while also extinguishing any worries that existing clients would have to learn a new interface. We made it clear that the changes were a result of client feedback, and that they should help clients get tasks done faster. We also offered a way to give feedback so clients knew they had a way to voice any concerns.

Email comm announcing the new-look OpenForms

The results

We should soon have enough data to determine whether we succeeded in reducing the time from first login to ‘wow’ moment and increasing the % of users who convert from trial to paid plan.

Until then, what we do know is that the sentiment towards our UI revamp release was generally positive. We received a 77% satisfaction rate from users surveyed 2 weeks after launch. (Total positive votes: 85 or 77%; total negative votes: 26 or 23%.) Many of the negative comments were related to stylistic choices — things that will be tweaked in future releases.

Votes from the survey sent to users 2 weeks after launch

What’s next?

We know there’s more we can do to make the OpenForms onboarding experience more intuitive and helpful. This is just a start, and we look forward to digging deeper into areas like personalisation, gamification, lifecycle email drip campaigns, an in-app help panel and more.

The old and new OpenForms interfaces

Previous
Previous

OpenForms subscriptions

Next
Next

OpenCities help center