brad, Brand
& Brands
GWT Con 2015
Manon Gruaz
What to do?
What is a Brand?
A Brand
is what you feel
about a product,
a service or a company.
What is a Brand?
How to create
a Brand?
How to find and
define your difference?
I. Why do you exist ?
Why do you do what you do?
II. How do you do it?
III.What are you good at ?
How to create a Brand?
A Brand,
is like...
The goal
of all brand is ...
to express
in a clear and authentic way,
its unique personality
in every details.
the goal of all brands
Create the mark
of the Brand
CONSISTENCY
The Brand
and the UI
What if your website
or UI were a person?
Who would he be?
And what would his message be?
The Brand and the UI
The Brand and its personality are expressed through
Create an assertive and
authentic persona of design,
here are the components:
The Brand and the UI
➔ Overview :
What makes your brand unique ?
➔ Traits :
The picture of a person (someone famous,
or that your team knows well; it could even
be a mascot) that represents the brand
➔ Brand features :
List 5 features that define your brand
and 2 that you absolutely want to avoid
Components
➔ Voice tone:
If your brand could speak,
what would it say and how ?
➔ Visual lexicon:
Glimpse of colors, typography
and visual style
➔ Methods of commitment:
Describe the methods of emotional
commitment to support
your design persona and create
an outstanding experience
Components
Design Persona
Design Persona - Arcbees
Brand’s name Arcbees
Overview
The bee is the mascot of Arcbees.
-
The bee is a confident
and strong architecture master
with a furious desire to reach
for the stars
Its shape is both simple and logic.
It expresses the quest towards
efficiency, optimization
and smart architecture.
These three are at the core of all
Arcbees' products and projects.
Design Persona - Arcbees
Brand Features
The bee is, like all the bees,
a teamworker.
Bees help one another to make
the impossible happen.
-
It is playful, fun and doesn’t take
itself too seriously.
Design Persona - Arcbees
The bee is a code fanatic
and can't stop talking about it.
-
It is logic, devoted but it is not
boring.
Design Persona - Arcbees
Simplicity lover, it resolves
complex situations,
finds solutions to help developers.
-
The bee is different from
the «real» bees: no hierarchy
and no stings!
Design Persona - Arcbees
Voice / Tone
The bee likes to have fun while
remaining serious...
It loves puns, probably too much!
Design Persona - Arcbees
Visual lexicon
Message
BEE THE BEST
-
As programmers, our products
are helpful because they make
coding easy, making
your experience as a user enjoyable
and optimizing your time.
Design Persona - Arcbees
Commitment
methods
The Brand and the UI
SINGULARITY
Our website surprises
and breaks the rules of
the technological industry
Used to (too much) content in a world
where design is put last,
programmers are pleasantly surprised. Being technical, specialized
and beautiful is doable!
SIMPLICITY
The content and
its presentation are simple,
and color contrasts are strong
for an optimum readability.
Not too much words for non-experts
to understand but links to more complex
contents for advanced users.
ANIMATION
You don't need too much
to make people understand
the basics.
The fact that the bee is fun enables
the animation to be full of meaning
without needing a ton of words.
FLUIDITY
Please people
with a smooth browsing
A way of appeasing the technical
content's complexity and help people
project themselves in the products.
HUMOR
Numerous puns are part
of the website
-
The word "Bee" becomes a brand
tool and enables us to express
the funny and generous side
of our team.
To conclude...
The Brand and the UI
A poorly designed or thought-out interface
is the same as if you were going to a shop
where the staff is rude, unhelpful
and wants you to leave.
The Brand and the UI
« A Brand Is
[...] the product
of a thousand
small gestures. »
Michael Eisner, Former Walt Disney CEO
Manon Gruaz
LEAD DESIGNER,
BRANDING GODDESS & LOVING BEE
at Arcbees
+ManonGruaz
@manongruaz
THANK YOU
QUESTIONS?

