case study

Bombol

UX Design with Bombol: Optimizing Shopify Storefronts to Sell Globally

A detailed case study of technical and UX design solutions for a global brand with multiple Shopify stores.

March 3, 2020
Childcare
Global

PLatform

Shopify

services provided

Shopify theme customization, site UIUX enhancements and custom features, Applications and extensions, Localization, Multiple global stores and international rollouts
Based in Hong Kong, Bombol is the maker of award-winning booster chairs for toddlers and young children. Their products have won numerous design awards internationally, and are also used in leading hotels and restaurants worldwide. Parents across the globe are amazed by Bombol's design aesthetics, innovation, and quality. ‍

In 2019, Wave Commerce helped Bombol build their Shopify online store. With an award winning product and proven demand worldwide, Bombol wanted to create a set of international stores to deliver better localized storefront experiences for customers around the world. To do this, Bombol wanted to create a separate Shopify store for the US and Canada market in addition to their international Shopify store. Designing a smooth user experience was key to ensuring that each of the Shopify sites met sales conversion targets for Bombol and this case study will outline the coordinated components that helped create a seamless online customer experience.

A Vision for Going Global

Based in Hong Kong, Bombol is the maker of award-winning booster chairs for toddlers and young children. Leveraging Shopify’s global platform, Bombol was able to serve consumers worldwide from day one. Once demand hit a tipping point in markets such as the US, Bombol wanted to invest on the Shopify platform to deliver online shopping experience tailored for a global audience.

Bombol’s Key Requirements for a Global Shopify Experience:

  1. Create multiple market specific Shopify stores unified under 1 umbrella brand
  2. Start by delivering localized storefronts for the North American market (US & Canada) and the rest of the world (international store)

Why Create Market Specific Shopify Storefronts

As an award winning product company, Bombol’s booster chairs were recognized globally with visitor traffic from diverse regions. Once there was enough demand in particular markets, Bombol felt it was important to invest in delivering localized shopping experiences for these particular markets in order to better serve customers and drive sales conversions.

For example, starting with the launch of a second Shopify store to support the North American market, Bombol wanted to ensure that they could deliver a unified store experience for North American and other international customers that supports multiple use cases.

Use Case 1: Visitors in North America Shopping on the US & Canada Store

To serve the US and Canadian markets, Bombol decided it was important to ship to and display local currencies such as USD and CAD for the North American market with a dedicated store. At the same time, Bombol wanted to ensure that international (non-North American visitors) would also land on a unified Bombol online storefront. In this case, a clearly designed UX flow is essential to customers completing orders. For instance, if an American shopper was on the international Bombol store, there would be no option to ship to the US because the US store is a separate store. A global store experience would need to ensure that a unified online brand identity, while letting shoppers know they were in the right region level store.

Use Case 2: North American Visitors Shopping for a Gift to Ship to Hong Kong

In another case, what if someone in the US was making a gift purchase to be mailed to someone in Hong Kong? In this case, the shoppers would need to check out on the Hong Kong store, even if they were browsing in the US one, so that they can ship the gift to Hong Kong.

Use Case 3: Shoppers From Around the World (Outside North America)

While Bombol wanted to create localized Shopify stores to meet the needs of shoppers in US and Canada, it was important that each localized Shopify store adhered to a unified online brand, which meant that store shoppers would need to understand which store they were browsing and whether it could ship to their desired market. Designing a smooth user experience from browsing through to checkout required careful planning and consideration from a technical and design perspective.

Approaches: Designing for a Global Storefront

The solution that Wave Commerce designed with Bombol would require a combination of technical background features as well as clear messaging to shoppers throughout the store that was still aesthetically pleasing and on-brand.

Wave Commerce worked with the Bombol team to consider a two-pronged approach:

  1. Visual displays: allowing the customer to select their region right away
  2. Technical: Reroute based on IP address

Both these approaches had their benefits and drawbacks. Some of these we verified through user research and behavior data. Below, we will outline what approaches we took and the findings of each approach.

Visual: Allowing a Customer to Select Their Region Right Away

The first option requires less work and also takes less information from a customer. This aligns with the principle of data minimization.

