Project:
Data Driven Design built a robust Magento website filled with features such as e-commerce, a retailer portal, and a store locator for customers to find products nearby.
Moccamaster needed robust e-commerce experience to supplement their new information-rich website. The store's product grid pages include a user friendly navigation that uses icons to highlight the different categories within the Moccamaster product line. Filters on the left were styled with an updated, modern feel and page-specific heros can be customized with images and category names.
Moccamaster's founder set out to create a long-lasting, reliable, energy efficient, and sustainable coffee maker. Today, the products of his company have come to be known for their brewing consistency, longevity, and ingenuity. Each product is handmade in the Netherlands and tested to meet high quality standards. As a result of their commitment, Moccamaster's coffee makers consistently top the list as best in class.
The design for Moccamaster's U.S. site tapped into the very ethos that's been at the heart of the company from its inception to today. With a rich, graphic style in the designs, it was up to Data Driven Design to meet Moccamaster's needs and deliver a beautiful site to speak for their brand.
As anyone who has ever worked on a Magento site knows, it can be daunting for a customer. Magento's platform is built around e-commerce, with standard features and layouts baked right in. Products take center stage, with support for cross-selling and up-selling. There are many plug-ins available to help manage product category navigation, checkout experiences, store locators and newsletter sign-ups. With the focus on functionality, Magento's approach to e-commerce requires knowledge of how the complex system is built and how to tie into it for a site with a sweeping design vision like Moccamaster's.
Due to the sheer number of pages needed on the site, a key component of the design was reliance on making reusable sections that could be used across the site and transformed with bold imagery and powerful messaging. This would ensure that the website would be maintainable after launch. Each of these individually designed sections could then be arranged on pages to give a variety desired of layouts. However, anywhere pages were unique, they were built and styled individually. This dichotomous approach to the design meant that the development of each page could proceed more quickly after determining which route to follow. In the end, it allowed a high-end feel across the site, marrying function and form.
Magento
Microsoft Dynamics NAV ERP
Custom Module Development for Vendor Portal
Knockout JS
Frontend Development
Backend Development
DevOps
Data Driven Design created a form to allow companies to sign up as retailers for Moccamaster products. In addition, a custom, password-protected portal was built to serve as a document repository for their approved retailers. This made it so that all of the documents a retailer might need were readily available.
Moccamaster's relentless focus on quality pushed their brand to the next level. For their introduction to the U.S. market, they needed to allow customers to purchase products. But, beyond this, they sought to showcase their positive press, convey the quality of their craftsmanship, tell the story of their company, and most importantly, help their customers make the ultimate cup of coffee.
We built a scrollable navigation using waypoints to highlight the key steps to brewing a heavenly cup of joe. This one-of-a-kind explainer allows fans across the country to discover how Moccamaster's coffee makers create the perfect conditions required to make a cup of coffee that meets and exceeds the precise regulations set out by the European Coffee Brewing Centre.
