Mountex launches its e-commerce website in Hungary, Slovakia and Romania

Mountex's new Hungarian-language online store went live in the first quarter of 2022, followed shortly afterwards by the Romanian and Slovakian e-commerce platform. Using our Logishop webshop solution, Mountex web store was equipped with a number of features fulfilling its unique needs and international expansion. These include, among others, customised variant management, category navigation in the product filter, a wiki module, detailed stock information and customised services display for each store. The integration of the newly introduced blog content and the "Tour Tips" app ensures that Mountex offers a full experience for customers and visitors. A unique feature of the project is that the e-commerce platform has obtained a PCI DSS audit certification for the secure handling of credit card data

History

The leisure and outdoor sports retail chain Mountex has entered the online sales market with a custom-developed webshop, followed by regional expansion in Slovakia and Romania. However, its existing platform did not keep pace with the company's development and the company decided to replace the existing webshop.

The retailer was not only aiming to replace its webshop, but was also thinking about building an ecosystem, i.e. integrated commerce system, including a mobile app and in-store checkout system. 

Objectives

Mountex chose the Logishop webshop engine for its new webshop, which offered features that corresponded their plans while allowing for custom development and providing a solid basis for international expansion.

The company wanted to create a more user-friendly interface, facilitate the online shopping process, introduce multiple checkout options and a credit card payment and POS system in their new webshop.

Their plans included the integration of the existing "Tour Tips" system, the launch of content production, the renewal of the loyalty scheme and for the platform to handle multi-regional operations.

Challenges

The complexity of the new webshop development required compromises to ensure smooth implementation, like reducing the volume of the first round of development. This reflects the MVP (Minimum Viable Product) approach, i.e. to start with what is absolutely necessary for the business to operate, and to develop dynamically in the future in order to create value.

The complexity of the process is reflected by the fact that the specification for the narrowed scope was over 300 pages long.

Key challenges:

• A large number of products and product variants (more than 100,000) that had to be synchronised from an ERP system with limited modification, while also keeping the user experience (performance) in mind
• Mountex required an extra flexible product and brand presentation, which required to display dynamic product lists. Consequently, the functionality related to Logishop's product entity was extended, and a dynamic list of products and a product card with products, individually developed for Mountex, was created.
• A specific and detailed filtering interface had to be created.
• Integration with an external security solution (Keycloak-based identification system) was required.
• The project had to be implemented on a custom-built cloud infrastructure, which was challenging for both parties, but necessary for security reasons.
• The purchasing process had to be reinvented.

Solution

The development of the new Hungarian online store went live in the first quarter of 2022. The webshop was given a mobile-friendly, responsive look and feel, a user-friendly interface, and a number of new, useful features and custom developments were also added to the platform.

Flexible page structure - "LEGO element" development

Mountex needed to be able to create custom landing and content pages, which would be used for editing the main site and blog articles and designing landing pages. The design team and Mountex finalised 27 content types that were mapped to "LEGO elements".

LEGO Elements allow Mountex to populate pre-created design elements with content, such as providing a unique title or uploading your own background image. Examples of such "LEGO elements" are the element of the banner bar, product carousel, countdown timer, various banners, video blocks, text blocks. These LEGO elements can be arranged in any order within each page by a simple drag-and-drop method. This development has also led to an extension of the CMS.

Tour tips integration

Mountex features a Hiking Tips system that serves the previously launched Hiking Tips app: it provides users with more than 150 hiking tips, and they can also choose to roam through the uploaded routes or customise their hike by type (one-way or circular), difficulty and length using the various settings.  The new webshop development was also intended to be used by Mountex to integrate the "Hiking Tips" system. As part of a unique integration, their Tour Tips system also serves the webshop: certain information in the articles (map, length of the tour, difficulty) is all coming from the central Tour Tips system.

Blog, insert content pages

One of the new elements in the webshop is the Blog, an excellent channel to communicate the Mountex philosophy. Nowadays, webshops are no longer just webshops, they want to deliver a full experience to customers and visitors. This is why it was important for the Mountex project to further develop the Blog, as they do not sell products only, but also share hiking tips, excursion experience reports, technical descriptions, tips and advice and news with visitors. For this reason, it was important to add the Blog feature to the current CMS: it has multiple topics, each blog article has an author and can be categorised by tags.

Display product variants

As the company mainly sells clothing products, it was important not to display the variants on a separate product card, as it would not have been convenient to display all colours and sizes separately. A plain product card was not suitable for this purpose, as it would not have allowed the display of the different colours of each variant. Therefore, we developed a custom product card for Mountex, combining the variants of each product according to a unique rule. The colour variant with the largest stock appears first on the product card, and the colour dots allow you to view the other colours. Variants are marked by colour only, the other variant properties are not visible on the product card. 

This was a completely unique development for Mountex. This functionality also induced the Collector Colours development, as it was not possible to put a number of colours in filters and on product cards, but some colours had to be placed under 'Collector Colours' (e.g. Mountex sailor blue or fjord blue belong under blue). 

By default, up to 7 colours appear on the card. In case if more than 7 colours of a product are available, only 6 colours will appear on the card (this is the number of colours that can be handled on a mobile phone, as revealed by usability tests on the prototype), and a '+' button will appear in place of the seventh colour. If a product is not available in a certain colour, the colour will not appear in the product selector.

