FROES · DESIGN · Block Design System

A grid of landing page blocks from Postclick’s Block Design System in the Postclick platform.

A slide about Postclick’s Block Design System Design Principles. The slide reads “What makes a block a block?”

A slide about Postclick’s Block Design System Design Principles. The slide reads “Scalability / Measurability / Modularity / Interchangeability.”

A phone and two tablets with blocks from the Block Design System. Blocks’ responsiveness are represented across the devices’ screen sizes.

A single block could change its visuals via a pool of styling options optimized for conversion rates.

1/3 mockup displaying the interchangeable properties from a block.

2/3 mockup displaying the interchangeable properties from a block.

3/3 mockup displaying the interchangeable properties from a block.

Diverse phone mockups displaying variations of the layout of a Hero block, all with the same content.

A collection of landing page templates using components from the Block Design System is displayed in the Postclick platform.

Phone displayed one of the landing pages from the Block Design System. The page has light background.

Phone displayed one of the landing pages from the Block Design System. The page has dark background.

Phone displayed one of the landing pages from the Block Design System. The page is displayed in a notebook desktop.

Our block library launched an MVP to a select group of Instapage clients and achieved a 16% conversion rate (for reference, Instapage had a 2% conversion rate average), leading to the kickoff of an improved version of the system.

Slide from the second version of the Block Design System. The slide reads “Block Design System 2: Atomic Design.”

Slide from the second version of the Block Design System. The slide reads “Design and development.”

Slide from the second version of the Block Design System. The slide reads “Ions.”

Slide from the second version of the Block Design System. The slide reads “Atoms.”

Slide from the second version of the Block Design System. The slide reads “Molecules.”

Slide from the second version of the Block Design System. The slide reads “Organisms.”

Slide from the second version of the Block Design System. The slide reads “Blocks.”

Slide from the second version of the Block Design System. The slide reads “Templates.”

FIgma files displaying the Atomic Design structure from the second iteration of the Block Design System.

Group of phone mockups in perspective. Each phone has a different variation of a landing page created with the Block Design System.

A conversion-driven landing page design system rooted in continuous optimization.

Postclick was a San Francisco-based startup aiming to revolutionize digital advertising. While its parent company, Instapage, created a SaaS platform to design landing pages, Postclick wanted to create a dynamic design system to create landing pages. These pages would be continuously improved using a machine learning algorithm to reduce client advertising costs and grow conversions.

The initial project scope involved the design of 400+ different blocks: landing page sections such as hero, testimonials, and product galleries. However, through research and POCs during our discovery stage, we reduced this scope from 400 to only 18 by mapping similar designs and seeing which ones could be reproduced with the same HTML but distinct CSS styling.

These 18 blocks were very flexible and could change their looks to test which ones would lead to better conversion rates. Each block had multiple outputs for each property, such as left/right positioning, sharp/strong radiuses, and light/dark modes.

Challenges along the way included technology constraints and understanding how freely clients should be able to customize the system while not increasing their level of effort when doing so. We relied a lot on the company’s in-house CMS — which was also in development at the time, making it crucial to stay in sync with multiple teams.

After launching the MVP, the Postclick platform and the design system were used by a select group of Instapage clients, providing us valuable feedback along the way. We shipped landing pages with a 16% conversion rate and a 20% average conversion rate lift using the initial version of our Block Design System. 20M post-click experiences were created, with 500 million conversions earned.

A second, improved design system version kicked off development after the MVP launch. The next iteration was rooted in Atomic Design, had more interchangeable styling properties, and a better tech stack in React and TailwindCSS. ∎

Projects

Artwork

Designing Perspective

Block Design System

Rebranding Avenue Code

Contact

hello@froes.design

LinkedIn/froesdesign

@pedrofelipefroes

Designed and developed by FROES · DESIGN