0%
Project

Murmur

Building a premium e-commerce platform and design system for luxury bedding.

2022
UX/UI Design
Design System

When Bedeck of Belfast launched their new luxury line Murmur, I set out to craft an immersive e-commerce experience as refined and inviting as the linens themselves.

Tasked with showcasing both standalone pieces and curated bundles, I designed a chic, intuitive storefront reflecting the brand's unique sense of discreet and approachable opulence.

The result - a seamless blend of refined visuals and intuitive navigation, establishing a welcoming digital home for Murmur's discerning clientele.

A quiet kind of luxury.

Rather than compete with the immaculate composition of Murmur's product photography, the site's visual language was deliberately intended to get out of the way and allow the products themselves to shine.

The site embraces a minimalist aesthetic with generous whitespace, subdued colour palette and a simple yet intuitive layout which gently nudges visitors towards the product category they seek without coming across as too aggressive, or overbearing.

A large hero image using a simple product composition anchors the homepage, with a convenient reference to the featured product and its configuration.

More ways to make a bed.

One of the most pivotal design challenges to overcome lay in the definition and presentation of complex product categories such as Bundles, a curated offering of certain product categories (such as a set of sheets, cushion and a pillow) offered at a fixed price or discounted compared to purchasing each individually.

Collections, on the other hand, are more editorial groupings of products sharing a certain designer or theme, but surfaced directly on the product detail page to encourage deeper discovery of other products in that range.

1 / 3
A simple product detail page, where a customer may select between colour, size & material.
A bundle detail page where a customer can configure a predefined collection including a cushion, pillow & set of sheets.
A collection detail page surfacing alternate sizes for each product in that theme (Muro).

A closer look, by design

Murmur's products speak volumes in texture and detail, so we gave customers a way to get closer by introducing an interactive 'inspect' block on the homepage; a hover-to-zoom feature that reveals the finer qualities of a high-resolution image such as the weave of linen, or the stitching on a cushion.

The feature served as a subtle yet interactive tactile hook to quietly extol the craftsmanship of Murmur's product line while naturally being built to be flexibly & conveniently updated with images from updated seasonal lines.

The custom 'hover-to-zoom' feature uses a medium-resolution and ultra-high-resolution version of the same image to reveal minute details of the region sitting underneath the mouse cursor.

The beauty in the building blocks

As the experience began to expand across a multitude of screens and product types, it became clear that a flexible foundation was required to keep everything feeling cohesive. Enter a lightweight design system: reusable components for elements such as buttons, product info layouts and interactive form elements.

This approach allowed for testing & refining details both in isolation and their relevant contexts, enuring that the overall experience remains polished & consistent.

A selection of isolated UI patterns from the design system, including buttons, product info lockups, and custom form inputs including a (price) range slider and quantity inputs.