noptech - "Yes, we can!"

Project overview

How did we build this project?

Mountain Air Verbier is a major provider of skiing and ski equipment in Verbier, Switzerland. They offer ski equipment and accessories for rent and sell them to end customers. The challenge in this project was to create a system that allows for renting ski and ski equipment, purchasing ski clothes and accessories on a single site, while also adding additional content pages required by the client. A design specifically for this project was created by a designer, which we implemented with front-end technologies such as HTML, CSS, JavaScript, Bootstrap. The site is synchronized with Microsoft Dynamics, and all orders, customers, prices, categories, products, and rental information are automatically and dynamically synchronized. Payments in the project are executed through integration with Datatrans and a custom payment plugin. Our client uses Affiliates & Partners, who have their own profiles and accounting for their client ski rental reservations. The checkout is a custom step-by-step process created due to the specifics of the business, the different delivery methods (pickup from the Verbier shop, delivery to Verbier, shuttle reservation). There is an option to add a donation and additional activities within the resort area.

Microsoft Dynamics NAV

Datatrans payment solution

Click & Collect

Google Analytics 4

Facebook Catalog

The homepage is simple, like the entire design of the site. At the top, there's a menu and an option to log into your account, a search bar, and a choice of three language versions (English, French, and German). The menu includes options to navigate to the rental section, where you can reserve ski equipment, or to the shopping section, where you can make purchases. Following that, we continue with a homepage carousel banner highlighting current promotions or activities in the Verbier area. There's information about MountainAir and their operations, as well as highlights from their main services and products. We proceed with an interesting design solution for a banner with photos of their physical store and the place where they serve their customers. Then, we focus on the retail products, divided into two sections - men's and women's products. We conclude with their promotional club package, which can lead site visitors to. From there, they can register and receive club cards for more activities and discounts.

One of the major challenges in the project was the rental section, where we added a list of all the services the client offers in the form of rentals. When choosing Rental, the customer enters a page where they select the period and days for renting the products, after which we lead them to a page with all categories and products that can be rented. After the customer selects a product, we visualize a popup with additional options and extras, and the choice of equipment user (existing in the account or new if they haven't ordered before). The categories are divided into ski, snowboard, children's ski, children's snowboard, backcountry safety, and others, and we have separated them by name and color. From the page, there is also an option to change the rental period. Prices are adjusted according to the rental period. There are additional options and pre-selected options for certain packages. An option for reserving a quantity has also been added, which improves the rental experience, as if there is only 1 available ski of a given model, it cannot be rented out twice.

A custom-designed page, specifically requested by our client, showcases an interactive map of Verbier, highlighting all the ski slopes along with a detailed weekly weather forecast to enhance planning for visitors. Additionally, we've incorporated a dynamic feature for the timely addition and modification of News and Events, enabling users to effortlessly select and delve into the latest updates with just a click. This ensures that both locals and tourists stay informed about the latest happenings in Verbier. To further engage our audience, the bottom section of the page is dedicated to thoughtfully curated blog articles, offering deeper insights into the skiing world and beyond. Moreover, visitors are encouraged to explore the Metres Club channel by Mountain Air, a platform designed to connect the skiing community through shared experiences and valuable information, thereby enriching the overall user experience on the site. This enhancement not only doubles the content but also significantly amplifies the value provided to the site's visitors, making it a comprehensive source of information for everything related to Verbier's skiing scene.

The checkout on the website is specially designed according to the client's requirements. It features three different workflows, tailored to the customer's choice, whether it's for rental, retail, or a combination of rental and retail products. There's a choice of delivery - delivery to the store, delivery to accommodation, or shuttle, along with a cart for all products, where you add information for rental equipment users, which are necessary when adjusting and selecting skis. The process includes adding additional activities and donations. Options for payment include credit card or rental coupon, among many other options.

The layout of the retail product page is designed with simplicity and clarity in mind, showcasing the product images prominently on the left to immediately capture the visitor's attention. The right side of the page neatly presents essential details such as the product's name, its price, the SKU for identification, and options for selecting color or size, accompanied by a conspicuous "buy" button for straightforward purchasing actions.

Further enriching the user experience, the lower section of the page is dedicated to providing detailed information about the product, including its specifications and features, ensuring that customers have all the necessary data to make an informed decision. Additionally, there is a section for customers to make inquiries about the product, allowing for direct communication and further engagement with the brand.

Social media links are strategically placed at the very bottom of the page, facilitating easy access for customers to follow the brand's social media channels. This not only helps in building a community around the brand but also offers an avenue for customers to stay updated on the latest products, promotions, and news related to the brand.

The design of the catalog and product listing page maintains a minimalist and uncluttered aesthetic, facilitating an intuitive shopping experience. On the left side of the page, users are presented with a comprehensive set of filters, allowing them to narrow down their search efficiently based on specific criteria such as Brand, Type, Style, Color, Size, among other options. This feature ensures that customers can easily find products that match their exact preferences and requirements.

To the right, the page features a neatly organized grid layout, where products are showcased with clear, high-quality images, arranged in rows of three to optimize space and visibility. Each product is accompanied by its name and price, providing essential information at a glance. This layout not only enhances the visual appeal of the page but also improves the user's navigation experience, making it easier to browse through the wide range of products available.

A dedicated Metres Club webpage has been meticulously developed to serve as a comprehensive resource for consumers interested in the Metres Club offered by Mountain Air Verbier. This page provides an in-depth explanation of the loyalty program, detailing the advantages members enjoy by joining. It highlights the rewards and incentives designed to enhance the customer experience. Additionally, the page showcases an interactive dashboard of privileges, allowing users to easily understand the range of benefits available, and introduces the club's mobile app, designed to keep members connected and informed about exclusive offers and updates, further enriching the user experience with the program.

Technologies used