Explore
en
Partner

Care On Skin GmbH

Technologies used

Angular, Python, Redis, Amazon Web Services, React, GraphQL, Apollo

Industry
Cosmetics
Deliverables

Responsive Progressive Web App, Saleor Admin Panel, e-Commerce Backend, Scalable Cloud Infrastructure

Background

Dermalogica claims itself to be the number one choice of skin care for professionals. They both produce and sell their products in 106 Countries. The company works with 100’000 therapists worldwide and has won over 300 awards to date. The business has been established in 1986 for the sole purpose to provide innovative and professional help for skincare. Even though the Dermalogica brand is popular and well recognized offline, their Swiss online presence was not at its best. The Webshop was built with outdated technology, conversion funnels, and appearance.

As Dermalogica Switzerland was already a trusted client of ours, mainly making use of our digital marketing skills, they decided to unlock the full mindnow potential by mandating us, to bring their e-commerce presence into the next age.

Challenge

In this special situation challenges hit Dermalogica from multiple sides. On the one hand, they had closed down high-turnover stationary sales outlets in the Swiss market, on the other hand, their market position was being attacked by grey imports and low-price webshops were competing for their prices. The webshop at the time, seemed to be the supporting actor in a movie where it should have been the protagonist. Instead of a fully digitalized experience with a focus on performance and user experience, the site was a mere representation of their offline business. Missing clear conversion funnels the navigation through the store posed a great challenge for the users and also made appropriate e-commerce tracking nearly impossible.

Facing this challenge we mutually agreed on the following:

  • The new shop must set standards. Like the ingredients of Dermalogica products, the shop must contain “only the best”.
  • We need to fully embrace the clean, professional but fresh and young Dermalogica Look & Brand.
  • Design message: We’re the experts.

Solution

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.

Boosting conversions

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.

Approach

Starting our journey, we deep-dived into UX research with the goals to define personas, user journeys and the general scope of the project. An important part of this step was also to fully understand the values of Dermalogica as it is a very distinct brand.

Taking it from there, we started with the process of wireframing – that after several iterations with the client eventually resulted in design mockups, that later, with the approval of Dermalogica, were transformed into the final design concept. This concept was once more mirrored with all stakeholders to get the final approval. At this stage, we officially kicked off the development phase with a scrum team of six persons.

In total, we finalized the development of the Progressive Web App in 4 sprints. After every sprint, an increment was delivered to the client so he could give us his feedback on it. As transparency is a vital part of our culture, it was clear that the client had full access to the staging environment during the whole process and could follow the progress of their solution 24/7.

Results

Since we went live with the new Dermalogica Webshop on the 21. of October 2019 we can already observe a very positive trend in conversions and overall sales. In addition to that the placement of the Website and its subpages made a significant jump in the organic search results and is now listed ahead of its competitors.

Finally, with the new shop, Dermalogica Switzerland sets new standards for the whole brand and made a big step ahead of it fellow comrade-in-arms.

 

+ 83.5% Sales

compared to same period last year

+ 78% Transactions

compared to same period last month

6% Conversion Rate

larger than the industry average 2.63%

The minds behind

Jakob Kaya
Vadim Kravcenko
Benedict von-Hoffmann
Ruslan Greshyshchev
Aleksandar Petrovic
Oleksandr Roshchupkin
Bogdan Djukic
Marijana Vukovic
Anton Evidenov
Borko Mitrovic