githubslacktwitterlinkedinemail

Nubikk’s ecommerce site, powered by Spree, undergoes overhaul, increasing conversion rates by 15% in 2 months

Shoe aficionados rejoice, or where do we put all these new shoes?

Relaxed, stylish, and comfortable. That’s how the founders of Nubikk describe their shoes, and shoe lovers across Europe agree. The brand launched in 2012 in Amsterdam, with the goal of creating high-quality designer sneakers. By 2014, sales were going so well that the obvious thing to do was to open an online shop. Enter Coqtail, an Amsterdam-based web agency, founded and run by Coen Fredriks. Coqtail focuses primarily on luxury and lifestyle brands. Unsurprisingly, Coen’s style and vision were right up Nubikk’s alley. The site launched that same year using Spree Commerce.

 

In 2017, after 3 years of growing sales and increasing brand recognition, Nubikk found themselves offering over 100 models of shoes. After their iconic sneakers came various types of boots for both men and women. In theory, a larger offering is a good thing for customers. The reality turned out to be a bit more complex. The layout that worked with 20 models of shoes became increasingly difficult to navigate with each added model. Customers couldn’t find what they were looking for and got distracted by the amount of information that was shown in the product listing page. Coqtail was called in to revamp the website and, ultimately, boost conversions.

 

While this may sound like a huge project, the fact that the shop was originally built using the Spree Commerce engine made it a whole lot easier. According to Coen, scaling a website built using Spree takes around 75% less time than migrating a shop built using a different, out of the box solution. This is because the changes occur in the front-end only, the backend remains the same. In other words, no messy migration, lower cost, and less risk.

nubikk spree commerce sucess story

Project Goals

nubikk spree commerce sucess story
  • Reduce sensory overload for customers by changing the layout and minimizing scrolling

 

  • Rework the product detail page in order to put the shoe in the spotlight

 

  • Prioritize the mobile and tablet experience  

 

  • Re-evaluate the checkout flow

Scrolling and cart be gone, enter vodka and shoe hotspots

From the beginning, it was very clear that the depth of the product offering was a huge roadblock for visitors, as was the amount of scrolling that had to be done. To counteract this, Coqtail decided to take a revolutionary approach and remove all scrolling from the web store.

 

The new user experience worked marvelously in tests. While the Nubikk team loved it, they didn’t feel that zero content was the way to go. Plus, there’s always the issue of SEO to consider. Not ones to back down from a challenge, Coen and his team went back to the drawing board. After brainstorming (I heard there may have been some vodka involved), they came up with the idea of hotspots on the shoes themselves. The content is hidden until a customer hovers over the hotspot. This allows for a cleaner design, while at the same time allowing Nubikk to add important content where it’s needed most. In order to achieve this, the team built a custom backend framework that allows the e-Commerce manager to pinpoint the location of the hotspot and add the content.

 

nubikk spree commerce sucess story
nubikk spree commerce sucess story

Applying simplicity and ease of use to the mobile experience

nubikk spree commerce sucess story

70% of traffic to the Nubikk site came from mobile devices, prompting Coqtail to apply the same simplicity and ease of use to the mobile experience. Since the Spree backend is separate from the frontend, they were able to create optimized versions of the site for every type of device and browser size. Around 5000 lines of CSS were used to create a fluid experience.

 

The team spent some time analyzing the checkout process as a whole. They saw that most customers bought only one pair of shoes at a time. This eliminated the need for a cart altogether. Instead, customers can now choose a pair of shoes and go straight to checkout, saving them time and clicks. All other steps and menus were removed, resulting in less distraction and easier paying.

Technologies used

  • Frontend Frameworks and Libraries:
    • CSS3
    • Html 5
    • jQuery
    • Ajax
    • Backbone.js (SPA)
    • Marionette.js
    • Underscore.js

 

  • Backend Technologies:
    • Spree Commerce (e-Commerce CMS)
    • Ruby
    • Ruby on Rails
    • ElasticSearch

 

  • Payment Gateways and Third Party Integrations:
    • Multisafepay
    • Pinterest
nubikk spree commerce sucess story

Benefits

The new and improved version of the website launched mid-2017. It didn’t take long for Nubikk to see the benefits of the overhaul.

 

  • The original Nubikk site was built using Spree, which made the overhaul cost effective and quick. A migration from a different solution would have taken roughly 600-800 hours, while the redesign of the Spree site took only 200 hours.

 

  • Conversions went up by 15% within the first two months after the launch. After a year, conversions steadily climbed and are now 26% higher than after the launch.

 

  • The uptake was even more pronounced on mobile, where customers really appreciated the shorter and easier checkout. On the old site, conversions were split 50/50 between mobile and desktop. Currently, it’s 30/70, with more and more mobile users buying shoes.

 

  • A year after the launch, the Nubikk website is getting 40% more visitors.

 

  • Since the launch, Coqtail have implemented a localization solution and are adding more and more language versions of the site.

 

  • Since Spree is so easy to customize, Nubikk are already planning to add new third party integrations to their ecommerce site. The next in line is https://www.3dabout.me/, an app that allows customers to scan their feet and check if a shoe will fit or not, based on the actual dimensions of their feet.

 

  • Overall, Nubikk’s revenues went up by 80% over the year since the launch of the overhauled website.
Spree Logo

Contact us to learn how to get the best results with Spree

close

Interested? Got questions about Spree?

Please do contact us. We’ll reply shortly.














reactangularsymfonygraphqlnone of the above

continuous deploymentcontainer/dockercloud hostingdedicated serverother

By submitting you agree to our Terms and Privacy Policies.