The famous Warsaw hair studio launched their first online store. Having a customer-first approach in their salon, they also wanted the same in their eCommerce. DW Shop opted for an eCommerce PWA to engage their Instagramers and leveraged Vue Storefront framework for that.
DW Shop is a sub-brand of DW Creative Group, created by well-renowned Polish hair stylist Dariusz Wójcik. After several years of successful growth of their hair studio company they then began sales of professional hair products. The brand decided to launch eCommerce in parallel to their brick-and-mortar store.
Goal: Convert Instagramers
The planned online store was the company’s first eCommerce project but the DW brand already had a mature and engaged community on Instagram. Having nearly 90% mobile traffic, the company knew that it was a must to adjust to preferences and behaviors of smartphone users. The goal was to drive mobile, and especially social media traffic to convert.
The company picked Magento 2 as a backend eCommerce platform for the store, but having a mobile-first approach in the back of their minds they wanted to enrich mobile users’ experience with PWA. Progressive Web Apps are the modern web technology that combines the best of mobile native apps and web pages.
“I chose Vue Storefront because it was the only production-ready PWA eCommerce framework integrated with Magento 2 on the market. And I love Vue.js.” – Alek Grygier, New Fantastic Studio Co-Founder.
Developing eCommerce PWA
Magento 2 and Vue Storefront is a very effective combination for PWA implementation in eCommerce.
DW Shop’s UI uses simplicity as natural strength of the store. Their eCommerce has a very basic catalog structure. The developers focused on two factors, crucial for stores’ navigation: Category Structure (Taxonomy) and Product Object Structure (Simple and/or Configurable/Grouped etc). By leveraging Vue Storefronts Default Theme’s, mobile navigation developers created a custom sidebar navigation for desktop and came up with a minimalist desktop and mobile layouts with a seamless navigation flow through A: Category –> Category or B: Category –> Product.
Despite the small team, developers also focused on custom developments. Alek Grygier (New Fantastic Studio), with support from @fogeljakub’s from the Vue Storefront community, created a custom component for Microcart which shows the amount remaining for free shipping and adds/removes shipping prices dynamically. DevOps were assisted by @janmyszkier, also from the VS Slack Community.
“This has been my first Vue Storefront project. It was a fun experience, though at the beginning I focused on understanding the whole project structure and was working with different repositories and libraries, but the theme’ing work was very smooth. VS is an easy experience for anyone familiar with Vue.js and Angular.” – Alek Grygier, New Fantastic Studio Co-Founder.
Instagram & PWA eCommerce
The store doesn’t have any out-of-the-world features, but it does have a good design practice, well-thought typography and PWA functionalities (add to home screen, offline readiness, fast performance) make DW Shop very unique.
The DW Shop has been launched in October 2018 and ever since they’ve put a 100% focus on Instagram. They leverage this social media as an advertising channel, and even most importantly for customer support, messaging and engagement.
With organic and paid posts (a free Facebook Pixel extension has been implemented) stores started to drive conversions from social media channels. In a short time, the DW shop achieved 75% of it’s traffic from Instagram, and thanks to PWA technology, it has seamlessly turned these users into clients directly on mobile devices.
Published December 20, 2018
