The European Accessibility Act (EAA), set to take effect on **June 28, 2025**, will establish new standards for digital accessibility, transforming the lives of **over 87 million people with disabilities across the European Union**. This landmark legislation does more than enforce compliance—it challenges businesses to rethink their digital experiences and embrace inclusivity as a core priority.

For e-commerce brands operating locally or globally within the EU, this means re-evaluating your website to meet accessibility requirements. But accessibility isn’t just about legal compliance—it’s an opportunity to expand your audience, improve usability, and demonstrate your brand’s commitment to creating universally accessible online experiences.

The time to act is now. In this article, we’ll explore the significance of the EAA, what it means for your business, and actionable strategies to help you integrate accessibility into your e-commerce strategy.

## What Is the European Accessibility Act?

The European Accessibility Act (EAA), grounded in the principles of the [UN Convention on the Rights of Persons with Disabilities](https://employment-social-affairs.ec.europa.eu/policies-and-activities/social-protection-social-inclusion/persons-disabilities/united-nations-convention-rights-persons-disabilities_en), seeks to make products and services more accessible to individuals with disabilities, older adults, and people with temporary impairments. Its ultimate goal is to foster a fair and inclusive society where everyone can access the opportunities and resources modern life offers.

The EAA applies to various industries, including e-commerce, and mandates compliance with accessibility standards by 2025. Failure to meet these standards could result in significant legal and financial repercussions, with specific penalties determined by each EU member state.

However, certain exemptions exist:

* **Microenterprises** (companies with fewer than 10 employees and an annual turnover of under 2 million euros) are exempt from mandatory compliance but are encouraged to prioritize accessibility.
* **Member states** may also introduce limited exceptions tailored to specific contexts.

Businesses that are not exempt must prioritize compliance to mitigate financial risks and safeguard their reputation in the European market. Let’s explore the key requirements they need to follow.

## What Are the Requirements Requested by the EAA?

The EAA does not mandate specific technical standards, providing businesses with flexibility and room for innovation. However, the [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) (WCAG) 2.1 are often referenced as the de facto framework for achieving compliance.

WCAG 2.1 is an internationally recognized set of standards developed by the World Wide Web Consortium (W3C) to ensure that web content is accessible to individuals with disabilities, including those with visual, auditory, physical, cognitive, or neurological impairments. These guidelines, also referenced in other major accessibility legislation like the **Americans with Disabilities Act** (ADA), offer a robust foundation for creating accessible digital experiences.

The guidelines are built around four core principles, ensuring that web content is:

* **Perceivable**: Information and user interface components must be presented in ways that users can perceive (e.g., providing text alternatives for images).
* **Operable**: Navigation and user interface elements must be operable (e.g., all functionalities must work via keyboard input).
* **Understandable**: Content and operation must be clear and intuitive (e.g., avoiding overly complex language and ensuring consistent navigation).
* **Robust**: Content must be compatible with assistive technologies, such as screen readers.

![](https://cdn.sanity.io/images/kqgmf0g2/production/a4856ec01e1d0310914fd4a5865a54c6a64f975e-2120x1324.png?fit=clip)

WCAG 2.1 defines accessibility through three levels of compliance:

* **Level A (Minimum)**: Covers the most basic web accessibility features and barriers.
* **Level AA (Recommended)**: Addresses a broader range of accessibility issues, making it the standard most commonly adopted by organizations.
* **Level AAA (Highest)**: The most stringent level, though not all content can realistically achieve this due to its complexity.

While the EAA does not explicitly mandate WCAG 2.1, its principles align closely with the framework, making WCAG 2.1 an essential reference for compliance. Businesses operating within the EU are encouraged to adopt **Level AA compliance** as a baseline to meet the EAA’s requirements by June 28, 2025. 

However, accessibility extends beyond mere compliance—it’s a strategic investment with tangible business benefits. By prioritizing accessibility, you not only fulfill legal obligations but also unlock opportunities for growth, customer satisfaction, and long-term economic advantages.


## What Are the Economic Benefits of Accessibility?

### Expanded Market Reach

Accessible websites and services open your business to a broader audience, including the over 87 million people with disabilities in the European Union alone. But the benefits extend beyond this demographic:

* **Aging Population**: As populations age, more users experience visual, auditory, or mobility-related challenges. Accessible design ensures these customers can engage with your e-commerce platform.
* **Temporary or Situational Impairments**: Accessibility considerations benefit people with temporary disabilities (e.g., a broken arm) or situational limitations (e.g., poor lighting or loud environments).
* **Global Audience:** Accessibility features like clear navigation, alt text, and keyboard usability often enhance cross-cultural usability, making it easier for non-native speakers and global audiences to interact with your brand.

By removing barriers, your brand becomes more inclusive, expanding its customer base and increasing revenue potential.

### Improved User Experience

Accessibility often aligns with usability best practices, benefiting all users, not just those with disabilities. For example:

* **Simplified Navigation**: Clear layouts, logical flow, and intuitive interfaces make it easier for users to find products and complete purchases.
* **Faster Checkout Process**: Accessible forms with clear labels and instructions reduce frustration and cart abandonment rates.
* **Mobile Optimization**: Many accessibility improvements, such as touch-friendly buttons and adaptable layouts, enhance the mobile shopping experience—a critical factor as mobile commerce continues to grow.

When users have a smooth, frustration-free experience, they are more likely to return and recommend your brand to others.

### Stronger Brand Reputation

Consumers increasingly value brands that demonstrate social responsibility. By prioritizing accessibility, you position your company as:

* **Inclusive and Ethical**: Showing commitment to inclusivity fosters trust and goodwill among diverse customer groups.
* **Progressive**: Leading in accessibility can position your brand as an innovator in the industry, setting an example for competitors.

Positive public perception translates into stronger customer loyalty, more referrals, and a brand that stands out in a crowded market.

Now that we’ve outlined the benefits of successfully implementing accessibility in your e-commerce strategy, let’s dive into some actionable steps to help you get started.

## How To Get Started With Accessibility

### 1. Conduct an Accessibility Audit

![](https://cdn.sanity.io/images/kqgmf0g2/production/7d1ba181aa6eb44c7a1af6a2e65012492e9ada3a-2120x1324.png?fit=clip)

The first step, once you familiarize yourself with the specific accessibility standards and requirements, is to conduct an accessibility audit of your e-commerce website.

This can be done manually—by navigating your site with a keyboard, testing screen reader compatibility, and reviewing color contrast—or automatically, using tools like [Level Access](https://www.levelaccess.com/), [WAVE](https://wave.webaim.org/), or [Lighthouse](https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=it), to identify areas that do not meet WCAG 2.1 standards.

### 2. Define Accessibility Goals

Once you have the audit, you can establish clear, measurable objectives to guide your accessibility efforts. 

When doing this, you’ll want to **prioritize high-impact areas** that have the most significant effect on user experience, including:

* **Navigation menus** to ensure seamless site exploration.
* **Product pages** for clear and accessible product information.
* **Checkout forms** to reduce barriers and improve conversions.
* **Search functionality** to help users find what they need effortlessly.

Remember: you should aim for **WCAG 2.1 Level AA** compliance as a baseline.

Develop a comprehensive roadmap that outlines the scope of your accessibility improvements, sets priorities, and defines a realistic timeline for implementation.

### 3. Educate Your Team About Accessibility

Accessibility is an ongoing effort, so educate your team to maintain compliance. 

* **Developers**: Train them to write accessible code using best practices and tools like Accessible Rich Internet Applications ([ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)) for enhancing screen reader compatibility. Implement a workflow that includes automated accessibility checks—such as using the Lighthouse API—to review accessibility scores for every change to the code before deploying updates to the production environment. This ensures continuous monitoring and improvement.
* **Designers**: Educate your design team on WCAG 2.1 principles, including color contrast guidelines, scalable text, and keyboard accessibility. Encourage them to integrate accessibility considerations from the very beginning of the design process, ensuring that every layout, component, and interaction is inclusive by design.
* **Content Creators**: Train content creators to write clear, concise, and descriptive content that is inclusive and accessible. This includes using plain language, providing meaningful alt text for images, creating descriptive link text, and ensuring proper use of headings for better readability and navigation.

### 4. Monitor and Maintain Accessibility

Accessibility isn’t a one-time project—it requires continuous monitoring and adaptation to ensure your website remains inclusive and compliant over time.

Here’s how to maintain accessibility effectively:

* **Conduct Regular Audits**: Conduct periodic accessibility reviews to identify and address new issues that may arise from updates or changes to your website.
* **Collect User Feedback**: Actively seek feedback from users with disabilities to uncover pain points and prioritize improvements based on real-world experiences.
* **Stay Up-to-Date**: Keep track of updates to accessibility standards, such as WCAG revisions and changes in related legislation, to ensure your site remains compliant and up-to-date.

### 5. Seek Professional Support

If the complexities of accessibility implementation seem overwhelming, you don’t have to navigate them alone. Partnering with experts can provide the specialized knowledge, tools, and strategies needed to achieve compliance efficiently and effectively.

Professional accessibility consultants can perform a comprehensive audit of your website, identify areas of non-compliance, and provide actionable recommendations tailored to your website. They can also work with your team to develop a long-term accessibility strategy, ensuring that future updates align with standards like WCAG 2.1.

## EAA: An Invitation to Innovate and Empathize

The EAA should not be viewed as a constraint but rather as an opportunity to innovate and build more inclusive digital experiences. By following the steps outlined above, accessibility can become a core focus of e-commerce development, driving both compliance and user satisfaction.

If you need assistance implementing accessibility in your e-commerce strategy, our team is here to help. We can audit your website to identify areas for improvement and guide you through achieving compliance. [Get in touch](https://nebulab.com/contact-us) to ensure your website is not only accessible but also a model of inclusivity and innovation.

European Accessibility Act: A Primer for E-Commerce Brands

For direct-to-consumer (DTC) brands, Black Friday and Cyber Monday (BFCM) are more than just shopping events; they’re a prime opportunity to forge lasting customer relationships, expand market presence, and drive brand loyalty. [BFCM 2023 set new records](https://www.shopify.com/news/shopify-merchants-drive-record-high-9-3-billion-in-black-friday-cyber-monday-sales), with Shopify merchants generating $9.3 billion in sales—a 24% increase from the previous year. This isn't just a period for bargain hunters; shoppers are keen to treat themselves, stock up on essentials, and find meaningful gifts for loved ones.

Smart DTC brands that offer personalized recommendations, exclusive bundles, and tailored shopping experiences can take full advantage of this critical period. By focusing on these strategies, brands can enhance the shopping experience, boost cart values, and nurture customer loyalty well beyond the holiday season.

In this article, we’ll delve into five key strategies DTC brands can use to optimize the user experience, increase sales, and strengthen customer relationships during BFCM.

## 1. Use Personalization to Build a Tailored Shopping Journey

BFCM is the perfect time to elevate the shopping experience with personalized recommendations. Shoppers are often on the lookout for items they've been considering for months, and by tailoring product suggestions based on customer preferences, you can significantly improve conversion rates.

To achieve personalization during BFCM, DTC brands can leverage the following strategies:

* **Tailored Product Recommendations**: Use browsing history and previous purchases to recommend products that align with a customer's past behavior. For instance, if someone bought skincare products last year, suggest complementary items they might appreciate this season. Relevant suggestions make it easier for customers to find what they need and feel understood by your brand.
* **Exclusive Offers for Returning Customers**: Rewarding returning customers with early access to sales or exclusive discounts fosters loyalty. This personalized touch can be a game-changer during BFCM, making shoppers feel valued and more likely to return for future purchases.
* **Personalized Shopping Experience**: Tailoring the shopping journey with custom landing pages for different customer segments enhances the overall experience. These pages can feature curated collections that align with the customer’s preferences, creating a more relevant and engaging shopping experience.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/a8afd37c8557c53ec4629f67a9b0abff752996fd-1600x1052.jpg?fit=clip" alt="Cometeer personalized black friday email">
  <figcaption>Cometeer's Black Friday emails ensure that returning customers get the exclusive offers before the general public.</figcaption>
</figure>
<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/342ff6cf7110501c14642682563f633c42ae4842-1600x1052.jpg?fit=clip" alt="LuLuLemon upsell and personalizationl">
  <figcaption>Lululemon offering discounts on upsells and crossells as a way to tailor product recommendations to their customers.</figcaption>
</figure>

## 2. Increase AOV by Featuring Cross-Selling and Up-Selling Opportunities
The cart is a critical touchpoint for boosting the average order value (AOV). By implementing strategies like volume discounts, bundling, and upselling complementary items, DTC brands can maximize each purchase during BFCM.

* **“More of the Same” Strategies**: Capitalize on popular items frequently bought together, leveraging BFCM shoppers' tendencies to stock up. Offering volume discounts (e.g., "Buy 3, Get 1 Free") or bundling products is a great way to drive higher cart values.
* **Complementary Product Suggestions**: Highlight 2-3 complementary items based on what's already in the cart. For example, if someone is buying a skincare set, suggest related accessories or add-ons like travel-sized products. This makes it easier for customers to discover products that enhance their purchases.
* **Tiered Free Shipping and Gift Incentives**: Highlight how close customers are to free shipping or a gift incentive (e.g., "You’re only $20 away from free shipping!"). These small nudges often encourage additional purchases, enhancing the perceived value of the order.
* **Mobile-Friendly Design**: Ensure that upselling and cross-selling sections are visible on mobile devices without obstructing the user's view. Experiment with different methods, such as collapsible sections, carousels, or dismissible pop-up windows displaying relevant suggestions immediately after a customer adds an item to the cart. Monitor user engagement and adjust the design accordingly.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/d1e5f36a97b2d8b3979fd7a51adfee38b9927f5e-1600x1052.jpg?fit=clip" alt="Cart upsell examples">
  <figcaption>Some examples of mobile cart upsell UX that we love!</figcaption>
</figure>

## 3. Provide Alternative Product Recommendations for Out-of-Stock Items 
High-demand products sell out quickly during BFCM, leading to frustrated customers and missed sales opportunities. Offering alternative product recommendations is a proactive way to keep customers engaged and reduce the likelihood of abandonment.

However, the visibility of these recommendations is key—product recommendation carousels, while useful, can easily be missed if placed at the bottom of the page, particularly on mobile.

Here there are a few ideas, that brands should consider to leverage alternative products avoiding to miss any potential conversions:

* **Anchoring Similar Items**: implementing anchor links near the out-of-stock button (often disabled or converted to a “Notify Me when Available”) that direct customers to a section featuring similar items. This approach provides customers with immediate alternative choices, letting them discover deals on similar products.
* **Display product recommendations near the buy section**: Display alternative items near the “buy” button or in a non-intrusive pop-up when an out-of-stock product is selected. Make sure these suggestions are easy to find and relevant to the customer's browsing history.
* **Non-Intrusive Pop-Up Recommendations**: A pop-up window that recommends alternative products when a shopper encounters an out-of-stock item can save the sale. Ensure the pop-up is easy to close but remains accessible for the customer to revisit.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/fed609443a842656a8c6b1bfde54c1878f09e8d2-1600x1052.jpg?fit=clip" alt="Aloyoga out of stock messaging">
  <figcaption>Aloyoga (left) uses anchoring messaging and alternative cross sells when products are out of stock. Princess Polly (right) also uses "alternative" products alongside a "notify me" call to action.  </figcaption>
</figure>

## 4. Show Delivery and Return Expectations to Reduce Customer Anxiety 
Clear communication is key to preventing cart abandonment, especially during the BFCM rush. By setting clear expectations around delivery times, shipping costs, and return policies, you can reduce anxiety and encourage purchases.

Since gifting remains a significant element of the holiday shopping season, consider improving the shopping experience for gift-givers by implementing these key insights.

* **Transparent Shipping Costs**: Display shipping costs upfront, ideally on the product page or in the cart. Surprising customers with hidden fees during checkout is a surefire way to lose them.
* **Order Cutoff Dates**: Ensure customers know when they need to place orders to receive them on time, particularly for gifts. Prominent banners or product page messages like "Order by December 10 for guaranteed delivery before Christmas" give customers confidence in their purchase.
* **Extended Return Policies**: Offering an extended return window for purchases made during BFCM reassures customers that they can buy gifts without worrying about strict return deadlines.
* **Order Tracking**: Providing detailed tracking updates helps ease customer concerns about delivery times during this busy season. Clear tracking information can make a significant difference in the overall customer experience.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/e357399262e62a1eabe41e084d895a68f0eb2b3a-1600x1052.jpg?fit=clip" alt="Aloyoga out of stock messaging">
  <figcaption>Lake (left) and Alo (right) both have clear information about delivery and returns in the checkout, ensuring customers don't get an unwanted suprise!  </figcaption>
</figure>

## 5. Provide an Optimized Experience to Mobile and Desktop Users 
[During BFCM 2023](https://www.syte.ai/blog/bfcm-resources/bfcm-2023-top-trends-and-takeaways/), while mobile transactions were significant, desktop shoppers displayed higher conversion rates and average order values (AOV), particularly in industries like Fashion, Jewelry, and Home Decor. This trend suggests that many shoppers turned to their computers for focused sessions, whether they were stocking up on essentials for the upcoming year or purchasing high-value items they'd been considering and researching for some time.

To provide an exceptional shopping experience for both desktop and mobile users, consider these tactics:

* **Site Speed Optimization**: High traffic during BFCM can lead to slow load times or crashes, causing customers to abandon their carts. Use tactics like lazy loading, content delivery networks (CDNs), and site performance testing to ensure a smooth, speedy shopping experience.
* **User-Generated Content (UGC)**: Customer photos, Q&A sections, and verified reviews enhance trust, particularly for desktop shoppers researching high-value items. UGC adds authenticity to your brand and boosts conversion rates by providing social proof.
* **Accessible Product Information**: Make essential product details like size guides, specs, and return policies easy to find. During the hectic BFCM season, customers don’t want to search for information. Providing it upfront ensures a smoother shopping experience, and real-time support through chatbots can further assist.

## Maximizing BFCM Success for DTC Brands 
As BFCM approaches, DTC brands must seize the opportunity to optimize the shopping experience, connect with customers, and build long-term loyalty. By focusing on personalized shopping journeys, effective cross-selling strategies, and clear communication around shipping and returns, brands can turn BFCM into a catalyst for sustained growth and engagement.

Need help planning your e-commerce strategy for BFCM? We’re here to assist you in creating a seamless user experience that drives results. [Contact us](https://nebulab.com/contact-us) to learn more!

Unlocking BFCM Success: Key UX Strategies for DTC Brands

Product configurators are interactive UIs that allow a brand’s customers to personalize certain aspects of a product to fit their tastes and preferences. No matter whether they’re the only path to purchase or one of many possible options, configurators offer several advantages:

* Consumers often perceive customized products as more luxurious than their mass-produced alternatives, which can help reduce price sensitivity.
* Brands can use configurators to upsell customers on premium options they would not otherwise consider, potentially boosting average order value (AOV).
* Configurators are also the perfect place for cross-selling through accessories and other complementary products, increasing average basket size (ABS).

Over the years, product configurators have evolved dramatically, thanks in no small part to technologies such as 3D, AR, and VR. They are particularly popular in the fashion, furniture, electronics, and automotive industries, where total personalization and flexibility are key to an engaging customer experience.

However, total flexibility often leads to complexity, which creates a slew of UX challenges. To avoid alienating their customers, brands must manage this friction and ensure their configurator is intuitive, efficient, and enjoyable.

In this article, we’ll provide recommendations and guidelines for creating a product configurator that balances flexibility and usability, driving the results you’re looking for.

## 1. Create a Sense of Progression

Product configurators come in different shapes and sizes, but creating a sense of progression is vital for enhancing the user experience and ensuring consumers complete their purchase.

This can be accomplished by breaking down the configurator into manageable steps, giving users a sense of achievement as they complete each stage. The incremental progress keeps them motivated to continue through the entire flow and ensures you’re not overwhelming them with too much information.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/50b4ecf3d0b7d97a936816b3917c6bc10775eb89-1999x1130.png?fit=clip">
   <figcaption>To avoid confusion, the Framework Laptop configurator guides the user only shows the currently active step and clearly marks completed steps.</figcaption>
</figure>

## 2. Display an Accurate Product Preview

Each step of a configurator should provide users with instant feedback on their selections, ensuring that changes in options (such as color, material, or features) are immediately reflected in the product preview. This reassures customers about their decisions and creates a more engaging and enjoyable customization process.

Some brands display 3D models that users can rotate, zoom in on, and view from different angles, or they integrate AR to allow customers to visualize a product in a real-world environment.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/1b693df00472a9b77899af8bc7a6e26af036724e-1999x1223.png?fit=clip">
   <figcaption>For maximum engagement, Tylko allows customers to customize their product straight from the 3D rendering of their product.</figcaption>
</figure>

## 3. Calculate Up-to-Date Pricing and Shipping

In a product configurator, the price and shipping time estimate should be updated whenever the user changes their configuration.

This will help users make more informed decisions around which customizations fit their budget and delivery constraints, which in turn results in reduced friction and cart abandonment.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/167eaca2dcfac99b7d89cc97dc845fed77d83790-1999x1488.png?fit=clip">
   <figcaption>Cowboy clearly displays the impact of each addon on cost and shipping time, and shows alternative configurations with faster shipping.</figcaption>
</figure>

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/1c8f23357fbb84311d4d8c93acaf0699ee7696f9-1999x1675.png?fit=clip">
   <figcaption>On mobile, a sticky header/footer can be used to keep pricing and delivery information front and center while the user interacts with the configurator.</figcaption>
</figure>

## 4. Offer Technical Explainers

Customers who are new to a brand may need additional information about specific features or options while customizing, especially in technical product categories where jargon abounds, or the functionality or benefits of particular options are not self-explanatory.

To avoid overwhelming the user with too much information at once, brands can use UI elements like tooltips or modals. These elements provide immediate, context-sensitive assistance right where the customer needs it through text, videos, and tutorials.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/12648a14f561a220330d221a7a71adf171751430-1999x1546.png?fit=clip">
   <figcaption>Herman Miller includes a help icon at almost every step of their configurator. When clicked, it opens a modal containing information about specific options.</figcaption>
</figure>

## 5. Provide Real-Time Validation

While clear instructions can dramatically reduce the likelihood of a user error, it’s still common for users to encounter issues while using a configurator, such as selecting incompatible options or trying to place their order without completing all the necessary steps. If not properly handled, these errors can lead to frustration and result in the user abandoning the configuration experience.

Providing visual, real-time validation as users make selections can help them easily navigate the customization process. Use clear indicators, such as red outlines and error messages, to highlight invalid choices and guide users toward valid options.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/75355ef1bf806c09c9be9c529067f5cdc62612d4-1999x1180.png?fit=clip">
   <figcaption>In Framework’s configurator, we highlight missed steps in red, guiding users to provide the necessary information to complete their configuration.</figcaption>
</figure>

## Product Configurators Are Never Really Done

While these best practices lay the foundation for a successful and engaging configurator, you should still periodically review and improve your configurator's UX by:

* Conducting regular surveys, questionnaires, and interviews to gather  feedback from your users about their experience with the configurator.
* Running usability testing sessions where users interact with the configurator and provide real-time feedback.
* Using analytics tools to monitor user behavior and identify patterns, such as frequently encountered issues or abandoned steps.
* Adopting an iterative design process where the configurator is continuously refined through cycles of feedback, prototyping, testing, and implementation.

At Nebulab, we’ve helped our clients build, launch, and optimize product configurators in industries where the ability to create a bespoke product is a significant competitive advantage. If you’re curious, you can learn more about our work for Framework in [our case study.](https://nebulab.com/case-studies/framework)

If you need help designing and building a new product configurator from scratch or improving your existing setup, [don’t hesitate to reach out!](https://nebulab.com/contact-us)

How To Design the Perfect E-Commerce Product Configurator

With customer acquisition costs increasing by 222% between 2013 and 2022, modern brands must maximize retention and customer lifetime value. Over the last years, several brands have looked at subscriptions to help mitigate this challenge: by putting future purchases on autopilot, subscriptions can boost purchase frequency and drive more sustainable growth.

As more brands adopt subscriptions, however, many consumers have also begun experiencing [subscription fatigue](https://hbswk.hbs.edu/item/with-subscription-fatigue-setting-in-companies-need-to-think-hard-about-fees), which has led to a slew of cancellations. This trend can only get worse with the recent challenges in the macroeconomic environment, as consumers look to acquire greater control over their spending and cut back on unnecessary purchases.

In other words, subscriptions are a great business model, but they’re becoming increasingly challenging for e-commerce businesses to execute.

This is a complex, multi-faceted challenge that would take several blog posts to unpack. Today, we’d like to start by offering some tactical advice on how you can improve the pre-checkout UX of your subscription offering and incentivize more customers to subscribe based on our experience with brands such as [Cometeer](https://cometeer.com/), [MeUndies](https://meundies.com/), and [Blue Apron](https://www.blueapron.com/).

## #1: Create a “How It Works” Section

Every online store that offers subscriptions should have a “How It Works”section. This section can be a standalone page or embedded in the home page, landing page, pricing page, or any other prominent touchpoint on your e-commerce site.

A good How It Works section equips consumers with all they need to know about your product, pricing, and delivery options. It can be a significant make-or-break moment in the consumer’s decision-making process.

In our experience, a good How It Works page design covers:

* **Benefits, not features:** It goes without saying, but you should tell customers not just what you sell but also why it’s relevant to them. It’s good to know your meal delivery service only ships organic ingredients–but why should they care?
* **Subscription options:** Do you let customers pause, skip, and cancel deliveries at any time? (Hint: You should.) Say so! Let your customers know they will still have complete control and flexibility in managing their subscriptions.
* **Social proof:** UGC is always a critical component, but it becomes even more important with a subscription model, where there’s a significant trust barrier to overcome. Show your best reviews–even better if you include images/videos!

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/0d6024043b61b8db3d4e760aab3ed3fa78b17283-1600x1052.jpg?fit=clip">
   <figcaption>Purple Carrot provides detailed information on its Plans page, which leads to customers to sign-up and eventually checkout.</figcaption>
</figure>

For example, Purple Carrot uses its Pricing page to guide aspiring home chefs through its plant-based meal delivery service. This page helps customers complete the purchase by clearly outlining the high-quality nature of their product, per-meal pricing, and delivery and subscription management options. (But it could still be improved by adding some social proof!)

## #2: Put Your Pricing Front and Center

While new customers may be willing to splurge on a one-time purchase, they will often want reassurance they’re getting the best value for their money when committing to a recurring subscription.

The first step is to make your pricing clearly visible. It seems simple, but you’d be surprised how many brands hide their pricing information in the product details or hard-to-spot sections of the page–see Lovevery or Summer Fridays, highlighted below, as an example.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/68294e038d95e6f577cc162a5c5035f34b0a6a04-1600x1052.jpg?fit=clip">
   <figcaption></figcaption>
</figure>

To improve the visibility and clarity of pricing, consider playing with:

* **Text size:** Adjust text size so it stands out from surrounding content.
* **Contrast:** Use contrast effectively to make text pop against its background and nearby items, enhancing readability.
* **Whitespace:** Incorporate white space to declutter the page, making important information easier to locate and the layout more appealing.

Whenever possible, you should also try to break down your pricing in clever ways that highlight the value of your product. For example, meal delivery services typically use “cost per meal” as the north-star metric, as it helps customers clearly understand how much they’re spending to feed themselves and their families.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/157481bf311a40b75dcec56a1bc087d57019ba1a-1600x1052.jpg?fit=clip">
   <figcaption>Both Athletic Greens and Graza do a great job of clearly showing pricing information and plans on their websites.</figcaption>
</figure>

Finally, featuring pricing on other key touchpoints, such as the homepage page, as done by Athletic Greens, can significantly enhance user experience. Graza also does a great job by detailing pricing information for first and recurring orders directly in the Buy section.

Refining these elements can dramatically improve navigation and satisfaction, steering users from curiosity to commitment.

## #3: Don’t Rush Customers to Checkout

When brands use calls to action (CTAs) like "Get Started," they often rush the customer straight into the checkout process. Yet many users interpret such CTAs as an invitation to start exploring the brand, not to immediately commit.

While it might sound counterintuitive, we often advocate for brands not to disorient or frustrate users by teleporting them to the PDP or–worse–the checkout funnel if they haven’t had a chance to learn about the brand yet.

<figure>
   <img src="https://cdn.sanity.io/images/kqgmf0g2/production/9091d6b62146d8ace325963e55f94ece32d64475-1600x1052.jpg?fit=clip">
   <figcaption>MeUndies provides clear subscription service information after clicking the primary CTA and asks users to sign up at the end of the process.</figcaption>
</figure>

MeUndies, a Nebulab client, knows this very well. They link the “Get Started” CTA on their home page to the “How It Works” page. They don’t ask for the customer’s personal information until much later in the customer journey.

By earning the customer’s trust with content and data before moving into the actual checkout funnel, brands can create a smoother experience, reducing friction and increasing conversion rates.

## Bonus: Optimize Your Quiz Experience

While quizzes are not exclusive to subscriptions, subscription brands often use them to help prospective customers find the ideal product variant, subscription plan, and delivery frequency.

As a bonus, here are some tips on how to nail your quiz’s customer experience:

* **Offer an ETA**: By clearly stating the number of steps and completion time of your quiz, you can proactively manage customer expectations and increase engagement. Of course, this only works if your quiz is _actually_ quick!
* **Allow moving back and forth:** Customers should be able to move between different steps of your quiz and revisit previous questions without starting from scratch. You should also ensure that navigation is consistent with your site’s design.
* **Store user progress:** Ideally, you should store a user’s progress as they go through the quiz so they can resume it later. Pro tip: Just like you send cart abandonment emails, ask for the customer’s email upfront so that you can enroll them in a “quiz abandonment” flow if needed!

These tips will help create a smooth and pleasant quiz experience, which can dramatically impact your add-to-cart and conversion rates.

## Ready To Master Your Subscription UX?

Here's a brief refresher on the best practices that can elevate your subscription service:

1. Craft a compelling "How It Works" section that focuses on benefits rather than features, clearly outlines delivery and subscription options, and establishes credibility through social proof.
2. Put pricing front and center, not just on the PDP but also at other touchpoints in the customer journey. If possible, break down your pricing to demonstrate the value you deliver.
3. Rather than sending customers from your homepage straight to the PDP or checkout, focus on educating them on the value of your offering and only then closing the sale.

And our bonus tip: if you have a quiz functionality, allow your customers to navigate back and forth between steps and store their progress for later.

If you need UX design for your subscription offering, we can help! Since 2011, we’ve been helping brands anywhere from pre-revenue to $500M/year with the design, launch, and optimization of their subscription experience. [Feel free to reach out!](https://nebulab.com/contact-us)

3 (+1!) E-Commerce Subscription Tactics You Might Be Missing

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

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?

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

Picture this: You run an eCommerce store, and business is booming in your home country. Feeling confident, you decide to expand into new markets. You translate your website into a few languages, but something's amiss. Your sales aren't hitting the expected numbers, and customers seem less engaged. What went wrong?

This is where Cross-Cultural Design comes to the rescue. Cross-Cultural Design (CCD) recognizes that every culture is unique and influenced by its values, traditions, and preferences. Ignoring these cultural nuances can lead to missteps, missed opportunities, and the alienation of potential customers.

In this article, we'll take you on a laid-back journey through the exciting world of CCD, explaining why it's a game-changer and how to navigate it effortlessly.

## The Principles of Cross-Cultural Design

Thinking about how cultural differences can influence users' needs and expectations isn’t an easy task, and we at Nebulab know it very well: we’re not only fully distributed, but we also work with brands from all over the world. Local preferences, navigation, and information hierarchy are just some of the aspects that can be influenced by cultural, behavioral, and economic elements.

In theory, User Research should help designers understand what their audience expects from digital interactions. Unfortunately, most behavioral research studies–which User Research practitioners take a lot of inspiration from–[are based on Western subjects](https://www.youtube.com/watch?v=Ho6OlPrD7sA)). This leads to the majority of design and user experience benchmarks being Western-centric, which creates obvious problems for teams that are designing for a non-Western audience.

In light of these challenges, broadening our perspectives becomes even more difficult: without reliable data and benchmarks, how can designers operate effectively without sacrificing speed?

That’s where Cross-Cultural Design comes to the rescue: rather than providing a set of steps to follow, it offers a set of principles that designers should keep in mind when operating outside their zone of “cultural comfort.” These principles will guide you to approach your work differently, which, in turn, will help you make better choices for your design, content, and technical strategy:

* **Embrace Cultural Immersion**: Dive into the culture you're designing for, immerse yourself in its nuances, and understand its values, traditions, and aesthetics. This deep understanding will help you create designs that resonate with the local audience.
* **Research Creative Communities**: Explore the creative communities within the culture. This involves understanding how artists, designers, and local creators express cultural identity. Drawing inspiration from these communities can enrich your design.
* **Work with Experts**: Collaborate with experts or individuals with in-depth knowledge of the culture. Their insights can provide invaluable guidance and ensure your design is culturally sensitive and authentic.
* **Question Assumptions**: Challenge assumptions and preconceptions about the culture. Be open to reevaluating your design choices based on real-world insights and user feedback rather than relying on stereotypes or biases.
* **Prioritize Flexibility**: Design with flexibility in mind. Recognize that cultures evolve, and your design should adapt to changing norms and preferences. A flexible design can better withstand the test of time and evolving cultural trends.

Now that we've explored these guiding principles, let's dive into two crucial concepts closely related to cross-cultural design: internationalization and localization.

## Internationalization and Localization: You Need Both!

The most fundamental challenge teams face when working on a cross-cultural project is ensuring the content, branding, and design are flexible enough to accommodate multiple languages, nationalities, and cultures. This process is called _internationalization_ (often abbreviated as _i18n_). **Internationalization involves creating digital experiences that work across cultures.**

On the other hand, **localization (_l10n_) involves tailoring a product to a specific culture.** Localization encompasses modifying UIs, adjusting layouts and styles, revising content and language, and tailoring and enhancing the user experience to suit the needs of the particular audience you’re designing for.

In other words, while internationalization is more about having a framework in place to adapt your product to a global audience, localization is about doing the actual work of adapting your product for each audience you want to serve.

Because internationalization mainly falls on the shoulders of your engineering team, we won’t focus on it in this article. Different eCommerce platforms and software libraries have different internationalization capabilities–make sure your engineering team is aware of any cross-cultural requirements and uses that information to inform their technical choices.

Instead, let’s explore the most common aspects that you need to consider when _localizing_ your design systems and digital experiences, particularly when it comes to eCommerce.

### Names and Addresses

It's essential to understand that cultural differences extend to the most basic elements of your user experience, such as how names or addresses should be collected and formatted.

For example, when we designed the checkout form for a Pakistani marketplace, we learned that Pakistani individuals will often have a first name, a middle name (which is typically their father's name), and a last name (family name or surname). With that requirement in mind, we decided to scrap the “First name” and “Last name” fields, typical of Western cultures, in favor of a single “Your name” field instead.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/3cc7341fef23a9a7996314c04bb0f694078be97b-1600x1052.jpg?fit=clip" alt="Unified field for first, middle and last names">
</figure> 

The same applies to addresses: in the form below, you might have noticed that there is no ZIP Code field–that’s because there are no ZIP codes in Pakistan. For our client [Framework](https://frame.work/), on the other hand, we’ve had to adapt the ZIP code field to allow both 3+2 and 3+3 codes in Taiwan.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/9ba2719bc3b73d7a9af55685588fbde123c4fbf8-1600x1052.jpg?fit=clip" alt="Framework's shipping address form for Taiwan">
  <figcaption>Taiwan’s introduced 3+3 ZIP codes in 2020 to improve mail sorting efficiency.</figcaption>
</figure>


### Text Direction

One of the most significant layout challenges encountered while localizing a South Eastern client’s eCommerce experience was supporting right-to-left (RTL) text in Lebanon.

That kind of change doesn’t just involve the actual text but also requires shifting the overall content and “mirroring” certain UI elements:

* **Headers, labels, and text should be oriented from right to left**. In eCommerce, that means displaying the brand’s logo on the right and the cart icon on the left.
* **Navigation buttons** must be mirrored, but icons that do not convey direction should remain unchanged.
* **Checkboxes** should be positioned to the right of their corresponding label.
* **Progress bars** should fill in a right-to-left direction.

Later in this article, we will explore tools to assist designers in this process.

### Linguistic Nuances

Very often, translating your UI and content is just the first step. It’s crucial to remember that each language has its quirks and nuances.

A common problem is that UI elements that look good in English might not be suitable for other languages. As an example, the German language allows stringing together multiple nouns to express complex concepts, which leads to some very long words that cannot be readily displayed in a mobile button.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/0e17cec623f050d16c9a7d4dc23019effd576e6c-1600x1052.jpg?fit=clip" alt="German vs. English UI in Framework">
</figure>

Another consideration is that the formatting of numbers, phone numbers, and currencies varies in each language. Using the same phone number or currency format across different languages is bound to cause confusion and friction for the user.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/b949ccdab489f172ff0e28a913d61c54d49da452-1600x1052.jpg?fit=clip" alt="Framework's checkout flow">
</figure>

### Payment Methods

Credit card usage is widespread in Western countries, while digital wallets and cash-on-delivery are preferred in many Asian markets. Adapting payment options to local preferences can dramatically enhance the customer experience and your conversion rates!

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/b8e24cd97481e4b71bb924ac1b5019328afb9c57-1600x1052.jpg?fit=clip" alt="OLX Mall's payment method selector">
  <figcaption>In some countries, cultural, historical, and socio-economic factors led to a deep-rooted preference for cash payments, even in online transactions.</figcaption>
</figure>

### Sign-In Preferences

Even something as familiar as the sign-in process can vary across cultures. In Western markets, users typically register for websites or online services using their email addresses. However, in Eastern countries, most users prefer to use their phone number.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/2a7306fd9abf204f991c15a7cdfab56224db629c-1600x1052.jpg?fit=clip" alt="Sign-in modal that supports phone numbers">
  <figcaption>In many Eastern countries, phone numbers, not emails, are the preferred method identification for creating online accounts.</figcaption>
</figure>

### Social Proof

In the world of eCommerce, trust is the cornerstone of successful transactions. Yet, how trust is built and perceived can vary significantly across cultures: some cultures prioritize the prominent display of security badges for reassurance, while others emphasize customer reviews and testimonials to instill trust in a website.

Understanding these cultural nuances is pivotal in crafting an effective eCommerce strategy that resonates with diverse audiences worldwide.

<figure>
  <img src="https://cdn.sanity.io/images/kqgmf0g2/production/ae4f65150f404d46b77a0fd1f3f6f6ea2d4ef6db-1600x1052.jpg?fit=clip" alt="Shop Safely badge in OLX Mall's checkout flow">
  <figcaption>In OLX Mall, we displayed a “Shop Safely” badge through the entire checkout flow.</figcaption>
</figure>

### We’re Not Even Done

If that wasn’t enough, here are a few more aspects you should consider when designing eCommerce experiences for a global audience:

* **Information Density:** Cultural differences can affect how users expect information to be organized. In some cultures, users may love maximalism and appreciate detailed product descriptions, rich user interfaces, and bright colors, while in others, a more minimalist approach might be preferable.
* **Taxation:** How you apply taxes is dictated by regulatory requirements, but different cultures also have different norms for where and when taxes should be displayed. For specific audiences, showing tax amounts in the wrong place or at the wrong time can increase friction and cart abandonment rates.
* **Imagery:** When picking and displaying images, it’s essential to be mindful of each culture’s sensitivities. You also want to be aware of home and mobile internet speeds in the countries you’re serving: serving a 5MB product image to someone on a 3G connection might not be the best idea!

It would be hard–if not impossible–to provide a comprehensive list of all the elements you should pay attention to. Instead, we recommend constantly referring to the principles of Cross-Cultural Design and using them to inform your day-to-day decisions.

## Sharpening Your Toolkit for Global Design

With localization becoming increasingly important, all the most popular design tools support non-Latin languages and offer features that help in designing for cross-cultural projects.

### Use the Right Figma Plugins

Figma's support for RTL languages is relatively new, having been available for about two years. To change the default [text direction](https://help.figma.com/hc/en-us/articles/4972283635863), select the main menu and go to **Text > Text direction**. Then, when you use the Text tool, the text direction will be set automatically.

There are also several plugins available that let you add your translations quickly and easily. Our favorite ones are:

* [Translator](https://www.figma.com/community/plugin/743218037112142643/translator), which boasts support for 130 languages and translates entire pages very quickly, making it an excellent choice for a quick preview of your layouts in various languages.
* [Cube Translation](https://www.figma.com/community/plugin/1205127328344023071/cube-translator), which uses AI to enhance translation accuracy and provides more robust tooling for real-time collaboration and content synchronization.

As always, your mileage may vary, so we encourage you to experiment with a few different plugins and pick the one most suited for your use case!

### Choose Multilingual Fonts

Selecting the appropriate font for an international project can be a challenging task. It's important to note that not all web fonts support multiple languages, and in some cases, you might encounter unreadable rectangular symbols (referred to as "Tofu").

Multilingual fonts are specifically crafted to solve this problem and accommodate various languages. The most comprehensive open-source, multilingual font family is [Noto](https://fonts.google.com/noto) (its name stands for “no tofu”), and it offers support for more than 1,000 languages.

If you want something more unique, [Google Fonts](https://fonts.google.com) provides a variety of fonts that are either multilingual or designed for specific languages–you can easily find them by applying the language filter to your search.

![Hello is written in different languages with Noto font](https://cdn.sanity.io/images/kqgmf0g2/production/f885f7fee73faf86874c394e4ff0d91df07f1849-1600x1052.jpg?fit=clip)

### Adapt Your Images

As we’ve mentioned, a critical aspect of images is cultural inclusivity. Culturally inclusive images are significant as they portray diversity and support representation. If you have a dedicated creative production team, work with them to develop assets that are suitable for your audience. If you don’t, websites like [Unsplash](https://unsplash.com/) have handy search tools to help you find what you need.

Once you have your images, you also want to ensure they’re optimized for your audience’s internet speeds. [TinyPNG](https://tinypng.com/) is often the go-to choice and, despite the name, also works with JPG and WebP files. We recommend pairing it with a robust CDN for optimizing images on the fly.


## Ready To Take On the World?

As explored in this article, culture plays an immense role in shaping how people interact with and perceive the digital shopping experiences we create for them. As you expand internationally, recognizing these influences is not just a consideration but the key to thriving in an increasingly diverse eCommerce ecosystem. Cross-Cultural Design can help you do just that.

If you have questions on how to make these principles work for your team, or need help designing for a global audience, [feel free to reach out](https://nebulab.com/contact-us)–we’d love to chat!

Expanding Your Brand Globally With Cross-Cultural Design

In July this year, we [announced Sprout](https://nebulab.com/blog/announcing-sprout), our product gifting app.

Sprout allows brands to efficiently run product gifting campaigns without going crazy: rather than spending days buried in Instagram DMs and spreadsheets, brands can just connect their Shopify store, set up a gift link, and share it with the influencers they want to partner with. Influencers can use the link to select the product(s) they wish to receive and enter their shipping information, and an order appears in the brand’s Shopify dashboard, ready to be fulfilled by the brand’s team. It's as simple as that!

After beta testing our MVP with some customers for a few months, we got to work on our public launch. We had a pretty ambitious goal: we wanted to have a brand and website ready to go in just two weeks so we could start marketing the app to the general public.

In this article, we’ll show you how we met our deadline by following a strict design review process and using the right tools.


## Solid Branding Means Fast Execution

Branding is much more than having a good-looking, distinctive logo. For us, branding is about capturing the identity of a company or product, and then translating that into a visual foundation that can be used across the product’s properties. **A solid brand allows you to move quickly and confidently,** no matter what kind of digital or physical experience you’re working on, and it makes you immediately recognizable by prospective and existing customers.

As always, we started by defining a compelling positioning statement and researching Sprout’s target audience and competitors. Our goal in this phase is to understand what the brand stands for: is it a disruptor, fun and playful? Or is it the real deal, serious and professional? How does the brand relate to consumers? How does it relate to its competitors? Once we had defined and finalized all these elements, we began translating them into a visual identity.

For the visual identity, we vowed not to exceed three iterations–our goal was to have the final version ready in one week, and then move on to designing and implementing the website.

In our first round, we developed four brand directions, exploring different logos and mood boards representing various archetypes or styles.

![](https://cdn.sanity.io/images/kqgmf0g2/production/8b77501dac7372a712734a4fed12462044b4ed42-1600x1052.png?fit=clip)

This was super helpful in defining the visual communication we wanted to adopt, including the color palette and font combinations.

In the second round, we mixed and matched elements from the different proposals, settled on a logo and overall mood, and then started exploring different color palettes and font families.

![](https://cdn.sanity.io/images/kqgmf0g2/production/579f077aec483366d857b9cd0380336eae5ad380-1600x1052.png?fit=clip)

In the final round, the work was nearly complete, and most of the decisions had been made. The rest was a matter of refining a few aspects of the color palette, typography, iconography, and overall visual style so that we could more easily reference them in our subsequent work.

![](https://cdn.sanity.io/images/kqgmf0g2/production/8f86d558e7b993531331a848a5f6ab070a051197-1600x1052.png?fit=clip)

At this point, we had established a brand identity and created a style guide to guide us while implementing the brand. We could finally focus on our website.

## Going From Figma to Finished Website in One Click

Figma has been our design tool of choice since its release, so it’s no surprise we also used it for Sprout. We created a quick landing page showcasing the product’s capabilities and most common use cases and allowing brands to request a demo. **Because we had defined the brand’s visual identity and UI fundamentals in advance, the original website design only underwent minimal modifications before being approved for publication.**

After finalizing the design in Figma, we typically hand it off to the engineers, who build it using whatever frontend stack has been adopted. This process leads to highly polished and sophisticated UIs but also takes more time as the engineers need to translate the designs into code and test and deploy the result.

With our two-week deadline, we needed a radically different approach: ideally, we wanted to go from Figma to the final website in one step. We also needed the ability to quickly make visual and content changes to the website after the initial publication to accommodate whatever feedback we received from existing and prospective customers.

![](https://cdn.sanity.io/images/kqgmf0g2/production/94b7e8f319893dccc16e45d1b2161346fb1b3b5b-1600x1052.png?fit=clip)

We evaluated different [content management](https://nebulab.com/blog/ecommerce-content-management) options and ended up using [Framer](https://www.framer.com/). Here’s why:

* As long-time Figma users, the Framer UI feels very familiar, and the app is incredibly user-friendly.
* Framer allows importing Figma designs by simply copying and pasting the artwork, which is game-changing for a fast-moving team.
* The Publish feature is straightforward and blazing fast: we purchased a domain and were ready in minutes.
* Framer integrates with MailChimp, Formspark, and other tools that we use for marketing and lead generation, which further reduces development time.

After importing our designs into Framer, we only had to make a few adjustments to some elements, add some animations, hit Publish, and _voilà!_ Our website was online and available to the world in one week and with zero lines of code. Not only does it require zero maintenance, but anyone with access to the Framer project can easily make content and visual changes to the website.

Finally, we were impressed with the site's performance: even though we didn’t spend time optimizing it, it got top scores in all areas of Google’s PageSpeed Insights benchmarks–hooray for SEO!

![](https://cdn.sanity.io/images/kqgmf0g2/production/b708b957da1fd024a0ec80ac742a0da740766815-1600x1052.png?fit=clip)

## Use Guidelines and Constraints to Your Advantage

While an established work process improves your team’s long-term productivity, it can sometimes hinder your goals and even impede learning. Setting an arbitrary deadline forced our team to think outside the box and temporarily move away from our typical design-development handoff process. This allowed us to go from zero to a fully established brand and website in under two weeks. 

Of course, none of this would have been possible without a solid brand in place. By establishing a clear visual identity beforehand, we minimized the communication overhead while creating [Sprout’s website](https://getsprout.app), drastically improving our turnaround time.

We will probably re-implement Sprout’s website with a more sophisticated tech stack at some point, but for now, we’re thrilled with Framer’s ease of use and flexibility. In fact, next time we do something like this, we might even try designing the website right into Framer rather than going through Figma–who knows, we might be able to shave a couple more days off the timeline!

If you’re an e-commerce brand and would like to adopt a similar approach for your next landing page or product drop, feel free to [reach out!](https://nebulab.com/contact-us) We’d be happy to help.

How We Branded Our Latest Product in Just Two Weeks

Here’s a story you might have heard before: a brand has a dedicated design team, handling everything from packaging to ad creative to Web design. The design team works closely with the brand’s executive team, constantly asking for feedback and creative direction. Because designers work so closely with the executives, there’s no need to prioritize projects: people can just talk to each other and “figure it out.”

Then, as the brand starts scaling their Web development efforts, all hell breaks loose.

The brand’s development team starts complaining that the mockups they get from the designers are useless: they’re incomplete, contain visual bugs or inconsistencies, neglect to cover obvious error cases… the list goes on and on. On their side, the designers complain that the developers have no consideration for their work and constantly introduce discrepancies between the original mockups and the final implementation. In all of this, the executive team doesn’t know where the problem lies or how to fix it.

If this sounds familiar, it’s because it happens at least once, in some shape or form, to most e-commerce brands that invest a decent amount of time into their DTC store, not to mention brands that have mobile apps or other digital properties.

In the past, I faced this conundrum several times as I designed brand identities and digital experiences for brands across different sizes and industries. **When designers and developers don’t work well together, it slows down everyone’s work and kills team morale.** It’s the kind of technical problem that has a very tangible impact on a brand’s bottom line.

Luckily, there’s a better way to work. It’s an approach I found through a lot of trial and error, and I’m delighted to share it with you today. Through open communication and clear guidelines, you can create peace of mind for executives, designers, and developers peace of mind, increasing the velocity, scale, and quality of your digital team’s output.

Let’s see how exactly!

## The Myth of the Perfect Design Handoff

When I first tried to bridge the gap between designers and developers, I did what every detail-oriented person would do when tasked with a sufficiently complex problem: create a process. My thesis at the time was that if I _just_ included enough detail in my designs to remove even the smallest amount of guesswork, developers could just translate my mockups into code one pixel at a time, and we’d all live happily ever after.

So, I started doing just that: rather than treating every project as unique, I created a thorough process for prioritizing, executing, and delivering my designs. This included elements like annotations in the designs that clearly explained what the UI was supposed to do and in what way, error states, and even Loom recordings of me going through each screen in the flow and explaining it verbally. Every time a developer had a question that I forgot to cover, I made a note and refined my template, all in pursuit of The Perfect Design Handoff™.

![](https://cdn.sanity.io/images/kqgmf0g2/production/df5a6ddad1bd6e9696f714c4c736b42d249ddf0b-1600x1052.jpg?fit=clip)

There was only one problem with this process: **it didn’t work.**

It’s not that it didn’t help: being more detailed in my handoffs made life a bit easier for our development team–at the very least, we now all agreed on the bare minimum that should be included with every new user flow.

However, it didn’t really _solve_ the problem: no matter how detailed my annotations or how long my Looms were, developers still had questions about edge cases I forgot to cover, new components that needed to be implemented, and interactions between different user flows that I couldn’t possibly have foreseen.

Furthermore, after seeing the implemented designs, product managers often provided feedback that required design changes, forcing designers and developers to redo their work. With such a detailed handoff process, this required a lot of time and slowed down delivery.

I knew we needed to try something else, so I went back to the drawing board.

## The Only Path To Order Is Chaos

After deep thought, I realized I was trying to solve the wrong problem: my theory was that designers could single-handedly collect stakeholder requirements, work on them for a week or two, and turn them into pixel-perfect mockups that contained all the information developers needed for implementation. Developers would then use that information to implement a user flow that matched the mockup pixel by pixel.

That sounds very nice in theory, but it’s virtually impossible: product managers, designers, and developers approach projects from different angles and bring different perspectives. **These three stakeholders need to collaborate constantly and provide continuous feedback on each other’s work**–only then will the final product really satisfy their needs, not to mention the needs of the brand’s customers.

With this new collaborative spirit in mind, I worked with our product and development team to completely rearchitect how we delivered new features to our customers. Rather than aiming for the perfect handoff from stakeholders to designers and from designers to developers, we started investing much more heavily in open and constant communication:

* **We established a series of recurring calls** where every member of the team would present what we were working on, no matter whether it was a product requirements document, an initial mockup for a new feature, or a code-complete user flow.
* **We encouraged everyone to offer feedback** at any point in the process and worked hard to foster a sense of psychological safety on the team, so that no one would feel like their work was “under attack.”
* **We asked team members to coach each other** on their respective areas of expertise. Designers showed developers the basics of working with Figma, while developers taught designers about their implementation process.

![](https://cdn.sanity.io/images/kqgmf0g2/production/f69a781f488e3cadaa00f1737c1e7c8143eb6898-1600x1052.jpg?fit=clip)

We kept a light process in place to create consistency in how we worked together, but also empowered everyone on the team to contribute cross-functionally. This led to several situations in which a developer provided insightful feedback on how to handle an edge case, a product leader realized that a flow didn’t feel as smooth in the real world as it did in the mockups, or a designer spotted a visual bug while testing a developer’s work.

Most importantly, **it created a sensitivity and deep appreciation for the work done by our fellow team members**, making us better at our respective jobs: designers understood the importance of component-based design, developers became more mindful of visual discrepancies, and product leaders understood that design and implementation are never going to match perfectly.

The new process didn’t fix all our problems, but it did give us the tools we needed to address them together! **Internally, we called this approach Open Design.**


## Adopting Open Design for Your Brand

As I mentioned in the introduction, it’s not uncommon for an e-commerce brand to be stuck in a sense of constant chaos and urgency or to feel constrained by an overly structured handoff process.

The root cause of the problem often lies in the fact that brand founders are very visual people, and most of their design experience lies in branding, packaging, and product design. As a result, they approach design very rigidly and try to make everything perfect before it’s handed off to their development team for implementation. This approach then cascades to the rest of the team as the company grows.

Unfortunately, the same can be said for agencies: many e-commerce agencies are design-driven and treat development as an afterthought. This leads to a lot of friction in their internal workflows or how they collaborate with their clients or other agencies.

As much as we would like to give you detailed, step-by-step instructions for how you can break out of this jail and implement an open design process for your brand, there’s only one thing you need: **people who are willing and able to set their egos aside and work together.**

As a first step, we always recommend creating stable, recurring ceremonies for cross-functional team members to talk to each other and exchange feedback. We found that **once you establish that baseline for collaboration, people will re-orient themselves around the new way of doing things, and everything else will magically fall into place.**

But if you need any help adjusting your process or are looking for an agency that lives and breathes Open Design, [feel free to reach out](https://nebulab.com/contact-us)–we’d love to help!

Boost Your eCommerce Team’s Productivity with Open Design

**3D illustrations are a trend of web design in 2021:** reality and virtual reality are getting closer and closer. The combination of 3D shapes and effects in the 2D space is a great example of this trend in action. This is the right time to start learning something new, then!

At Nebulab, every employee has a bunch of hours to spend on personal projects, trying new tools, or studying to improve their skills and professionalism, so I decided to spend some hours of my [Investment Time](https://playbook.nebulab.com/personal-growth/investment-time/) developing a new skill that is useful for creating trendy illustrations and animations. I want to share my design process and what I’ve learned along the way.

## Spline 3D, nice to meet you!

I’ve always been fascinated by 3D design. Several years ago I tried Blender but I found it very complicated: the environment was very far from the applications that designers like me use, and since it wasn’t a must-to-have skill at that time, I gave up very soon.

This time I approached again to the three-dimensional design by using a brand new tool that makes 3D easier for a not-3D designer like me. This tool is [Spline](https://spline.design/): its interface is very similar to the majority of other design apps like **Figma**, for example. On the left side, there’s the layers panel while the tools used more frequently are on the top of the window. On the right side, you can find all the other options like Global Settings, Shape options, Camera Settings, etc.

## Initial phase: copy, try, repeat

When I start to develop a new skill, my approach is: learning the foundation, seeing how others do it, and playing with features and effects. Mostly, **having fun.**

Since Spline 3D was launched quite recently, you won’t find tons of tutorials on YouTube but there is a useful [documentation](https://docs.spline.design/) that gives you an overview of what (and how) you can do with Spline. Moreover, there’s a library where you can find illustrations and animations for playing with all the features.

![iPhone 12 3D mock-up, by Spline 3D](https://cdn.sanity.io/images/kqgmf0g2/production/025512f4b8e8134e5685c24024004f3f5c314035-1680x1027.jpg?fit=clip)
*This is the original mock-up of the Spline library.*

![iPhone 12 3D mock-up, customized with the Nebulab website and brand color](https://cdn.sanity.io/images/kqgmf0g2/production/35badac7709f3f9ec8613d94bbd9e1a112b21fcf-1680x1027.jpg?fit=clip)
*This is the customized version I did, starting with the mock-up above.*


### Camera operations

One of the first things I’ve learned is how to change views by using camera controls.

* **[Option / Alt] + drag** to rotate the screen (camera).

* **Press [Space] + drag** to move the camera around the canvas.

These controls allow you to simulate different views of your canvas and let you understand how three-dimensionality works.

### Materials

In Spline, there’re **7 types of Material** thus the Lighting layer: initially, I was wondering about having more options for creating awesome 3D color effects, but then I sooner understood that mixing just two or three material layers thus the Lighting one, lets you create a lot of combinations and you can easily find yourself spending two hours or more on it because you can’t decide which one you like most! That’s why I think is better to complete the illustration as the first thing, adding some animations eventually, and then focus on the colors and lights. The simplest three-dimensional effect is given by the **Lighting** layer (try to fill your object with a color and move the Lighting layer above).

![Spline 3D, lighting material](https://cdn.sanity.io/images/kqgmf0g2/production/26e42163d282f174007aa0b35014236c9a350ca1-1680x896.jpg?fit=clip)

Adding a gradient by the **Gradient** layer seems a bit flat to me; a more precise method for adding gradient (or depth) to your objects is the **Depth** layer.

![Spline 3D, gradient vs depth material](https://cdn.sanity.io/images/kqgmf0g2/production/4f53e9f9ce19327d998a4750da1fd08003197cd6-1680x997.jpg?fit=clip)
*Gradient material vs Depth.*

## Playing with Material for creating something cool

Another design trend in 2021 is **holographic and reflective elements.** You can create these two effects using the **Texture** material: import your holographic background (stock images or created using Photoshop), and edit the texture properties until the result satisfies you.

[![alt](https://cdn.loom.com/sessions/thumbnails/b987486fc5ec4739982150c9e97e13d8-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/b987486fc5ec4739982150c9e97e13d8-00001.mp4)

*An example of how to use the Texture tool for creating the holographic effect.*

Use **Fresnel** for creating a reflective effect like this ring I did:

[![alt](https://cdn.loom.com/sessions/thumbnails/360368ebe5fd40e8b46bab7bc5a2f322-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/360368ebe5fd40e8b46bab7bc5a2f322-00001.mp4)

For each Material layer, you can set the mode property and the layer opacity as you’d in Photoshop (normal, multiply, screen, overlay).

### Tricks that can save your time

* You can **copy/paste material** from an object to another. **(▲)**

* With the **Cloner** tool, it’s possible to clone an object and you can set the number of clones you want, the *Type* (how the clones are placed on the canvas - radial, linear, grid), and you can adjust the position, rotation, and scale them.

* With the **Visibility** mode, you can display the wireframe of a 3D object (and that might be a cool effect for your artwork!).

**(▲)** While I was writing this article, Spline has released the Alpha II version that introduces the web app and the **Material Assets** feature: now is possible to save Materials as assets on your project!

[![alt](https://cdn.loom.com/sessions/thumbnails/f99dd970a5574e93a80cb4cfa5362576-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/f99dd970a5574e93a80cb4cfa5362576-00001.mp4)
*The new feature, Material Assets, works like Figma.*

## Starting from a blank canvas

After the discovery phase, I felt ready to start with something simple like an infinite rotation of the Nebulab logo as if it was an app icon. Spline 3D lets you **import SVG** files and after the Alpha II version was released, you can use the **Extrusion** tool to transform flat shapes into 3D objects.

![Spline 3D, extrusion](https://cdn.sanity.io/images/kqgmf0g2/production/d36903c4141a571eaaefb59987465a70673f8418-1680x1291.png?fit=clip)

![Nebulab 3D logo](https://cdn.sanity.io/images/kqgmf0g2/production/f23079e867385dba280f291061465ae64d65e9d1-3584x2240.jpg?fit=clip)

## Let’s move it!

Now that I have the Nebulab logo as a shiny bold blue cookie, I want to add a simple animation. I browsed on Dribbble looking for some inspiration and then I opted for a rotating animation with a final ease-out motion.

### Understanding States and Events

At the top of the right menu, you can find States and Events. Playing with animations with Spline is pretty simple (like everything else 😃) also because you can see the preview whenever you want, by clicking the Play button on the topbar tools.

![Spline 3D, the animation preview is always available](https://cdn.sanity.io/images/kqgmf0g2/production/330dcd7d5bf7cd1ff5585d336e2be6a5d1e32fb0-906x198.png?fit=clip)

To make my first animation, I need two states:

* *Base State*, is the initial position or style of an object.

* *State 1*, which changes the previous state values.

You can change the position and/or the aspect of your object. In this example, I rotated the entire logo on its axis.

[![alt](https://cdn.loom.com/sessions/thumbnails/ed27166d1b6d43ba8a1b1f7fc589c3f6-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/ed27166d1b6d43ba8a1b1f7fc589c3f6-00001.mp4)

Now, these two states need a trigger that you can add by the **Event** panel. (**Be sure to have selected Base State** and then add a new event). **Select the type of trigger for the event**:

* *Mouse up, down, hover*, that you can use to create a button and you can even link to an external URL.

* *Key up, down*, that is the same as the mouse types but it requires adding the key you want that triggers.

* *Start*, the animation will start by itself.

* *Look at*, this reply the cool effect of moving objects when the user pointer passes over the active area.

* *Follow*, the object is linked to your user pointer as a magnet.

I wanted my animation fired automatically, so I selected the *Start type*. I’ve previously grouped all the shapes that compose the logo, so I had one object to select for the event that I was creating. While the state to select, is *State 1*.

![Spline 3D, states and events](https://cdn.sanity.io/images/kqgmf0g2/production/f094307692892d64a34817160faa61abc5ba65ae-1680x1050.png?fit=clip)

You can decide to repeat the animation infinitely, or just once. Then you can select the **Transition** type; if you know a bit of CSS these names should sound familiar to you: linear, ease-in, ease-out, ease-in-out, cubic (which is like the CSS *cubic-bezier*). I’ve played with these all but in the end, I opted for the Spring transition because I like damping effect on this kind of animation. About the Spring transition, you can play with its values since you won’t find the combination that satisfies you.

[![A video showing 3D animation configuration](https://cdn.loom.com/sessions/thumbnails/4adb76bc402d4b558d099dae004a6a2f-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/4adb76bc402d4b558d099dae004a6a2f-00001.mp4)

And that’s it! You can apply different effects to every single object by adding *State 1* on it and then add the object to the main event by the ***“Add a new object to event”* button.**

[![A short video of the Nebulab logo 3D-animated](https://cdn.loom.com/sessions/thumbnails/ba16d29395e2458aa393761f06939fef-with-play.gif")](https://cdn.loom.com/sessions/thumbnails/ba16d29395e2458aa393761f06939fef-00001.mp4)
*This is the final animation*

## Don’t limit yourself

As I said before, what matters is having fun! Having the freedom to create whatever you like lets you experiment with a greater variety of features, and makes you more confident with the tool.

![3D artwork done with Spline 3D](https://cdn.sanity.io/images/kqgmf0g2/production/eefd0a35280995051e73c67e691e681383f8a038-1680x1260.jpg?fit=clip)
*This is my first 3D artwork in which I played with materials, colors, and shapes.*

Even if it seemed simple (not a “WOW” illustration), I didn’t want to limit my experiments to what is trendy at the moment. I just wanted to create something for myself, as an artist draws to express their feelings. Ok, well, maybe I’m exaggerating, but what drove me when I designed that artwork was just creativity, nothing more. I’m pretty sure that looking at it in a month, I’ll say to myself something like *“How could I be so proud of that illustrationMouse up, down, hover,”* and then I’ll be back to revisit it, trying to push my boundaries a bit more.

![The Nebulab Solar System in a 3D version](https://cdn.sanity.io/images/kqgmf0g2/production/6d1e6fabee08ed85aaa418b928d34822fae9785a-1680x1260.jpg?fit=clip)
*I’ve redesigned all the planets of the Nebulab website with Spline. In this illustration, I included them in the Solar System.*

![3D character done with Spline 3D](https://cdn.sanity.io/images/kqgmf0g2/production/7519216a0df3a358ebba7d983ede50e569d51b7b-1680x1150.jpg?fit=clip)
*My first 3D character, a tribute for the running Olympic games.*

## How 3D design supports your workflow

Even if you’re not a 3D artist (and if you’re reading this article I suppose you aren’t) knowing how to create 3D objects or scenes can be very useful. You can create tailored mock-ups for a mobile app, for example, or adding some catchy objects that interact with the user pointer on your website.

![The Blog page hero with some 3D objects](https://cdn.sanity.io/images/kqgmf0g2/production/abc58349dae18f451b8da3506d386b92cd952481-1680x1260.jpg?fit=clip)
*I’ve tried a white version of the Blog hero with some 3D objects that interact with the pointer.*
[See the sample in action.](https://www.loom.com/share/0192deb8d73b41fdb55ed361f0b1c3a8)

[![Final animation videoclip](https://cdn.loom.com/sessions/thumbnails/0384abffdff0454c9b94eda02ccc272e-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/0384abffdff0454c9b94eda02ccc272e-00001.mp4)
*You can even use this to show off a new website or mobile app, with a trendy minimalistic animation like this one.*

Surely, there’re tons of mock-ups you can download and use but having the flexibility to create your own is extremely better, even in terms of marketing.

I’m happy to have spent some hours of my *Investment Time* learning Spline 3D! Truthfully, I’m still experimenting with it, but what I have done so far has given me an incentive to continue learning this modern, trendy tool and to go deeper into the 3D world.

Experimenting with Spline for 3D Design

In this article, we are going to show how you can create a [NextJs](https://nextjs.org/) project with [Storybook](https://storybook.js.org/) and [TailwindCSS](https://tailwindcss.com/).

Before starting, I want to explain who are the actors and why it should be better adding them to our frontend application.

### NextJS

[NextJS](https://nextjs.org/) doesn’t need a lot of presentation. If you are here, you probably already know what NextJs is and why we should use it to build robust applications.

NextJs is a great [React](https://it.reactjs.org/) frontend framework, and it’s mainly used to build SEO-friendly applications since you can use three different types of rendering/pre-rendering methods:

* SSG (Static-site generation) the HTML is generated at build time and will be reused on each request,

* SSR (Server-side rendering) the HTML is generated on each request using a node server, so the response is SEO-friendly.

* CSR (Client-side rendering) the normale React behavior, the response is simply Javascript run by the client.

### TailwindCSS

Tailwind is one of the most powerful libraries to build your application style using HTML classes. [TailwindCSS](https://tailwindcss.com/) implements a ton of dynamic classes which apply different style rules to your application, and it is fully customizable using the configuration file!

Initially it will take time to understand which are the correct classes you need to use to build your interface, but one of the coolest thing in Tailwind is its super documentation.

By the way, the 2.0 version has recently been released with a lot of new features.

### Storybook

[Storybook](https://storybook.js.org/) is a great library that is mainly used to render our application components outside the NextJs environment. This means that you can check your components UI without making real queries or fetching data. You can also figure out how the application components change based on the passed props.

Storybook is more powerful when used with well-organized components, for example, using [Atomic Design(https://bradfrost.com/blog/post/atomic-web-design/).

**Example**

You will probably create your custom `Button` component in your project that will be rendered differently based on the passed props or the fetched data. With Storybook, you can check all the UI changes applying custom props from the Storybook panel or stubbing all your requests.

### TL;DR

Here you can find the fully configurated [project](https://github.com/nebulab/nextjs-storybook-tailwindcss)

## Let’s start!

For this article, I won’t split the application into components to be more direct. It would be best to do it in a real application to avoid using the `index.js` page directly.

The best practice is writing components splitting them by context using a great file structure:

* React documentation about components: [link](https://it.reactjs.org/docs/components-and-props.html#extracting-components)
* Atomic Design pattern about components structure: [link](https://bradfrost.com/blog/post/atomic-web-design/)

### Create the NextJS app

First of all, run this command to create your NextJs project:

```
npx create-next-app --use-npm nextjs-storybook-tailwindcss
```

and navigate inside the project directory with `cd nextjs-storybook-tailwindcss`.

### Run your application

```
npm run dev
```

### Refactor the default code

The `create-next-app` command creates the project with some unnecessary configuration since we’ll use **TailwindCSS** to build our style.

Replace the content in `pages/index.js` with:

```
const Home = ({ article, showImage }) => {
  if (!article) return "The article wasn't found!"

  const {author, company, image_url, content} = article

  const Image = showImage ? (<img className="w-24 h-24 rounded-full mx-auto md:flex md:self-center"
    src={image_url} alt="A beautiful cat" width="200" height="200" />) : ''

  return (
    <div className="w-96 mx-auto">
      <div className="h-screen flex items-center">
        <figure className="lg:flex bg-gray-200 rounded-xl p-8 lg:p-4">
          {Image}
          <div className="pt-6 lg:p-4 text-center lg:text-left space-y-4">
            <p className="text-lg font-semibold">{content}</p>
            <figcaption className="font-medium">
              <div className="text-blue-600">{author}</div>
              <div className="text-gray-500">{company}</div>
            </figcaption>
          </div>
        </figure>
      </div>
    </div>
  )
}

Home.defaultProps = {
  showImage: true
}

export const getServerSideProps = async () => {
  const response = await fetch('http://localhost:3000/api/article')
  const data = await response.json()

  if (!data) return { props: {}}

  return {
    props: {
      article: data
    }
  }
}

export default Home
```

Add your first API:

```
touch pages/api/article.js
```
```
const Article = (_, res) => {
  res.statusCode = 200
  res.json({
    id: 1,
    author: 'Andrea Vassallo',
    company: 'Nebulab',
    image_url: 'http://placekitten.com/200/200',
    content: 'The cat is a domestic species of small carnivorous mammal.'
  })
}

export default Article
```

Remove the CSS file: `styles/Home.module.css`:

```
rm styles/Home.module.css
```

![Nextjs without style result](https://cdn.sanity.io/images/kqgmf0g2/production/cf125dfe5106852987ebfd778e133fe4566ef324-537x357.png?fit=clip)

![Man pointing thumb down](https://cdn.sanity.io/images/kqgmf0g2/production/f804d6533a925773c96bc9055cd7aae96d76c578-640x480.gif?fit=clip)

The result is an ugly and boring HTML page.

**Let’s go applying our awesome style.**

### Install TailwindCSS

*Why the documentation isn’t enough in this case?*

Because NextJS came up with a bunch of pre-configured services like Babel and [PostCSS](https://postcss.org/) and we have to TailwindCSS with them.*

Reading the [TailwindCSS documentation](https://tailwindcss.com/docs/installation), you’ll see that we need three different libraries to complete the installation:

* tailwindcss

* postcss

* autoprefixer

We don’t need to install postcss and the autoprefixer libraries since they are already installed in NextJs.

Run these commands to install TailwindCSS:

```
npm install --save-dev tailwindcss
```

Unfortunately, we can’t use `npx tailwind init` to create the configuration file since it’ll check if you have installed the `autoprefixer` library.

Let’s create the configuration file adding the `tailwind.config.js` file:

```
touch tailwind.config.js
```

with the default configuration:

```
module.exports = {
  purge: [
    // This is not present inside the default configuration
    // but it's good to build your production application
    // Read more about this here: https://tailwindcss.com/docs/installation#building-your-css
    './pages/**/*.js',
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

### Configure PostCSS

To configure PostCSS we have to override the [NextJs default one](https://nextjs.org/docs/advanced-features/customizing-postcss-config):

Install the dependencies:

```
npm install --save-dev postcss-flexbugs-fixes postcss-preset-env
```

Create the `postcss.config.js` file:

```
touch postcss.config.js
```

and fill it with the default configuration as well:

```
module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}
```

Add the `tailwindcss` plugin to the top of the plugin list:

```
module.exports = {
  plugins: {
    tailwindcss: {},
    ...
  },
}
```

### Include Tailwind in your CSS

Add these three lines of code to the top of this file: `styles/globals.css`:

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### We made it

Check your application homepage; the result should be similar to this one:

![Tailwind result](https://cdn.sanity.io/images/kqgmf0g2/production/8610b447fdcea90e798a8e33440326e498f8cbba-485x292.png?fit=clip)

![](https://cdn.sanity.io/images/kqgmf0g2/production/ef653b4c8ced24daaf9d3b865d207d11b7b905bb-700x394.gif?fit=clip)

## State of mind

From here on, it’ll be a breeze building beautiful component with Tailwind, but we need to answer a couple of questions about testing:

1. How is this component rendered when the article data isn’t found?

2. How can we check all the component variants at any moment without changing the code?

[Storybook](https://storybook.js.org/) will help us to accomplish both.

### Install Storybook

The default `npx sb init` command that is used inside the official documentation installs libraries that we don’t need and adds a bunch of files that we don’t use.

For that reason, I usually prefer to use the `from scratch` configuration.

```
npm install --save-dev @storybook/addon-actions @storybook/addon-essentials @storybook/addon-links @storybook/react
```

Add the Storybook commands inside the `package.json` scripts:


```
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "storybook": "start-storybook -p 6006",
  "storybook:build": "build-storybook"
}
```

Copy this piece of code inside the `.storybook/main.js` file

```
module.exports = {
  "stories": [
    // Paths to the story files
    "../pages/*.stories.mdx",
    "../pages/*.stories.js",
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}
```

Copy this piece of code inside the `.storybook/preview.js` file

```
// Import the global style enabling tailwind classes
import '../styles/globals.css'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}
```

### Add a story

For each page or component that we want to tell using a `story`, we need to create a file called `component-name.stories.js`.

In this case, we want to create the `index.stories.js` inside the `pages` dir:

```
import Article from './index';

const articleMock = {
  id: 3,
  author: 'Dave Canterbury',
  company: 'Bushcraft 101',
  image_url: 'https://via.placeholder.com/200/200',
  content: 'David Michael Canterbury born September 19, 1963 is a survival expert'
}

const Story = (props) => <Article {...props} />

// Here we export a variant of the default template passing props
export const ArticleStory = Story.bind({})
ArticleStory.args = {
  article: articleMock,
};

// Here we export a variant of the default template passing props
export const EmptyArticleStory = Story.bind({})
EmptyArticleStory.args = {
  article: null,
};

// Here we export the default component that
// will be used by Storybook to show it inside the sidebar
export default {
  title: 'Article',
  component: Article,
  argTypes: {
    showImage: { control: 'boolean' },
  },
};
```

### Run the Storybook server

```
npm run storybook
```

![Storybook result with style](https://cdn.sanity.io/images/kqgmf0g2/production/6b98a19deccff277aaa00d736aff13aa969a23ac-846x906.png?fit=clip)

At the time of writing there is a chance you might run into this [bug](https://github.com/storybookjs/storybook/issues/12668). You can fix it with this [solution](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build).

## That's all

Your project is ready to be built using a robust framework and beautiful style with an easy way to check component behavior in isolation!

I hope that you found this article helpful and easy to read.

Do you need the [Typescript](https://www.typescriptlang.org/) version? Let us know with a comment.

### Follow up story - use TailwindCSS and Storybook with SCSS

NextJS side this isn’t a problem, you need just to install the `scss` library using `npm`.

```
npm install sass
```

Rename the `styles/globals.css` to `styles/globals.scss` and fix the `_app.js` and `.storybook/preview.js` style imports.

and replace the TailwindCSS style import from this:

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

to this:

```
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

**And Storybook?**

![Storybook SCSS error](https://cdn.sanity.io/images/kqgmf0g2/production/59838f648762570d289c5201a0bf7848015ae22e-1042x410.png?fit=clip)

It seems that Storybook doesn’t recognize the SCSS syntax, and for this reason we need to extend the library [Webpack](https://webpack.js.org/) configuration adding the `sass loader`.

The Webpack loader is used starting from the end, and this means that the `sass-loader` should be added at the end of the loader list.

Here you can find the `.storybook/main.js` file with the correct configuration:

```
module.exports = {
  stories: [
    // Paths to the story files
    "../pages/*.stories.mdx",
    "../pages/*.stories.js",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        "style-loader",
        "css-loader",
        "postcss-loader",
        // Add the sass loader to process scss files
        "sass-loader",
      ],
    })

    return config
  },
};
```

The Nebulab