Home Barista

January to April, 2014

Breadstand’s Home Barista was one of my most fun projects to date. David gave me a lot of freedom, and we came up with a lot of ideas collaboratively as we discussed how he wanted the business to work.

As with a lot of my projects, I started working on the branding and the one-page site design together, to ensure they complemented each other. The style tiles started out exploring the logo and potential site backgrounds. I explored logo ideas that were similar to classic café signage, to emphasise the feeling of having your own coffee shop at home.

Early style tile with two similar logos

Early style tile with logo ideas

As the Home Barista idea is very straight-forward, we settled on a one page site to convey the information, hooked into a subscription booking engine powered by Shopify and Chargebee. Whilst I’d been to a workshop on Shopify by Keir Whitaker years ago, this was the first time I had the opportunity to sink my teeth into it. While we only used a fraction of its features, I found Shopify very capable, with a simple and powerful theming system.

We worked through a few rough wireframes, mapping out the content and layout. As the content was simple, the responsive solution was about splitting one column into three for wider viewports, and creating styles that worked well at varying widths.

Wireframe side-by-side with mockup

You can see how the content and structure evolved between this early wireframe and early mockup

The illustration of the coffee machine was key to unlocking the aesthetic style of the site. After I created the illustration in flat, vibrant colours, I worked on complementary icons to describe the different features of the machine. This colourful illustrative style contrasted with the more real and natural wood background, to create a warm, friendly and café-like feel. As the page was very long, I split the sections up with different colour wooded backgrounds. The dark coffee-coloured wood has hints of the sophisticated coffee shops showing the quality of the coffee, and the “shabby chic” white wood of a more traditional café suggests the friendliness of the service.

Screenshot of top part of breadstand.us

The header of the final site, with the illustration showing how the coffee machines work

In progress