Form Publisher

Form Publisher

Redesigning the installation flow for improved customer experience and higher business conversion. The new design saw +40% installations.

Redesigning the installation flow for improved customer experience and higher business conversion. The new design saw +40% installations.

Role

Designer/Product Manager

Timeline

6 months

My direct contribution

Research, UI design and validating product decisions with users/stakeholders.

BACKGROUND

Form Publisher, a Google Workspace add-on with 26 million downloads, transforms Google Form submissions into custom PDFs, Google Docs, or Microsoft Office documents.


Problem to solve

Of the hundreds of installations that happen every day, only 32% lead to an activation. HMW simplify the installation-activation workflow so users can start generating their first file?

In over 6 months of UX work, I observed current behavior, had several conversations with users, and shipped a redesign that saw close to 40% increase in installation rate.

Installation flow - status quo

The existing 4-step process was time-consuming and counter-intuitive.
The user has to select the template and go through screens containing additional settings like destination folders, naming conventions, sharing list etc., none of which are mandatory for the file generation process to start.


Our team (a product designer, a technical writer, 2 software engineers, and a product manager) were on a mission to fix this, and I’d like to share how we did it.

Understanding the problem

I started by gaining context on the problem space by looking at the installation metrics, reading through customer frustrations collected by our support team, and reaching out to different teams. It became clear that the current flow:


  • Communicates a mandatory progress-like flow for settings that are indeed optional.

  • Too overwhelming for a first-time set-up

Of all daily installs, about 70% of users never generate a file.


Since I was new to Form Publisher, I had to familiarize myself with the add-on's existing workflow and other touchpoints. I mapped them all out and identified pain points relating to my gathered context.

Exploration and ideation

The first concept was to show the mandatory screens, which were Template selection and Template/markers review. The other non-optional settings will be accessed at will by the user if they want extra configuration.


We know from our data however that only about 20% of the users will want more customization.

Iteration/Feedback

The first concept was linear and quick to complete, but it didn't feel as complete as it could have. User testing revealed that not all users want to create a form, and without a form, Form Publisher can't work. Historically, we have never made this clear in our design.


Instead of simply informing users that they need to create a form for FP to function, it's more effective to assist them in creating a sample form. To achieve this, I redesigned the installation process to incorporate a pre-selection screen where users can opt to create a demo form without having to engage with the form creation wizard.

Second iteration (shipped)

To streamline the installation process, we removed the template selection step. Since users who don't want to create forms are unlikely to have custom templates, we provided sensible defaults and offer a preview option for users to review and customize if needed.


We shipped this as a high-confidence solution after rounds of UX reviews and feedback gathering.

The Get started allows for the user to select their template.

GENERAL DESIGN PRINCIPLES

Once I understood the space better, I dug deeper into the framework. Historically, Form Publisher never had a dedicated designer and was only updated by developers. There was no existing source file, so I took a lot of screenshots and inspected a lot of code to develop source files, which provided a good insight into the structure.


There were a lot of general design principles that I leveraged as a baseline UX, to help create a stronger foundation for product success:

  • Rethink the layout to reduce clutter and emphasize priority actions

  • Achieved consistency in tooltip behaviour

  • Unified elements sizes, positions, and visual treatments

  • Unified vertical spacing for clarity and better targets

  • Remove as many borders that tend to house individual elements, especially the horizontal lines between list elements

UI Refresh : Sharing list

I asked questions like:

  • how is the sharing list currently being interpreted by our users?

  • how long can the list possibly get?

  • what are the highest possible character lengths we can encounter? e.t.c

UI Refresh : Markers preview

Here, the second iteration was easier/faster for engineering to implement while still retaining the beneift of cleaner, more usable design than Iteration #1.

Status quo

Status quo

Iteration #2

Iteration #2

Iteration #2 (shipped)

UI Refresh : Customization editor

Here, the second iteration was easier/faster for engineering to implement while still retaining the beneift of cleaner, more usable design than Iteration #1.

Status quo

Status quo

Status quo

Iteration #2 (shipped)

Iteration #2 (shipped)

Iteration #2 (shipped)

The impact so far

After launching the new installation flow, the installation rate surged from 32% to 71% in just four months.


While this improvement suggests we addressed issues related to linearity and clarity, I delved into the reasons why users still faced challenges during their initial installations. One key finding was that the add-on's speed, influenced by factors like internet connection, system specifications, and browser, contributed to user bounce rates.


In collaboration with leadership to address technical debt, I started ideating on some feedback screens to manage user expectations during loading times.

CREDITS

Software Engineer

Kristiyan Ivanov

Software Engineer

Oleg Gulesky

QA Engineer

Richard Sana

  • → NEXT WORK

    → NEXT WORK

    → NEXT WORK

    → NEXT WORK

  • → NEXT WORK

    → NEXT WORK

    → NEXT WORK

Feel free to reach out if you want to collaborate or simply have a chat.

  • → WORK@MAYOWATOBI.COM

    → WORK@MAYOWATOBI.COM

LESS IS MORE IS MORE LIKE: MORE IS LESS, MORE OR LESS.

@2024 TILL A COUPLE YEARS, VIELLEICHT?

Feel free to reach out if you want to collaborate or simply have a chat.

  • → WORK@MAYOWATOBI.COM

    → WORK@MAYOWATOBI.COM

LESS IS MORE IS MORE LIKE: MORE IS LESS, MORE OR LESS.

@2024 TILL A COUPLE YEARS, VIELLEICHT?

Feel free to reach out if you want to collaborate or simply have a chat.

  • → WORK@MAYOWATOBI.COM

    → WORK@MAYOWATOBI.COM

LESS IS MORE IS MORE LIKE: MORE IS LESS, MORE OR LESS.

@2024 TILL A COUPLE YEARS, VIELLEICHT?