Based on the Challenge, it was clear that no Plug & Play shop system, such as Magento, Prestashop or even Shopify etc. is a suitable choice. We have to have the stack under full control to get the best results. Slowly but surely, the first pioneers in Switzerland are on the market with PWA (Progressive Web Apps) – so of course, we decided on building a cutting-edge PWA. In order to achieve the best performance from the ground up, we also decided that backend and frontend had to be separated from each other. The backend should manage product data, orders, categories, and the frontend should make these data visible in a fast way. If a PWA is implemented well, it is also possible to implement the “Offline First Methodology”, which is very popular with Google, and this should also be reflected in the organic rankings. Offline First it is. We’ve chosen the Open Source Framework “Saleor” because this new solution was able to meet all our high expectations and we have already shipped a successful e-Commerce project based on this stack.
In the visual Design we had a great focus on conversion optimization and upselling, so we implemented multiple recommendation engines, dynamic filter options and a discount module that drives attention, both in a beautiful but a very usable manner. We’ve developed a full responsive visual design for the user to easy, intuitive and seamless move through his tasks.
Choosing the right technology
Building upon an offline-first approach users can now comfortably browse dermalogica.ch even with slow or no internet connection at all. Page speed optimization keeps loading times low and increases the probability of conversions. Thanks to state-of-the-art technology, low loading times, dynamic meta descriptions and the chance to fully customize SEO descriptions from the dashboard, Dermalogica can now also profit from a significantly higher positioning in the organic search results.
As stated earlier in this text one of our main goals was to increase conversion, which we tackled through several approaches.
Recommendation engines: throughout the shop we placed product recommendations on every page where we could create value for the customer and so increase the probability of a conversion. As if now we recommend fitting products though the following elements:
- Bestseller section: Tracking the total sales numbers of every single product in the shop, this section is constantly updated to provide the user with the eight bestselling products at a glance. Even more than that the products also get highlighted with an animated sticker to ensure the tops shots are found at any given moment.
- Therapist picks: In this section we enable promoting hand selected products to the users. More so, if time runs short very once in a while with one click the section gets filled with products that need some spotlight the most. Bringing up hidden treasures.
- “You may also like” part one: On every product detail page similar products from different product lines are proposed to the customer. Empowering the user to switch to substitutes without having to browse.
- “You may also like” part two: While looking at his cart we propose additional awesome products to the user that would be the perfect fit to make his shopping journey complete.
Strictly above the fold: Ensuring the best practice we made sure that every important element like call to actions are above the fold, no matter what size the screen.
Making the USPs visible: Through a progressive representation of the core USPs of Dermalogica both on the product category and detail page. We make sure to communicate the value the customer receives without any searching involved.
Bring the premium online
One of the challenges we faced was to push conversions while preserving the premium brand identity of Dermalogica. With several design iterations involved we came up with solutions to implement conversion enhancing best practices, while obtaining a beautiful touch and feel. We exclusively designed animated product stickers for promotional purposes that drive both attention and astonishment trough a carefully selected color coding and the perfect balance between “push” and artsy design.