Craster provides innovative luxury products for many of the world’s finest hotel and restaurant groups including Hilton, Marriott, Accor, Hyatt and Four Seasons. Their premium position in the product development market meant they were looking for a website redesign that portrayed the opulence of their brand while showcasing their focus on innovation.
Matter was chosen to lead the rebuild because of our perceptible design capabilities, having been a design-focused agency since foundation. We were honoured to be selected for our potential, over local candidates in the United Kingdom.
Matter sat with Craster to understand the key requirements for the new build. We built out a simple Tech Stack to identify key systems integrations needed to achieve a seamless e-commerce experience for Craster’s customers.
The site was to be non-transactional, allowing the user to generate quotes that would link from BigCommerce into Acumatica (an integration developed by Arcus).
The site would integrate with Mailchimp for email communications and WordPress for simplified content management.
This Tech Stack would be the basis of our strategy to meet all the key requirements of the new website.
In order to showcase the exquisite style of Craster’s products, our designer focused on creating attractive UI designs across the website. Working within the elements of BigCommerce, we were able to use striking imagery and proportionate page elements to deliver a user interface that spoke of Craster’s brand upon initial page view.
- The user flow design incorporates a ‘Shop the Look’ section where users are able to refer to imagery to guide them on their purchase decision
- The PDP offers an ‘Add to My Projects’ so users can locate their favourite products simply by accessing the main navigation at any time
- The mega menu is structured to categorise the products by range, product type and finish so that the user can navigate products with ease
- PDP’s display related products as well as products from the same range so that users can find relevant products to add to their cart
- UI/UX interaction/animations were created to display the modelling of specific products
The Craster technology stack is built to allow the user to generate quotes based on their products of choice.
The stack consists of 11 individual components working together to perform specialised functions that enable the customer experience. These functions include:
‘Quote List’ functionality
Craster’s customers have the ability to create quotes using items they have chosen on the website. The ‘Quote List’ acts like the checkout, but sends information through to BigCommerce, in a similar way to an unpaid order. Once the quotes reach BigCommerce the system uses webhooks to watch for the new orders and passes the processing to the Acumatica ERP.
‘My Projects’ functionality
It is a common user requirement that one of Craster’s customers, for example, a hotel chain would wish to create multiple projects, acquire and curate products for which they could develop for each room or display. This user journey inspired the ability for the ‘My Projects’ section on the Craster website. The section leverages the BigCommerce ‘Wishlist’ functionality and saves browser history so that users do not lose track of the items they have been browsing.
Craster is 99% powered by BigCommerce and 1% powered by WordPress. The WordPress CMS administers Craster’s ‘News’ and ‘Case Studies’ section of the website, allowing the Craster team to utilise the user-friendly interface of the WordPress blog and then post to the webpage. Our developers built a custom connection between BigCommerce and WordPress to enable content to be pushed and displayed.
Detailed product variants
Craster’s extensive range of products come with a number of variable attributes such as colour, finishes and sizes. The PDP displays each product variant. Users can select options and view product images that correlate to the option of choice. Product variations are powered by the BigCommerce ‘Options and SKUs’ functionality.
Shop the look
The Craster ‘Shop the Look’ section is a customised version of the BigCommerce categories functionality. It brings together similar products so that users can shop according to their functions or respective decor. One of the highlights of the ‘Shop the Look’ page is the ability to add all products to the quote, improving the convenience options for the Craster customer.