Maximising conversions using block‑based design.

As we state in our Playbook, we are Design-led. We solve problems through Design, which is our product development driver. This stems from the fact that Design integrates business goals, product requirements, user needs, strategy, technology, and marketing. In short, we embrace the fact that Design can make or break a business.

Of course, Design isn’t the only ingredient in our recipe, but it is the main one. Each project is different, and based on its requirements, we adapt our processes and approaches accordingly. For instance, part of our approach to building successful e-commerce platforms is ensuring they are easily manageable from editorial, content management, maintenance, logistics, and operations perspectives.

Like Tetris, but better.

Many argue Tetris is the best game ever. Who are we to disagree? The appeal of blocks has surely reached us and our clients, too. And it starts — you guessed it — with Design.

Our Design process begins with moodboarding so we can align with the client and ensure we are on the same page about the visual vibes we will build upon. As we draft the Look and Feel, we already consider scalability into what will soon become the Design system. This will effectively provide a solid foundation that shapes and unifies the project's visual and functional aspects. Much like Tetris, i.e. a puzzle game, this ensures the website can continue to grow in content and pages without compromising its visual qualities. Moreover, it guarantees a cohesive integration of the brand identity itself.

As we move to the Development phase, where Storyblok and Svelte Kit are our best friends forever, this block-based design approach offers plenty of advantages. One is that we can deliver results by blocks rather than pages. This means we coordinate with the client’s marketing team on which ones they prioritise, enabling them to build pages as we go. Thus, there is no longer any need to wait for the whole website to be completed before content can be introduced, which is an extremely laborious task.

On this note, Storyblok’s visual editor comes in particularly handy. It allows anyone to build pages with the available blocks—which can also be set to display block previews—without looking at the code.

Flexibility for the win.

With reusable design comes reusable code. Another advantage of block-based frameworks is their scalability from design to implementation. Since the code is also reusable, development costs are considerably reduced, and time to market is optimised.

Furthermore, reusable code offers the flexibility to build pages with multiple structures. For example, for Hey Harper, we made it so the client can build infinite product pages with mix-matching blocks, thus avoiding monotony. Distinctive backgrounds ensure coherency, whereas generous margins and scalable paddings put the product’s imagery in the spotlight rather than overbearing it with design gimmicks. On this note, a shoutout to HH’s Marketing team, which invests greatly in high-quality photo productions. They even produced one purposefully for their new website’s image ratios.

A/B testing without stressing.

Another advantage of implementing a modular system is that the client can try multiple blocks and/or pages, evaluate their performance, and decide on the ones that convert better. In other words, conducting A/B testing ceases to be such a pain.

Even if you are unfamiliar with this method of User Behaviour Analytics, you have probably heard the term somewhere already. This is because A/B testing methodology has been around for a long time! Also known as split testing, it has its roots in the early 20th century with Ronald A. Fisher (1890-1962), a British statistician and biologist. It immediately influenced various fields, including agriculture and psychology, but its application to digital marketing and web optimisation started gaining popularity with the rise of e-commerce businesses in the early 2000s and the resultant need for data-driven decision-making.

Although there are other methods for testing user behaviour, such as heatmaps, funnel analysis, and session replays, we consider A/B testing—or even multipage testing—to be the best approach. In our experience, it is often more cost-effective than investing in earning new traffic.

Here’s how it works: as a retailer, you go live with two different versions of a page section, a single webpage or a full website. Traffic is randomly divided, so each group of users sees either version A or B (in statistics, these are named control or variant). You can understand which version performs better by looking at the consequent data, such as bounce and cart abandonment rates. As you make changes and incrementally run these tests, you will better understand your users’ journey and their pain points. Inevitably, you will make data-informed strategic decisions, which will surely enhance engagement and lead to more conversions.

One of the golden rules of A/B testing is the amount of data collected and its quality. For this reason, it is important to give tests time to run. However, sometimes, the gap between results is so wide that changes must be implemented immediately. This was the case for Hey Harper, as we tested their old website against the new one.

K.I.S.S. Maintenance.

No, no one is telling you to kiss anyone, or anything…

This is merely an acronym our developers swear by. It sums up our engineering ethos and stands for Keep It Simple, Stupid. We vouch for simple software, as it enables us to build something that is maintainable and usable for years after it was made, with little maintenance effort. However, just because it is simple, it does not mean it requires any less consideration and specification to work properly.

Naturally, block-based frameworks are a part of this approach, but we strive to extend it to other areas and enable our clients to embrace it too. For this reason, we carefully consider how we deliver our products and ensure robust documentation teaching to manage content on Storyblok. This usually includes step-by-step guidelines and short illustrative videos, and every time there is a new block added, we make sure there is another updated demo available, which also includes recommendations regarding optimal copy length and image sizes.

The only caveat is that if the client wishes to have an entirely new block available, we must design and code it beforehand. However, efforts to do so are often minimal because most of the necessary code is likely already available. Not so bad, huh?

The proof is in the ROI.

The hard truth is that businesses whose frameworks are not block-based are stuck in the past. This puts their marketing teams under unnecessary pressure, navigating through complex operations to achieve mere “okay” results.

Our block-based design and development approach equips our clients with the tools to drive long-term success and growth. By incorporating a streamlined, built-in A/B testing capability on our websites, our customers can efficiently implement data-driven optimizations that boost user engagement and sales over time. Managing their online stores and the manpower needed to run them becomes a pleasant experience, making their businesses more sustainable in the long run.

We are so confident in the results we can deliver—look at what we did with Hey Harper and mishmash below—that we offer success rate discount fees as we continue to collaborate, iterating and improving user experiences based on the data collected after launch.