Lessons from brand-led online stores: Mate Libre, Stenger Bike, Pangram Pangram

Don't expect a results report here. We won't quote conversion rates or sales figures. What follows is what these projects taught us about where brand and commerce meet on screen, and what that means if you're planning your own store. For the hands-on method, see designing online boutiques that sell.

Mate Libre is a Montréal company that makes energizing infusions from yerba mate. The idea goes back to 2013, when its founder discovered a yerba mate drink in Berlin, and three years of work followed to perfect the recipe. The brand stands on clear values: organic farming, real yerba mate leaves, reduced sugar, no artificial flavours or chemical additives, and fair trade.

The brand identity came from the studio Caserne. Our team, led by creative director Julien Jean, designed and built the website, which received an Awwwards Site of the Day and Developer Award, and an FWA of the Day.

The lesson: when a brand already exists, the website's job is to carry it onto screens with its intent intact. Reinventing it would miss the point. For a consumer product like this one, the story behind the drink is a big part of what people are choosing. Working from another studio's identity also calls for a close, respectful partnership, so that intent survives on every page.

Stenger Bike describes itself as a specialist physical and digital store for bicycles and e-bikes in Hösbach, Germany. Beyond sales, it offers rentals, advice, and repair and maintenance. We modernized its online presence with a Shopify transactional site that brings together online purchase and the personalized service and expert advice its customers expect. The team included creative director Dust Leblanc and UX designer Sacha Haouzi.

The lesson: when expertise is part of what customers buy, a bare catalog falls short. The online experience has to feel as reassuring as a chat at the shop counter, so people who want advice find it and people who already know what they want can check out quickly. Here the brand lives in the service as much as in the visuals.

It's also a reminder that a store and its agency don't need to share a postal code. Stenger Bike is in Germany, and we work with clients around the world. More on that in working with a web agency in another country.

Pangram Pangram Foundry, founded by designer Mathieu Desjardins in 2015, offers fonts free for personal use and sells licences for commercial projects. Together, the foundry and Locomotive created a custom e-commerce platform on Shopify where people buy fonts online, with an editorial experience that presents the typefaces in the context of the design community.

This one was a true collaboration. The foundry kept its own brand, and its founder worked on content strategy, copywriting and back-end development alongside our team. The platform received the Awwwards E-Commerce of the Year title, along with Awwwards Site of the Day, Developer and Mobile Excellence awards, and Gold and Silver prizes at the Idéa competition.

The lesson: some products only click when you see them working. A typeface gets judged in use, at different sizes, in real compositions, so the editorial experience is the product demonstration itself. And a client who knows its audience this well is someone you build with, side by side.

• Start from the difference. A product story, a service, a product that needs demonstrating. Name yours before anyone sketches a single screen.
• Brand ownership varies, and that's fine. One brand came from another studio, another from the client itself. The store's job is to carry the brand faithfully, whoever made it.
• The platform is not the brand. Two of these stores run on Shopify. What sets them apart is the design, content and build on top. If you're weighing options, read choosing an e-commerce platform for a brand-led store.
• Awards recognize craft. They say something about design and build quality, and nothing about commercial results. See what awards and portfolios really tell you.

What to do next

Write one sentence that explains why someone should buy from you instead of the next store over. If your current site doesn't make that sentence obvious within a few seconds, you've found where your redesign starts.