Case Study — Aether Apparel

How we brought an in-store experience into the digital realm.

online
design
Aether Design Team

Founded over a decade ago by movie producers Jerome Heidler and Jonah Smith, Aether Apparel brings design-conscious technical outerwear that can accompany people on their life adventures. Today, Aether is hugely successful, with several unique showrooms around the US, including in Los Angeles and Aspen, as well as the ultimate shop on wheels designed in cooperation with Paris-based designer Thierry Gaugain.

When Aether approached us to build a new online store, they envisioned an experience that would reflect their physical stores — not just built around selling apparel, but more importantly giving a sense of community.

To achieve this, we decided to build an ecommerce store powered by headless Shopify Plus and Sanity CMS — an environment that is fast, robust, and flexible.

The result is a website that perfectly reflects Aether's brand — bold, adventurous, and built to last.

Challenges

  • Better showcase of Aether’s brand and product story.
  • Building a fast website that is easy to maintain — a solid foundation to move fast in the future.
  • Develop solid UX practices, especially for mobile.
  • Improve overall performance.
  • Having a long-term partner, who can support and maintain the product in the future.

What we did

  • A headless ecommerce build on top of Shopify Plus.
  • An extensive page builder with live preview, powered by Sanity CMS.
  • A platform shipped using Netlify for fast access around the world.
  • SEO, analytics, and performance marketing optimization.
  • Ecommerce User Experience (UX) consultancy and ongoing support.

Delivering a website builder, not a website itself

To truly engage your customers, it’s not enough to rely on generic pre-build pages. Brands need the ability to tell their stories exactly as envisioned. The way a website is built should reflect today’s needs, but more importantly be flexible enough to support whatever will come in the future — be an enabler, not a limiter.

That's why we’ve developed a unique page builder with over 30 customizable sections, each coming with multiple variations. This vast modular system allows Aether designers to tailor their online presence, while ensuring aesthetic uniformity.

But how about editing experience? Does going headless necessarily mean sacrificing the user-friendly interface of Shopify’s Online Store 2.0? Well, not if you choose Sanity CMS — a headless solution Shopify invested in recently.

At Commerce-UI we believe the editing experience is as important as the final result. By combining Shopify and Sanity CMS we were able to bring the best of both worlds — cutting-edge technology with an already familiar and comfortable editing experience, live preview included!

Every product is unique so does the product page

While physical stores allow customers to see and feel products in person, it can be difficult to recreate this online. One way to bring the in-store experience into the digital realm is by adding editorial context to product pages. This can include: presenting the product in different settings, styling with other items, educating on fabric specs, or providing information on potential uses for the product.

The Aether design team set an ambitious goal for each product page to be unique. As customers browse through the site, they can experience the thrill of discovery and the feeling of being in a physical store.

However, with so many products in their online store, how could this be done effectively?

We started by enabling editors to extend basic product pages with editorial sections, giving them the ability to customize the layout and content in a way that sets their products apart. Then, we added the capability to easily reuse certain pieces of content between product pages, saving valuable time and effort.

Each product page can be extended with custom editorial content for better showcase of Aether’s brand and product story.

The above would normally be extremely difficult or even impossible with standard Shopify setup, but can easily be achieved with an external CMS like Sanity.

Building a website is a collaborative effort

When designing and developing a website there are many factors to consider. Time and budget constraints, performance goals, user experience (especially on mobile), and design aesthetics.

It can be difficult to find balance between all of these, but that's where partnership matters.

Our team proactively worked with the Aether designers team, to ensure that the final product meets the highest standards.

"On top of all this, the Commerce-UI team are just truly wonderful people to work with. From day one until the launch. It was truly a synchronized partnership. I can't stress just how important that is, but building websites is a very tedious and long process, and throughout it all, the Commerce UI team showed patients attention to detail and a level of consistency that was truly a pleasure to work with."

Evan Backes, Designer, Aether Apparel

By taking mobile first approach the website offers seamless user experiences on any device.

Boosting ecommerce conversions with web performance

Consumers have little patience for slow loading times and often abandon websites that fail to meet their speed expectations. In other words, the faster your website loads, the more likely visitors are to make a purchase.

The ecommerce team at Aether recognized the importance of speed right from the start. We knew we had to find a solution that would allow us to push the boundaries of typical Shopify stores. That's why we chose to use the Next.js framework — used by brands like Nike or Peloton — allowing for advanced performance optimization techniques, like:

  • Prefetching — certain elements of a website are loaded in the background. For example: as you hover over a product card, the product page you’re about to enter is being loaded underneath so that they're immediately available when a visitor needs them. The moment you click, the product page appears instantly.
  • Static Site Generation (SSG) — pre-built pages (which means there is no building time when you open a website) are distributed across a worldwide network of servers. Your ecommerce store loads equally fast, no matter the customer location

These techniques, among many others, ensure a smooth and enjoyable experience for all Aether’s customers.

The importance of quality video content, that load fast

As a brand rooted in movie production, Aether understands the importance of quality video content. It enhances the brand's storytelling and helps build strong connections with the audience.

However, even the best video won’t convert if it takes ages to load. And video is complex: formats, compression, processing, streaming, and distributed infrastructure.

To support this extensive need for video content, we decided to use Mux video platform for advanced video optimization and infrastructure. This cutting-edge technology allows for the level of optimization so far available only for giants like Netflix. Results exceeded everyone’s expectations — Aether’s videos load faster than traditional images on the website.

Now with extensive usage of video content the new Aether website is closer than ever to the brand's DNA.


Let's talk

Do you feel like we could help with your ecommerce challenges? Reach out to simon@commerce-ui.com.