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 Brief
2. 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 Refnement
3.1 Digital Logo Mocks
3.2 Vectorized Logo Iterations
3.3 Final Logo Iterations
4. Brand Voice and Visual System
4.1 Brand Voice
` 4.2 Visual System
4.3 Color
4.4 Typography
4.5 Photography/Illustrations/Diagrams
5. 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
Harvest
www.getharvest.com
Headquartered in NYC, its an independent and
proftable 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 Worthy
Set up as a wide layout
Super easy to set up. Just fll out six informational
felds 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 fow and movement.
FreshBooks
www.freshbooks.com
Headquartered 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 Worthy
Set 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 fll out two
felds.
Has pop-up instructions for frst 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
QuickBooks
quickbooks.intuit.com
Headquartered 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 Worthy
Uses 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
Xero
www.xero.com
Headquartered in San Francisco, CA. Xero is making
small businesses better by saving time on back-
offce processes and giving their advisors the ability
to provide higher-value, higher-impact services.

Note Worthy
Slick 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, specifcally 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, refecting the abilities and
comprehension of the targeted pool of users.
Tag Line
Design More, Calculate Less
Challenges/Opportunities
What will set this identity apart from the rest?
With todays technological and demographic trends a fat 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 fexible 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 fnesse 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 signifcantly greater fnancial, 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 refecting and demonstrating
design laws and principles.
Emphasis on Balance!
Balanced
Symmetrical
Aligned
Consistent
Mirror Image
A-Symmetrical
Half
Behaved
Ones Conduct
Nice or Nicely
Good Person
Works
Polite
Act/Actions
Equal
Identical
Matched
Unbiased
Neutral
Like
Proportionate
Calculation
Healthy
Food
Exercise
Active
Endurance
Honest
Ethical
Righteous
Truthful
Reliable
Virtuous
Money
Cash
Funds
Capital
Prots
Gold
Success
Green
Grounded
Earth
Reason
Settle
Fair
Credit
Children
Lawful
Just
Honor
Right
Earned
Warranted
Appropriate
Fitting
Unbiased
Prejudice
Detached
Objective
Impartial
Even
Numbers
Math
similar
Parallel
Scale
Order
Ration
Hierarchy
Size
Scope
Magnitude
Dimensions
Extent
Color
Emotion
Portrayal
Accents
Movement Feel
Mood
Psychology
Design
Sketch
Patter
Draw
Plan/Plans
Mock-Up
Style
Goal
Purpose
Aim
Composition
Representation
Proximity
Both Sides Good vs. Evil
Understand
Perspective
Coin
Uniformity
Together
Consistency
Harmony
Love
Charity
Beauty
Creative
Reasonable
Logical
Acceptable
Adequate
Valid
Sane
Sound Mind
Stable
Practical
Rational
Common Sense
Purpose
This 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 Marks
After developing the frst 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 Wheel
During 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 Chart
Balancing 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 Bowls
Making 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 Scale
The 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 Diagram
Venn 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)
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
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 Adjectives
Confdent, Welcoming, Meticulous, Artistic, Quick
A
v
e
n
i
r

N
e
x
t
R
e
g
u
l
a
r

&

B
o
l
d
L
o
r
a
R
e
g
u
l
a
r

&

B
o
l
d
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
2. Initial Sketches/Tone & Manner 2.4 Tone and Manner Explorations (x2)
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
The idea that should be portrayed is some of the
simplicities of life, like slipping on a shoe, pealing
a orange, smelling a fower, or swiping a ui.
Integrating a system with that kind of simplicity.
Descriptive Adjectives
Creative, Energetic, Effcient, Pleasant, Youthful
C
o
o
p
e
r

S
t
d
A
v
e
n
i
r

N
e
x
t
R
e
g
u
l
a
r

&

B
o
l
d
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
3. Identity Refnement 3.1 Digital Logo Mocks
BALANCE D BALANCED BALANCED BALANCED
balanced
balanced
balanced
balanced
3. Identity Refnement 3.2 Vectoized Logo Iterations
Various Explorations
balanced
3. Identity Refnement 3.3 Final Logo Iterations
Main 3 Color Combination
This is our primary color scheme
and color layout used most often.
Light 2 Color Combination
Use when you want to promote
our mobile app.
Dark 2 Color Combination
Use 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 effciency 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 fnancial in a way that refects
their knowledge in UX and UI so that they will be impressed
with this software and company that they fnd it an
inspiration, instead of thinking of ways to fx 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 frst 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 fow
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
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
Regular
Regular
Bold
Bold
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
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
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
Regular
Regular
Bold
Bold
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
ABCDEFJHIJKLMNOPQRSTUVWXYZ
abcdefjhijklmnopqrstuvwxyz
1234567890
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