The Whole Bean | Branding, Identity & Visual Design

PART ONE: Branding & Identity Design

Overview

The development of an entire brand & identity package for The Whole Bean coffee shop as they prepare to launch a grand opening. This includes supporting the vision through development of a unique branding personality and designing a complete collection of identity design deliverables.

My Role

Use branding psychology to create a connection through brand personality and related components, building a sense of loyalty among the audience. The identity design deliverables include a typescale, color scheme, collection of brand images, logo, icon pair, social media header and brand style guide.

The Customer

Karla Kahvi has funding and a great location in a popular neighborhood to open a coffee shop. Her strength lies in managing the business and financial side of her shop, but she wanted someone else to take over the design and development of a brand and identity for her coffee shop that fits her products and resonates within the neighborhood.

The Product

The product line will include coffee drinks (drip coffee and basic espresso drinks), a variety of loose leaf teas, and simple food offerings such as seasonal fresh fruit and baked goods like muffins and scones, as well as quick bites like veggie wraps, sandwiches, and granola bars. The menu is completely plant-based with a focus on whole foods with gluten-free options.

Brand Mission Statement

Declaring the brand's purpose, values, and goals through its mission statement:

“To nourish and inspire the body and mind.”

Brand Psychology

In order to establish and maintain a connection with an audiences it’s important to understand the psychology behind brand personality, color, typography, pattern recognition and social belonging. Some research into successful brands helps with this understanding of audience expectations and delivering consistently on them.

Brand Personality

Reviewing the 5 personality dimensions of brand personality and their associated traits, The Whole Bean has characteristics that make it clear it falls under the dimension of Sincerity. The brand is sincere, wholesome, down-to-earth, family-oriented, warm, welcoming, peaceful, comforting, healthy and friendly with an artistic edge.

inspirational coffee shop mood board collage

Inspirational Mood Board

Building a Brand

Personality & Identity

A brand's personality and identity are connected on a deep level. The personality includes human traits associated with it and the emotional connection formed with its audience, whereas the brand's identity includes the image and message conveyed, as well as the communicated visuals like logos, colors, and fonts. The key to sending the right message about the brand and the first step toward creating an emotional connection with the audience is to make sure the brand personality, colors, and typography all support each other, make sense, and tell a clear story. Before building the brand personality profile, I developed a couple of target audience profiles for an effective assessment by considering the product and service offerings, and the people most interested in those offerings.

Design Deliverables

Color Scheme
Typescale
Collection of Brand Images
Mission Statement
Logo
Icon Pair
Social Media Header
Style Guide

Mission and Creative Brief

Composing a mission statement took some exploring of what exactly The Whole Bean does, understanding the target audience, the reason for the service provided and how to best serve, the purpose for being in the industry, why the business was started, and the desired brand image to convey. From these details the brand purpose was summarized into a simple mission statement: “To nourish and inspire the body and mind.”

The creative brief helped to organize the scope of the project and also acted as a planning tool by describing the goals and purpose, outlining the audience, budget, expectations surrounding deadlines, and to clarify details prior to project work. It included the overall project scope, specific goals and objectives, general client and target audience information, look and feel, strategy, deliverables, and other important details.

Holistic Identity Design

After the preliminary research, planning and structuring the main characteristics of visual branding, it was time to translate the brand’s personality into a clear visual identity consistent across multiple platforms. The holistic set of designs to begin working with next for The Whole Bean’s identity system would include its color scheme, typescale, logo, icons, and imagery.

Color Scheme

Reviewing general color guidelines and how to stay in touch with audience expectations, I chose to incorporate green into the color scheme with the dark chocolate brown and neutral browns to accent. Green is associated with: peaceful, growth, and health. The deep earth browns complement this and add coffee shop vibes.

Typescale

The selected typeface and font family traits to represent the brand need to match the traits of the brand and support the its message. The typeface chosen is mostly sans serif with clean edges, modern style, and stability, that works with an interesting display font that exudes friendliness and uniqueness.

Logo & Icon Design

An effective logo needs to blend seamlessly into a holistic identity system. Features of effective logos include simplicity, being memorable, and versatility across platforms. A logo should capture attention, engage the audience, and even create customer loyalty.

I began design of the logo by brainstorming keywords for the brand personality, grouping them into categories, viewing representative images, and then hand drawing some rough sketches for the logo concept. Finally, I cleaned up my logo sketches into some final variations to begin digital logo design.

Visual Messaging

Designs likes graphics, icons, or images can communicate ideas, messages, and feelings through their visual elements. This visual messaging of ideas can create a stronger emotional connection with the audience, giving the brand more credibility by making it seem recognizable and inspiring feelings of trust.

The imagery should evoke vibes consistent with the brand aspects: friendly, peaceful, healthy, welcoming, convey comfort. The tone of voice should support adjacent content: sincere, kind, healthy, warm. For the audience response I want to build trust and loyalty, for them to feel welcome, comfortable, safe, healthy, alive, nourished, and embraced by compassion. The composition should be clear and Images should complement the brand's logo, color scheme, and typography.

Social media interaction provides a huge opportunity for building brand recognition and connecting with the target audience, as well as building trust. The social media headers designed also need to match the brand's personality, keeping in mind the look and feel.

Completion of Style Guide

