Lift Foils

New ecommerce brings the excitement of flying above the water to the digital space

Case Study

Digital design

Ania et Lucie

TechStack

Shopify Plus

Sanity

Next.js

Vercel

Sayduck

Mux

Mapbox

Klaviyo

Stamped

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 call today eFoil.

Soon after, the product went viral. You’ve probably seen Mark Zuckerberg casually riding a Lift3 on Independence Day.

Liftfoils sold over 10,000 boards and built a worldwide network of 300+ demo locations in the United States, Europe, Asia, and Australia.

As the company expanded, its existing WordPress site became a roadblock for growth. That’s why Liftfoils approached Commerce-UI with a task to build an entirely new digital experience in only 6 months — just in time for the new flagship Lift 3F product launch.

Oren Schauble
Liftfoils VP of e-commerce

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. For that, we invited a world-class partner Ania et Lucie to collaborate on the project. Together we created a modern ecommerce website with outstanding video content, inspiring storytelling, clear calls to action, and an advanced product configurator.

Immersing into the efoiling experience with high-quality videos

Despite getting a lot of traction in recent years, efoiling is still a new concept to most customers. Being an innovative brand poses a particular challenge — how to translate physical experience into digital space? One way to do this is with immersive video content. From downtown Miami to Côte d’Azur France, there is no better way to drive customer engagement. But having a ton of video content and, at the same time, not ruining ecommerce performance is challenging. Supporting multiple formats (background video, youtube, custom player), optimizing video for different devices, and loading heavy video data only when needed — it’s a complex task to make video right.

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:

  • Showing the first frame as an image until the video loads — From the very first moment, instead of an empty canvas, users see meaningful content without any layout shifts.
  • Loading videos only when you need them — Loading every video on the site right from the start makes it extremely slow. Instead, we’re loading videos only before users scroll to a specific part of the page — this way, it can include multiple videos and still load fast.
  • Automating video processing with MUX video — Ever wondered how to compress video for the web? It’s a broad subject, but we think editors should never do this manually in the first place. For Liftfoils, we’ve integrated leading video service provider MUX. Editors simply upload high-quality videos inside CMS, and MUX does the whole heavy lifting of video optimization and distribution automatically.

Product configurator — overcoming Shopify limitations

Liftfoils offer an impressive amount of product customization. Some customers pick a shorter board and more aggressive wing, while others choose longer boards and wings providing stability. How to ensure Liftfoil’s configuration experience is easy and enjoyable for their customers?With advanced product configurators like this, It’s crucial to have a holistic approach. This is because there are challenges around User Experience (UX), as well as platform limitations.

Shopify is among the most prominent e-commerce platforms today — and for a reason. With an established ecosystem of third-party applications, an extensive product inventory management system, and an enormous community, Shopify is well-suited for businesses of any size. However, one downside to Shopify is that it does not support advanced product configurations out of the box. 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 (which is Shopify’s recent strategic investment). The result is a system that unlocks the creation of various product configurations with a completely adjustable user interface and business logic.

3D models are incorporated into the product gallery. AR support lets users visualize the product dimensions in their own space.

Internalization: Shopify Markets, multi-instance setup, or a combination of both

In the past, Shopify offered only a multi-store setup. The idea was simple: each country or region is assigned to a separate Shopify store under an organization account. That approach allowed for creating different product lists, setting up suitable payment methods, or installing specific apps. However, it quickly became unmaintainable for brands, some ending 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. Also, it is still not possible to maintain a separate product list per region.

After considering Liftfoil’s business cases, a hybrid solution turned out to be the most effective. Liftfoils can set up separate stores and configure them to best suit a region's specifics. At the same time, all stores use the Shopify Markets features to the full extent. This way, the company can keep a small number of stores and still have full flexibility in business decisions. And from their customer’s perspective, there is no visible difference when switching between regions.

High-quality video-first content with the highest ecommerce performance.

Mobile first approach with seamless user experiences on any device.

Product detailed page with incorporated 3D models.

Fully customizable high-quality video content.

Page building capabilities for editors with Sanity CMS

To support growth, the Liftfoils marketing team has to be able to create, update, and experiment with content pages without any involvement of developers.

Using Sanity CMS, we’ve built a custom editorial experience, that is powerful and easy to use. All changes are visible instantly thanks to the live preview.

Optimizing try before you buy user journey

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 into consideration the importance of this feature we’ve decided to build it completely custom, leveraging Mapbox as an underlying map engine.

What we think makes a good store locator:

  • Supporting any kind of query (eg. country, street, point of interest) with autocomplete.
  • Fly to animation as you search.
  • Adjust the map zoom based on the number of locations in a specific area – always try to show at least one result.
  • High performance — get results instantly with a loading time close to zero.
  • Designed in a mobile-first way, should feel like a mobile app.

Exceptional customer experience starts with performance

Site performance matters. According to the Google report:

  • When load times increase from 1 to 3 seconds, the chance that the user will bounce off the site increase by 32%.
  • From 3 to 10 seconds, it increases by 123%.

At Commerce-UI, we know that performance is the key to providing a remarkable user experience. We developed the entire site consistently, considering both measurable and user-perceived performance.

An in-depth list of optimizations:

  • Static site generation —  fast initial page loads worldwide.
  • Prefetching pages —  instant page-to-page navigation.
  • No layout shifts — improves perceived performance of the site.
  • Advanced lazy loading of images and videos —  load a minimal amount of assets only when you need it.
  • Custom strategies for loading third-party scripts — reduce the impact of apps running in the background (eg. Klavyio).

The site is passing 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.

Ongoing partnership

We are truly proud that Liftofils entrusted us with the ongoing care and development of their site. As their technology partner, we continue to work closely with their team to improve existing features and explore new ways to enhance the user experience.

Ecommerce Platform

Shopify Plus logo

The global commerce platform with the best-converting checkout.

Headless CMS

The Composable Content Cloud. Sanity helps building flexible and remarkable CMS experiences at scale.

Front-end Framework

Powerful framework that extends React for web stores production.

Deployment

Fast and reliable platform that delivers applications across the planet.

Media

Sayduck

3D and Augumented Reality for Ecommerce.

Media

Mux logo

Best in class video processing.

Other

Mapbox logo

Maps and locations service used by the biggest brands.

Other

Klaviyo logo

Ecommerce marketing automation platform perfectly integrated with Shopify.

Ecommerce Platform

Stamped

Reviews and Loyalty for growing brands.

Next project — Aether Apparel

Let’s talk
Do you feel like we could help with your ecommerce challenges? Reach out to Simon.
simon@commerce-ui.com
Copied to clipboard
Insights about the future of ecommerce in your inbox.

default

© 2023 Commerce-UI

linkedin
instagram
twitter