The Whole Bean ~ a concept brand and website project

Screenshot of an Orchestral Composer's Website

Project Description

In the fall of 2017, I had the opportunity to further my branding skills through an online Visual Design course. An element of this course consisted of developing a brand identity and website landing page for a fictitious coffee shop owner.

Goals:
~ Develop a brand identity including colors, images, icons, and logo
~ Develop a website landing page to:
     +highlight the grand opening of the coffee shop
     +entice customers to visit during the grand opening
     +begin an email list for the coffee shop

Project Details

Client Fictitious Coffee Shop Owner

Date Fall 2017

Skills Branding, Graphic Design, Web Design

Details of the Project

As part of the assignment, I was to work under the assumption that I was creating a brand identity and landing page for a coffee shop opening in a new neighborhood trying to attract local clientele. I then needed to imagine what the shop and its owners would be like.

The following was used as a basis for this project: The Whole Bean is a fictitious coffee shop with a warm, friendly personality that just opened up in the neighborhood. The owners are very sincere and want their shop to become the space everyone visits for their coffee and perhaps grabbing a scone or sandwich on their way to work. The atmosphere is casual, perfect for someone to sit and work for a while or catch up with friends.

Discovery

I began this project by researching what personality this coffee shop has, what words reflect it. I discovered what the owners do through their coffee shop, who they do it for…why and how they serve their customers.

I brainstormed keywords that would describe this coffee shop, narrowed it down to the words that would reflect the shop’s personality and mission the best.

I collected colors that reflected this personality and the words chosen to reflect it and worked with the main color, secondary color and accent color throughout the project.

I gathered ideas for typography (fonts) and narrowed it down to a heading font and body font because I didn’t want to distract from the simple, organically friendly feel people had when they read the menu.

I researched who would be taking advantage of tasting the delicious coffee or spending time chatting in the comfy chairs of this coffee shop. This target audience further confirmed the choice of colors and key personality words chosen for this coffee shop.

Tim Isham website ipad format from https://www.TriciaIsham.com

The Whole Bean Logo & Icons

Based on all of this research, I designed the logo to be simple, block-shaped and highlighting the cup and coffee bean. Nothing fancy or cute, just straightforward, yet with just a hint of personality in the streamlined cup and bean design. This same look was extended to the icons I created to represent the coffee and food menus.

All of this is flows nicely with the streamlined mission statement: Our mission is to serve delicious coffee to wake up, inspire and connect our neighborhood.

Development

Before delving into the design of the landing page itself, I created a brief which brought all of the elements together in one place for both the client and myself to make sure the brand identity as a whole would be applied to the website landing page. I then set to work developing a landing page that pulled all of the research together in a strategic layout that met the goals set forth by the client at the beginning of the project.

The image to the right is the wireframe (the very basic layout) of the website that I created before applying the color and icons.

The resulting landing page highlights the grand opening of the coffee shop with a bold hero image with the most important information about the event, entices the customers to visit during the grand opening by offering free coffee, and starts an email list for the coffee shop by collecting email addresses in exchange for a free scone.

Delivery

The final design is a clean, minimal website landing page for The Whole Bean that reflects the warmth and friendliness of the coffee shop with warm colors and images that make the visitor want to visit The Whole Bean themselves. It supports the owners’ mission for this coffee shop so much that, by the end of the project, my husband was hoping it was opening down the street! (I’m a hot cocoa drinker, myself.)

As mentioned above, this was a concept project and was considered a complete final assignment with Photoshop files for the landing page, and Illustrator and InDesign files of the supporting items bundled and prepared to pass along to a developer.

The final items created for The Whole Bean coffee shop were:

  • Brand Personality and Identity
  • Mission Statement
  • Creative Brief
  • Logo
  • Color Scheme
  • Icons
  • Imagery collection
  • Type scale
  • Brand Style Guide
  • Social Media Header

Ready for a Distinctive Website for your business?

Check out the Services and Packages offered