The Collective Coffee Roasters & Bar

The best coffee experience tailored to your tastes

The Collective Coffee Roasters & Bar is a fictional coffee shop with a strong passion for coffee that strives to provide its customers with the best coffee experience tailored to their tastes. With the focus of building and inspiring a community filled with passionate individuals, The Collective hopes to be a place someone can proudly call their second home.

Client: Aimee Chung, MDIA 1106 - Design Fundamentals
Services: Branding, Logo Design, Web Design, Front-end Development
Duration: 4 weeks
Tools: Adobe Illustrator, Adobe Photoshop, Balsamiq, Visual Studio Code


The assignment for our MDIA 1106 – Design Fundamentals class at BCIT focused on the process of developing the branding for a fictional small business and building a website design from the wireframe stage to the high-fidelity mockup.

I decided to choose a coffee shop as my small business idea as I was inspired by my favorite local coffee shop in Vancouver (Kings Cafe, I love you). The thing that I love most about coffee shops is how one place can bring together a diverse community ranging from caffeine enthusiasts, bookworms, and designers (like myself!).

This assignment was divided into three parts:

  1. Create a sitemap and wireframe layouts for your small business site using Balsamiq
  2. Develop the branding and create the brand style guide
  3. Complete the high-fidelity mockup of the website design

Brand Style Guide

My favorite aspect of the overall assignment was being able to design The Collective logo and creating a comprehensive style guide that would dictate the entire look and feel of the brand to ensure its consistency.

Who Are We
Logo – Master
Color – Primary
Type – 2
Photo – M&R

High-fidelity Mockup

The high-fidelity mockup was created using Adobe Illustrator and features a carefully curated selection of photos that best complemented the brand imagery of The Collective.

As we were taking a web development course alongside this one, we had the option of coding out the website design using HTML and CSS. With only 1 term of coding knowledge, I decided to challenge myself and attempted to recreate the web design. (Please bare with me as it’s not responsive!)