The Whole Bean is a cozy coffee shop with mellow vibes in a harmonious community neighborhood. The holistic set of identity designs created echo the the brand’s personality and compose the brand’s identity system of representative elements. Everything from its mission, to color scheme, to logo should deliver a consistent message and work together seamlessly with the brand’s image and voice.

View the full brand style guide: The Whole Bean pdf

PART TWO: Visual Design & Landing Page

Overview

This visual design case study is an expansion of a previous project involving the development of a unique branding personality and the design of a complete collection of identity design deliverables. I continued to utilize the style guide throughout completion of a Landing Page design. This design process incorporated UX/UI design, layout trends, user testing, and other industry standard tools, and supported the vision of The Whole Bean coffee shop as they prepared to launch a grand opening.

My Role

Previously I used branding psychology, creating a connection and a sense of loyalty among the audience through brand personality and related components. Identity design deliverables included a typescale, color scheme, collection of brand images, logo, icon pair, social media header and brand style guide. With contemporary UX/UI design tools, software, and visual design skills, I was able to plan the user experience for a professional sales landing page, prepare and organize a successful brand launch, get feedback, iterate, and polish, prepare and package the final design.

The Whole Bean

The Whole Bean coffee shop’s holistic identity design was built to fit the product offerings and resonate within the neighborhood. The brand characteristics are sincere, wholesome, down-to-earth, warm, welcoming, peaceful, comforting, healthy and friendly with an artistic edge. Its product line includes drip coffee and basic espresso drinks, a variety of loose leaf teas, and simple food offerings such as seasonal fresh fruit and baked goods like muffins and scones, as well as quick bites like veggie wraps, sandwiches, and granola bars. The menu is completely plant-based with a focus on whole foods with gluten-free options.

Style Guide Selections

TWB Style Guide Mission Statement & Color Scheme

TWB Style Guide Typescale & logo

inspirational coffee shop Iconography & Imagery

TWB Style Guide Iconography & Imagery

inspirational coffee shop Imagery & Social Media Headers

TWB Style Guide Imagery & Social Media Headers

Landing Page Goals

The deadline for the grand opening was exactly two months away, so the request was to finish the landing page design in 3 weeks leaving 1 week to publish it and 1 month to promote it and build excitement. Building from the created style guide, the client wanted a single web landing page design for the grand opening that would:

Announce the date and location of the grand opening
Generate lots of buzz for the grand opening
Introduce customers to the coffee shop and its products
Encourage customers to sign up for the email list

Based on Karla's goals, the design work would be focused around two key actions for users to take: 1) Attend the grand opening, and 2) Sign up for the email newsletter. Referencing the target audience, 5 steps to launch a brand successfully include:

Know your audience
Position your brand appropriately
Design a consistent brand identity
Set a launch goal and build anticipation
Plan your timing

Primary & Secondary Goals

Primary goal: To attract as many customers to the coffee shop as possible during its grand opening weekend. The decision was made to offer a promotion to entice customers to the shop -- when they visit, they'll get a free cup of the shop's house blend organic coffee and a raffle ticket in a drawing to win free coffee for a year!
Secondary goal: To form long-term relationships with potential customers, especially locals, so the coffee shop is top of mind. The client’s decided to offer an instant downloadable coupon for a free vegan chocolate muffin to anyone who signs up for the monthly newsletter.

Landing Page Layout & Design

The landing page layout and design offers information about the brand’s products and services while motivating visitors to engage with the brand. The layout should provide a central one-stop web page where people can go to learn more about a specific offering and connect with the brand in some way. Landing pages can encourage a brand’s audience to buy a product, visit the business, sign up for a mailing list or offer, follow the brand on social media, or any combination of these actions.

Best practices for designing a pre-launch landing page include keeping it short and sweet, getting right to the point, making the brand top of mind, adding social proof, applying consistent visual messaging, using directional cues, and avoiding visual clutter.

Successful pre-launch landing pages share 10 key features:

Prominent logo. Feature the logo prominently to keep the focus on the brand.
Compelling main headline. Capture visitors' attention with an important headline supporting the primary goals.
Supporting subheading. Give a few more details about the main headline so visitors don't have to search elsewhere.
Engaging imagery. Use a key image or two to support the main headline, engage visitors, and create an on-brand look and feel.
Call-to-action headline. Support the secondary goal and user actions with a compelling headline or offer that visitors can't pass up.
Straightforward forms & strong call-to-action button. Keep the form clean and minimal, only ask for necessary information.
Product & service offerings. Briefly highlight product or service offerings. Include just enough information to pique interest.
Social proof. Be sure to include testimonials, reviews, and any feedback that helps establish trust in the brand and its offerings.
Contact information. Promote transparency by including the contact information, including phone number, email, and address.
Social media icons. Include links to social media accounts so friends and fans can stay connected and follow what the brand is up to.

UX for Landing Pages

Identify the most important part of the design to guide the design approach and help to prioritize the content: project goals and key user actions.
Design the UX of the page so the project goals are the most important part of the page. Also decide how to motivate the users to take key actions.
Prominently feature a promotional giveaway on the landing page that will entice people to visit the shop during the event.

Wireframing

I began the wireframes as low fidelity sketches, then converted the selected versions from paper sketches to lo-fi digital wireframes in Figma. Next, I built on the digital wireframe, re-creating the design in Photoshop, then adding design details to build the user interface elements and design patterns into a higher fidelity wireframe. I iterated through a few experimental versions of the webpage before deciding on a final one, then polishing the features of it.