JOSHUA VANDER KLIPP UX UI BRANDING
BINDER Medical Communication App M OT I VAT I O N
Caring for a child with special needs is overwhelming.
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
D I S C I PL I N E
UX / UI  Branding CLIENT
Independent Start Up AU D I E N C E
Doctors, therapists, and parents who care for children with special needs. O B J EC T I V E
To create a platform to easily share, store, view, edit, and collaborate on medical documents and facilitate better communication between medical professionals and parents of special needs children.
PRO B LE M
Parents are the middle man of most communications Poor records management Little ready access to important documents Feelings of inadequacy and hopelessness
SO LUT I O N
Binder creates a system of three-way-communication between parents, doctors, and therapists to enhance the care given to children with special needs. Binder accomplishes this by keeping documents and communication records related to a child’s care organized and accessible to all parties. M E D I CAL PRO FES S I O N AL S
Doctors and therapists have ready access to updated and clear records for each special needs patient. This will allow for not only more rapid and accurate care, but improved collaboration between medical professionals, thereby providing better care. PA R E N T S
Parents benefit by having all documents, records, and correspondence in a single, easy to use and secure interface. They can communicate with medical professionals and track the progress of test results and child development as well. Improved communications with medical professionals will also result in less time spent with paperwork, and more time with their child.
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
The right care, to the right child, at the right time.
N OTIFICATIO N S
DO C TO R S
Shows the number of new additions to a child’s care
Our research showed that doctors and therapists use
profile at a glance.
tablets to enter and view information for the majority of their patient care. They begin the experience with a secure login screen and are then shown a notification screen quickly letting them see which child has had updates and can select a profile based on an easily recognizable profile picture. Once selected, a child’s LOGIN S CREEN
profile displays an activity feed with the ability to add information and collaborate with other doctors and parents on information.
M ORE THAN A NAM E
In an effort to humanize an often sterile environment, profile pictures are used to make the experience more personal and faster. A face is more readily recognized than the text of a name.
PATIENT BIO
Due to the number of patients doctors often care for, a short bio tab is available when doctors need a brief refresher on basic patient information
M ESSAGE IN BOX
Collaboration between participants is organized in the user’s inbox for easy access.
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
DOCUM ENT UPLOAD
M ESSAGES , DOCUM ENTS , AN D N EW POSTS
A variety of information can be added to a patient’s record by selecting the appropriate categorization of information from the drop down menu.
TOPIC S ELECT
Structure, hierarchy, and a friendly face
PA R E N T S
M OBILE EXPERIEN C E
Based on our research we concluded parents use two
For more rapid and convenient updates on a child’s
devices when they wanted to view information about
health, mobile considerations were made to improve
the health of their child. Computers are ideal when
functionality at the reduced screen size.
one wants to carefully read information and research. Phones are better suited for quick updates while on the move taking care of children.
J OS H UA VAN DE R K L I PP H E LLO @J OS H UAV K .C O M
PA R E N T USE
We found parents would use a computer more than a tablet. Often parents with special needs children will spend many hours researching their child’s condition and looking for anything they can do to improve their situation. Binder is optimized for a full sized monitor to take advantage of the extra screen space and make more information viewable at one time. DES KTOP STATIC BIO
M OBILE DROP DOW N M EN U TEST RESULTS
Test results can often be very complex. Parents need a more visual and simplified view of data to be able to decipher the information and truly understand what is being reported and what to do with that information.
Always childlike, never childish.
B R AN D I N G
Binder is professional and secure, at the same time it is friendly and approachable. Research showed many parents and medical professionals still use binders to organize documents. Binders are common items and affirm Binder’s familiar nature. The brand mark is an abstraction of the three rings of a binder and represent parents, doctors and therapists. The dot represents the child, surrounded by multiple layers of care.
BIN DER GREEN
Doctors
PMS 381U CMYK
25 0 83 0
RGB
186 215 57
SO FT, ROU N D, FRIEN DLY
By using soft round shapes, the logo looks happy and friendly. Binder is childlike, but not childish.
Therapists
HTML BAD739
FRIENDLY
Parents
Child
THREE RIN GS
The three rings of the Binder logo are a representation of the three ring binders that are commonly used to
BIN DER VIOLET
hold medical documents for parents and doctors alike.
PMS 2583U CMYK
40 60 0 0
RGB
163 114 181
The three interlocking rings of the logo communicate a feeling of safety and confidence as Binder handles many sensitive documents.
HTML A372B5
CALMING
WOR DMARK
Open counters mimic the rings of the brand mark and the open rings of a three ring binder
BIN DER GRAY
PMS 425U
WOR DMARK
CMYK
25 18 15 51
The Rounded terminals of the type create a friendly
RGB
124 126 127
aesthetic and mimic the three rings of the brand mark.
HTML 7C7E7F
SAFE
ALTER NATE BRAN D MARK ORIENTATIO N
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
B R AN D GU I DE
To keep a strong and consistent brand identity across many platforms, this brand guide was created to act
INTRODUC TION TA BLE OF CONTENTS
BINDER BR A ND GUIDE
Binder is an application that improves the care given to children with special needs. It does this by facilitating clear communication between doctors, therapists, and parents while keeping
intro
5
logo
8
colors
12
each special needs child. This will allow more rapid and accurate communications between
icon
13
medical professionals, thereby providing better quality care.
typography
14
imagery
16
brand extensions
22
business system
26
digital experience
28
as the guiding force behind any branding decision.
documents related to a child’s care organized and accessible to all parties. Medical professionals will have ready access to up to date and clear medial records for
Parents will have the benefits of having all records concerning their special needs child in a single, easy to use interface. Better medical professional and educator communications will also negate the role of middleman for communications that parents often act.
4
5
BINDER BRAND GUIDE
BINDER BR A NDING
LOGO | PROPER USE
Branding is essential to the Binder experience. The focus of the identity is to be professional
The Binder logo is the most recognizable touch point of the brand and as such, is a very
Minimum clear space must always be maintained around the logo to maximize effectiveness.
Do not attempt any of the following.
and convey confidence, while displaying a friendly and comfortable human element. This
valuable asset. Proper use must be adhered to.
Nothing should ever intrude into this space.
1. Rotate any or all of logo
brand book was created to help communicate our branding guidelines to all parties and keep
LOGO | PROPER USE
LOGO | IMPROPER USE
The best ways to use the logo are over either a white or light background. If needed, the
the brand focused and strong. Too uphold these standards, strict adherence to this manual
Binder green or dark gray my be used behind it. If green, gray, or dark gray are used behind
3. Stretch or skew logo
must be upheld. It will ensure that the Binder brand maintains a consistent look and feel no
the logo, or color choices are limited, a knocked out logo should be used. These should be
4. Use logotype without brandmark
matter where it is seen.
done in dark gray, white, or the Binder green.
5. Impropper color changes
The stacked version of the logo is always preferable over the horizontal orientation, but in
2
3
4
6
7
6. Place logo on busy photography
applications where space is of concern, the horizontal orientation can be substituted.
POSITIONING STATEMENT
1
2. Add extraneous effects to the logo
7. Place logo on non brand colors
The right care to the right child at the right time CORE VA LUES
5
Communication Collaboration
1x
Peace of mind
6
7
BINDER BRAND GUIDE
8
9
BINDER BRAND GUIDE
BR A ND COLOR S
ICON | PROPER USE
T YPOG R A PHY | PRINT
Colors are what gives Binder it’s personality. These are the primary colors for all applications
The Binder icon is for use on mobile and desktop devices to identify the program. All of
Verlag is the chosen typeface for all printed pieces. Verlag is quiet, refined and versatile. It
of Binder branding. Use the appropriate color codes for their intended production methods.
the improper use criteria for the main logo still apply to the icon. Any changes other than
is easy to read, yet distinctive and offers a contrast to the Binder wordmark. Verlag light is
proportional scaling will hurt the brand unity. Also because the icon will only be on digital
preferred for body copy while other weights can be used in headlines, subheads, call outs, and
platforms, it should be seen in color only.
captions. Headlines should be set in either all caps or all lowercase.
BINDER G REEN
BINDER VIOLET
BINDER G R AY
PMS
381U
PMS
2583U
PMS
425U
CMYK
25 0 83 0
CMYK
40 60 0 0
CMYK
25 18 15 51
RGB
186 215 57
RGB
163 114 181
RGB
124 126 127
HTML
BAD739
HTML
A372B5
HTML
7C7E7F
12
Aa Aa Aa Aa Aa Aa 13
BINDER BRAND GUIDE
10
11
BINDER BRAND GUIDE
T YPOG R A PHY · WEB
IM AG ERY
Web applications should be set in Verdana and anytime Verlag is not available.
Images are an important part of the Binder brand because they give a healthcare application an uncommon human touch and create more personal relationships. Personal profile pictures are the main way users identify other participants in Binder. They should be well lit with little surrounding objects to distract from the persons face. Pictures
Aa Aa Aa Aa
VERLAG LIGHT
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz (.,:;!?$&@*) 0123456789 VERLAG LIGHT ITALIC
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz (.,:;!?$&@*) 0123456789 VERLAG BOOK
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz (.,:;!?$&@*) 0123456789 VERLAG BOOK ITALIC
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz (.,:;!?$&@*) 0123456789
should be cropped in a circle, close to the face, with a friendly smile displayed. VERDANA REGULAR
Other images should be similarly well lit and should typically incorporate a child with an
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz (.,:;!?$&@*) 0123456789
adult. Images of an adult giving care to a child is a prime example. This reinforces the brands dedication to children and quality care.
VERDANA ITALIC
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz (.,:;!?$&@*) 0123456789 VERDANA BOLD
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz (.,:;!?$&@*) 0123456789 VERDANA BOLD ITALIC
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz (.,:;!?$&@*) 0123456789
VERLAG BOLD
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz (.,:;!?$&@*) 0123456789 VERLAG BLACK
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz (.,:;!?$&@*) 0123456789
14
15
BINDER BRAND GUIDE
16
17
BINDER BRAND GUIDE
BR A ND EX TEN SION
Displaying Binder branding outside of just the application and typical office materials is a great way to increase brand awareness and is easily applied to many objects. The typical Binder IT professional is outfitted with one of two colored Binder polos and gray dress slacks. Black shoes are recommended. Transportation to sites for technical help and setup should be done in Binder small cargo trucks and are outfitted with all tools and supplies needed to service Binder customers.
18
19
BINDER BRAND GUIDE
21
22
23
BINDER BRAND GUIDE
BUSINESS SYSTEM
BR A ND EX TEN SION
Even though Binder is a digital system, printed documents are still needed. Business cards, envelopes, and letterheads on official Binder documents further a strong brand. Templates for these documents are available to all Binder staff and should be used in written communication between Binder staff and patients.
24
BINDER BRAND GUIDE
25
26
BINDER BRAND GUIDE
27
BRÄUSER Beer finder app
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
D I S C I PL I N E
UX /UI窶ィranding CLIENT
Independent start up AU D I E N C E
Craft beer enthusiasts, store and bar owners. O B J EC T I V E
Create a way to help craft beer enthusiasts locate the beer they want to purchase.
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
WIREFRAMES
Navagation through Bräuser is reduced down to the essentals for an easy to follow linear path. There are options for exploration through the detail pages, but for the most part the map and directions are the primary solution .
FAVORITES
S EARC H
Beer
Beer
Venues
Best Brown Ale
Centennial IPA
Dirty Bastard
Dragon’s Milk
Farm Hand
Founders Brewing Co.
Martha’s Vineyard
Furry Black IPA
North Peak Brewing Co. Black Indian Pale Ale
Search
Near Me
Settings
Siciliano’s
Favorites
Grand Rapids, MI Bottles: 103
Search
Near Me
Settings
Centennial IPA
Founders Brewing Co. American IPA
Dirty Bastard
Founders Brewing Co. Scotch Ale/ Wee Heavy
Double Trouble
Founders Brewing Co. Imperial IPA
Favorites
Breakfast Stout
Founders Brewing Co. American IPA
Grand Rapids, MI Bottles: 63
AVAILIBILITY
Founders Brewing Co. Session Ale
Grand Rapids, MI Tap: 16 Bottles: 23
Dirty Bastard Founders Brewing Co. Scotch Ale/ Wee Heavy IBU: 50 ABV: 8.5%
Venues
All Day IPA
Grand Rapids, MI Tap: 10 Bottles: 11
Brewery Vivant Saison Ale
Favorites
Brewery Vivant
DETAIL
Founder’s Brewing Co.
Kalamazoo, MI Tap: 22 Bottles: 16
Bell’s Brewing Co. Imperial Stout
Bell’s Brewing Co.
Founders Brewing Co. Scotch Ale/ Wee Heavy
Grand Rapids, MI Bottles: 46
Founders Brewing Co. American IPA
Beer
Venues
Art of the Table
Bell’s Brewing Co. American Brown Ale
DETAIL
Furry Black IPA
North Peak Brewing Co. Search Near Me Black Indian Pale Ale
ADD TO FAVORITES
INFO
tap
bottles
SIMILAR
LOCATE
COMMERCIAL DESCRIPTION Founders flagship beer. Dirty Bastard is an absolute beautiful beer to behold. Dark ruby in color and brewed with ten varieties of imported malts this beer continuously lives up to its reputation as a bold and powerful ale. Dirty Bastard is complex in the finish with hints of smoke and peat paired with a malty richness, finalized with a good bit of hop attitude. This beer “ain’t fer the wee lads”
Founders Brewing Co.
Grand Rapids, MI Tap: 16 Bottles: 23
Dirty Bastard
Favorites
Search
Near Me
Brewing Co. Founders Scotch Ale/ Wee Heavy
Settings IBU: 50 ABV: 8.5%
AVAILIBILITY
ADD TO FAVORITES
Settings
INFO
tap
bottles
SIMILAR
LOCATE
Backwoods Bastard
Under the Kilt
Loch Down
Founders Brewing Co. Scotch Ale/ Wee Heavy
Dragonmead Microbrewery Scotch Ale/ Wee Heavy
Arcadia Ales
Favorites
Search
Near Me
Settings
Martha’s Vineyard
Favorites
Grand Rapids, MI Bottles: 63
Search
Near Me
Settings
S ITE MAP
I know what I am lookign for.
I want to revisit information.
I want to explore. What is around me?
FAVORITES
SEARCH
NEAR ME
RESULTS LIST
RESULTS MAP
DETAIL PAGE
LOCATE
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
S EARC H
DETAIL PAGE
LOCATE MAP
SYLVANIA LIGHT BULB PACKAGE Packaging Redesign
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
D I S C I PL I N E
Branding窶ケackaging CLIENT
Osram Sylvania Inc. AU D I E N C E
Anyone looking for a high-end CFL light bulb. O B J EC T I V E
To create retail packaging for light bulbs that will protect and display them to increase shelf presence.
D I FFE R E N T I AT I O N
Osram Sylvania Inc. has scaled back their consumer based product lines in favor of supplying commercial lighting. Larger appliance companies and store brands have out priced Sylvania lighting in retail stores and have forced them off the shelves. Sylvania should not abandon household lighting markets, rather they need to update its packaging and brand to differentiate from other brand’s often monotonous packaging.
PACK AGE DIE LIN E
PACK AGIN G DEM O N STRATIO N
20 W
0 12 5EN S
LU
75
435
E ast
Wa
shin
g to
nS
t.
W
76 4 LY
immediately and engage the viewer. 2 INSTA N T- ON & DIMM A BLE BULBS
WARM WHITE 4500K
N TO
A new and bold package design would catch the eye
IA
4 12
below, illustrates the lack of variation in packaging.
AN YLV MS 3 91 RA OS Y 40 er, K est inch
. UL B IN C HTB 0. L IG 1. 8 0
29
on the shelf first. An average store display, as seen
1 t
C os
EN
ng
O ND PA .GN UP A IT E V IS N C L E A O
58
hti
y es s h tn nerg Brig earl y E Y E s t. L ife Bulb y Used rg E ne
C s men 9 $ 1.8 ears y 1 1 att s 20 w
lu 250
EM
Lig
are made frequently based on simply what one finds
s
56
with no benefit for one bulb over another. Purchases
C
t Fa c
Y UR RC N T IO ME MA LE IN S R INFOISRPOS A B TA FO F E D L N F A O S V /C DE
AC
Most light bulbs are viewed as only a consumer goods
FL
TT WAS C EN T
AN
(1.8
43
20
IN C
TT WA
L RP
MARKET ANALYS IS
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
M
FO
20 WAT T MICRO - MINI CFL
0 0. 5
4 4 .4
828
)
C O N T R AST
A loud shelf presence by being quiet and dark.
HIGH VISABILIT Y WAT TAGE
HAN GIN G DIS PLAY TAB
LIGHT TEM PRATURE IN DICATOR
WEST MICHIGAN GRAPHIC DESIGN ARCHIVES DPC Client Project M OT I VAT I O N
West Michigan has a rich design history and without immediate preservation, it will be lost.
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
D I S C I PL I N E
UX /UI  Information Architecture CLIENT
Barbara Loveland & Linda Powell AU D I E N C E
Design professionals and students. O B J EC T I V E
Create a digital archive of West Michigan based design for the purpose of increasing the accessibility of the area's design and increase awareness of the work.
ABOUT T H E C L I E N T
Nationally recognized graphic designers and educators Barbabra Loveland and Linda Powell, both identified the need to gather, document, preserve, and share the best examples of West Michigan area design. This includes work commissioned, created, and produced by individuals and organizations in West Michigan. PRO B LE M
From traditional print and paper to furniture, the West Michigan area sports a history of producing some of the best design in the world. What is concerning is the lack of preservation for these bodies of work and as many older designers continue to age, we risk losing the work for good. It is not uncommon for great works to be stored in boxes in a designer's home basement. There is no better alternative for most designers and their work is easily damaged or simply thrown out. SO LUT I O N
A digital archive would give the work a place to live and be preserved, but also become a valuable resource for the design community and the general public.
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
W H O W I LL USE T H E A R C H I V E ?
Before design and development of a site could begin, we narrowed our focus on who the archive would be used by and what there needs and motivations for the archives would be.
PRIMARY FRO NT EN D S ITE US ERS
DES IG N PRO FESS IO NAL
DES IG N EDUCATOR
RETIRED DES IG N PRO FESS IO NAL
DES IG N STU DENT
Inspiration
Enrich classroom material
Discovery
Inspiration
Learning
Collect design resources
Re-live bygone techniques
Learn history of design
See famous works
Events to educate students
View work done when he started his career
Log volunteer hours
Technique exploration
Space to hold classes
Explore older West Michigan design
Technique exploration
Meeting place
Technique exploration
CO NTENT MANAGERS
ARC HIVES ADMIN ISTRATOR
ARC HIVES VOLU NTEER
Preserve and showcase design from West Michigan
Volunteer Hours
Create a resource for designers
Networking
Upload work and manage archive operations.
Learn about design
Work space
PRO J EC T GOAL
The indicator of sucess for this project was weather or not it woul dbe a reseorce for thedesign community. The experiance was designed for exploration and the specific location of information. This reseorce is at its most valuable when it fits seamlessly into the lives of designers as a part of their creative process.
ARC HIVES S ITE MAP
Home & Explore Our Story and Contact
Get Involved
Filtered Project Search ProjectProject Search Results Result List Result List
Project Detail
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
NURISH Eco-friendly Cleaning Product Line M OT I VAT I O N
Being “less bad”, is not the equivalent of being good.
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
D I S C I PL I N E
Branding CLIENT
Proctor & Gamble AU D I E N C E
Parents with children and environmentally conscious adults in their twenties and thirties. O B J EC T I V E
Create a brand identity system for a line of household green cleaning products for Proctor & Gamble.
AUT H E N T I C G R E E N
Being “less bad” is not the equivalent to being good. This was the catalyst for the Nurish brand. It is not enough to have a less harmful effect on health and the environment than the competition. These cleaning
S HAPE
products are made from cleaners, scouring agents,
The organic shape of the mark affirms the products
and plant extracts in lieu of harsh chemicals so that
natural ingredients and the slight egg shape subtly
the resulting product is no more dangerous than the
suggests the notion of nourishment
food anyone would have in their pantry. M I S S I O N S TAT E M E N T
To provide for every household, the highest quality and most effective all natural cleaning supplies that can improve the environment once they have fulfilled their purpose and are disposed of. C R A DLE TO C R A DLE
The research for this projects started with the highest standard for sustainability, Cradle to Cradle. Nurish is made in a way that improves the environment when it enters back into the biological cycle by enriching compost-able paper board with nutrients for the soil and including enzymes that break down the materials. BIOLOGICAL
TECHNICAL
NAM E
Nour • ish : to cause (something) to develop or grow stronger. The name Nurish was chosen because of the way it improves the environment when it is disposed of. The incorrect, yet still phonetically correct, spelling of nourish catches the viewer’s eye and interest quicker than if spelled correctly. It also gives the brand a more unique character and personality.
COLOR
Green is an obvious choice for environmentally friendly products but this green is softer, friendlier, and is more easily identifiable because of its unique hue than the typical bright greens used on other environmentally friendly products.
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
GLASS
PAPERBOAR D
Unrefined glass is one of the most highly recyclable
Compostable paperboard with added nutrients to help
and safe materials available currently. Glass is almost
enrich the soil when it decomposes. Enzymes can be
100% recyclable with little to no waste in the process.
added as well to the paperboard that break down the
This is a benefit no plastic can match. There is also no
packaging faster.
need for only one color of glass or clarifying processes to make traditional clear glass and more kinds of glass can be recycled into Nurish containers.
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
TEX T W EIGHT PAPER
9 " X 12 " ENVELOPES
BUS IN ESS CAR D FRO NT
BUS IN ESS CAR D BACK
# 9 POLICY ENVELOPES
Neenah Environment
Neenah Environment
Neenah Environment
Neenah Environment
Neenah Environment
PC 100 Natural
Desert Storm
PC 100 Natural
Desert Storm
Desert Storm
24W
80T
120DTC
120DTCT
80T
Vellum
Smooth
Vellum
Smooth
Smooth
Henr y Muller CR EATIVE DIR ECTOR
3526 Main St NE Meemic New York 65 4 82
555-3946 phone 555-3945 fax
3526 Main St NE Meemic New York 65482
3526 Main St NE Meemic New York 65 4 82
555-3946 phone 555-3945 fax
hi@nurish.com
nurish.com
henr y@nurish.com
THE TIE BAR Brand Re-staging
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
D I S C I PL I N E
Branding  UI/ UX CLIENT
The Tie Bar AU D I E N C E
Men 25 – 40 years of age who wear business attire or have the need to wear more formal dress occasionally. O B J EC T I V E
Redesign of The Tie Bar brand to better communicate quality and style to current Tie Bar customers and aid in brand expansion to new customers.
USE R PE R SO N AS
Before a new identity could be formed, research was done to help build a user persona to help typify the average Tie Bar customer. In order for a brand to be successful, it should resonate with its fan base.
BAS IC S
Male 25 – 40 years old College education Upper/ middle class High self-esteem Well dressed and groomed VALUES
Quality Heritage Craft Authenticity Individuality Culture Timelessness Bespoke Uniqueness Value Health Exploration Communication
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
B R AN D M A R K
The Tie Bar’s proposed brand relies on a badge shape that is not only more clean and refined than the old brand mark, it is also more modern and is distinctively masculine. The mark also is unique and unifying to the brand identity.
CURRENT BRAN DIN G
BRAN D MARK DEVELOPM ENT
PROPOS ED BRAN DIN G
B R AN D I DE N T I T Y
The Tie Bar’s new identity is designed to be versatile across many mediums and remains constant weather in full color, a reduced pallet, or small sizes.
T YPOGRAPHY
MAIN BRAN D MARK
Akzidenz-Grotesk BQ
Aa Bb Cc Dd Ee Ff Gg Hh 1 2 3 4 5 6 7 8 9 0 . ? ! * ; “” 7 /12 AKZI DENZ- GROTES K BQ LIGHT
7 /12 AKZI DENZ- GROTES K BQ M EDIUM
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
adipiscing posuere mi id aliquam. Mauris et sapien porta, cond
adipiscing posuere mi id aliquam. Mauris et sapien porta, cond
imentumous neque nec, auctoro seme. Nunces tincidunt varius
imentumous neque nec, auctoro seme. Nunces tincidunt varius
luctus. Nam iaculis eu tellus sit amet venenatis. Pellentesque
luctus. Nam iaculis eu tellus sit amet venenatis. Pellentesque
eget mollis dolor. Quisque augue ipsum, faucibus sed euiseds
eget mollis dolor. Quisque augue ipsum, faucibus sed euiseds
mod eu, scelerisque vel turpis. Nunc dignissim, ligula at blandit
mod eu, scelerisque vel turpis. Nunc dignissim, ligula at blandit
placerat, leo nulla egestas nulla, tincidunt feugiat diam odio vitae
placerat, leo nulla egestas nulla, tincidunt feugiat diam odio
tortor. Praesent orci ante, tempor ac mi in, mollis posuere ligula.
vitae tortor. Praesent orci ante, tempor ac mi in, mollis posuere
7 /12 AKZI DENZ- GROTES K BQ BOLD
7 /12 AKZI DENZ- GROTES K BQ SUPER
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
adipiscing posuere mi id aliquam. Mauris et sapien porta, cond
Nulla posuere mi id aliquam. Mauris et sapien porta, cond
imentumous neque nec, auctoro seme. tincidunt varius
imentumous neque nec, auctoro seme. Nunces tincidunt
luctus. Nam iaculis eu tellus sit amet venenatis. Pellentesque
varius luctus. Nam iaculis eu tellus sit amet venenatis.
eget mollis dolor. Quisque augue ipsum, faucibus sed euiseds
Pellentesque eget mollis dolor. Quisque augue ipsum,
mod eu, scelerisque vel turpis. Nunc dignissim, ligula at
mod eu, scelerisque vel turpis. Nunc dignissim, ligula at
blandit placerat, leo nulla egestas nulla, tincidunt feugiat
blandit placerat, leo nulla egestas nulla, tincidunt feugiat
diam odio vitae tortor. Praesent orci ante, tempor ac mi
diam odio vitae tortor. Praesent orci ante, tempor ac mi
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
REDUC ED S IZE BRAN D MARK
BRAN D COLORS
PANTO N E
PANTO N E
PANTO N E
PMS 5405 U
PMS 547 U
PMS 432 U
C MYK
C MYK
C MYK
51 12 0 47
100 17 0 73
69 55 46 13
RGB
RGB
RGB
91 111 128
65 88 102
103 108 115
HTM L
HTM L
HTM L
# 5B6F80
#415866
# 676C73
BUS I N ES S SYS T E M
B R AN D I DE N T I T Y
As a online exclusive retailer, the shipping container functions as the main physical touchpoint for most customers. As such the containers needed to be unique and show elements of craft and quality while remaining functional.
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
W E B SYS T E M
The Tie Bar website has been redesigned to reflect
MODERN STYLE Bradley Cooper shows off the seasons latest patterns and styles in the most recent edition of GQ
NEW FOR SPRING
NEWS
DWAYNE WADE
JESSE T YLER FERGERSON
NEW ACCESSORIES
New for The Tie Bar, tool for every man to put on the final polish.
the refined and clean aesthetic consistent with the brand identity with consideration for responsive use.
E S SE N C E GU I DE
4
T H E T I E BA R IS . . .
5
To maintain consistency, a brand identity and essence guide were produced to maintain the effectiveness of the brand across many platforms.
CLASSIC STLYES
C L ASS I C
Trends shall be left by the wayside. The Tie Bar speaks to timeless and time-honored practices.
CLASSIC MATERIALS
F I RS T S T E PS
10
F I RS T S T E PS
CRE ATING RESONANCE
THE TIE BAR S.W.O.T. ANALYSIS
11
BR AND GUIDE
THE TIE BAR BASICS
CHARACTERIZATION
This s.w.o.t. analysis chart is a honest look at the
The majority of current customers of The Tie Bar con-
Male
Strengths, Weaknesses, Opportunities, and Threats
sist of men aged 25 — 40. The Tie Bar brand aligns
25 — 40 years old
that face The Tie Bar. It separates research into inter-
itself with the values held by this demographic and
College education
nal issues (strengths and weaknesses) and external
their needs for more than a product, but a lifestyle.
Upper/ middle class
STRENGTHS
issues (opportunities and threats). This is what drives
high quality product
brand positioning and is what a strong brand identity
massive product selection
is built upon.
WE AKNESSES
High self-esteem
By understanding general characteristics shared by
Dresses well
the majority of The Tie Bar customers, the brand
exceptional perceived value
Well groomed
creates resonance with its core followers.
strong brand identity
CLASSIC METHODS
VALUES
affordable
Quality
high customer satisfaction
Heritage
accessories
can be viewed as cheap
personal grooming products
lower priced alternatives
Individuality
knockoffs
Culture
Craft Authenticity
style blog physical promotional pieces
Timelessness Bespoke Uniqueness Health Exploration Communication BRAND IDENTITY
OPPORTUNITIES
THE TIE BAR
BUSINESS SYSTEM THRE ATS
26
27
BR AND GUIDE
THE TIE BAR
BR AND GUIDE
CONSISTENCY ACROSS PLATFORMS
Even though The Tie Bar is an online retailer, printed documents are still needed. Business cards, envelopes, and letterheads on official documents further a strong brand.
THE TIE BAR
JOS HUA VA ND ER K L I P P H EL LO @ JOS HUAV K .C O M
BR AND GUIDE
THE TIE BAR
BR AND GUIDE
BR AND GUIDE
16
BRAND IDENTITY PROPER COLOR USE
17
PERCENTAGES
Use the approximate values provided for all printed and web material for The Tie Bar. Clean, white, and simplified should be the ultimate goal.
80%
BRAND IDENTITY PRIMARY LOGO
10%
18
BRAND IDENTITY PRIMARY LOGO
THE TIE BAR
5%
3% 2%
19
BR AND GUIDE
THE TIE BAR
THE TIE BAR LOGO
The primary logo for The Tie Bar is the main brand touchpoint and most recognizable aspect of The Tie Bar brand. The preferred method of use is on a white or very light background. Alternately, a very dark background can be used or single color versions when the need for higher contrast arises or there is lack of multiple colors available.
BRAND IDENTITY IMAGERY
THE TIE BAR
28
BR AND GUIDE
THE TIE BAR
IMAGE TREATMENT
Images used in all brand material should abide by a few basic principals. Composed well Relevant subject matter Personality Tells a story Simplified Clear message Image subject matter should usually revolve around well dressed men and the activities they engage in. It should be able to tell a story and have personality as opposed to stock photography. The subject should look like a unique character and usually engaged in an interesting activity and be dressed well. Lastly, the image should be simplified and clear. Wide angled shots without a clear focal point or clear story behind the image should not be used. Black and white photography is not required but recommended in situations where there is not a need to show a product’s color. Selective color can also be used if it is to draw in and focus attention. Large full bleed images recommended.
THE TIE BAR
BR AND GUIDE
BR AND GUIDE
BR AND GUIDE