Andersen & Maillard shopify store design
Shopify website design for coffee specialists Andersen & Maillard
Project—Website design for Andersen & Maillard’s Shopify store, servicing both B2B and B2C customers.
Client—Andersen & Maillard are a multi-site coffee roastery and bakery in Copehnagen, Denmark. In addition to their own coffee shop and bakery locations, A&M also supply many other restaurants and businesses with fresh-roasted coffee beans and artisanal baked goods daily.
Job—I was approached to design a Shopify storefront to serve as both a standard B2C webshop and a B2B wholesale ordering platform to streamline the repeat-order process.
Team—My role was front-end UI designer, and worked together with a small team consisting of Carsten Nielsen [Project Manager] and Daniel Seldura [Developer] to come up with a visual and functional solution.
Wireframes—The site had two main functional objectives to solve.
(1) Customers would be able to purchase fresh coffee for home delivery. Coffee would be the only product available to B2C users.
(2) Wholesalers could sign up and log in with their B2B account. Here, they would be able to maintain regular orders of breads, pastries, and coffee beans in bulk with regular delivery dates.
Fonts—The site typeface needed to have clean lines, simple finishes and a natural, easy spacing. I went through many samples with the client and Avenir was the clear winner. We used Avenir site-wide, across all copy instances. Avenir Medium was used site-wide for headings, subheadings, CTAs, while Avenir Book was chosen for body copy, product details and most small texts.
Colours—Starting with the existing A&M Red as our primary base, we chose a complimentary and bold Danish Royal Blue, and supported them with secondaries; a soft black Charcoal and soft Light Grey.
Prototype—Wireframing helped find best user experience for each of these journeys. From there, we created on-grid mockups and Adobe XD prototypes before handoff to the developer.
