At Artesans we have been developing websites of all kinds since 2012. From the easiest ones like corporate websites, to the most complex ones, like big online stores. And today we want to tell you how, thanks to WordPress and WooCommerce, we built one of the sites we are most proud of: MAM Originals, an online platform where you can buy exclusive wooden watches.
How it all started
MAM Originals arrived as a customer that wanted to improve their ecommerce site and optimize the buying process. They used a Premium Theme and they had a lot of performance and identity issues. So we decided to move to a custom Theme development, with a totally unique and exclusive design made from scratch. This whole process lasted several months. And the result tells a lot about the enormous amount of work that was done during the development.
A very clean and minimalist design
MAM Originals team produced a very minimalist and clean design, with very large image sizes to highlight the focus on the company’s products. This makes the image of the online store very attractive and immediately focuses the eye on the product photos, creating a desire to own one of the watches. The commitment to mobile devices made it possible to have a design for both Smartphones and Tablets, to optimize the website to the maximum and obtain large conversion ratios.
Another feature of the website is the extensive usage of high definition videos in all media sections. All image areas support video backgrounds in Webm or MP4 format, with autoplay and with or without sound. The single product pages are especially attractive with a product video area.
Theme development: how we did it
Once we received all the design material we got to work. We opted for a modified copy from us of _s (Underscores), a pretty solid starter theme that we use at Artesans. We like it because it has all the PHP and CSS code you need. And the code follows the WordPress standards, which is a plus. For content layout we used the Advanced Custom Fields plugin (PRO version), that allows you to build your own page builder. This allows us to prepare a friendly and totally flexible backend for the users who will be in charge of the contents of the website to be able to add, remove, reorder and customise the frontend, both in mobile and desktop versions, without using a single line of HTML, CSS or even shortcode.
Multilingual
One of the requirements of the new MAM Originals website was that it started with several languages available. We discarded the well-known WPML plugin because it generated a lot of performance issues in the old version of the website. So we chose MultilingualPress, an Open Source solution that separates languages by sites in a WordPress Multisite. Thanks to the plugin we were able to develop the store in several languages without having to deal with the functions of a multi-language system, but getting a very good performance level at the same time.
Simplifying the buying process
The new website has a lot of UX improvements so we had to deal with that customizing WooCommerce a lot. The most relevant example is merging cart and checkout pages. This saves buyers one step, improves conversion and helps reduce abandoned carts. Also, in this same unified cart and checkout page, buyers have an array of extra services available just one click away, but never navigating out of this key page: watch engraving or present wrapping. They can intuitively add them and finish the buying process without any confirmation or additional step.
Thanks to the backend builder, the single product page is totally dynamic and powerful, while keeping the minimalist and clean design. The “Add to Cart” buttons are shown in strategic areas while scrolling down each product page: inside the content in the main information area, on the fixed header all the time while you flick through photos and stories, and on the footer at the end of the page. We tried several positions and combinations and this is by far the best performing one, as it creates a continuous call to action flow.
