Brand Identity Process Book

Kevin Porter | June 2014

1. Competitive Analysis and Strategy 1.1 Competitve Audit 1.1.1 Harvest 1.1.2 FreshBooks 1.1.3 QuickBooks 1.1.4 Xero 1.2 Creative Brief2. Initial Sketches/Tone & Manner 2.1 Word Map 2.2 Identity Sketches (x30) 2.3 Identity Sketch Selections (x5) 2.4 Tone and Manner Explorations (x2)3. Identity Refinement 3.1 Digital Logo Mocks 3.2 Vectorized Logo Iterations 3.3 Final Logo Iterations4. Brand Voice and Visual System 4.1 Brand Voice` 4.2 Visual System 4.3 Color 4.4 Typography 4.5 Photography/Illustrations/Diagrams5. UI and Brand Extension 5.1 App Icon 5.2 Iconography 5.3 Digital Ads (3) 5.4 Marketing Website (Desktop & Mobile)

1. Competitive Analysis and Strategy 1.1 Competitive Audit 1.1.1 Harvest

Harvestwww.getharvest.comHeadquartered in NYC, its an independent and profitable company, with only the customers as the investors. According to Harvest, We searched for a way to easily track time and invoice for our services. We wanted a well designed application that took user experience seriously. We wanted a service that innovated with technology.

Note WorthySet up as a wide layout

Super easy to set up. Just fill out six informational fields and your ready to go.

Navigational links primarily focuses on textual effects.

Editing and in web application experience mainly utilizes button interaction.

Easy to read reports because of all the important information is layout out with a bigger font size and a bold typeface, while the headers to the information is a light gray with regular font.

Thousands of customers in over 100 countries.

Main color is orange with action buttons as green.

Uses simple gradients, typography, and hierarchy for visual flow and movement.

FreshBookswww.freshbooks.comHeadquartered in Toronto, Canada; its a private company with 1.6 million users. This is a cloud accounting solution designed for small business owners, especially for businesses that apply companys time and expertise to others.

Note WorthySet up in a more narrow layout.

Easy to understand features and capabilities with the touring page.

First look, all you have to do to set up is fill out two fields.

Has pop-up instructions for first time users.

Better integration across mobile devices.

Helped 5 million people in 120 countries.

Mainly uses blue of theme color and adds green to important buttons or areas of interactive focus.

Uses color and shapes to create visual pace.

Has a lot of written content to help sell this product to the users point of view.

1. Competitive Analysis and Strategy 1.1 Competitive Audit 1.1.2 FreshBooks

QuickBooksquickbooks.intuit.comHeadquartered in Mountain View, CA. Develop six refreshed Operating Values; Integrity Without Compromise, Delight Customers, Its the People, Innovate and Improve, Own the Outcome, We Care and Give Back.

Note WorthyUses a lot of white space

Takes longer to get set up in program but has nice custom informational data in your industry.

Application is set up using left column menu items as a navigation.

Main items in dark menu while there information has background color of white and colored accents

Mainly uses white as theme color and adds deep blue to important buttons or areas of interactive focus.

Uses a column and grid system as a form of visual movement

Has a lot of visual graphics and shapes to help user decipher the information.

1. Competitive Analysis and Strategy 1.1 Competitive Audit 1.1.3 QuickBooks

Xerowww.xero.comHeadquartered in San Francisco, CA. Xero is making small businesses better by saving time on back-office processes and giving their advisors the ability to provide higher-value, higher-impact services. Note WorthySlick and minimalistic deign.

Fast set up. Just sends email then you create password.

Blue and white is main color.

Sign up action button is green.

Uses a traditional dashboard layout for user experience.

Very minimalistic but doesnt have a lot of appealing navigation as the website itself.

Website seems more user friendly than application.

1. Competitive Analysis and Strategy 1.1 Competitive Audit 1.1.4 Xero

1. Competitive Analysis and Strategy 1.2 Creative Brief

Company Objective

What is the company trying to achieve with a new identity?Robust bookkeeping capabilities, specifically designed for freelance

designers, photographers, and illustrators. Accounting Solution Geared For Designers

Target Audience

Who may be the likely audience for this company?A plethora of freelance designers, including but not limited

to; graphic designers, user experience/interaction designers, photographers, illustrators, information architects, and small business owners.

Key Message

What general message(s) does the company want to convey?Peace of mind in navigating and record keeping coupled with the

philosophy of great user experience design, reflecting the abilities and comprehension of the targeted pool of users.

Tag LineDesign More, Calculate Less

Challenges/Opportunities

What will set this identity apart from the rest?With todays technological and demographic trends a flat world

is developing and the presence of smart mobile devices expanding. This provides us insights for opportunities of growth and distinct features by providing a user experience that is flexible across multiple devices and an instant set up process.

We will also be set apart by our websites design and web application complimenting each others elegance and finesse of operating controls.

Competitive Landscape

What can we learn from the competitors?According to Intuits Form 10-K, We face intense competition in

all of our businesses, both domestically and internationally. Some of our existing competitors have significantly greater financial, technical, and marketing resources than we do. In addition, the competitive landscape can shift rapidly as new companies enter markets in which we compete. This is particularly true for online and mobile products and services, where the barriers to entry are lower than they are for desktop software products and services. To attract customers, many online and mobile competitors are offering free or low-priced entry-level products which we must take into account in our pricing strategies.

We learn the competition attracts customers with paralleled techniques; implementing pricing strategy, cross platform capabilities, and online marketing methods. They also offer similar features and every single one of them claims to be the #1 accounting solution for small businesses.

Voice/Personality

How should the company be perceived?Built for the designer in mind. This is a user friendly bookkeeping

software at its simplest, artistically reflecting and demonstrating design laws and principles.

Emphasis on Balance!

Balanced

Symmetrical

Aligned

Consistent

Mirror Image

A-Symmetrical

Half

Behaved Ones ConductNice or NicelyGood Person

WorksPolite

Act/Actions

Equal

IdenticalMatched

Unbiased

NeutralLikeProportionate

Calculation

HealthyFood

Exercise

Active

Endurance

Honest

EthicalRighteousTruthfulReliable

Virtuous

Money

Cash

Funds

CapitalProts

GoldSuccessGreen

GroundedEarthReason

Settle

FairCredit

ChildrenLawful

JustHonorRight

EarnedWarranted

Appropriate

Fitting

UnbiasedPrejudiceDetached

Objective

Impartial

Even

Numbers

Math

similarParallel

Scale

Order

Ration

HierarchySizeScopeMagnitudeDimensions

Extent

Color

Emotion

Portrayal

AccentsMovement Feel

Mood

Psychology

Design

SketchPatter

Draw

Plan/Plans

Mock-Up

StyleGoal

PurposeAim

Composition

Representation

Proximity

Both SidesGood vs. EvilUnderstandPerspective

Coin

UniformityTogether

Consistency

Harmony

LoveCharityBeauty

Creative

Reasonable

LogicalAcceptable

AdequateValid

SaneSound MindStable

PracticalRational

Common Sense

PurposeThis purpose of this mind map was to identify

concepts and terms to help break out of congitive biases. The exercise provide more inciights into what is attached and assoicated with the concept and word Balanced. Moving from the ideas of good and evil, to design principles.

2. Initial Sketches/Tone & Manner 2.1 Word Map

2. Initial Sketches/Tone & Manner 2.2 Identity Sketches (x30)

Identy MarksAfter developing the first batch of sketches,

and extending the mind map, more ideas began to stir up. I am a big fan of typography and the power behind it. But mixing it with shapes, concepts, and other related material unlocks more personality to a companies identity.

2. Initial Sketches/Tone & Manner 2.3 Identity Sketch Selections (x5)

B Color WheelDuring the mind

mapping, I assocated Color, and emplimenting a Color Wheel in the form of a small case b will portray appeal to designer and it represents balance and type.

Smooth Pie ChartBalancing the books

involves math and calculations. A beautifully designed pie chart can be the main logo and the all the letters with a counter element in the typeface will poses this logo within it.

Analytic BowlsMaking the b and

the d have analytical measuring tool to form the bowl of the beginning and ending letter. This demonstrates calculating and understandable tools as well as providing a symetrical logo. For an example, look at the picture above.

3 Circled Balance ScaleThe idea is using

a seesaw concept to demonstrate balance. There will be three main circles that will help emphasis the visual composition. Circles would be made from the bowls of the typeface.

Venn DiagramVenn diagrams

can be used to help organize information logically. Balanced is about organization and caculation. This will help demonstrate the capabilites of what it does. It will also show thinking out of the box and into a circle.

2. Initial Sketches/Tone & Manner 2.4 Tone and Manner Explorations (x2)

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

The user experience, as well as the identity, should convey comfort and agression, along with an organized and clean design with complimentary reds, blacks, and whites.

Descriptive AdjectivesConfident, Welcoming, Meticulous, Artistic, QuickA

veni

r N

ext

Reg

ular

& B

old

Lora

Reg

ular

& B

old ABCDEFJHIJKLMNOPQRSTUVWXYZ

abcdefjhijklmnopqrstuvwxyz1234567890

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

2. Initial Sketches/Tone & Manner 2.4 Tone and Manner Explorations (x2)

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

The idea that should be portrayed is some of the simplicities of life, like slipping on a shoe, pealing a orange, smelling a flower, or swiping a ui. Integrating a system with that kind of simplicity.

Descriptive AdjectivesCreative, Energetic, Efficient, Pleasant, YouthfulC

oo

per

Std

Ave

nir

Nex

tRe

gul

ar &

Bo

ld ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

3. Identity Refinement 3.1 Digital Logo Mocks

BALANCE D BALANCED BALANCED BALANCED

balanced

balancedbalanced

balanced

3. Identity Refinement 3.2 Vectoized Logo Iterations

Various Explorations

balanced

3. Identity Refinement 3.3 Final Logo Iterations

Main 3 Color CombinationThis is our primary color scheme and color layout used most often.

Light 2 Color CombinationUse when you want to promote our mobile app.

Dark 2 Color CombinationUse only when situations call for it. In other words, use it sparingly.

Black and White Color Combination Use only when situations call for it. In

other words, like a b/w theme.

Archetype

What does he/she look like?The typical look of a stylish and geeky appearance. Outgoing personality with a touch of odd behavior. Both sexes care about looks, but seek more of digital principles of design, rather than the realm of fashion

principles of design. The typical Silicon Valley style.

What does he/she care about?This person cares about efficiency and style. They love

appealing user interfaces, but they must operate in a user

friendly manner. They think the UI must never compromise

the UX. Where does he/she work?This is a self employed person, doing freelance graphic

design work. Has clients from local referrals of small

businesses to a few corporations. What does he/she do for fun?Play and interact with new technology. They love movies,

tv shows, and photography. They spend time researching

technology for fun and hang out with friends at local

venues. What does he/she want from this brand?

The ability to organize their financial in a way that reflects

their knowledge in UX and UI so that they will be impressed

with this software and company that they find it an

inspiration, instead of thinking of ways to fix it.

Voice

I want my brand to make people feel safe and inspired.

Security and beautiful designs makes me feel this way. I

want people to look once and keep looking, out of how

awesome it looks when they come into contact with my

brand.Three words that describe the brand are modern ,

slick , and appealing. I dislike brand voices that sound too

formal. Interacting with my clients and potential clients

makes them and I feel comfortable.

Brand Voice:

Informal, Straight-forward, & Feature-focused.

The Company will refer to itself in the first Person.

How technical should the language be? It will be in terms of

the target audience. The company name will be one word.

How should it be capitalized? All caps for the logo, but

regular capitalization will apply to create a traditional flow

of text.

Voice/Personality

How should the company be perceived?

Balance the crap out of your work.

4. Brand Voice and Visual System 4.1 Brand Voice

4. Brand Voice and Visual System 4.2 Visual System

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

Regular

Regular

Bold

Bold

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

Avenir Next

Lora

CMYK (33, 8, 94,0)RGB (182, 198, 66)HEX #b6c642

CMYK (19, 13, 14, 0)RGB (205, 207, 208)HEX #cdcfd0

CMYK (0, 0, 0, 0)RGB (255, 255, 255)HEX #ffffff

CMYK (71, 2, 12, 0)RGB (0, 186, 216)HEX #00bad8

CMYK (73, 57, 59, 42)RGB (59, 71, 71)HEX #3b4747

CMYK (8, 6, 6, 0)RGB (230, 231, 232)HEX #e6e7e8

Grey Green

Ultra Light Grey

Apple Green

Light Grey

White

Light Blue

PRIMARY

SECONDARY

4. Brand Voice and Visual System 4.2 Color

CMYK (33, 8, 94,0)RGB (182, 198, 66)HEX #b6c642

CMYK (19, 13, 14, 0)RGB (205, 207, 208)HEX #cdcfd0

CMYK (0, 0, 0, 0)RGB (255, 255, 255)HEX #ffffff

CMYK (71, 2, 12, 0)RGB (0, 186, 216)HEX #00bad8

CMYK (73, 57, 59, 42)RGB (59, 71, 71)HEX #3b4747

CMYK (8, 6, 6, 0)RGB (230, 231, 232)HEX #e6e7e8

Grey Green

Ultra Light Grey

Apple Green

Light Grey

White

Light Blue

SECONDARY

4. Brand Voice and Visual System 4.4 Typgoraphy

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

Regular

Regular

Bold

Bold

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

ABCDEFJHIJKLMNOPQRSTUVWXYZabcdefjhijklmnopqrstuvwxyz1234567890

Avenir Next

Lora

4. Brand Voice and Visual System 4.5 Photography/Illustrations/Diagrams

5. UI and Brand Extension 5.1 App Icon

512 pixels

120 pixels

60 pixels

29 pixels

16 pixels

5. UI and Brand Extension 5.2 Iconography

$

5. UI and Brand Extension 5.3 Digital Ads (3)

Accounting Solutions for the Graphic Designer

Accounting Solutions for the

Graphic Designer

Everything you need to run your Design Business

Free Trial

Accounting Solutions for the Graphic Designer

5. UI and Brand Extension 5.4 Marketing Website