Mattressman launched Arthur Sleep, our own in-house sub-brand and with its increasingly reliable stance within the company as one of our best-selling products, it was decided that we would launch Arthur Sleep's own website.

The rationale behind this decision was to provide Arthur with its own sense of brand, USP, and give customers a deeper insight as to what Arthur Sleep has to offer.

This site was to be hosted on Shopify, and I was given the championing seat to oversee the project.

The project started with the initial design handed over to us by an external agency. However, due to the spec-heavy nature of mattresses, I found the proposed layout to be flat and catered towards FMCG.

This posed a challenge as I had to find a way to pull through different specs of each products without creating a specific template for each one in order for the product catalog to be scalable.

I started by laying out our full catalog and identifying the 3 most important specs that were consistent throughout each product, speaking to members of our merchandising team to get their feedback, and planned out the best way to display these.

I then created Metafields and Metaobjects the would lie in the backend of each product. This then had to be coded onto the front-end theme.liquid to allow for them to show up dynamically on product pages. I also had to take additional measures to allow for team members without development access or know-how to be able to add these, which meant adding fields to the theme editor via Shopify's Liquid code. The live design can be found here.

_{Original design received by external agency (top) vs
my amended design with dynamic spec fields (bottom}

A lot of the development behind this project involved custom CSS overrides and injecting custom liquid into the existing theme, as the first edition of the theme was provided to us by the external agency. This included checking that colors were consistent, padding was mobile-friendly, and that alignments were correct (see top image as the before).

Throughout my development of this site, one thing I kept in mind was the ability for other teams (marketing, merchandising) to be able to access and change key elements without having to touch the code. This meant that I had to figure out how to build items into the theme editor itself rather than hard coding them into the pages, which made things a lot more challenging.