Espresso Supply: Motif
A Custom Website, Built for Wholesale
For the last two decades, Espresso Supply has served the needs of the specialty coffee industry, providing unique tools of the trade for cafes and coffee shops, as well as independent consumer brands. Espresso Supply has kept pace with the changing palates of consumers and preparation methods of baristas.
Motif Coffee is a new brand for Espresso Supply, providing an integrated measuring system, web app, and pour-over coffee maker that was initially sold exclusively through Williams Sonoma. Their team wanted a website specifically for marketing Motif, that would reflect the same state-of-the-art experience that their product offered.
Building a Custom Website With Drupal
Espresso Supply engaged our development team at Bear Group to create a website that could handle both presentation of product lines and the content marketing strategy they had planned for the Motif Brand.
The project began with a design session with the full client team and their in-house graphic designer to discuss the details for the launch site. Their main Espresso Supply wholesale site runs on Drupal, so Motif’s CMS platform was a clear choice that included the benefit of the more modern UX of Drupal 8. With a hard launch deadline (the website needed to be live before inventory showed up in stores and promotions began) we kept to a tight schedule, finishing development in about 5 weeks.
Creating a Reusable Web Design and Layout
Espresso Supply has several other sub-brands, and one of the secondary goals of the project was to create a design that could easily be modified to suit them all. The long term plan is to upgrade them all, migrating them to Drupal 8, and implement layouts and design patterns similar to Motif.
Using a front-end, lightweight, javascript framework called Bourbon as the framework, we created a “digital design guide”–code that can be imported and used to define front-end styles and UX elements. The next branded sites built can leverage this digital design guide to queue up features such as mobile layouts, header treatments, and carousel images, while allowing for colors, typography, page layouts and of course all content and images to be unique to each branded site.
