Michela Frecchiami

In the DTC landscape, where every pixel of your e-commerce site holds the potential to captivate customers and drive sales, the significance of a robust design system cannot be overstated. It's not just a luxury anymore—it's a necessity.

A design system comprises patterns and methodologies that assist not only designers and developers but also product managers and marketers in creating cohesive and user-friendly digital products. While various models exist, most encompass a pattern library, design tokens, brand and style guidelines, along with documentation detailing the system's usage.

At its core, a design system is the backbone of your brand's digital identity, ensuring that as your e-commerce business scales, every page, button, and interaction maintains a consistent brand image and delivers an optimized user experience.

But diving into the world of design systems can often leave brands navigating a maze of challenges, especially under the relentless pressure to rapidly deliver fresh, compelling landing pages and new features. That's where the magic of design systems truly shines—by providing a reservoir of pre-built components and guidelines, they turbocharge the creation process, allowing your team to keep pace with demand without sacrificing quality.

Explore the power of design systems to transform your digital journey and drive success in the competitive e-commerce landscape.

## How Design Systems Accelerate Time to Market

In a traditional scenario, the journey of redesigning product pages begins with designers crafting prototypes. These prototypes then undergo a series of checks: stakeholders review, QA stages with engineers, validation by UX researchers, and eventual exposure to a segment of the site’s visitors for performance evaluation through A/B testing. Multiple design iterations are crafted and assessed, with many discarded in pursuit of the optimal solution. This iterative process is vital to ensure only the highest quality updates reach the entire customer base. Yet, the involvement of various teams and multiple revisions makes it inherently time-intensive.