However, as we studied the visual selector approach, it became increasingly clear to us that an approach that fully requires the shopper to make the choice to select their preferred store would not fully suffice. This is due largely to the possibility of cart abandonments caused by users who were not in the correct store shipping to their desired destination. This leads us to the conclusion that many users may simply overlook visual selectors such as a country selector pop-up banner, and in doing so, will also have forgotten the regional options by the time they are checking out. As such, this may lead to a purchase abandonment.

Technical: Reroute Based on IP Address Behind the Scenes

The second option of rerouting based on a user’s IP address is more convenient for the user, following the principle of seamless experiences.

While the IP address rerouting seemed like a good solution upfront, one clear obvious drawback what that a user’s IP location did not necessarily represent where they wanted to have the item shipped (especially in cases where the visitor may be traveling or using VPNs).

Nonetheless, we explored this avenue and how an IP address rerouting would work with Shopify, which allows for extensive code-level customizations. We considered each of the potential benefits and draw-backs of various solutions. In the end, we decided that an IP rerouting solution alone would not suffice and that a hybrid solution was needed.

Solution: Robust Technical Solutions Embedded in UX Design

To meet Bombol’s clear checkout needs and high design standards, Wave Commerce mapped out possible user flows and created solutions to address each of them. This extends beyond following industry best practices to create a tailored set of solutions that can create consistent browsing experiences. The final solution that we arrived at included a mix of the following:

  • IP rerouting for users to cover majority of cases
  • Designing reminders throughout customer touch points
  • A timed cookie to create a seamless shopping experience

IP Rerouting for Users to Cover Majority of Cases

A common solution that sends shoppers to the correct store is rerouting a user based on their IP address. This solution would cover the majority of online shopping cases originating from the US, where American shoppers would be browsing the online store that will deliver to their domestic addresses.

Wave Commerce helped Bombol on implementing a geo IP solution. Given that Bombol was using Shopify’s cloud infrastructure, it was important to find a solution that was easily compatible with the Shopify platform. In the event that users were inside or outside the US and wanted to shop in another region, the solution needed to allow for code changes that could accept a user's manual regional selection.

Designing Reminders Throughout Customer Touch Points

In addition to the background operations that sent shoppers to the right store, designing communication throughout the store that would allow shoppers to make the right decisions was essential.

For example, if a shopper in the US was to purchase a gift for someone in France, they would need to be prompted to go to Bombol’s international store. To communicate this, Wave Commerce created messages to remind users that they may need to change stores depending on the shipping destination of the product. The messaging was included in the following ways to be non-invasive to the store browsing experience, while also informative in the correct context:

  • A sticky banner during store browsing
  • Reminder text under the order in the Cart page
  • Reminder text to switch stores if shipping to the US in the Checkout page

These displays would alert a user to make necessary changes to ensure a successful purchase.

A Timed Cookie to Create a Seamless Shopping Experience

To make sure that shoppers do not check out at the wrong store, Wave Commerce also implemented a timed cookie to warn shoppers that they may be in the wrong store before proceeding to checkout based on their previous country’s selection, or the lack of a country selection before the checkout.

---

By creating a brand site experience that is designed to accommodate multiple Shopify stores for different markets, Bombol is now able to more quickly scale and expand their international sales, marketing and customer experience efforts to better localize and support the needs of respective international markets.

Need Help with Shopify?


As a leading Shopify partner in Hong Kong, Wave Commerce can help take your ecommerce vision to life. If you are looking for help with Shopify development, ecommerce functional and UX design, building custom integrations or Shopify apps, please get in touch!

To better serve our customers, we wanted to franchise out regional Bombol E-stores operated by our local partners with their own bank accounts, yet deliver a seamless cross-store brand experience. Wave Commerce started by mapping out all the available solutions. To our surprise, there was no off-the-shelf solution in the Shopify eco-system. In close collaboration, we mapped out the different scenarios, mixed and matched the best the different solutions had to offer to create an overall setup that delivers a cost-effective solution that is not limited to switching between 2 stores, but that is scalable for our future growth as we’ll add more stores. What I love about Wave Commerce is that they listen very carefully to get a full understanding of our goals before formulating answers that fit our means at this stage of the company growth and they won’t give up until everything works perfectly. "

Frédéric Gooris
Creative Director