3 Sept 2024

Maximising conversions using block‑based design.

By leveraging a block-based design framework integrated with Storyblok and Shopify, we empower our clients to manage their websites independently without relying heavily on developers or designers. How? Let’s dive in!

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.

Design system for e-commerce store mishmash.

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.

“The design system has become the foundation of everything we have done since then. We grew from 200 to over 1000 businesses and we consistently get appreciation from customers for the ease of use of the product.”

Arjun Paul

CEO at Zoko

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.

Storyblok’s visual editor on mishmash e-commerce shop.

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.

Blocks allow Hey Harper can mix and match blocks as they see fit.

Hey Harper

Visit our Hey Harper case study for a deeper dive into the process of rebuilding their e-commerce website.

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.

Trivia Time

Did you know the first instance of e-commerce was a pot deal? In 1971, students at Stanford University used ARPANET (the precursor to the internet) to trade marijuana. However, this early venture was short-lived, as the university quickly shut down the operation.

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.

“We want to stop the A/B test – we already have enough data. The 20% traffic driven by the old website has a worse conversion rate. Letting this continue until next Monday means throwing 10,000€ away.”

Zé Maria Alarcão

Product Manager at Hey Harper

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?

How we collaborate

Find all the information about working with Significa on our Handbook.

“The web design is outstanding. But for us, the most important thing is their constant support after delivery.”

Diogo Mendes

CMO at U.Dream

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.

mishmash had a return on investment in just 4 months.
In 6 months, Hey Harper increased their sales by 59%

Ready? Set. Go!

Eager to get your products flying off the digital shelf?

Significa

Team

Author page

Think, Design, Develop, Launch. Write. Repeat. Enjoy our collective musings coming from across our product, design and development teams, all in a neat blog post for you.

We build and launch functional digital products.

Get a quote

Related articles