However, with the aid of a design system, the approach is streamlined to fewer phases, significantly accelerating the design-to-production timeline. Tools like [Figma](https://www.figma.com/) provide a collaborative environment where designers can rapidly prototype by pulling pre-defined components and patterns into their workspace, cutting down prototype creation from days to hours.

But the efficiency doesn't end there. Developers can swiftly compile new features by accessing the same pool of components, bypassing the need for detailed visual direction for every interface. Tools like [Storybook](https://storybook.js.org/) become invaluable in this context, enabling the isolation and coding of UI elements for seamless integration. This streamlined workflow ensures that projects progress swiftly from ideation to implementation, allowing teams to deliver high-quality updates in a fraction of the time.

## Implementing a Design System: First Steps for E-Commerce Brands

> A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. — Nathan Curtis

The journey towards a comprehensive system that aligns with [Nathan Curtis](https://medium.com/@nathanacurtis)'s vision—a "*living, funded product with a roadmap & backlog, serving an ecosystem*"—might feel overwhelming. Yet, the truth is, embarking on this path doesn't require an army. It's about smartly leveraging what you have and starting somewhere meaningful. Let's explore practical steps to initiate and nurture a design system with your current resources.

- **Conduct a Design Audit**: Begin by taking stock of your current design elements across all digital assets. This includes colors, fonts, button styles, and any reusable components. The goal here is to identify inconsistencies and opportunities for standardization. A comprehensive audit paves the way for a more cohesive digital presence. [FigJam](https://www.figma.com/figjam/) is a great tool to kickstart this first step and to keep all the screenshots accessible to everyone on the team.


- **Assemble a Cross-Functional Team**: This doesn't mean hiring new roles but individuating people across existing departments who will be responsible for creating and maintaining the design system. Even a small team, comprising a designer, a developer, and a product manager, can kickstart the process. Their diverse perspectives will shape the design system to be both usable and technically feasible.


- **Create Design Tokens and Components**: Start by standardizing the most frequently used elements. Design tokens are the building blocks (like colors, typography, and spacing) while components are reusable UI elements (such as buttons, and input fields). Focusing on these foundational elements is essential to pave the way for creating patterns (components that come in a specific combination).

- **Set Up Documentation**: Initially, your documentation could be as straightforward as a shared online document or a simple internal wiki. Maintaining the same structure (tokens, components, patterns) and vocabulary of your design system is the key to fostering accessibility and clarity.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/0202c0d7fe5620978d813c8a6d989a41ec7084e5-1600x1052.jpg?fit=clip" alt="Cometeer design system by Nebulab">
</figure>

Remember, the essence of a design system is to foster efficiency, consistency, and innovation across your online store. Starting small and scaling thoughtfully can lead to significant long-term benefits, setting a strong foundation for growth and adaptation.

## Overcoming Obstacles to Adoption

Introducing a design system might initially meet with skepticism from your teams. Overcoming this involves embracing a culture of collaboration and shared ownership. As discussed in [Boost Your eCommerce Team’s Productivity with Open Design](https://nebulab.com/blog/the-open-design-process), developing an open design process is essential for fostering broader adoption of the design system throughout the organization.

Demonstrating the design system's value through small, visible projects that improve the e-commerce experience—such as improving the navigation bar or updating product grids for holiday sales—showcases the practical benefits. These successes not only build confidence in the system but also serve to highlight its effectiveness in real-world applications.

Organize hands-on sessions where stakeholders from different teams—be it design, development, or even marketing—redesign an e-commerce product page or streamline the checkout flow using the design system components. This is a great opportunity to turn skeptics into advocates (and they can have fun doing it, too!).

> A design system’s value is realized when products ship features using parts from the system.
> 
> — Nathan Curtis

## Tips on Scaling Design Systems

As your e-commerce brand navigates through various stages of growth, the need for your design system to adapt and scale becomes increasingly apparent. A scalable design system not only ensures consistency across your digital presence but also facilitates a more collaborative and efficient workflow as your team expands and your product offerings diversify.

Here are some practical tips on achieving just that, ensuring your design system remains a thriving, integral part of your brand's evolution:

- **Foster Shared Language**: In a design system, a "primary button" component is defined with specific attributes such as size, color, and behavior. This terminology is consistently used by both designers (on Figma) and developers (on the code), ensuring seamless communication and alignment throughout the project.

- **Prioritize Regular Reviews**: Schedule frequent review sessions dedicated to assessing and updating the design system. These reviews are opportunities to adapt to new brand needs, incorporate feedback, and integrate emerging design and tech trends.

- **Encourage Contribution**: Organize workshops to make the design system a collaborative project where team members can contribute ideas, feedback, and improvements. This not only keeps the system dynamic but also fosters a sense of ownership among the team.

- **Document Religiously**: Keep comprehensive and up-to-date documentation of the design system. The documentation can be on Figma, a separate document, or a tool. It can even be a website, it depends on project dimensions. With [Shopify Polaris](https://polaris.shopify.com/), Shopify provides clear and accessible documentation to streamline the design and development process for Shopify merchants and partners.

Implementing these strategies can help your design system remain a vital, evolving asset that supports your brand's growth and adapts to its changing needs.

## Design Systems: The Blueprint for E-Commerce Excellence

In wrapping up our journey through the landscape of design systems, e-commerce brands must grasp just how vital these frameworks are. At the heart of it, design systems foster higher quality products and markedly enhance the user experience. One of the standout benefits is scalability. As your brand grows and your digital footprint expands, a design system ensures that scaling up doesn't mean starting from scratch every time. This seamless scalability goes hand in hand with maintaining brand consistency—vital for cultivating brand recognition and trust among your audience.

Moreover, design systems contribute to better website performance. By eliminating repetitive components and streamlining the design-to-development process, websites become leaner and more efficient. With a design system in place, accessibility is not the only built-in standard; for brands eyeing the global market, having a design system is a strategic step for embedding localization best practices right into each pattern, ensuring that your brand resonates with diverse cultural sensibilities —as we explained in [Expanding Your Brand Globally With Cross-Cultural Design](https://nebulab.com/blog/cross-cultural-ecommerce-design).

Embracing a design system isn't merely an operational upgrade; it's a commitment to elevating your brand's digital presence, ensuring that every interaction your customer has with your brand online is as intuitive, engaging, and memorable as possible. As you consider the next steps for your online store, remember that a design system offers more than just a collection of components. It's a pathway to crafting experiences that truly resonate, setting your brand apart in the competitive digital marketplace.

Why E-Commerce Brands Should Have a Design System

Nick Belzer

On August 28, 2025, [Shopify will sunset the ability to customize your `checkout.liquid` template](https://shopify.dev/docs/themes/architecture/layouts/checkout-liquid).

Newly created stores on the Shopify platform will already notice that they cannot use this template to customize their payment steps, thank you, and order status pages. Shopify is reigning in control over these pages and forcing merchants to migrate to [Checkout Extensibility](https://www.shopify.com/plus/upgrading-to-checkout-extensibility?shpxid=169152ee-9333-4686-13FB-D40F49B3F520). [Recent articles](https://www.shopify.com/plus/customers/monos) published by Shopify promote Checkout Extensibility as the faster and more maintainable way to extend your store’s checkout experience.

Unfortunately, with limited control over the checkout, thank you, and order status pages, merchants have also lost the ability to place tracking pixels on these pages. To remedy this, Shopify has introduced [Web Pixels](https://shopify.dev/docs/apps/marketing/pixels). Web Pixels can be either standalone (Custom Pixels) or part of a Shopify App (App Pixels), and merchants can use them to track both predefined and custom analytics events.

In this article, we’ll examine the inner workings of App Pixel and Custom Pixels and discuss alternatives merchants can deploy when they need additional granularity in their data.


## App Pixels

App Pixels are part of Shopify Apps that you install: for example, the [TikTok app](https://apps.shopify.com/tiktok) provides an App Pixel out of the box–you just need to enable it from the Shopify Admin.

There are several benefits to using App Pixels over adding custom tracking code to your theme: the new structure simplifies the installation and removal of the pixel, allows you to comply with customer privacy regulations out of the box, and streamlines the integration of your tracking logic across different types of checkout (e.g., Shop Pay vs. one-page vs. three-page checkout).

While this new approach to tracking pixels is a significant step forward, not every platform has a Shopify App available; therefore, not every platform exposes an App Pixel. If your tracking platform does not have an App Pixel you can install, you might need to go with Custom Pixels.


## Custom Pixels

Custom Pixels can be used to integrate tracking platforms that do not expose an App Pixel or when you want to track a custom event or datapoint. Your pixel can subscribe to a [fixed set of events that Shopify publishes](https://shopify.dev/docs/api/web-pixels-api/standard-events) or to [custom events](https://shopify.dev/docs/api/web-pixels-api/emitting-data) published by your theme and send the information to an external service.

Similar to App Pixels, Custom Pixels can be enabled and disabled through the Shopify Admin, and they automatically conform to the customer’s privacy preferences, which makes them a powerful tracking solution fully integrated within Shopify.

With that said, Custom Pixels also have their limitations.

First of all, Custom Pixels [are sandboxed in iframes](https://shopify.dev/docs/apps/marketing/pixels#lax-sandbox-custom-web-pixel). Because of that, you might run into limitations with specific tracking scripts. We recommend working with your tracking platform to resolve these issues whenever possible.

Secondly, Custom Pixels only have access to a limited set of data. During a recent migration from custom checkout scripts to Web Pixels, we encountered a limitation on some Custom Pixels, specifically around conversion tracking. By default, Shopify publishes the `checkout_completed` event. As part of this event, Shopify [sends along limited order- and customer information](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed). However, The tracking tags installed on our store used additional information, like the customer order count and type of purchase, that we originally included in the checkout script.

If you run into such limitations, there are a few alternatives you can try. That being said, each comes with trade-offs, and you should ensure the additional implementation and maintenance effort is worth it.


## Server-Side Tracking

Instead of relying only on Web Pixels, you can use server-side tracking to enrich (or replace) the data sent to your tracking platforms. Because this logic is not running in the browser, you can call the Admin API and access attributes that would otherwise not be available through the Storefront API.

This is a significant advantage, but it comes at a cost: you’ll have to manage custom code that runs on a separate server (or on a platform [such as Gadget](https://nebulab.com/blog/custom-shopify-automations)), and you will not be able to benefit from Shopify’s primitives for Web Pixels, putting the onus on you to deal with aspects such as privacy preference compliance.

An interesting middle ground is to use the [Shopify Flow](https://apps.shopify.com/flow) app. With the ability to [send HTTP requests](https://help.shopify.com/en/manual/shopify-flow/reference/actions/send-http-request) and the [new action to run custom JavaScript code](https://help.shopify.com/en/manual/shopify-flow/reference/actions/run-code), Flow gives you a robust set of tools to send information to an external API with attributes that your Web Pixels or frontend logic cannot easily access. You’ll still need to maintain the logic required for your solution, but Shopify will at least take care of hosting and executing it.


## Checkout Extensions

One of the benefits of the new Checkout Extensions system is that you can inject custom logic and UI into your checkout. Shopify allows extensions [to publish custom analytics events](https://shopify.dev/docs/api/checkout-ui-extensions/2024-01/apis/analytics) with any attributes you want. As Checkout Extensions have fewer restrictions than Custom Pixels, they can be used to pull extra information from the Storefront API and emit a custom analytics event. Your Custom Pixel can then send this event to any third-party tracking platform.

The implementation and maintenance cost here is relatively low: as long as your Checkout Extension adheres to the official APIs, this can be a reasonably robust solution. However, because Checkout Extensions can only access the Storefront API, you will have access to a more limited dataset than with server-side tracking.

You will also need to set up a custom Shopify app on your store and expose the extension to your theme. Luckily, Shopify makes this relatively easy by providing robust tooling and hosting the app directly, which means you don’t need external servers.


## Session Storage

Finally, another approach is to use the browser’s Session Storage to temporarily store attributes as the customer browses your store. You can then retrieve these attributes from your Custom Pixel at checkout. 

For example, you could use Session Storage to store a referrer URL here or the type of order the customer is completing (OTP vs. Subscription) _before_ checkout starts. Custom Pixels have access to Session Storage, which means they can read these attributes when the `checkout_completed` event is fired and forward them to your tracking platform.

Using Session Storage is the simplest way to add additional context to any analytics event: there is no need to set up a custom Shopify app, as all the logic can live in your theme and Custom Pixel. Additionally, in contrast to Checkout Extension, it not only allows you to include additional data that you read from Shopify’s API but also to collect behavioral data while the customer is browsing your store.


## Balancing Data Enrichment with Maintenance Effort

Web Pixels are a robust tracking solution fully integrated within Shopify’s ecosystem.

With more platforms getting on board, App Pixels are quickly becoming a straightforward and reliable solution for installing tracking pixels. In addition, Shopify enforces that the customer has opted into data collection before enabling these pixels, which is a step that is often overlooked when implementing tracking tags on a storefront.

Custom Pixels have some rough edges: their sandbox allows Shopify to enforce similar privacy constraints as for App Pixels but also creates situations where tracking tags don’t work, leaving merchants at the mercy of the tracking platform to build an App Pixel or to update their tracking script.

Finally, when neither App Pixels nor Custom Pixels provide the right data, you can consider alternatives such as Server-Side Tracking, Checkout Extensions, or Session Storage.

We work closely with business stakeholders to determine what events and data we need to track and how the data will be used. We then use that information to build a solution that will satisfy the brand’s needs while also minimizing the technical maintenance burden.

If you are migrating to Checkout Extensibility or need assistance with your existing tracking setup, [don’t hesitate to reach out!](https://nebulab.com/contact-us)

Web Pixels on Steroids: How To Enrich Your Shopify Analytics

Alessandro Desantis

In the last few years, customer acquisition has become more challenging and expensive for direct-to-consumer (DTC) brands due to App Tracking Transparency, increased competition, and inflationary pressure. With Chrome deprecating third-party cookies in late 2024/early 2025 and the resulting “signal loss,” marketers expect campaign performance to take another hit, driving Customer Acquisition Cost (CAC) further up.

As a result, e-commerce executives have been paying increased attention to customer retention strategies. Existing customers are cheaper to re-engage, have a higher average order value, and can drive organic acquisition through referrals, UGC and word of mouth.

In our conversations with clients, Customer Relationship Management (CRM) strategies have been top-of-mind, and new or revamped loyalty programs are among the main projects that brands are putting on the roadmap for the next year–often coupled with more intentional zero-party/first-party data strategy and better personalization capabilities.

However, not all loyalty programs are created equal: different growth stages, categories, and business models call for different program designs. The loyalty ecosystem has become increasingly complex to navigate, with a deluge of tools and tactics that brands can tap into. While this leads to more flexibility and healthier competition, even expert practitioners are often at a loss when they want to launch a new program or when they need to understand the performance and pitfalls of their existing one.

In this article, we’d like to cover the e-commerce loyalty programs through a first-principles approach. We’ll look at how to pick a program structure, how to design the “earn” side and the “burn” side of your program to maximize ROI–based on factors such as your geography, target demographic, product category, and business model–and how to measure the effectiveness of your program.

Let’s dive right in!

## How to Structure Your Loyalty Program

The number one mistake we see brands making when rolling out their loyalty program is not being intentional enough when it comes to program structure. Instead, they just do the first thing that comes to mind, copy popular competitors or other brands they admire, or mindlessly adopt the functionality of whatever loyalty app they have decided to install (which, in turn, is often dictated by the app’s popularity).

Unfortunately, loyalty programs are extremely nuanced. The ideal program depends on factors such as geography, target demographic, product category, business model, internal capabilities, and several other elements that, taken together, make certain structures and rewards more effective than others.

If you don’t account for all these elements, you will end up with a program that’s underperforming at best and detrimental at worst. Think about a luxury fashion brand that releases a discount-based loyalty program: customers wouldn’t simply be uninterested, but some might actively resent the brand for putting forward a cheap, transactional program that is not consistent with your brand’s image.

In fact, we find that _consistency_, rather than _uniqueness_, is the primary trait of successful loyalty programs. **Good programs are consistent with the needs of both the brand and its consumers–at all times and across all touchpoints.** You don’t need to be cleverer than everyone else; you just need to consistently make your customers happy in ways that will ultimately benefit the brand. If you can align these two needs, you’re halfway there.

As you can imagine, that’s easier said than done. In reality, most brands are pulled in a million different directions, and a compromise is often needed to find the ideal structure.

In the following paragraphs, we’ll outline a streamlined, repeatable process that you can follow to design the foundational aspects of your loyalty program.

### 1. Pick a Loyalty Program Type

The very first step is to pick the structure of your loyalty program.

You’ll find a lot of conflicting and confusing information on the web about the different possible types of loyalty programs–most resources are trying to one-up each other by adding one more variation to a never-ending list of program structures.

Let’s simplify this. In our experience, all loyalty programs fall into one of two categories:

* **Balance-based programs.** In a balance-based program, customers are awarded points when they perform specific actions (e.g., spending with the brand) or at key moments (e.g., on their birthday). They can then spend those points to redeem rewards such as discounts or free products. This is similar to having a bank account where you accumulate money and then spend it.
* **Tier-based programs.** Tier-based programs are similar to transactional programs in that you design a way to “quantify” how loyal customers are. However, rather than the customer “spending” their loyalty, the customer is assigned a loyalty tier (which can be permanent or not). Based on the customer’s tier, they are then granted different perks, such as free shipping or early product access.

Everything else (gamified programs, [paid memberships](https://nebulab.com/blog/ecommerce-memberships), value-based programs, etc.) is a variation of the above. For instance, a paid membership is just a tiered loyalty program where your tier is determined by a digital subscription plan: you pay the brand every month just to have access to the perks of that specific tier.

Neither type of program is superior to the other. Whether to go with a balance-based program or a tier-based program is primarily a function of your brand’s positioning, price point, and consumer demographic:

* **Balance-based programs are better for brands selling to a price-sensitive audience** that worries about value for money and responds better to more tangible rewards. These customers are likely already subscribed to similar programs, e.g., at their grocery store, making the model more familiar.
* **Tier-based programs, on the other hand, are a better fit for a more affluent type of consumer** who worries about status more than about convenience. The aura of exclusivity associated with being on the upper tiers of a brand’s loyalty program is a perfect match for such a demographic.

Another factor to take into account has to do with the nature of the rewards you expect to give your customers: some rewards (such as freebies) are supposed to be one-offs, which makes them a better fit for a balance-based program, while others (such as free shipping) are better modeled as “permanent” rewards, which makes them a better fit for a tier-based program.

If you can’t decide, you should know that it’s not uncommon to see hybrid programs: Most airlines, for instance, have loyalty programs where consumers accumulate rewards as they travel with the airline. Certain perks (e.g., priority boarding) are unlocked through a tier-based mechanism, while others (e.g., free trips) are unlocked through a balanced-based mechanism.

**However, as we’ll see later, simplicity and ease of use are key elements that determine the success of a loyalty program**, so you should only take this approach as a last resort, _especially_ if you’re launching a brand-new program.

### 2. Model the “Earn” Side of Your Program

Once you’ve chosen the foundational structure of your loyalty program, it’s time to determine how your customers will earn their rewards. At Nebulab, we typically refer to these as _triggers_ because they trigger your customers to carry out certain behaviors.

When designing a trigger, there are only two elements you need to think about:

* What is the action you want customers to take?
* How are you going to reward customers for that action?

They might seem like trivial questions, but they’re really not. Think about it this way: a loyalty program is an investment. You’re giving away value (in the form of discounts, freebies, services, etc.) in exchange for a specific return. If you get your triggers wrong, you might fail to drive action or drive the wrong action, which means you’re giving away your loyalty program perks in exchange for nothing.

While most brands start by rewarding customers for spending more, you don’t have to stop there. Here are a few additional ideas that might be relevant:

* **Acquire zero-party data.** If you need more information about your customers, how about _asking_ them? You can use your loyalty program to collect data about a customer’s preferences, habits, and attitudes and then activate it as part of your personalization strategy or product manufacturing process.
* **Encourage event attendance.** If you host virtual or IRL events, you can encourage attendance by rewarding attendees through your loyalty program. (Note: Exclusive event access also makes for a very appealing loyalty perk, so this goes both ways!)
* **Collect user-generated content (UGC).** Are you struggling to collect UGC for your brand, or do you need some organic content for a new product launch? You can reward customers for posting content on social media and allowing you to reuse it across your digital properties.
* **Promote referrals.** For obvious reasons, referrals and loyalty go hand-in-hand. If you want to drive more referrals, you can use your loyalty program to encourage customers to tell their friends about your brand. Bonus: Make it an even better deal by also rewarding the _referee_, not just the referrer!

These are very generic examples that will apply to most brands. However, as we’ve already said, the sky’s the limit: find ways to activate your loyalty program that make sense for your brand, and keep in mind that the “right” triggers will change over time.

When working with brands, we encourage them to treat their loyalty program as a blank canvas that they’re constantly drawing on. At any given time, you should be able to draw a straight line from your current goals and challenges to your loyalty program’s structure: How does your program drive behavior that helps your business reach the next level?

### 3. Model the “Burn” Side of Your Program

Once you’ve established how customers will advance in your loyalty program, you need to determine what perks you’ll offer.

A common mistake at this stage is copying what everyone else does and offering discounts without thinking about what your customers really want.

Typically, we bucket loyalty program perks into four categories:

* **Exclusivity.** These perks include exclusive/early access to products, content, or events. They are typically a good fit for premium brands with an established “brand universe” (i.e., digital and physical IP) that they can expand, remix, and leverage as part of their loyalty program.
* **Cash.** These are more tangible monetary perks such as discounts, cashback, freebies, free shipping, and other forms of value add. They are typically a good fit for value-driven brands, where consumers are more price-sensitive and want to know they’re getting the most bang for their buck.
* **Services.** Think personal shoppers, pet grooming, and other services you can bundle with your product to create a holistic brand experience. They are a good fit for product categories that are service-adjacent (such as pets), require constant education (such as apparel/beauty), or both.
* **Community.** Exclusive communities are becoming increasingly popular, allowing customers to retreat from the open web into a “safe space.” These communities can double down as invaluable sources of UGC and customer feedback, creating a powerful loop.

It’s worth spending a few words on discounts, which are extremely common in loyalty programs. While discounts are easy to implement and seem like a safe bet, they are not necessarily the right choice for all brands. Discounting has several problems:

* **It’s expensive.** While this ultimately depends on your profit and operating model, discounting products year-round can severely impact your bottom line.
* **It scales poorly.** With most of the perks we have described, you can access economies of scale. That’s not the case with discounting: no matter your size, a 10% discount will always mean giving away 10% of revenue.
* **It hurts your brand.** Discounting lowers the perceived value of your product and can easily backfire, especially if your brand has a premium positioning.

So, how do you decide which perks to offer? It’s pretty simple, actually: you just ask!

Talk to 10-20 of your most loyal customers, i.e., those who will realistically reach the upper echelons of your loyalty program. You’ll want to ask them about their lifestyle, how your brand fits into their day-to-day, what other brands they shop with, and what they would value in your loyalty program. This should give you a comprehensive overview of what perks will resonate the most.

A final note: if your brand sells in different channels (e.g., online and in your physical stores), design your perks to appeal to customers no matter their shopping channel. For instance, a free shipping perk doesn’t make sense to someone who typically shops in-store, but having access to a personal stylist once a year is much more enticing.

## Optimizing Your Loyalty Program CX

When we talk about Customer Experience (CX), we refer to _how_ customers will interact with your loyalty program. Making your program as simple as possible to understand and consume is one of the main factors determining its success.

On that note, here are a few suggestions for creating an amazing loyalty program CX:

* **Unify the experience.** By funneling as many of your CRM operations as possible through your loyalty program, you will streamline the customer experience, maximize enrollment rates, and reduce operational overhead for your team. This can go as far as enrolling any customer with a registered account into your loyalty program.
* **Keep it simple.** At the same time, you want to avoid overcomplicating things: if customers get confused, they might stop engaging with the program. Provide clear instructions for earning and consuming rewards, and keep reminding customers of the existence and structure of your program across different touchpoints (e.g., via email, SMS, at checkout, etc.).
* **Leverage personalization.** Loyalty program personalization is a somewhat sophisticated but compelling technique. Some perks resonate more than others: if you can identify which customers are most likely to appreciate them, you can effectively maximize customer engagement.

Remember that if you’re using a third-party app to power your loyalty program, your ability to customize the CX might be somewhat limited. This isn’t a bad thing per se, but it is something you’ll want to account for when picking your ideal partner. You also shouldn’t be scared of deploying a little bit of custom technology, if it helps you stand out from the crowd and create a loyalty program that your customers will love you for.


## Measuring Loyalty Program Effectiveness

Launching your program is only half the battle. As we’ve mentioned, a good loyalty program is like a blank canvas: you should constantly adjust it to drive the behavior you want at that moment in time. To do that effectively, you need to measure the success of your program.

What KPIs to measure ultimately depends on your program's structure, perks, and rewards. At a minimum, you’ll want to look at the following:

* **Enrollment Rate:** % of unique customers who enrolled in your program
* **Engagement Rate:** % of unique customers that engaged with your program in any capacity (e.g., looking at their balance)
* **Redemption Rate:** % of unique customers that used a perk from your program
* **AOV, LTV, and Time-Bound Retention:** you’re already measuring these for your regular customers. For your loyalty members, you want to measure the program’s incrementality with respect to these KPIs–more on that below.
* **Program Costs:** you should have a clear picture of both variable costs (discounts, freebies, events, etc.) and fixed costs (IT, training, etc.).

Finally, don’t forget about customer feedback! Ideally, you should constantly seek qualitative and quantitative feedback from your customers in the form of NPS surveys and moderated/unmoderated interviews to improve the program.

### A Note on Self-Selection and Program Incrementality

Unfortunately, the literature on measuring loyalty program effectiveness can be extremely poor, when not misleading. Most resources will point you to metrics such as Customer Lifetime Value (CLTV) and leave it at that. Some will tell you to compare metrics between members and non-members, which is awfully incorrect.

**When it comes to loyalty programs, what you want to measure is their _incrementality,_ i.e., to what extent the loyalty program _actually_ affects your KPIs.** If you do that, you’ll find that the incrementality of any loyalty program is much lower than what you’d see if you just computed the performance delta between members and non-members.

For example, let’s assume you want to measure how much your loyalty program contributes to increasing Average Order Value (AOV). You look at the AOV of customers enrolled in your program and find that it is, on average, $25 higher than for non-members. You might be tempted to conclude that your loyalty program leads to a $25 increase in AOV, but you would be wrong–_very much_ wrong.

Think about it this way: many of your loyalty program’s members would have spent the exact same amount (or perhaps just a little less) with your brand, _even if the loyalty program was not there to begin with._ These customers are _not_ spending more because they’re subscribed to your loyalty program; instead, they have subscribed to your loyalty program _because_ they were spending more in the first place. This statistical mistake is called self-selection bias, and it’s unfortunately very common among inexperienced practitioners.

To properly compute program incrementality, you need to rely on techniques such as difference-in-differences analysis, where you measure a metric before and after customers join your program, and Propensity Score Matching (PSM), where you “cluster” customers by affinity and compare their behavior. Unfortunately, it would take an entire article to unpack these techniques, so we encourage you to do additional research.

## Loyalty Programs Are Powerful, but They Require Attention

As you’ve seen, launching a loyalty program for your brand is not an initiative you can treat as an afterthought. It requires careful planning, spotless execution, and continuous, data-informed iteration to maximize your ROI. Otherwise, you might end up with a loyalty program that’s more expensive than the incremental revenue it generates.

In this article, we’ve only scratched the surface, but there’s so much more: depending on the structure of your program, you’ll need to think about tier pricing or point expiration; interviewing customers is an art in and of itself, as is measuring program incrementality. All of these topics would warrant separate articles.

If you need help launching your program or overhauling your existing one, feel free to reach out! Together, we can create a program that will grow your business while delighting your customers.


The Ultimate Guide to E-Commerce Loyalty Programs

Davide Di Stefano

The web is full of e-commerce websites that boast over-the-top designs, top-notch storytelling, and incredible lifestyle imagery. However, some of these stores still fail to effectively acquire new customers, or to give previous customers a reason to come back.

Faced with this conundrum, brand owners often fall into the trap of adding more products, more content, and more apps to their store in hopes of solving the problem. Unfortunately, more often than not, this approach only makes the situation worse, leading to a more bloated, slower store that drives even more customers away.

When your store is not generating the results you’re looking for, it can help to see things from a fresh perspective, and design audits are structured to accomplish precisely that goal.

A design audit is a systematic review of specific areas of your store. The goal is to identify bottlenecks that are artificially driving down KPIs such as conversion rate (CVR), average order value (AOV), or repeat purchase rate (RPR). The audit benchmarks the store's visual design and user experience against industry best practices, considering factors such as customer feedback and satisfaction, accessibility, information architecture, and page speed across different device categories.

At Nebulab, we’ve been running design audits for our clients to help them identify what touchpoints (or absence thereof) create the most friction, what opportunities hold the most growth potential, and where to focus next. In this article, we’ll examine what benefits an audit can deliver to your brand, when it makes sense to run a one, and how the ideal audit is structured.

### The Benefits of E-Commerce Design Audits

A good design audit will not only provide you with a list of usability issues and opportunities for improvement: it will also help you understand why these are the right things to be focusing on.

For example, fashion brands often struggle with their product discovery flow. With an extensive product catalog, it can be challenging to implement proper search and filtering functionality and strike the right balance between what the consumer is looking for and what products the brand wants to prioritize. The business impact is enormous: [according to Baymard,](https://baymard.com/research/ecommerce-product-lists) cart abandonment rates on e-commerce sites with poor product listing pages are in the 67-90% range, dropping to a mere 17-33% when the usability issues are corrected.

By arming brands not just with insights about the status of their customer experience, but also with data about the business relevance of those insights, design audits allow brands to move faster and with more confidence as they work to improve your top line and bottom line.

Here are a few other benefits of e-commerce design audits:

* **Conversion Rate Optimization:** many brands approach CRO through the lens of A/B testing, running experiments for every change they have in mind. While A/B testing has its role, it comes with non-negligible [complexity](https://nebulab.com/blog/ecommerce-ab-testing-mistakes) and is not always warranted. A design audit can highlight the “fundamental” improvements you can make to increase conversions immediately, while also identifying areas where more data is needed to make a decision.
* **Brand Consistency:** early-stage brands need to move fast. As designers work frantically to keep up with the pace of the business, brand consistency often takes a hit. A design audit can provide the opportunity for a “brand reset,” taking stock of the brand’s digital touchpoints and ensuring they’re all working in harmony to provide a coherent image of your brand.
* **Stakeholder Alignment:** while the human element can never be completely removed from decision-making, design audits help harmonize the opinions of different teams and stakeholders by bringing trusted qualitative and quantitative insights into the discussion. In turn, better stakeholder alignment leads to improved team satisfaction and higher productivity.
* **Overhead Reduction:** sometimes, brands create human-driven processes to make up for existing inefficiencies. Design audits can shed light on situations where a better website design choice or a greater amount of automation can help you reduce operational overhead, freeing up your resources to focus on more strategic, higher-leverage projects.
* **Search Engine Optimization:** while design audits are typically not directly aimed at SEO, many design improvements can boost SEO as a secondary benefit. Some examples of this include improvements such as adding breadcrumbs to your navigation and improving website performance on desktop and mobile.

At this point, the advantages of conducting a design audit should be sufficiently clear. But how do you know when to perform one?

### When To Conduct a Design Audit

For brands that iterate on their online store very often, it’s helpful to perform design audits at a fixed cadence, e.g., every six months. With that said, there are a few additional key moments and indicators you want to watch out for:

* **After a major feature release:** it is often a good idea to follow up on large feature releases with a design audit. This can help guarantee brand consistency and ensure that no guidelines have been overlooked while implementing the new functionality. In this case, the audit can be scoped to the portions of your digital experience that have been changed significantly.
* **When you see a drop in KPIs:** if you see a drop in performance and can’t pinpoint the root cause, a design audit might help you clarify the problem. You can look at which metrics were impacted to understand where to focus your investigation or run a site-wide audit if you’re unsure where the friction is. Examples here are an increase in bounce rate, a drop in conversion rate or a decrease in average order value.
* **When you need to drive efficiency:** if you’re looking for ways to increase business efficiency, a design audit can help you uncover cumbersome user journeys that can be streamlined or automated. In this case, you should also evaluate an audit of your back office, as it has the potential to to highlight ways that you can make your team’s lives easier.

If you fit one of these scenarios, a design audit might be in order. More broadly, if you are facing a CX-related issue that could benefit from a fresh pair of eyes, a design audit can provide the clarity you need.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/5e46eafbb3763455a579d32443bc1d9ee2bf24fd-1600x1052.jpg?fit=clip" alt="How we conduct a design audit at Nebulab">
</figure>

## How We Conduct Design Audits

When our design team conducts an audit, the content is typically customized based on factors such as the brand’s stage, target audience, product category, e-commerce business model, and current challenges and priorities, as reported by key stakeholders.

That said, there are certain steps in our audit process that we always follow, and they can serve as a good template if you want to run a design audit in-house.

### 1. Define the Audit Scope

The first step is always to determine which areas of your website the audit should cover. 

For example, if the majority of your traffic comes from mobile, it makes sense to prioritize the mobile experience over desktop. If you’re seeing a drop in AOV, you’ll want to look deeper into your product discovery and cross-selling/upselling flows.

At this stage, we typically examine topline traffic and talk to stakeholders to understand the key issues and opportunities. We want to ensure the audit is as objective as possible while also reflecting the business's real challenges and goals.

### 2. Analyze Customers and Competitors

When conducting an audit, we often find that brands have a treasure trove of data they’re not exploiting fully. Tools like Google Analytics, heatmaps, product reviews, customer support tickets, and loyalty programs can all offer valuable insights into user behavior, help uncover patterns, and identify points of friction in the customer experience.

In addition to looking at the brand’s zero-party and first-party data, we also look at competitors to evaluate them against the brand’s experience. While you don’t want to be the same as everyone else, understanding how your competition stacks up to you can help you prioritize areas for improvement, brainstorm new customer touchpoints, and double down on your competitive advantages.


### 3. Evaluate Your UX and UI

This is where things get interesting! Based on the context we have collected, we evaluate the store's digital design against industry best practices and foundational design principles, blending them with our expertise to pinpoint the areas of highest impact.

This assessment is completed by carrying out specific tasks from the customer’s perspective. It can be a site-wide analysis or it can focus on select areas of your store, such as:

* Homepage
* Main navigation
* Categories
* Website search
* Product Detail Page (PDP)
* Product Listing Page (PLP)
* Filtering and sorting
* Cart and checkout
* Account pages

With each insight, we include references to the guidelines and best practices that informed our analysis, one or more actionable recommendations on how to create a better user experience, and an explanation of the expected business impact.

Sometimes, we also provide sketches and mockups of the design enhancements we suggest so you can better envision the result.


### 4. Prioritize the Results

It is not uncommon for a design audit to run 40-50 pages in length. If left in its raw form, such a vast amount of information can be challenging for brands to ingest and make sense of, leading teams to endless debates about what suggestions to implement and, ultimately, analysis paralysis.

To avoid this problem and aid brands with prioritization, we score the audit’s results according to their **impact** on customer experience, **desirability** to the end user, and **feasibility** for the brand’s design/development team.

This scale, coupled with a scoring mechanism and full executive summary, allows for a more strategic allocation of resources that accounts for the brand’s current goals and their broader business context.


## Design Audits Foster a User-Centric Mindset

Besides their immediate benefits, what we appreciate most about e-commerce website audit is their ability to **foster a customer-centric mindset.**

A good design audit taps into multiple sources of quantitative and qualitative insights and industry best practices, and presents all the data in a digestible and actionable way. In doing so, it helps brand executives elevate the customer experience to perfectly fit into the customer’s daily context, needs, and aspirations. This inevitably leads to happier customers and stronger business outcomes.

If you have any questions about conducting design audits or would like our team to help with your very own audit, [feel free to reach out!](https://nebulab.com/contact-us)

Does Your E-Commerce Store Need a Design Audit?

Alberto Vena

In the complex world of e-commerce technology, Shopify stands out as a beacon for businesses eager to establish or expand their online presence. Its user-friendly interface, coupled with a vast ecosystem of apps and integrations, has made it the go-to platform for merchants. Still, the convenience offered in the off-the-shelf package is not enough for everyone.

While Shopify's app store provides many easy-to-install solutions that promise quick wins, the reality is that the more complex your business needs, the less likely you'll find an app that fits the requirements. And, as businesses grow and operations become more complex, the limitations of a simple Shopify build become more and more apparent until they bring businesses to a crossroads: either simplify operations to fit into Shopify’s boundaries, or heavily customize Shopify to play by their rules.

The former path might be acceptable and sometimes even advisable for smaller stores. Building complex Shopify customizations requires significant resources and can be a source of [technical debt](https://nebulab.com/blog/shopify-technical-debt); as such, these projects should always be justified by a clear and compelling ROI.

But for brands in the upper midmarket/enterprise segment, building more complex automations and customizations on top of Shopify often makes perfect sense: these companies have complex internal workflows, custom tooling, and nuanced policies, and their e-commerce platform must learn to adapt and play nice with the existing ecosystem.

Luckily, Shopify’s ecosystem comes with rich tooling designed to create custom apps and integrations. In this post, we'll delve into some of these tools. More specifically, we’ll cover Shopify Flow, Zapier, e-commerce iPaaS Solutions, Gadget, and Greenfield Apps, exploring their pros and cons, ideal use cases, and some examples of the customizations they enable.


## Shopify Flow

[Shopify Flow](https://help.shopify.com/manual/shopify-flow) is a tool built into Shopify that allows creating automations without leaving the platform. It's a basic yet powerful way to respond to events generated within your online store (e.g., a new order being placed) with a set of actions (e.g., sending an email to your staff).

**Pros:**

* **Seamless Integration:** It’s designed specifically for Shopify, ensuring a smooth integration with your store. It’s Included in Shopify for free; no need to pay for extra software.
* **User Friendliness:** Shopify Flow comes with a visual workflow builder that requires no coding, making it accessible to non-technical users.
* **Third-Party App Support:** Shopify apps can extend Shopify Flow by adding their own triggers and actions, which expand the possibilities of the tool. This functionality is only available to Shopify Plus merchants.

**Cons:**

* **Complexity Limitations:** While powerful, Shopify Flow does not always cater to highly intricate integration needs that require custom coding.
* **Partial Support for External API Calls:** You can create an action that performs an API request to an external service (if you’re on the Shopify, Advanced, or Plus plan), but you cannot use the data you receive in any way. Shopify has committed to solving this in 2024.
* **Partial Support for External Emails:** At the moment, it's not possible to send emails using Shopify Flow, except for emails to staff members or as part of email marketing automations. You cannot send transactional emails to your customers or anyone else.

**Ideal Use Case:** Shopify Flow is your go-to for automating operational tasks within Shopify's ecosystem, particularly if you're a Shopify Plus user and can use all of the functionality it offers. It's ideal for businesses looking to streamline processes like tagging high-value customers for exclusive offers or automating restock notifications.

**Example Customization:** Automating the tagging of VIP customers based on their spending history and automatically enrolling them in an exclusive loyalty program.

## Zapier

[Zapier](https://zapier.com/) can be a good alternative to Shopify Flow, if you find its limitations unbearable. Via the Zapier app for Shopify, you can connect Zapier to your Shopify store and pick from an extensive list of triggers and actions to build your automation.

**Pros:**

* **Wide Range of Integrations:** Zapier can connect Shopify with over 3,000 web services, facilitating many different kinds of automations.
* **No Coding Required:** Zapier’s interface is similar to Shopify Flow, but offers even more power by allowing you to build more complex, more robust automations.
* **Rapid Deployment:** You can quickly set up new integrations and automations without the time and cost associated with custom software development.

**Cons:**

* **Pricing:** Zapier’s costs can quickly escalate as you increase your usage of the platform and build more complex workflows.
* **Dependent on Third-Party Connectors:** Even though it boasts more integrations than Shopify Flow, Zapier still relies on the availability and limitations of third-party connectors.

**Ideal Use Case:** Zapier is best suited for businesses that find Shopify Flow too limiting, but still need to build automations or integrate Shopify with other platforms quickly and without custom development.

**Example Customization:** Automatically adding new Shopify orders to a Google Sheets spreadsheet for advanced reporting and analysis.


## E-Commerce iPaaS

Integration Platform as a Service (iPaaS) solutions connect your online store with a variety of other systems, such as ERP, POS, and warehouse management systems (WMS), facilitating the automation of business processes across platforms. There are plenty of iPaaS solutions that integrate with Shopify–our favorite are [Patchworks](https://www.wearepatchworks.com/), [VL OMNI](https://vlomni.com/), [High Cohesion](https://highcohesion.com/), and [Pipe17](https://pipe17.com/).

**Pros:**

* **Connector Ecosystem**: Unlike Zapier, which is a generic automation platform, e-commerce iPaaS platforms specialize in connecting e-commerce platforms like Shopify with CRM, ERP, POS, and WMS systems.
* **Data Integrity:** E-commerce iPaaS platforms were designed to ensure data consistency across platforms, reducing synchronization errors and improving operational efficiency.
* **Bespoke Support:** with most iPaaS platforms, you can typically engage their customer support or professional services team to build connectors that are not already available.

**Cons:**

* **Integration Complexity:** Setting up more sophisticated connectors and automations may require technical expertise to configure and manage.
* **Cost:** The investment required to use an iPaaS reflects its enterprise-level capabilities, making it more suitable for larger businesses with complex needs. Most platforms will charge you per connection or event (e.g., a new product being created).

**Ideal Use Case:** E-commerce iPaaS solutions are ideal for medium-to-large businesses that require robust, real-time integrations between Shopify and other enterprise systems.

**Example Customization:** Integrating Shopify with an ERP system to automate order management, inventory management, and financial reporting, streamlining operations and reducing manual errors.

## Gadget

[Gadget](https://gadget.dev/) is a powerful full-stack serverless platform that allows building and hosting custom Shopify Apps, skipping all the repetitive tasks and accelerating the development cycle of your custom app. Through Gadget, you can accomplish all the automations and integrations that are not possible with off-the-shelf apps and integrators.

**Pros:**

* **Rapid Development:** Gadget offers a rapid development environment for Shopify apps, reducing time to market and human error.
* **Scalability:** Gadget is built to handle high volumes of data and traffic, making it suitable for growing businesses.
* **Developer-Friendly:** Gadget provides advanced tools and resources tailored for developers who need to create sophisticated apps, like Shopify API version management and pre-built React frontends that are compatible with Shopify’s security policies.

**Cons:**

* **Learning Curve:** Developing with Gadget requires a significant amount of technical knowledge, making it hard to access for non-developers.
* **Cost:** Custom apps may involve higher initial development costs compared to simpler integration approaches.
* **Single Environment:** As of today, multi-environment applications (staging+production, for example) are not supported. However, Gadget claims the feature will be released soon.

**Ideal Use Case**: Gadget is a powerful choice for tech-savvy teams looking to build a private Shopify app for their brand as quickly as possible.

**Example Customization:** Creating a custom loyalty program that’s not supported by any off-the-shelf loyalty apps for Shopify.


## Greenfield Apps

When none of the tools above is capable of fulfilling our complex business requirements, we are left with one extra solution, probably the most flexible one: building a custom Shopify app completely from scratch. We call these “Greenfield Apps.”

Greenfield Apps can extend the functionality of your Shopify store in whatever way you want, as long as your desired workflow is supported by Shopify’s APIs.

**Pros:**

* **Malleability:** Greenfield apps can be designed to meet your exact business requirements, offering unparalleled flexibility.
* **Direct Integration:** You can use greenfield apps to interact with all of Shopify's APIs, enriching your online store with custom business logic, Storefront and Admin UI components, and complex automation and integration workflows.
* **Technical Scalability:** Greenfield apps can grow with your business, accommodating new features and processes as needed, without financial or technological lock-ins.

**Cons:**

* **Development Cost**: Custom development is typically more expensive and time-consuming than pre-existing solutions.
* **Maintenance Effort:** Greenfield apps require ongoing maintenance and updates to ensure compatibility with Shopify's evolving ecosystem. \

**Ideal Use Case:** When your business requires unique functionality that cannot be addressed with existing apps or tools, greenfield Shopify apps provide a solution tailored specifically to your needs.

**Example Customization:** A bespoke app that provides a UI for a marketplace’s vendors to update product prices and availability, and instantly propagates those updates across multiple warehouses within your Shopify storefront.

## Complexity Is Not Always a Bad Thing

While Shopify's app ecosystem offers a solid foundation for run-of-the-mill retailers, expanding beyond these boundaries unlocks new levels of operational efficiency, customization, and customer satisfaction.

When considering your options for customizing your e-commerce store, remember that the right choice depends on your needs, budget, and technical capabilities. Make sure that you’re factoring in all of these elements before committing to a specific solution.

Building custom features and integrations may seem daunting, and might require resources and expertise that you don’t have in-house. But at the end of the day, this growing complexity is often a testament to your brand’s growth and the need to evolve your customer experience.

If you need help launching a custom feature or integration for your Shopify store, [feel free to reach out!](https://nebulab.com/contact-us) Our engineering team would love to help you figure out the right solution.


Building Custom Shopify Automations, From Beginner to Pro

Marco Trincardi

Have you ever found yourself pondering over a complex problem for hours or days? You explore all possible paths yet end up with more doubts than certainty. Then, a casual conversation with a colleague suddenly illuminates your thoughts. Just articulating your challenge out loud, especially in a trusted circle, opens your mind and allows your ideas to blossom.

Imagine having a format to refer to every time you are stuck on a problem–a structured approach that unblocks the flow of ideas and brings order to chaos. A workshop is precisely that: a repeatable process to create an environment where conversation flows, ideas flourish, and solutions are nailed down.

At Nebulab, we use workshops to help our teams and clients navigate complex business domains, design efficient middleware integrations, and tackle multi-faceted productivity and collaboration challenges. Over the years, the humble workshop has proven, time and again, one of the most effective ways of taming complexity.

In this post, we’ll explore the practices we adopt for running workshops that bring value to both organizers and attendees.

## The Key Ingredients of a Good Workshop

If you’ve watched movies like A Beautiful Mind or the recently released Oppenheimer, you might be familiar with the process mathematicians use to dig into a problem. They gather in front of a whiteboard, and for the most part, they sketch formulas and diagrams rather than relying on verbal communication. They alternate themselves in the writing, pause, take a step back to glimpse what they produced, and question their thoughts with “what if” questions. 

It might not be evident at first glance, but these whiteboard conversations have a lot in common with workshops:

* The participants are exploring a complex domain
* The rules of engagement are well-understood
* The physical environment has the proper setup
* The participants visualize their concepts

All these elements are integral to a successful workshop, all concurring to create a space where ideas can be developed and examined collaboratively.

Let’s take a look at each of them, one at a time.

### Complexity and Collective Intelligence

The heart of a workshop lies in the rich interaction between participants.

This interactive environment is particularly effective when tackling complex problems characterized by uncertainty or requiring diverse expertise. Participants from different areas of the business (e.g., industry experts, e-commerce managers, and tech leaders) bring a range of diverse insights that rarely have a chance to converge.

In a workshop, we leverage the group's collective intelligence, which often leads to superior decision-making, problem-solving, and innovation than an individual could achieve by themselves. This is particularly true in scenarios where the complexity of the subject matter benefits from a multitude of perspectives.

Each aspect of a workshop–from its physical setup to the methods of visualization and facilitation– is designed to harness this collective wisdom to navigate and illuminate complex issues.

### Rules of Engagement

A simple, clearly understood set of rules is essential to facilitate efficient interaction and meaningful conversation in a workshop.

We can’t just put people in a room and expect valuable outcomes to emerge. Every workshop has a format and rules; for mathematicians, the format is mathematical symbolism, and the rule is to alternate in front of the whiteboard until a satisfactory outcome is achieved.

It’s critical to keep things simple: the participants need to be focused on exploring the problem domain, not on remembering or feeling constrained by the rules.

For instance, in a workshop I recently facilitated, we started with two rules: blue sticky notes to indicate a system and yellow sticky notes for activity in a system or data exchanged by two systems. In the second half of the workshop, I introduced a third rule: red sticky notes to highlight the critical/challenging aspects of a system’s behavior. With such a simple set of rules, all participants had an easy time contributing, the workshop ran all day with little effort, and the outcomes were excellent.

Pro tip: progressively revealing the rules is a trick that helps attendees focus on the matter at hand and ensures they aren’t overwhelmed.

### Physical Environment

An often overlooked but crucial aspect of workshops is the room setup.

Adequate space is necessary for participants to move freely, interact with each other, and engage with tools like boards or flipcharts. Think of the mathematician with unobstructed access to their whiteboard–this accessibility is critical.

In my experience, it's beneficial to rearrange the furniture to suit the workshop's needs. Typically, I align chairs along the room's perimeter, creating a central, open area in front of the board or designated workspace. This layout encourages movement, collaboration, and a focus on the current task.

Remember: the ideal setup can vary depending on the nature and size of the workshop. The goal is to create an environment that fosters active participation and easy access to your collaboration tools.

### The Power of Visualization

Relying exclusively on verbal communication often limits us to our existing mental models, creating a clash where new, breakthrough ideas struggle to emerge. This is because it's easier to interpret what we hear within our existing frameworks than to challenge and change them. 

Visualization offers a powerful solution to this limitation.

Going back to our example, mathematical symbols serve as the visualization tool. For a diverse workshop audience, simpler tools are often more effective: these can be post-its, diagrams, or even Lego bricks. Visualizing concepts on a wall is particularly impactful: it not only allows workshop participants to step back and see the 'big picture,' but also ensures that all participants can engage and contribute equally.

This method ties in with our earlier discussion on room setup (an open space in front of a wall facilitates this kind of visualization) and with the idea of a simple ruleset (guiding participants on how to contribute visually is vital).

## The Role of the Facilitator

In our example, a group of mathematicians might naturally fall into a collaborative rhythm without a facilitator. However, in a larger group setting, especially with individuals who have strong perspectives and diverse backgrounds, having a facilitator becomes essential.

A facilitator isn’t required to be a domain expert. Instead, their skills lie in observing group dynamics, actively engaging participants, offering suggestions discreetly, and summarizing discussions. The facilitator must be able to identify and guide the group’s focus to emerging concepts, even when they don’t have an in-depth understanding of the workshop’s subject.

Facilitators are crucial in navigating the complexities of group interactions, which can be unpredictable and challenging.

A note of caution to facilitators: not every workshop goes as planned, hence flexibility is key. Much like a jazz musician improvising in a jam session, a facilitator must read the room and adjust the workshop's flow as needed.

A good facilitator can transform a potentially chaotic discussion into a harmonious and productive session.

## How We Use Workshops at Nebulab

Across various industries, workshops are versatile tools that can be tailored to various needs. From Retrospectives and User Story Mapping in Agile teams to Event Storming for Domain-Driven Design architectures, their applications are manifold.

As an e-commerce agency, we find workshops particularly effective in two main areas. Hopefully, you can use these examples as inspiration for your own workshops.

### E-Commerce Middleware Design

Firstly, as detailed in [my previous blog post,](https://nebulab.com/blog/ecommerce-middleware) we use workshops to explore connections and dependencies between systems when architecting middleware software.

This workshop format is inspired by [Event Storming](https://www.eventstorming.com/), and it’s best described as a form of generative business process mapping: treating the wall as a timeline, we use sticky notes to represent the systems we are discussing (e.g., the e-commerce platform or the ERP software), the activities performed by the user or system, and events those activities generate.

Aligning the sticky notes on a timeline gives us a general overview of the business process and the system’s relationships. It also allows us to rearrange the responsibilities and dependencies between systems and the middleware.

On the brand side, we typically invite any stakeholders with an active role in the systems we’re analyzing. On the Nebulab side, we have a workshop facilitator, one or more strategists to provide insights into the business domain, and technologists to provide insights into the system’s architecture.

### E-Commerce Domain Mapping

Workshops are also invaluable when implementing complex business rules or requirements deeply rooted in a brand's unique domain.

In this case, we start by representing the different types of actors involved in the domain, then the names of the business rules, and then the logic behind each rule. Finally, we arrange everything as a tree. Focusing on the users and visually representing the conditions and constraints applied to the system helps us untangle complex business domains and spot corner cases that were not previously covered.

The value of these workshops lies in their ability to bring together people with diverse expertise–from those with deep business or process knowledge to technology experts who may not be as familiar with the brand's specific domain. This diversity is crucial for surfacing and clarifying assumptions, removing ambiguity, and fostering mutual understanding.

An additional benefit is the reorientation towards the “bigger picture.” It's common for individuals immersed in day-to-day tasks to lose sight of the organization’s broader objectives. These workshops serve as a vital tool to realign everyone’s focus on the overarching goals, ensuring a cohesive and comprehensive approach to problem-solving.

## Don’t Be Afraid To Experiment!

If you are tackling a gnarly issue or trying to untangle a business problem, a workshop might be the answer you’re looking for. While they seem intimidating at first, the benefits of an effective workshop far outweigh the complexities–just follow the rules we’ve outlined, and you’ll be halfway through!

Of course, if you’re an e-commerce brand and would like some help from experienced facilitators who can challenge your assumptions and contribute with their own insights, [feel free to reach out!](https://nebulab.com/contact-us) We’re always down for a good workshop.


Using Workshops to Navigate Complexity and Build Alignment

Have you ever struggled with a simple addition to your Shopify store turning into a nightmarish project, full of intricacies and edge cases? Or maybe you’ve experienced the impatience of looking at your product page take forever to load, longing for the good old days when it showed up instantaneously? Or perhaps you’ve run into weird UI bugs caused by two of your apps not playing nice with each other?

When you launch a new Shopify store, everything’s fantastic: the theme is beautiful, the pages load fast, and the apps you’ve picked are a joy to work with. It feels like you’ve got everything figured out, and no one and nothing will ever change that.

But after a while, some friction shows up. Implementing new features takes longer. Bugs pop up. Site speed decreases, as does your conversion rate.

Your team (or your agency) now spends more time hunting down the things that are not working than implementing new functionality that could move the needle. But even though everyone’s dissatisfied with the state of things and your business is suffering, no one can pinpoint the root cause or figure out a definitive solution.

Starting from scratch looks like the only option, so that’s what you do. You change agencies, rewrite your theme, and call it a day. Unfortunately, the rewrite only helps temporarily: give them enough time, and things will revert to their original state, and the cycle will start all over again.

Sounds scary, doesn’t it? And yet it’s a story that we’ve heard from many Shopify merchants, disenchanted with their agency, internal team, or the Shopify ecosystem as a whole.

The good news is that it doesn’t have to be like this. There’s a way to keep your ecommerce store from degrading over time; all it requires is a more thoughtful approach to store development. In this blog post, we’ll outline what that approach looks like, and how you can adopt it.

But before we do that, we need to introduce the concept of technical debt.

## What Is Technical Debt?

Technical debt, often called just “tech debt,” refers to the compromises made in a system for short-term gains, which may lead to more complex maintenance and updates in the long run. It is the practice of taking shortcuts: installing unvetted apps for the sake of shipping a feature, implementing untested JavaScript “hacks” in your theme, breaking best practices for theme maintenance, or failing to keep up with the latest Shopify API updates.

These solutions help you move faster and will not kill your store in the short term, which makes them so appealing in the first place. But in the long term, the consequences will show up in the form of bugs, lower site speed, a slowdown in development velocity, and, in extreme scenarios, a decrease in conversion rate.

Unfortunately, Shopify’s marketing can be misleading when it comes to technical debt: the promise is that, by using Shopify, merchants will never need to worry about technology, and by extension, they will never need to worry about technical debt.

That is only partially true: while Shopify handles a lot of responsibilities for merchants, a merchant’s theme and app stack is still for the merchant to maintain, and it can accumulate technical debt just like any other software. Your theme can either be a beautifully architected piece of technology, highly performant and easy to evolve, or a hot mess of obscure hacks and patches no one understands anymore. You, the merchant, are ultimately responsible for deciding where you want this pendulum to swing.

But in practice, what are the sources of technical debt in Shopify that cause stores to lean one way or the other? Here’s a non-exhaustive list, but keep in mind that there are additional factors that are often unique to each store:

* **Multiple stores:** even after the advent of Markets and B2B in Shopify, many merchants keep using multi-store setups when they are not needed. Because each store is independent and stores can diverge from each other, this setup can be a significant source of technical debt, increasing the cost and complexity of making changes.
* **Too many apps:** Shopify’s blessing–its app ecosystem–is often its curse. When we audit Shopify stores, we are often shocked by how many apps the average store has installed. Often, not even the merchant can explain what all the apps do. This is the #1 source of bugs, compatibility issues, and a steep increase in license fees.
* **Too much JavaScript:** some custom themes present a large amount of JavaScript code, often using external libraries such as React, Angular, or jQuery. This complexity, which is sometimes uncalled for, makes it harder for developers to find their way around a theme, slows down your website, and introduces bugs.
* **Large Liquid files**: similar to the point above, Liquid files that are hundreds of lines of code quickly become hard for developers to understand and change, to the point where they might be deemed completely unmaintainable.
* **Outdated code:** if your store is not leveraging metaobjects or not using the full potential of Online Store 2.0, you might end up with weird hacks and workarounds to implement functionality that is now natively available in Shopify. Apps can compound this problem because they are sometimes slow to adopt new Shopify APIs and capabilities, reducing the flexibility and optionality of their user base.

There are additional factors that are not technical debt _per se_ but often lead to technical debt over time: examples of these would be the lack of a defined QA process for theme changes, which increases the likelihood of bugs, or the lack of theme documentation, which makes it harder for unfamiliar developers to find their way around the project.

## A Three-Step Approach to Managing Shopify Technical Debt

Managing technical debt in a Shopify store can be tricky for inexperienced merchants and developers. However, a structured approach can go a long way in effectively controlling it. Here’s the three-step process we typically adopt when we work with a merchant.

### 1. Measure the Business Impact

Before tackling technical debt, it's essential to understand the extent of the problem.

In traditional software projects, there are tools that attempt to measure the health of your code. These tools typically ingest your entire codebase and produce a “quality” score that tells you the overall state of the software and what areas you should improve.

The bad news is that most of these tools don’t work with Shopify themes because they’re structured differently than most other software. The good news is that, in our experience, such tools are ineffective: technical debt only matters insofar as it _actually_ impacts your business. Code quality, as measured by a machine, is rarely a good proxy for business impact.

Instead, you want to measure the effects of technical debt on your store’s real-world performance. There’s no one-size-fits-all metric here, but here are some that we’ve used:

* **Defect rate,** which measures the number of features your team has shipped that introduced one or more bugs in the customer experience.
* **Cycle time,** which measures the time it takes for your team to implement a change after that change has been prioritized.
* **Site speed,** which should be pretty self-explanatory.

Both defect rate and cycle time can be measured with a good project management tool, while site speed is typically measured with tools such as PageSpeed Insights.

With all these metrics, what matters most is not their absolute value but their directional trend over time: if they’re getting better and not worse, you’re moving in the right direction and can double down on your current approach.

### 2. Establish a Solid Foundation

Once you have a good grasp of the extent of the problem, the next step is to ensure there are no obvious sources of technical debt in your Shopify setup.

These are the aspects we typically focus on:

* **Leverage native Shopify features**: by using native functionality as much as possible, you are reducing the need for ongoing maintenance. Whenever you diverge from the built-in functionality, you should always consider the balance between innovation and the additional complexity you’re introducing into your store.
* **Minimize third-party apps**: in addition to increasing your license fees, each app you install into your store introduces more complexity, potentially slows the website, and can lead to bugs in the customer experience. Vet all the apps you install and ensure they are needed.
* **Adopt a version control system (VCS):** a VCS makes it much easier to document the changes developers are making to your theme, and to roll back to a previous version of the theme in case a bug pops up. From a technical standpoint, there’s no reason not to have a VCS in place for your Shopify theme.
* **Set up a test store:** a staging environment (sometimes called a “test store”) allows you and your ecommerce development team to test your changes safely before rolling them out to your customers. The caveat is that you will likely need to install all your apps in the staging environment, increasing your license fees.

While this is just the beginning, it will give your team an initial foundation they can build upon.

### 3. Prevent and Reduce Debt Over Time

With the basics in place, you can now adopt team-wide policies to help your team minimize the technical debt you introduce over time.

These are some of the policies that we adopt:

* **Call technical debt by its name:** if you only do one thing outlined in this article, it should be this. The #1 reason technical debt keeps growing is that developers do not have the technical understanding or psychological safety to talk about it. Ensure everyone is familiar with technical debt and comfortable calling out when a corner has been cut. A recurring team retrospective can be very helpful here.
* **Perform technical code reviews:** encourage developers to review each other’s code whenever a change is introduced. This means that developers will need to schedule time for code reviews, and your development velocity will slow down a bit, but the quality of the end product will benefit tremendously.
* **Establish a structured QA process**: ideally, QA should be done on every new change by your development team, who should be familiar enough with your store to understand whether a feature meets all the acceptance criteria. If that’s not possible, you can also designate the person in charge of website development.
* **Set time aside for tackling technical debt:** in the past, Shopify shared their internal strategy for dealing with technical debt, the [25 Percent Rule](https://shopify.engineering/technical-debt-25-percent-rule). It might not work for everyone, but having a clear understanding of how much time is acceptable to dedicate to refactoring technical debt will create a safe space for developers to work on it.

Some of these policies might be overkill for small stores, while others must be adapted to your needs. Ultimately, it all boils down to how much technical debt impacts your store and how many resources you can dedicate to fighting it.

## Technical Debt Is a Tool: Learn to Use It!

With this entire article focusing on eliminating and preventing technical debt in your Shopify store, you might be tempted to think that technical debt is something to be avoided at all costs. The reality is a bit more nuanced.

Like financial debt, technical debt is a tool: cutting corners helps you move faster at critical times of your business, such as before a big launch or public holiday.

And _just like_ financial debt, technical debt must also be paid off at some point. If you ignore it, its adverse effects will compound over time, severely impacting team morale and dragging down business performance.

Leveraging technical debt thoughtfully and intentionally is critical to a merchant’s success in the Shopify ecosystem. Doing it well requires a collaborative effort, with clear team agreements and robust processes tailored to your growth stage and team composition.

If you’re struggling with managing technical debt in your Shopify store, [reach out!](https://nebulab.com/contact-us) As a Shopify partner, have worked with some of the largest brands in the ecosystem and can help find the best solution for your store.


How To Manage Technical Debt in Your Shopify Store

In our [previous article about cross-cultural design](https://nebulab.com/blog/cross-cultural-ecommerce-design), we delved into the intricacies of crafting online shopping experiences that resonate with diverse cultural backgrounds. We explored how Cross-Cultural Design can be the beacon that guides brands through the complexities of global expansion, emphasizing that a one-size-fits-all approach is rarely practical.

This time, we'd like to focus on a particular design trend that originated in the East and is gaining traction worldwide in specific market segments.

Characterized by busy interfaces and seemingly chaotic information taxonomies, this model stands in stark contrast to the more streamlined, search-centric user experiences we’re used to. Browsing for products is an adventure in and of itself: the shopping journey is akin to a digital bazaar, buzzing with energy, and each click leads to unexpected finds.

This trend has a name—it’s called *shoppertainment*—and it’s being popularized in the West by Chinese e-commerce marketplaces such as Shein and Temu.

Today, we’ll look at what shoppertainment is exactly, why it works so well, and what lessons we can learn from its most prominent adopters.

## How Shein and Temu Drive Customer Engagement through Shoppertainment
Temu, pronounced “tee-moo,” is an online superstore for virtually everything—from home goods to apparel to electronics—that made its Super Bowl debut in 2023.

Temu encourages consumers to “shop like a billionaire” and offers products at surprisingly low prices. It has quickly become [the most downloaded app](https://www.statista.com/statistics/1417955/most-downloaded-marketplace-apps-worldwide/), surpassing rivals Amazon and Walmart, not just in the United States but in the entire world.

With low prices and cluttered design, the personalized and gamified shopping experience Temu offers has drawn comparisons to Shein, [the Chinese fast fashion upstart](http://www.cnn.com/2021/08/14/business/shein-china-fast-fashion-intl-hnk/index.html) that also offers a wide selection of inexpensive clothing and home goods and has made significant inroads into several markets, including Europe and the United States.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/05fe639fe020903aa95fffd22a520ba6aaa28a06-1600x1052.jpg?fit=clip" alt="Shein Influencer on Youtube">
</figure>

Shein and Temu have both burst onto the scene in an online-first, fast-moving world. Through social media, influencer partnerships, live-streaming events, and a hefty reliance on performance marketing, they've created a strong brand presence that resonates with their target audience, often overshadowing the more sober, utilitarian approach of marketplaces like Amazon and Walmart.

When exploring the user experience design of platforms like Shein and Temu, it becomes evident that they foster an overwhelming sensory experience.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/77d823a005f01064ebcf0d5aadc49f0a4ea92f62-1600x1052.jpg?fit=clip" alt="Temu user experience">
</figure>

The interfaces of these platforms are a collage of vibrant colors, animated elements, and interactive features that aim to captivate and retain user attention. It's a digital landscape that's always in motion, with pop-ups, limited-time offers, and an endless stream of personalized recommendations designed to evoke the same excitement and urgency one might feel in a bustling street market.

Compare this with Amazon's more conservative approach, where functionality and efficiency are the cornerstones. Amazon's clean and practical design focuses on the ease of finding products through a logical and orderly user interface.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/3130810a416d7ba2c3239d26b5bdf116d0b43d4c-1600x1052.jpg?fit=clip" alt="Amazon browsing experience">
</figure>

These differences mirror broader cultural preferences that Temu and Shein lean heavily into and have managed to “export” outside their original cultural context.

## High-Context vs. Low-Context Cultures and their Impact on Design
In [high-context](https://en.wikipedia.org/wiki/High-context_and_low-context_cultures) Eastern cultures, where communication is often layered and nuanced, the sensory-rich UX design of Shein and Temu does not overwhelm but rather speaks a familiar language.

Furthermore, the digital journey took a mobile-first trajectory in the East, with the majority of the population experiencing the internet for the first time through the screens of their phones rather than desktop computers. This has profoundly influenced how online services, including e-commerce, have evolved in these regions.

Let’s think about Alipay and WeChat, platforms offering a comprehensive range of services from bill payments and banking management to taxi bookings and shopping. For super app users, the process of purchasing a luxury handbag within the same platform used for everyday tasks like paying utility bills is seamlessly integrated, reducing cognitive dissonance.

Conversely, in the more conservative and [low-context](https://en.wikipedia.org/wiki/High-context_and_low-context_cultures) West, Amazon's streamlined approach aligns more closely with communication preferences. The marketplace's structure and navigation are built for efficiency, offering a controlled space that prioritizes the straightforward discovery and purchase of products. Amazon's interface is a testament to the low-context communication prevalent in Western culture, where explicit messages win the day.

And yet, despite the cultural nuances, shoppertainment-centric platforms like Temu and Shein continue to gain traction in the West. What gives?

## The Appeal of Shoppertainment Across Cultures and Generations
As mentioned earlier, Temu and Shein embrace the delight of discovering treasures in a bustling marketplace. The success of these platforms lies in their mastery of discovery-based commerce. They blend AI with an understanding of user behavior to create a personalized and gamified shopping environment. Influencers, social proof, and live-streaming events further enrich this landscape, transforming the act of purchasing into an engaging and social event that feeds on the innate human love for exploration and deals.

Interestingly, this “shoppertainment" model resonates particularly well with Western Gen Z consumers, who are more adaptable to innovative, if less polished, user interfaces. Their shopping habits are motivated by value and the excitement of discovery rather than the aesthetics of the shopping platform. The loud and lively [Y2K stylings](https://www.pcmag.com/encyclopedia/term/y2k-fashion#:~:text=The%20technology%2C%20styles%2C%20dress%20and,Y2K%20problem%20and%20Y2K%20anxiety), playful interactions, and immersive content that dominate these sites speak the language of a generation that craves authenticity and spontaneity over polish and predictability.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/e1c699b758b05bdb646829f956b0ea868f307157-1600x1052.jpg?fit=clip" alt="Shoppertainment and Gen Z">
</figure>

Temu and Shein continue to rise in popularity, and not just with Gen Z. There’s another significant factor contributing to this phenomenon.

While Gen Z may be at the forefront of embracing energetic and interactive digital storefronts, the economic draw of these platforms speaks to the universal appeal of consumerism. Older generations, too, find the cost savings compelling enough to venture into these more animated shopping environments, suggesting that the desire for value can sometimes supersede preferences for a more traditional and subdued browsing experience.

As such, Shein and Temu have tapped into a powerful vein within the consumer market, demonstrating that while the 'shoppertainment' model might be vital to capturing the hearts of younger users, the fundamental drive to consume at the best possible price is a widespread motivator that crosses generational and cultural boundaries.

## Is Global E-Commerce Moving Toward Shoppertainment?
Temu and Shein have not just pioneered the 'shoppertainment' model; they've excelled in it, capturing the hearts of a broad audience with their gamified, discovery-driven approach to commerce. Their success lies beyond competitive pricing or extensive inventories, and it’s rooted in a shopping experience that equally prioritizes entertainment and acquisition. 

Looking ahead, the trajectory of e-commerce design might be steering towards a hybrid model. Incorporating personalized and interactive elements typical of Eastern consumer experiences without compromising the organized simplicity that users appreciate in the West will be critical to the continued success of our domestic marketplaces.

As such, the next challenge in e-commerce design will be to create experiences that resonate not just with a medley of cultural preferences but also with the varied tastes of an international, multi-generational audience.

If you have any questions about shoppertainment or want to understand which principles you can apply to your brand, [feel free to reach out](https://nebulab.com/contact-us)–we’d love to chat!

East, Meet West: The Rise of Shoppertainment in E-Commerce

There’s nothing more frustrating than trying to complete a puzzle, only to realize you’ve misplaced one of the pieces and there’s no way to finish the thing.

But what if you could _build_ that custom piece, designing it with all the right knobs and holes, allowing you to complete the puzzle? Imagine you could also paint it to perfectly complement the puzzle’s design. How amazing would that be?

Well, for real-world puzzles, you’re probably out of luck. But when it comes to computer systems, that’s pretty much what middleware does: just like your custom-built puzzle piece, middleware is custom software that streamlines the connection between different business applications, systems, or APIs, allowing them to communicate and collaborate effectively.

In e-commerce, middleware is usually found in enterprise applications, where companies often need to connect their proprietary systems to third-party vendors. However, middleware is not just for e-commerce giants: in specific scenarios, smaller brands can also use middleware to enhance the agility and robustness of their e-commerce setup.

In this article, we will explore the typical use cases for middleware software, the pros and cons of building your own, and how to do it correctly.


## When Does an E-Commerce Brand Need Middleware?

When you’re a large enterprise company, you typically have a dedicated IT department that handles system integration, and the responsibility for deciding when to buy or build middleware software lies with this department. In this case, you don’t need to worry about making such decisions.

But if you’re a smaller brand, you might be unsure when to think about middleware. Here are a couple of scenarios:


* You have found the perfect 3PL provider, but they don’t support your e-commerce platform out of the box.
* You want to use your existing ERP integration to generate invoices for your B2B e-commerce customers. However, the way your platform’s connector sends order data to the ERP is incorrect, and the resulting invoices are unusable.

In both cases, you could buy or build middleware software to integrate with the new system or adjust your existing integration. Just as a custom piece connects different sections of a puzzle, the middleware will bridge your different vendors together, ensuring they produce the desired results.

In general, whenever you want to insert yourself between different applications to streamline or adjust their data flow, middleware is the right solution.

With that said, adding middleware to your infrastructure is not free: let’s look at the complexity it can create and how to manage it.

## Middleware Seems Easy Until It Isn’t

Most of the time, your first middleware implementation is easy to build. You start from a well-identified business need, and the project goes almost flawlessly. Once online, you might find some edge cases that were not covered, but it’s usually pretty simple to address them. Everything’s under control, and everyone on your team is happy.

After a few weeks or months, you identify new business needs that are not satisfied by your existing system. Since the first iteration went well, you feel confident adding new functionality to the middleware–perhaps by integrating with a new external system.

As you work to reconcile the different data schemas, you feel like you’re getting pulled in too many directions: data management becomes more complicated, caching and scalability problems start popping up, and not even the people who built your middleware stack are quite sure of the data transfer flows anymore.

Back to the puzzle metaphor, the knobs and holes are the communication channels, while design and color are the data model that needs to be blended. You have already put many different knobs and colors in one giant puzzle piece, and every time you need to connect to a new part of the puzzle, you keep changing it, adding knobs and holes, and trying to blend the colors harmoniously.

What was simple and neat in the beginning has become increasingly complex over time.

It’s also interesting to note that the perception of middleware complexity does not increase linearly. Usually, it has a discontinuity point: everything seems smooth and easy, but once you reach the discontinuity, everything suddenly becomes complex and demanding. In technical literature, this condition is called _complexity creep_.

So, where does this complexity come from, and how can you manage it?

## Managing the Complexity of Middleware

Now that you understand the inevitable complexity of middleware, it’s time to look at a few ways to keep it under control. Drawing from years of experience, we've honed some practical strategies to manage and mitigate these challenges effectively.

Let's take a look!


### #1: First of All, Do You Really Need Middleware?

This might sound counterintuitive since this entire article is about middleware, but the best way to keep complexity under control is not to create it in the first place, and the most cost-effective middleware is the one that doesn’t exist.

This isn’t always possible, and middleware software is sometimes a necessary evil. However, we’ve often seen retailers reach for complex custom solutions when the stock functionality of their e-commerce platform or fulfillment provider would have worked just as well.

Before jumping into a middleware project, evaluate your vendors’ capabilities carefully–ideally, reach out to their support team and see if they can suggest any alternatives that will work out of the box.

Even when there are no alternatives, consider whether reframing your original request might lead to a much simpler solution: sometimes, the cost and effort involved in buying/building and maintaining your middleware doesn’t justify the return on that investment.

As a rule of thumb, if you can’t build a compelling business case around your middleware stack, and the only reason you’re building it is to make your life slightly easier, it’s probably better to hold off on the project until you can identify a pressing need.


### #2: Acquire a Bird’s-Eye View of Your Workflows

When you decide to build middleware, start the project by mapping the existing business processes. Don’t just focus on the process impacted by your middleware; instead, make sure to also cover upstream, downstream, and adjacent dependencies.

Sound too abstract? Let's make it more concrete with our ERP example:

1. First, describe what is happening in your internal and external software applications from when the order is made to when the invoice is sent.
2. Then, expand upstream, asking questions such as: “What are some of the promotions or discounts that could be applied to the order? How do we reflect that in the invoice?”
3. Finally, expand downstream, asking questions such as: “Does the invoice generation process only impact the ERP? How does it affect our CRM, supply chain or legacy systems?”

Back to the jigsaw puzzle metaphor, this process is like acquiring a view of the entire puzzle, and not just of the knobs and holes that surround our custom piece. Building this comprehensive understanding of your business workflows not only aids in your current middleware project but also helps you anticipate and manage future complexity.

The best part is that it doesn’t take ages to create this map: at Nebulab, we usually run a dedicated eight-hour workshop, remotely or in-person, to build the first version; we then spend a couple of hours now and then when we need to update it.

### #3: Adopt an Evolutionary Approach

Having a broad view of your business workflows doesn’t mean you have to build your entire middleware stack in one sitting. Quite the contrary!

The best approach is to build incrementally, one use case at a time, and get feedback from real-world usage. This feedback is essential to guide you in future development, refine your processes, and spark new ideas. It also makes it easier and more sustainable, reducing the chance that a middleware bug will severely impact your customer experience.

See it this way: The broader view tells you which direction to go, while the evolutionary approach tells you to put one foot before the other rather than making giant leaps. You have a complete vision of your puzzle, but you still build your custom piece one knob at a time.

## Your Middleware Is Critical Software

Once created, your middleware will become a central component of your brand’s tech stack: most likely, it handles your customer, order, or shipment data; it’s a critical piece of your customer experience, and it will negatively impact your operations in case of malfunction.

Because of this, middleware development should be considered mission-critical and treated accordingly: involve established vendors and highly skilled developers–ideally, someone with a track record of building high-traffic systems and who knows how to create resilient, high-quality software through best practices and automated testing.

In e-commerce, these competencies are rare. If you don’t have them in-house or in your partner network, [feel free to reach out!](https://nebulab.com/contact-us) We’ve supported tens of brands just like yours in designing, building, and maintaining their middleware solutions, and we know what it takes to make this journey as smooth as possible.


How To Design and Maintain E-Commerce Middleware

eCommerce operators often tell us that picking the right tech stack for your eCommerce brand feels like walking on a tightrope. There are so many tools and technologies to choose from, and making the wrong decision can severely impair your online store’s ability to scale with your business.

In this guide, we’ll look at what a tech stack is, why building it is a critical phase in your brand’s life, and how you can create a tech stack that will support your goals and your brand’s evolving requirements.

## What is a tech stack?

In layperson’s terms, a technology stack (“tech stack” for short) is a collection of programming languages, software libraries, frameworks, databases, and online services integrated to deliver a particular user experience.

While some of these technologies are very generic and apply to all kinds of scenarios, others are specific to the eCommerce industry. Here are the basic building blocks of most modern tech stacks:

* **Programming languages:** Developers use specific programming languages (e.g., Ruby, JavaScript, PHP, Java, Python) to code the server-side and frontend logic behind your application. Different languages have different properties and capabilities when it comes to popularity, scalability, and developer experience.

* **Libraries and frameworks:** These are software packages that make it easier for software developers to implement standard functionality. For instance, most backend programming languages provide Web frameworks that speed up the implementation of Web applications, such as Django for Python or Ruby on Rails for Ruby.

* **Infrastructure:** Infrastructure consists of the Web server, database, and other components that run your application’s backend and frontend code and host its data. Depending on your use case and requirements, many different types of infrastructure providers and possible configurations exist: e.g., you may use a relational database like MySQL, or a NoSQL database like MongoDB.

* **SaaS providers:** This is a catch-all term to indicate all the third-party software you pay a recurring fee to access. It can be a small piece of your stack, such as an analytics service or automation platform, or a major component, such as the eCommerce platform your brand runs on.

As you may imagine, picking the right mix of frontend and backend technologies, libraries, infrastructure, and SaaS providers requires a lot of experience: First of all, not all components integrate well with each other; secondly, each set of technologies has its pros and cons, which are very context-dependent.

While recommended practices exist, any agency or Web development team pushing the same software stack onto all of their customers is doing them a huge disservice. **Using the wrong tech stack can slow down your development process, prevent you from efficiently capitalizing on business opportunities, and hold back your startup from scaling.**

In the following paragraphs, we’ll explore the most critical parts of an eCommerce brand’s tech stack and how to make informed decisions when discussing them with your agency or in-house developers.

## What are the components of an eCommerce tech stack?

![Image of an hand that holds a rainbow-coloured MasterCard with two fingers](https://cdn.sanity.io/images/kqgmf0g2/production/4c046c881c959d397caaedf2278e3a95741ec830-1920x1080.jpg?fit=clip)

The average eCommerce brand may integrate many tools and technologies to deliver and optimize their customer experience. Let’s look at some of the most common eCommerce technology you might make as an operator or developer.

### eCommerce platform

Your eCommerce platform (sometimes called “shopping cart”) is the core of your business. Picking the right eCommerce platform is a critical decision when launching or re-launching your online store and one that you should evaluate from many angles.

There are many players in this space, and they come in different shapes and forms: established solutions such as [Shopify](https://shopify.com/) and [BigCommerce](https://bigcommerce.com/) promise reliability and large ecosystems. In contrast, newer solutions such as [Swell](https://swell.is/) and [Commerce Layer](https://commercelayer.io/) offer flexibility and a more modern approach. Then you have disruptors such as [Solidus](https://solidus.io/) (which is open-source) and [Chord Commerce](https://chord.co/) (which is data-driven), which push for a completely different take on building and operating your brand.

You can learn a bit more about the state of the eCommerce platforms market in our article on [headless vs. monolithic eCommerce](/blog/headless-commerce).

### Payment processing

Payment processing is a big part of running an eCommerce business. All eCommerce brands integrate with one or more vendors in the space, called PSPs (Payment Service Providers).

Note that “payment method” and “payment service provider” (or “payment gateway”) are sometimes used interchangeably. Still, they have two different meanings: while a payment method represents a medium the customer uses to pay for goods and services (e.g., credit card, Apple Pay, Google Pay), a payment service provider is a company that builds software to enable specific payment methods. For example, credit cards are one of the most common payment methods in eCommerce. To accept credit card payments, you must partner with a PSP that provides that service, such as [Stripe](https://stripe.com/).

You can either decide which payment methods you want to support and then pick the right combination of PSPs, or pick a PSP you want to use and then choose which payment methods you wish to enable among the ones they support.

There’s no right or wrong answer: whether to go one way or the other depends on your market (e.g., US vs. EMEA), business model (e.g., B2C/B2B), customer demographics (e.g., Gen X vs. Gen Z, household income) and industry (e.g., THC products are highly regulated and only supported by specific PSPs).

### Logistics

The supply chain experience can make or break a brand’s shopping experience. Especially for DTC, the bar is high, with consumers constantly comparing you with their latest experience and not settling for delivery delays or order mix-ups.

“Logistics,” in the context of an eCommerce operation, encompasses at least three different components, which may or may not be provided by the same vendor:

* **Inventory management:** an inventory management system allows you to track the inventory in your warehouse(s). Modern WMSs integrate with your eCommerce platform for real-time stock counts.

* **Shipping management:** a shipping management system allows you to generate shipping labels and track your packages’ journey from the warehouse to the customer.

* **Returns management:** a returns management system allows you to define your return policies, enables customers to handle returns autonomously, and tracks returns on their way to the warehouse.

You can either build/buy these tools and handle your logistics in-house or partner with a 3PL (third-party fulfillment) vendor to store your inventory and handle all logistics- and fulfillment-related responsibilities on your behalf. Which way to go depends on your company stage, product category, market, and many other factors.

### Content management

Depending on your needs, choice of eCommerce platform, and frontend technologies, you may or may not need to pick a content management system (CMS). A CMS allows you to manage the marketing content that appears on your eCommerce website.

Headless CMSs are all the rage nowadays: they allow developers to specify which content types are supported and how they should be presented on screen while still allowing marketers to publish whatever content they want, whenever and wherever they want. This gives your team much power while maintaining a consistent presentation of your content across your storefront, mobile app, and other sales channels.

With that said, headless CMSs are also restrictive: if a particular content module is not supported, your team won’t be able to publish it until a developer implements it. Whether to go with a headless (e.g., [Contentful](https://www.contentful.com/)) or monolithic CMS (e.g., [Webflow](https://webflow.com/)) depends on your scale, technical capabilities, and editorial needs.

For more details, read our article on [eCommerce content management](/blog/ecommerce-content-management).

### Marketing

Reaching your customers at the right touchpoints, and offering relevant, personalized information and offers, is an unbeatable advantage of online shopping. Brands can leverage first-party data to create “aha!” moments and magical experiences, but only if they are supported by the right tools.

You will find many marketing tools serving different channels and purposes: some tools are specifically built for email/SMS marketing, while others will be more targeted at social media marketing. Some tools are specifically designed for eCommerce companies; some are generic but do a good enough job of accommodating the needs of an online brand.

Our suggestion? Start simple. Going too aggressively after too many channels might cause you to disperse your efforts. Instead, be very intentional about which channels you’re pursuing, your segmentation strategy, and how to ensure that all the information you have about your customers is being put to full use. Once you have an established strategy, you can start to iterate and experiment.

### Customer support

Expectations around customer support (“CS”) have never been so high, and the bar is set even higher for digitally-native brands, which have pioneered a new era of customer support. Customers expect you to be responsive, solve their problems, and go above and beyond to provide a memorable experience.

Different CS software solutions support different channels (e.g., email, SMS, phone, social media), and covering as much ground as possible is critical in implementing a successful customer support strategy. If you have an Instagram account, customers expect their complaints to be answered there, not just by email.

Also, when those customers do reach out, you want to have the correct data at your disposal, so make sure your customer support platform integrates well with the rest of your stack: for example, when a customer reaches out, can you quickly identify them and see what they’ve purchased, and maybe initiate a return from within the CS tool itself? The more manual work you eliminate from the process, the easier it will be for your team to offer stellar support.

### Business intelligence

Data is an eCommerce store’s superpower. When a customer buys from you, you instantly get access to a ton of precious information about them and their behavior. You can either aggregate these bits of information to generate valuable insights for your business strategy, drill down to the customer level, or use the data to offer hyper-personalized experiences (ideally, you do both).

Building the right business intelligence (BI) infrastructure is a topic of its own, and entire books have been written about it. Many ready-made solutions allow eCommerce brands to track user behavior and generate fundamental reports and insights about their business. Highly sophisticated solutions enable brands to model their tracking, ETL, and data mining processes.

When it comes to business intelligence, we strongly encourage brands to be intentional about what they’re doing: it’s easy to implement a million different tracking pixels, tools, and reports and still be unable to generate any actionable insights. Start from the questions you want to answer, understand what data will help you answer them, and pick the right tool(s) for the job.

## 8 tips for building your tech stack

![Picture of a green crossroads into the wood](https://cdn.sanity.io/images/kqgmf0g2/production/ef51951e452f8432f6a43df46b9a9c9c598058dd-1920x1285.jpg?fit=clip)

The good news for eCommerce companies is that there are an incredible amount of solutions for launching and operating a brand. The bad news is that, with so many established players and new ones popping up daily, making a choice can feel overwhelming, and the consequences can be disastrous.

Here are eight tips that you should use to build your brand’s tech stack or when evaluating a change in your existing stack:

* **Ease of integration:** some solutions will be easier to integrate, thanks to public APIs and built-in connectors. When building your tech stack, pay attention to how the different parts of your stack will communicate. An integrated tech stack means less manual work and a better customer experience.

* **Build vs. buy:** buying an existing solution is not always the right choice. If you don’t find any vendors that fit your business needs, consider building an in-house solution that will scale with your brand over time. However, be mindful that this comes with caveats (e.g., higher upfront costs)!

* **Hot vs. boring:** should you jump on the latest hot trend or pick a boring solution that has stood the test of time? Unfortunately, there’s no correct answer: sometimes, some experimentation can give you a competitive advantage. But if you overdo it, you can expose your business to unnecessary risk.

* **Pricing:** it may seem obvious that you want to evaluate pricing when building your tech stack. However, we encourage you to look beyond the Pricing page, considering the expected lifespan of the solution, the total cost of ownership, and even the opportunity cost.

* **Decision reversibility:** some tech stack decisions are more challenging than others to reverse. Switching your customer support tool is rarely too complicated, but migrating to a new eCommerce platform is a big deal. Keep this in mind when making a choice.

* **Compliance:** in specific markets and business verticals, you will need to worry about compliance and regulatory issues. Sales tax, the CCPA (in the US), and the GDPR (in the EU) are the usual suspects, but the needs will evolve with your business, so you will need to stay on top of things.

* **Scalability:** while everyone loves to talk about scalability in the performance sense (e.g., how well a solution handles high traffic volumes), that is rarely a problem in most scenarios. Instead, understand how well the solution will support your evolving requirements and how likely you will need to move away from it as your brand grows.

* **Customer support:** we’ve discussed the importance of offering excellent customer support as a brand–you should hold your vendors to the same standard. Look at SLAs, support channels, and even G2 reviews. Ideally, talk to someone who’s already a customer and get their feedback!

## Do you need help building your tech stack?

Hopefully, we’ve convinced you that building your eCommerce brand’s tech stack is no easy feat. It’s a complicated, multi-layered process critical for ensuring your brand’s long-term success.

If you’re launching your brand or need to overhaul your existing brand’s tech stack, we can help. Our eCommerce engineers have worked with tens of brands over the years and can help you make the right decisions, enabling you to move quickly and laying the foundations for aggressive growth.

[Reach out](/contact-us) to tell us more about your project!

The Nebulab