Postmark Plans & Add-ons

A simpler pricing calculator and introducing opportunities to up-sell additional services.

While working with the Postmark product team I was tasked with redesigning the Plans page to introduce add-ons alongside the existing monthly plans. Add-ons would allow the team to experiment with new features and services that compliment the core product.

I started by asking some questions to define the scope of the project and set expectations. I worked with sales and marketing to understand the purpose of the project, why the time was right to tackle the project, and how it linked back to a wider product goals for the year.

Notes from the discovery phase for the Plans page redesign.

Pen & paper are still my favourite tools for quickly experimenting with ideas. Once I had a clear vision for the project I sketched out some rough ideas for the interface changes we’d need to make to the existing Plans page in the app.

Various sketches of initial component and layout ideas.

With the visual direction set, I moved to Sketch to design a range of components that would allow the team to experiment with different types of add-ons.

States for the add-on row component.

Next I combined these components and shaped out the page layout. I collected feedback from the team in Abstract and used this to inform future iterations of the design.

Iterations of the Plans & Add-ons page design.

After a few rounds of feedback we had a final design. I built out the frontend using React and TypeScript, then handed the project over to a developer to integrate it with the Rails application.

The final Plans & Add-ons page design, with a few extra add-ons to demonstrate the flexibility of the components.