Online store development: multilingual and mobile first

Customized online store in four languages

Tasks
A multilingual online store should attract international customers, shine on mobile devices and improve internal processes - including by connecting to the ERP system.

Result
The new online store makes it possible to maintain 13 countries, 4 languages and 2 different customer groups in one CMS. The picking process was optimized and in the first 12 months after the launch, mofakult gained 83% more new customers than in the previous year.

mofakult is a young Swiss company based in Frauenfeld and offers spare parts for rare mopeds from the 60s, 70s and 80s. As a USP, mofakult produces out-of-print parts true to the original as its own brand.

Our services

Attention of detail for the shopping experience

This shopping cart animation symbolizes the attention to detail that went into the development of the online store. Throughout the store, the focus is clearly on the shopping experience.

Cross-selling in the product overview

On the intermixed product pages »New« and »Promotion«, suitable cross-selling articles support the user's purchase decision and convey the right mood in product categories such as »Merch«.

Visuelle Produktkategorien

Specially created product category images guide users through the multi-level category levels in the navigation. They lead from the first overview to the final product.

Attention of detail for the shopping experience

This shopping cart animation symbolizes the attention to detail that went into the development of the online store. Throughout the store, the focus is clearly on the shopping experience.

Cross-selling in the product overview

On the intermixed product pages »New« and »Promotion«, suitable cross-selling articles support the user's purchase decision and convey the right mood in product categories such as »Merch«.

Visuelle Produktkategorien

Specially created product category images guide users through the multi-level category levels in the navigation. They lead from the first overview to the final product.

Outcomes

<100 ms

loading time; previously 3 seconds.

10%

more sales immediately after launch.

83% 

more new customers than in the previous year.

Up-to-date: mobile-optimized online shop

The data from the old Magento store showed a clear trend towards mobile purchases. During the design phase, it was therefore clear that our goal for the development of the new online store was »mobile first«.

In addition to the display and placement of functions, we also optimized the loading time. With a mix of an SSR version of all pages and caching, we were able to speed up loading times from 3 seconds (previous Magento store) to under 100 milliseconds.

Mobile screens — Optimized overview and detail pages for shopping on the smartphone.

Languages, domains, customer groups

The programming of the new online store was the starting signal for mofakult to conquer Europe. The store therefore runs EU-compliant on various country domains and displays the correct prices, price formats, currencies and tax rates.

We have adapted the CMS Sulu for mofakult so that all content for 13 different countries and four different languages can be maintained in a single interface.

In addition to the countries and languages, mofakult distinguishes between two customer groups. While private customers are greeted on the homepage with a daily deal and attractive highlights, business customers are shown the recommended retail prices of the products.

Map — From Switzerland to the whole of Europe

domain-selection — Jeder Content-Block kann im CMS pro Land ein- und ausgeblendet werden und erleichtert somit die Kuration des Inhalts erheblich.

country-blocks — This allows us to display different content despite the same language (in this case German).

Seamless ERP integration

Probably the biggest technical advantage of an individual online store is the seamless integration into the ERP system. For mofakult, this means efficiency. 12 orders are automatically printed on a picking list and forwarded to the warehouse or shipping department.

While the ERP takes over the PIM tasks and is therefore the data source for all product and category data, the store is the data source for all customer and order data.

picking-list — Mitarbeiterin sammelt Artikel für zwölf Bestellungen gleichzeitig

Detail pages are customized to products

The individual online store also shows its strengths on the product detail pages. There are three different versions:

Products without configuration options
Products with variants (size, color, etc.)
Combinations of several items in one

Depending on the product, optional additional items and graduated prices can also be displayed. This keeps the data on the product detail page as lean as possible and provides customers with a good overview.

Variant product — Product detail page of a variant product with configuration options

Set liste — List of the individual parts included in the set

mood — First test ride with the freshly overhauled moped

Angular SPA with SSR

The store offers an interactive SPA experience with SEO and fast loading times thanks to SSR. At the same time, content is seamlessly provided from a CMS.

Multiple distributed systems

The integration of three independent systems (CMS, store system and ERP) improves flexibility and reliability. In addition, processes can be mapped and adapted even better to requirements.

Providing content

An intelligent caching system enables the fast, reliable provision of content without having to rely solely on external hardware.

Centralized monitoring

All logs and metrics come together in one central location. Grafana thus offers insight into the entirety of the distributed systems and provides context for decisions.

Automated scaling

Kubernets help to cope with fluctuating user numbers. For optimum performance, the infrastructure adapts to the workload.

International markets

It is possible to adapt content blocks to different countries and languages. This is how mofakult meets the requirements of the respective markets.