GWTcon 2015 - brad, Brand and Brands

  • 1.
    brad, Brand & Brands GWTCon 2015 Manon Gruaz
  • 7.
  • 10.
    What is aBrand?
  • 12.
    A Brand is whatyou feel about a product, a service or a company. What is a Brand?
  • 15.
  • 19.
    How to findand define your difference?
  • 20.
    I. Why doyou exist ? Why do you do what you do? II. How do you do it? III.What are you good at ? How to create a Brand?
  • 21.
  • 26.
    The goal of allbrand is ...
  • 27.
    to express in aclear and authentic way, its unique personality in every details. the goal of all brands
  • 29.
  • 33.
  • 38.
  • 40.
    What if yourwebsite or UI were a person? Who would he be? And what would his message be? The Brand and the UI
  • 42.
    The Brand andits personality are expressed through
  • 44.
    Create an assertiveand authentic persona of design, here are the components: The Brand and the UI
  • 45.
    ➔ Overview : Whatmakes your brand unique ? ➔ Traits : The picture of a person (someone famous, or that your team knows well; it could even be a mascot) that represents the brand ➔ Brand features : List 5 features that define your brand and 2 that you absolutely want to avoid Components
  • 46.
    ➔ Voice tone: Ifyour brand could speak, what would it say and how ? ➔ Visual lexicon: Glimpse of colors, typography and visual style ➔ Methods of commitment: Describe the methods of emotional commitment to support your design persona and create an outstanding experience Components
  • 47.
  • 49.
    Design Persona -Arcbees Brand’s name Arcbees Overview The bee is the mascot of Arcbees. - The bee is a confident and strong architecture master with a furious desire to reach for the stars
  • 50.
    Its shape isboth simple and logic. It expresses the quest towards efficiency, optimization and smart architecture. These three are at the core of all Arcbees' products and projects. Design Persona - Arcbees
  • 51.
    Brand Features The beeis, like all the bees, a teamworker. Bees help one another to make the impossible happen. - It is playful, fun and doesn’t take itself too seriously. Design Persona - Arcbees
  • 52.
    The bee isa code fanatic and can't stop talking about it. - It is logic, devoted but it is not boring. Design Persona - Arcbees
  • 53.
    Simplicity lover, itresolves complex situations, finds solutions to help developers. - The bee is different from the «real» bees: no hierarchy and no stings! Design Persona - Arcbees
  • 54.
    Voice / Tone Thebee likes to have fun while remaining serious... It loves puns, probably too much! Design Persona - Arcbees
  • 55.
  • 56.
    Message BEE THE BEST - Asprogrammers, our products are helpful because they make coding easy, making your experience as a user enjoyable and optimizing your time. Design Persona - Arcbees
  • 57.
  • 58.
    SINGULARITY Our website surprises andbreaks the rules of the technological industry
  • 60.
    Used to (toomuch) content in a world where design is put last, programmers are pleasantly surprised. Being technical, specialized and beautiful is doable!
  • 61.
    SIMPLICITY The content and itspresentation are simple, and color contrasts are strong for an optimum readability.
  • 62.
    Not too muchwords for non-experts to understand but links to more complex contents for advanced users.
  • 63.
    ANIMATION You don't needtoo much to make people understand the basics.
  • 64.
    The fact thatthe bee is fun enables the animation to be full of meaning without needing a ton of words.
  • 67.
  • 68.
    A way ofappeasing the technical content's complexity and help people project themselves in the products.
  • 69.
    HUMOR Numerous puns arepart of the website - The word "Bee" becomes a brand tool and enables us to express the funny and generous side of our team.
  • 72.
  • 73.
  • 74.
    A poorly designedor thought-out interface is the same as if you were going to a shop where the staff is rude, unhelpful and wants you to leave. The Brand and the UI
  • 77.
    « A BrandIs [...] the product of a thousand small gestures. » Michael Eisner, Former Walt Disney CEO
  • 78.
    Manon Gruaz LEAD DESIGNER, BRANDINGGODDESS & LOVING BEE at Arcbees +ManonGruaz @manongruaz
  • 79.
  • 80.