Size chart and brand

A new feature has been added to the Logishop webshop to provide the customer with a size chart for a specific brand. This was necessary because sizes can vary from brand to brand, so it was not possible to create a single size chart.

Wiki module

The purpose of this function is to explain foreign words in the product description, in case you get stuck. The wikimodule is an information tooltip displayed on the end page of the product, which displays the technical terms that appear in the product features and product description, by hovering the mouse over foreign words. For example, if the customer does not know what Gore-tex is, then if they hover the mouse over this word, information about the word will appear in a frame.

Category navigation in the product filter

Product filters are displayed in a separate filter panel on the product listing page, where you can add product parameters. The filters can be displayed according to the parameter’s data type (checkbox, radio button, value selector).

Another unique feature is the display of the Category Tree above the product filters in the product listings, which allows the user to easily navigate between the webshop’s  product categories without leaving the product listing.

Detailed stock information

Stock information is displayed on the individual product end pages, where the customer can see which stores have the selected variant.

An exclamation mark is displayed next to the listed stores if only 1 of the variants is available in that store. If the variant is not available in the store, the store is crossed out. If more than 1 variant is available, the name of the store is displayed in the standard way and an information tooltip is displayed when clicked.

Shop services

The Shop service is a new development, which appears in the webshop interface and has a separate sub-page, where you can see which shops have services such as "Repair Corner" or "Boulder".

Creating a more modern design

LogiNet's team of UX experts, 22.design, created a modern-looking design for Mountex, which involved the following steps:

• Persona building.
• A field visit and user interview (the design team went to the Mountex store in Budaörs to interview the users and to experience the Mountex experience first hand).
• User journey: we outlined the webshop journey and examined what uniqueness can be observed.
• Competitor analysis, collection of best practices from abroad.
• UI design based on a style guide we updated. In addition to the conversion journey, it was important to convey a sense of life: not only webshop, but also tour tips, testimonials and expertise.
• At the end of the process, we conducted usability tests, based on which we iterated and refined.
• Since then, we have started UX tracking, i.e. introducing analytical tools to monitor the performance of the site.
• The website style has been defined by custom iconography. For example, a hiking bag acts as a basket icon, mushrooms are used instead of a "favourites" heart, and the menu is a sandwich with a signpost. The "price" of this solution was that names have to be used to clarify the functions, because beauty/functionality should not come at the expense of usability. This was specifically tested to see if it worked.

Introduction of credit card payments and PCI DSS audit

The prerequisite for providing a credit card payment facility was to ensure adequate security. The webshop system based on our Logishop solution obtained PCI DSS audit certification.

The PCI DSS standard is a data security standard created by the world's major bank card companies (VISA, MasterCard, AMEX, JCB, Discovery), which contains rules for the secure handling of bank card data. These very strict standards define exactly who can access card data and how.

The standard is designed to help online merchants and card issuers to combat credit card fraud (and its potential) as effectively as possible. PCI DSS recognition also guarantees the security of payments initiated online and the overall reliability of Mountex's merchant operations. The highest level of security is achieved through PCI DSS compliance, which, in light of the above, is of paramount importance for both the company and its customers.

The Mountex webshop is subject to an ASV scan every 3 months to verify that all aspects of the infrastructure meet the strict criteria. PCI DSS sets out dozens of security requirements, including network architecture and configuration, software development and vulnerability management.

Integrations

It was important to have a smooth integration with Mountex's existing SAP system, so that product variant, user and order data all flow through the same interface between SAP and the webshop.

However, not only Logishop was connected to SAP, but also the Keycloak application, which performs authentication when users log in. The registration of the users is done in Keycloak's system and, after successful registration, user data is transferred to the webshop interface via a defined connection between Keycloak and Logishop, creating a webshop profile for the user.

Besides SAP, several systems have been integrated.

Development methodology and technology

The project was basically implemented using a waterfall methodology. Prior to development, a substantial functional specification - about 300 pages of detail - was prepared, describing the scope of the project to be implemented in detail. Even so, a number of additional requirements came up along the way that were not anticipated at the start of the project, but these requirements were continually refined.

During development, communication between project members was managed in Atlassian's JIRA system. This is also where development tasks were formulated and where bugs that emerged during testing were recorded.

During development, all documentation and settings that were required during the PCI DSS Audit were completed.

The progress of the project was continuously monitored during the weekly project status meetings and in the context of the sharpening of the individual regional stores in separate sharpening meetings.

Technology stack

• Webshop service package: Logishop PRO
• Back-end technologies: PHP8.1, Symfony5 framework, Doctrine ORM, Twig templating; - MariaDB relational database; Redis cache, Elastic search engine, S3 based storage (MinIO)
• Frontend technologies: javascript, css, html5, ajax, promise.
• Public interface: Vue.js, Nuxt.js, ES6, Axios, Vuex; SCSS, Vue module CSS.
• Admin interface: jQuery, ES6, Twig; BEM, SCSS

Results and future plans

Mountex's new webshop has been enhanced with a number of features and custom developments that will help it grow its business. In addition to card payment, the delivery method for products purchased on the online platform has been expanded in response to changing user needs, with the option to pick up goods in vending machines in addition to in-store personal pick-up and home delivery.

In the future, the Hungarian, Slovakian and Romanian webshops will continue to be further developed to ensure an excellent online shopping experience.