Plastiq Product UX Redesign & Rebrand

Plastiq, starting in 2012, was created as a way for the CEO, Eliot Buchanan, to pay his student loans with his credit card. Plastiq quickly became a popular way to pay bills where credit cards weren't accepted.

Plastiq Accept was born from Pay as a way for businesses to get paid without paying those pesky merchant fees.

Over the years at Plastiq, products were built in solos, but as the company grew, it quickly became apparent that we needed the products to be streamlined for the business, back-end services, and our users.

The following project walks you through the problems being solved, the process, and details about this significant undertaking and launch of the new cohesive Plastiq product.

Business Problems

  • Plastiq Pay and Accept were built on two different systems

  • If a user had both Plastiq Pay and Accept, they had to log in to two other services

  • Development was consistently blocked by legacy issues

  • With legacy features in place, users often got stuck in feature flows, unable to complete their goals

Goals

  • Create a unified Plastiq product with one navigation and login

  • Smooth transitions from marketing to registration to daily activation

  • Simplify flows to increase funnel completion

  • Adapt the new brand design into the user experience.

  • Construct a new component library

  • All existing functionality must be a priority

Plastiq Accept MVP

Plastiq Pay - Cardholder

Project Timeline

The product redesign and rebrand project was started at the end of 2020 and developed during the first and second quarters of 2021.

 

Launch Risks 

  • Potential disruptors for launch with partner services

  • Testing two branches for the release plan

  • Design bandwidth limited because of other feature requests

  • Features requests from other operating teams limiting engineering capacity

  • Ongoing marketing webpages for other feature launches throughout the quarter

 
 

Milestone: One Plastiq

Goal: Introduce the new Plastiq unified brand and modern visual aesthetics focusing on accessibility.

Revised Plastiq Logo

Updated Brand Colors

Unified Login

Updated Global Navigation

 

Milestone: Global Component Library

Along with the unified experience, we wanted to restructure front-end code into a more manageable structure. The first priority was to design a global component library for reduced front-end lift.

 

Snapshot of the component library

 

Milestone: Plastiq UI Templates

As a fast follow to the library, we wanted to create core screen templates that could be used as we developed future projects. With this, we improved page rendering and performance and created consistent user flows. This enabled engineers to swap out and reuse screens easily.

 

Full Screen View

Full Screen Form

List View

Half Screen Form

 

Milestone: Improved Funnel Experiences

Finally, streamlined the experiences and consolidated flows to improve the overall funnel. We added simple features to help users make and receive payments as quickly as possible. For example, we introduced inline invoice editing, autofill, payment tracking, and unified settings for businesses.

 
 

Results 

For this project, we measured success by multiple metrics: NPS, Activation, Retention, Revenue, Time to completion, and sign-up conversions.

Please contact me if you want more details on the project results.