Editor's Notes

  • #2 Hi everybody ! Now. we are not going to talk about technical stuff. Let me rather tell you a story about brad, Brand and Brands.
  • #3 this is brad
  • #4 brad is blue /// because everybody loves blue
  • #5 unfortunately, as you see, everybody else is blue
  • #6 So brad decided to claim that he is the best to be seen
  • #7 same again, everybody says that they are the best. That makes brad invisible. try to look for it
  • #8 So what to do?
  • #9 Brad has to become a Brand
  • #10 A brand above the others brands. A brand to rule them all
  • #11 But, what is a Brand?
  • #12 A Brand is something that you feel
  • #13 A brand is what you feel about a product, a service or a company...
  • #14 It is not a logo, a product, an ad, or a copyright
  • #15 When you see apple , what do you feel about it? Try to analyse your feelings. Those feelings are the Brand. It is the job of Brand Designers like myself, to create and make you feel those feelings.
  • #16 So… How to create a Brand?
  • #17 A Brand is a point of view
  • #18 It s a difference
  • #19 Because our brains tend to focus on contrasts and differences.
  • #20 so now, you gonna ask me : How to find and define your difference. This is not an easy task. but you have to do it. Let me explain.
  • #21 there are 4 questions you have to ask yourself : Why do you exist ? // Why do you do, what you do? // How do you do it? // What are good at? those questions are fundamentals. If you can’t answer those questions in a simple way, you haven’t found your difference.
  • #22 To help you find your difference, think like that : A brand is like ...
  • #23 a human being
  • #24 it has a name; a personality, a behavior, a vision, and a message
  • #25 you can like it // adore it // love it or hate it
  • #26 we can agree or not with what it says
  • #27 The goal of all brand is …..
  • #28 to express in a clear and authentic way // its unique personality in every details. Let me explain these 3 adjectives : Clear > If your Brand is not Clear nobody will understand its message. Authentic > If your Brand is not itself, If your Brand lies, // your user will figure it out, and will never trust you again. Unique > If your Brand is not unique, why a user will choose you ?
  • #29 look at starbucks, // where you can work with free wifi while drinking an overpriced coffee // they changed their coffee machines for silent ones. Customers started to complain that the coffee didn't taste the same and that it wasn't good anymore. The truth is, the machine and the coffee beans were exactly the same. You can see here that even a sound can be part of the experience of a brand.
  • #30 Now that you understand what is a Brand, and how to define it, let’s see how to create the mark of the brand
  • #31 take a Brand
  • #32 it expresses itself through a product; an ad; a website; a smartphone app, on TV and in stores
  • #33 but it has to do it the same way everywhere, in every details
  • #34 we call that the CONSISTENCY OF the BRAND
  • #35 look at apple, again The brand identity is so simple but powerful that you only need the symbol to know what it is and how it does what it does:
  • #36 every apple store you go in; you find that simplicity again. they invented their own way to sell their products, aligned with their difference.
  • #37 even in their packaging; it s a complete experience: that only apple gives you: the chill like when you open a christmas present, it’s magic, intuitive… beautiful.
  • #38 and they manage to apply that experience of this simplicity on their website.
  • #39 It looks obvious and so simple to apply this consistency, but it s not.
  • #40 people tend to forget that The consistency has to remain the same on the UI.
  • #41 To help you create a UI, you can ask yourself these questions :
  • #42 We call it a persona of design.
  • #43 The Brand and its personnality are expressed through 3 things : Visual design // Content // Interactivity
  • #44 it is like its ID
  • #45 To create an assertive and authentic persona of design, here are the components :
  • #48 So let me show you one example of Design Persona
  • #49 I’m going to tell you all about Arcbees's Brand
  • #56 the visual lexicon is made out of 3 basic colors just like a bee : yellow black and white. the design is simple and has to be playful.
  • #57 the message of the brand is very clear. We want you to bee the Best
  • #60 if you look at vaadin's and Sencha's websites, you can tell that we are a bit different.
  • #65 like on this page where we use animations to explain our working methods
  • #66 each pages content is illustrated with the bees that are put in context for a better understanding
  • #67 there are hidden content with little animations that lead you to little surprises to understand where we come from
  • #71 each employee / bee has its own profile where they put their own professional and personal achievments
  • #72 Do you wanna bee with us? your can rate your bee attitude with our little geeky game.
  • #74 Having an Authentic Brand Means User Engagement. Nothing less than that.
  • #76 a brand is like a plant
  • #77 you have to take care of it every day
  • #78 as micheal Eisner said :