UX Design Case Study —

Formstack ID: A New Platform Experience

The Problem
Formstack had acquired multiple applications — so each app handled billing separately and in the context of that specific app. On top of this, Formstack was adding a new type of pricing plan — Platform — with two levels, Starter and Pro. Platform users would have access to three of Formstack’s applications and thus we needed to design a centralized billing experience in the platform administration site.
My Roles
+ Research
+ UX Design
+ UI Design
Screenshot of the new platform dashboard screen.

Platform Dashboard within the Administration Site

Screenshot of the new platform billing and plan information screen

New Billing & Plan Overview screen for Platform Users

Research & Planning
I normally like to start a project off by leading a design kickoff. This kickoff includes Product Managers, Front-End & Back-End Engineers, and QA Engineers. Once I lay out user stories and get feedback from the engineers on the technical limitations, I often ask them to sketch out some ideas of how they think it should look/function. Then I go off and design a few different solutions getting feedback from other product designers before landing on a couple designs to test with users or internally. But sometimes a project lands on your plate with a tight deadline that was set by another department and you have to roll with the punches.

My Product Manager and I still created user stories but we had to move much faster than usual to ensure we could get it to the front-end devs as soon as possible. The upside to this was that I was interacting with the developers much more frequently, bouncing ideas off them and then iterating; meeting with the Product Marketing team multiple times to really understand the new plans & how users could interact/adjust them and then iterating; collaborating with Marketing as well as Leadership, then iterating; thinking through future phases of the new pricing plan rollouts and how these designs would scale, and then iterating. Due to time constraints, we had to mostly focus our user testing internally. I, along with another product designer, sent out research surveys to get a consensus on various parts of the new experience such as a consolidated navigation and on-boarding expectations. I was able to redesign and reorganize the Administration site's side navigation based on the information I gathered from a particular survey.
New Invoices & Invoice Recipients Screen

New Invoices & Invoice Recipients Screen

Design phase
As mentioned above, there was a lot of iterating. I shared designs early and often with engineers, product managers, designers, marketers, product-marketers, and leadership. Marketing was actually the department pushing these new pricing plans and they were the one’s who set the deadline as they were also launching a big rebrand and a new website along with the new pricing plans. So I was frequently chatting with the Brand Team to discuss how to properly implement various elements from the new branding in the apps themselves.

Because these new plans were at a platform level, that meant we couldn’t just drop a new trialer in one of the apps since we wouldn’t know where they’d like to start. We opted to redesign an existing screen within the Administration Site and call it the "Your Apps" screen. When a user first lands here after signing up for a trial, I wanted the actions they could perform to be clear. We also gave them a walk-through tour of the screen as well as helpful places within the Administration site which I designed and implemented via Pendo.
On-boarding experience for first time users

On-Boarding Experience for First Time Platform Users

My Figma file layout

My Figma File Layout

This was only the first phase of the billing plans and implementation. Marketing is rolling out new usage-based pricing plans for all the different apps, meaning we’ll be consolidating and moving billing for each app to the administration site. This will require easy ways to compare the various plans, a shopping-cart-like experience, and guides educating existing users on where to manage billing as it will be in a new location.