Formstack Administration

As Formstack started expanding their product offering to include multiple apps, there became a need for a unified login system and administrative site for universal tasks like user management and billing. As the primary designer on the FSID team, I researched, planned, designed, and saw through the development of the holistic user experience for this project.

At a glance

 

Problem

With the acquisition of FastForms, QuickTapSurvey, Webmerge, Bedrock Data, and InsureSign, each product had separate customers, billing systems, code bases, and logins. The ultimate task was to unify these separate apps and create a seamless “platform” experience.

 

Results

What started as a cross-product path for SSO (Single Sign On), continued to become a global Administration site, unified billing, user management, and messaging system. As the primary designer on the Platform Foundations team, I worked with a group of cross-functional talent to research, design, and build this system.

FSID user login flow chart

FSID Login

 

This initiative consists of many separate projects spanning 3 years, multiple designers, and team members. Here are a few that feature my work:

FSID

Goal

Build one login to rule them all, i.e. Formstack ID (FSID), an SSO solution that allowed customers to log into all of their apps with the same credentials.

Process

  • Research: customer and stakeholder interviews to define technical and user stories

  • Project Kick Off: multiple design-led cross-functional and stakeholder kickoffs were held to define scope, technical limitations, and opportunities.

  • Design and Build: the build process, which usually begins with the designer defining the UX and providing research and prototypes to support the direction, was turned on its head as the developers decided to learn as they go and begin by creating an SSO prototype. This required a lot of iterative work between me, the PM and developers as they built out the system.

  • Iteration: we used flow charts and diagrams as a reference for designing within the dev framework. At each step, we would advocate for the user experience, designing mockups to show the ideal flow while accommodating the unfolding technical requirements.

  • Refinement: internal user testing followed by an internal rollout helped identify bugs, UX issues and edge cases.

Results

  • Going Live: new users were added to the FSID as they signed up, but individual accounts required serviced migrations to be ported onto the new login system.

  • Currently: FSID services SSO across Formstack’s full suite of products. The large majority of existing accounts have been migrated over, with great success. As of December 1st 2021:

    • 98.3% of paid Forms accounts are using FSID

    • 100% of paid Documents and Sign accounts

 
 

Administration Site

Goal

Create an administrative site to house the customer’s user profile, company profile, account settings, security settings, user management, billing management, and notification settings.

Process

  • Research: our starting point was auditing existing content and determining which content would be relocated from each individual app to the admin site. Each Formstack product at the time collected and displayed user information differently, so we documented existing content, looked at usage stats and talked to stakeholders to determine what could be scrapped, what could be unified, and if there was missing information we could begin collecting or displaying.

  • Project Kick Off: we used the project kick off to discuss technical limitations around how information was currently gathered and stored, to determine the first release MVP, and to flesh out a general release roadmap. At Formstack, we ask each participant during project kick offs to spend 10-15 minutes sketching their notes and ideas which helps the designer define the UI/UX and makes sure every point of view has been considered.

  • Design and Build: I created mockups for the sites scaffolding and pages for user login information and company profile content for the first release phase. I also designed what the site would look like if we were able to build out account settings, security settings, user management, and billing management. I would regularly share progress with coworkers, garnering feedback from the cross-functional team and also the Product Design team during our weekly critiques. Having these future-thinking mockups was ultimately very useful as each of those features appeared on the development roadmap. We also used these early mockups to validate designs with clients during usability testing interviews.

  • Iteration & Refinement: As each new feature was built, the experience was refined, designs were revisited and improved in alignment with project requirements. This project spanned 3+ years, and during my maternity leave, was taken over by two other designers who contributed work on unifying billing, managing subaccounts, and displaying content for our feature-rich Platform plans.

Results

  • Going Live: In alignment with the release of FSID, the Administration site was initially launched internally, and then rolled out to new customers. Existing customers were manually ported over.

  • Currently: the Formstack Administration site is the hub for Formstack’s full suite of products. Unified billing, the most recent project I’ve worked on, is going to be released to customers in early 2022.

 

Manage Plan page in the Formstack Administration site

Early billing overview page sketch

 

Explore Other Projects