Ania et Lucie
In 2015, Nick Leason — an engineer and avid surfer born and raised in Puerto Rico — came up with the idea to put an electric motor on a foil and build a flying surfboard. He invented what we today call eFoil.
Soon after, the product went viral. You’ve probably seen Mark Zuckerberg casually riding a Lift3 or you’ve spotted one in Imagine Dragons’ Sharks music video.
To date, Liftfoils has sold over 10,000 boards and built a worldwide network of 300+ demo locations in the United States, Europe, Asia, and Australia.
But as the company expanded, its existing WordPress site became a roadblock for growth. That’s where Commerce-UI comes in. Liftfoils tasked us to build an entirely new digital experience in only 6 months — just in time for the new flagship Lift 3F product launch.
Commerce-UI did an excellent job understanding our technical requirements, communicating and working through with us actually recommending partners like designers and performance to integrate into our site and processes.
To achieve the best customer experience we needed to reimagine not just the website technology but also the user interface design. To help us, we invited brilliant Ania et Lucie to collaborate on the project. The right call! Together we created a modern ecommerce website with outstanding video content, inspiring storytelling, clear calls to action, and an advanced product configurator.
Despite getting a lot of traction in recent years, efoiling is still a new concept to most customers. So, how do you translate a physical experience into the digital space? The answer: immersive video content. But having high-quality video content while not ruining e-commerce performance is challenging. Supporting multiple formats (background video, youtube, custom player etc.), optimizing video for different devices, and loading heavy video data only when needed add to the challenge.
We built an architecture that allows for any number of high-quality videos per page, doesn’t sacrifice overall site performance, and makes it easy for editors to manage their video content.
In-depth we did:
Liftfoils offer an impressive amount of product customization. But how do we ensure Liftfoil’s configuration experience is easy and enjoyable? A holistic approach is crucial as there are challenges around user experience, as well as platform limitations.
Shopify is among the most prominent e-commerce platforms today. It has one downside: it does not support advanced product configurations out of the box. This means you cannot create products with more than three options (think of size, color, material, etc.) using Shopify.
Fortunately, there’s a way to overcome these limitations with an external CMS. The Commerce-UI team extended Shopify's native product model with Sanity CMS (Shopify’s recent strategic investment). The result is a system that makes creating various product configurations with a completely adjustable user interface and business logic possible.
↑ 3D models are incorporated into the product gallery. AR support lets users visualize the product dimensions in their own space.
Previously, Shopify only offered a multi-store setup. The idea was simple: each country or region is assigned to a separate Shopify store under an organization account. This allowed for creating different product lists, setting up suitable payment methods, or installing specific apps. However, it quickly became unmaintainable for brands, some ending up with 50+ expansion stores.
With the recent launch of Shopify Markets, we were able to provide multiple currencies and pricing lists for each country without needing to create even one additional Shopify store.
Shopify Markets is a significant improvement to the Shopify ecosystem. However, it is still not as flexible as a multi-store approach. Stores that want to process payments in a customer's local currency must use Shopify Payments as the primary gateway. It is impossible to set up a different payment gateway for particular countries and optimize the transaction provision costs. And it’s still not possible to maintain a separate product list per region either.
After considering Liftfoils’ business cases, a hybrid solution turned out to be the most effective. Liftfoils can set up separate stores and configure them tosuit a region's specifics. At the same time, all stores use Shopify Markets features so the company can keep a small number of stores and still have full flexibility in business decisions. Plus, from their customer’s perspective, there is no visible difference when switching between regions.
↑ High-quality video-first content with the highest e-commerce performance.
↑ Mobile first approach with seamless user experience on any device.
↑ Product detailed page with incorporated 3D models.
↑ Fully customizable high-quality video content.
To support growth, Liftfoils’ marketing team has to be able to create, update, and experiment with content pages without developer involvement.
Using Sanity CMS, we’ve built a custom editorial experience, that is powerful and easy to use. All changes are visible instantly thanks to live preview.
For Liftfoils the online dealer locator is as important as the product configurator. Most customers decide on a demo ride first, then make a purchase.
Relying on out-of-the-box locator apps usually comes with limitations — in functionality, performance, and interface design. Taking the importance of this feature into consideration, we decided to build it completely custom, leveraging Mapbox as an underlying map engine.
What we think makes a good store locator:
Site performance matters. According to a Google report:
At Commerce-UI, we know that performance is the key to providing a remarkable user experience. We developed Liftfoils’ entire site considering both measurable and user-perceived performance.
An in-depth list of optimizations:
The site passes Google Core Web Vitals both on mobile and desktop. This metric is extremely important since (1) it assesses the real-world experience of the site, and (2) has a direct impact on SEO rating.
We are truly proud that Liftofils entrusted us with the ongoing care and development of their site. As Liftfoils’ technology partner, we continue to work closely with their team to improve existing features and explore even more ways of enhancing the user experience.
If you’re interested to learn more about this specific case or want to know how we can help you tackle your own challenges, please reach out to us.
The global commerce platform with the best-converting checkout.
The Composable Content Cloud. Sanity helps building flexible and remarkable CMS experiences at scale.
Powerful framework that extends React for web stores production.
Fast and reliable platform that delivers applications across the planet.
3D and Augumented Reality for Ecommerce.
Best in class video processing.
Maps and locations service used by the biggest brands.
Ecommerce marketing automation platform perfectly integrated with Shopify.
Reviews and Loyalty for growing brands.
Next project — Aether Apparel
We're hiring Front-end Developers
© 2023 Commerce-UI