Web Design and Development Case Study for JJ Bean Coffee | Forge and Smith, Vancouver
About The Organization

JJ Bean is a Vancouver based, family owned, coffee roasting company sourcing the highest quality green coffee and roasting it in small batches daily to ultimately serve the freshest coffee possible.

  • Create a website that is better aligned with their brand direction and company culture
  • Design an easy way for users to find their locations
  • Develop a simple eCommerce platform for selling their products to their online customers
  • Create an easy and flexible blogging platform to help connect with their customers
  • Provide greater device accessibility through Responsive Web Design
  • Improve organic SEO search results and boost overall conversion
  • Organic Traffic

    + --% year over year
  • Transactions

    + --% year over year
  • Minutes on Site

    + --% year over year

Phase 1


Housing a lot of content, while keeping the experience as pleasurable as sipping a smooth cup of premium coffee, is what made this project so fun. The general design direction enabled a defined and engaging user experience, enticing the user to navigate gradually through the site at a leisurely pace.

Phase 2

Style Concepts

Having the website blueprints complete, we ran with the evident mood highlights inspired by the “from field to table” green practice. Using a natural colour theme and textural elements found in nature, we instinctively unified these with the black and reds featured in the JJ Bean brand.

style concepts

Phase 3

Bringing it all together

We designed a simplified presentation with a holistic look and feel. By developing a WordPress website with a Google integrated cafe locator, JJ Bean gained a more powerful tool to drive their own business, well beyond their cafes. We customized a robust eCommerce backend that enabled continuous uninterrupted management of stock orders and customer orders alike. Conclusively our team developed a better way to add new content on the fly without third-party help.

project image