Sta Travel Rebrand Style Guide

Digital Brand and Style Guidelines

Prepared by

Commercial in ConfidenceDigital style guide

Introduction

Guidelines are created to promote consistency across communications and protect brand equity by illustrating how the values of the brand can be communicated through every aspect of its visual language.

Brand Guidelines unify philosophy and ideology of the brand to promote internal understanding and motivation to communicate the brand meaning in the appropriate manner. Style Guidelines then go on to provide visual and organizational implementation guides for communicating the brand meaning in the most efficient way.

Consumers measure the credibility and commitment of a brand through how consistently it communicates its values. This document acts as the single authoritative point of reference to develop specific digital communications in line with the values of STA Travel.

Digital style guide Commercial in Confidence

Contents

1.0 STA Digital Proposition

2.0 Digital Users

3.0 Visual Language

4.0 Logo

5.0 Branded Touchpoints

6.0 Modules

7.0 Teaser Blocks

8.0 HTML Styling

9.0 3rd Party Template

10.0 Background Image

11.0 Typography

12.0 Colours

13.0 Country Navigation


1.0 STA Digital Proposition

The STA Travel Digital Proposition is purposefully designed as a platform on which to develop meaningful user relationships, digital brand communications and online sales.

Key areas of focus are:• Developdeeperlevelsofpersonalization.• Encouragecredibleusercontributions.• Maintainrelevanceandpurposethroughouttheuserjourneyon and offline.• Channelmeaningfultraffic.• Meetemerginguserexpectations,bothtechnologicallyandemotionally.• Communicateandconfirmvaluesbeyondprice.• Contextualizethebrand’spurpose.• ConsolidateSTATravelcontentintoasinglevoice.• Extendthebrandvisualidentityacrossdigitalfunctionality.

VisionTo shape the STA Travel brand into a single, integrated organization able to profitably dominate the world student and young adult travel market and become the leading brand of global travel to this audience.

Mission StatementSTA Travel creates opportunities for students and young adults and enables themtomakethemostoftheirtimeandexperiencetheworldface-to-face,inany way they choose.

Brand ValuesUltimately, STA Travel offers Global Citizens (and Free Spirits and Inertia Breakers who would classify themselves as such) encouragement and confidence to experiencetheworldface-to-face,overandoveragain.

Values Digital translationNewexperiences Encourageaspirations,inspireandenableaccessCollaborations Familiar and intelligent connectivityIndividuality User opted personalisationExpertise Sharedtechnology,knowledgeandaccessibilityResponsibility Open commitment


2.0 Digital Users

STATravel’stargetmarketbreaksdownintothreekeygroups:

• FreeSpiritswhoexperiencesomethingdifferentallthetime• GlobalCitizen’swhoabsorbotherculturesandareopentoinfluence• InertiaBreakerswhodosomethingdifferentandlookforreinvigoration

These groups share certain commonalities that focus digital attention:

• Aspiring-anexperiencegreaterthanthephysicalactoftravellingitself• Expressive-willinglyinteractandopenlyshareexperiences• Inclusive-wanttogetinvolved,contributeandtakeonresponsibilities• Unfamiliar-lookforreassuranceandconfirmation• Driven-bothbyemotionandasenseofpurpose• Digital-technologyisintegratedintheirlives,secondnature

Key Brand PillarsGlobal -imagesfromanywhereontheplanetIntheknow -insidersviewpoint,authenticratherthantouristFace-to-face -1stpersonviewpointIt’sallaboutyou -experienceratherthandocumentation

PersonalityUpbeat and radiating energyQuirky and confidentWith a point of view and sense of purposeWelcoming and interested in others

Tone of voiceFamiliar – warm and human – not sales talkResponsible –informativeandadvisory –notflippantOpen – honest and transparent – not hidden agendaSimple –directandexplanatory –notlingoInclusive – collaborative dialogue – not forced


3.0 Visual Language

TheSTATravelvisuallanguagestemsfromandrevolvesaroundthebrand’svalues:

Newexperiences,Collaborations,Individuality,Expertiseand Responsibility

The overall approach for brand communications in the digital space is a balance of user expectations,inspiringfunctionalityandavisualexperience.Theseelementsreinforcethebrand’spositionasapositiveandworthyenablerwithvaluestightlyinterwovenwiththoseof its target users.

Impacting first impressions primarily differentiates the brand from price driven web destinations and instantaneously communicates the values of the brand and its emotional connectivity. The 1st person viewpoint inspires, encourages and challenges the user to think bigger, investigate further and get more involved. Driving these emotions will increase the amount of time users spend on the site and therefore help the brand to build deeper and stronger relationships with users.


4.0 Logo

It’simportanttokeepthelogoclearofanyothergraphicelements.Toensurethiswe’veestablishedanexclusionzonearoundourlogotype.

Seebelowforanexampletreatment of the logo on the website.


5.0 Branded Touchpoints

Primary navigation as brand assets created out of the sites functionality communicates a unique userjourneythatreflectsthebrand’scommitmenttofunctionalityandusability.Owningfunctionalityinthiswaybecomesadirectexpressionofthebrand’scommitmenttowardsenabling users to make the most of their time whilst understanding their mind states.

Three key user mind states:

1. Search and book – focused approach with a clear idea of where, when and with who. As the primary activity module this communicates a streamlined path to getting what the user wants, meetingtheirexpectationsandthebranddeliveringonitspromises.

2. Be inspired–open-mindedapproachthatisfocusedonresearchandfree-wheelingthroughexperiencesandpossibilitiesratherthanclickingthroughoptionsandalternatives.

3. Explore the world – investigative approach to accessing information via specific key criteria.

4. Share your adventure – Module that allows visitors to view user generated content.


Branded touchpoints cont’d


6.0 Modules

Activity modules compartmentalize user mind states in much the same way as travel is planned and carried outbythebrand’susergroups.Thispromotesanddelivers increased usability through simplified choices and distinctive activities communicated through accentuated visual clarity.

Semi-transparentactivitymoduleshelptoillustratethebrand’sseamlessintegrationwithactualtravelexperiences,helpingtoconfirmtrustandaccountability. Practically, the tinted effect provides textureandmovementtotheactivitymoduleswithout over complicating, distracting from or diluting information.

Key modulesallows local countries to input own content

Footer and language selector to appear across all pages

Share your adventure module allows the users to view the latesttraveller’sblogs,reviews and videos


6.1 Opacity

Arial 12pt Bold

Panel:301x151px

Cachet Std 16pt Bold

Icon:37x37px

Cachet Std 21ptBold 100%

90% opacity

70% opacity

90% opacity

Arial 12pt /# ffcc00

Panel:301x408pix90% opacity

100% opacity

# 545454 100% opacity

5pxgap

2pxgap

Cachet Std 38pt BoldCachet Std 18pt Bold


6.2 Font sizes

Arial 12pt Bold

Arial 12pt BoldArial 12pt Bold#0066cc

Cachet Std 16 Bold


Cachet Std 12ptBold

Cachet Std 22pt Bold# 0065bd



Arial 12pt Bold #ffcc00


Arial 12pt Bold

Cachet Std 16pt Bold Cachet Std 13pt Bold

Dig

ital s

tyle

gui

de

Com

mer

cial

in C

onfid

ence

2pxgap2pxgap

5pxgap

5pxgap

8pxgap

6pxgap

12pxgap

12pxgap

12pxgap

15pxgap

14pxgap

14pxgap

15pxgap15pxgap

2pxgap

5pxgap

2pxgap5pxgap

5pxgap

Image300x250px

17px

17px

Image300x139px

40px

22pxgap

10pxgap

10pxgap

22pxgap

6.3

Gap

s

Com

mer

cial

in C

onfid

ence

Dig

ital s

tyle

gui

de

6.4

Imag

e siz

e180x180px

192x110px

180x120px

194x124px

180x120px

90x90px

301x131px

38x38px

Image300x250px

Image300x139px


7.0 Teaser Blocks

Promotional elements

TEA03

TEA04

TEA06

TEA01


8.0 HTML Styling

Main header Arial 30pt

Breadcrumb 11pt

Secondary nav Arial 12/15pt Bold

Header 17ptBody copy Arial 12pt/15pt

10pxgap

5pxgap

Arial 11/13pt

Column width 300pxwidth

15pxgap

15pxgap

All prices 20pt Bold

Column width 645pxwidth

Dig

ital s

tyle

gui

de

Com

mer

cial

in C

onfid

ence

Ove

rvie

w o

f tem

plat

es

Com

mer

cial

in C

onfid

ence

Dig

ital s

tyle

gui

de

Ove

rvie

w o

f tem

plat

es

Dig

ital s

tyle

gui

de

Com

mer

cial

in C

onfid

ence

Ove

rvie

w o

f tem

plat

es

Com

mer

cial

in C

onfid

ence

Dig

ital s

tyle

gui

de

Ove

rvie

w o

f tem

plat

es

Dig

ital s

tyle

gui

de

Com

mer

cial

in C

onfid

ence

Ove

rvie

w o

f tem

plat

es

Com

mer

cial

in C

onfid

ence

Dig

ital s

tyle

gui

de

Ove

rvie

w o

f tem

plat

es


9.0 3rd Party Template

Mandatoryheader block


3rd party areaBase CSS styling

3rd party areaBase CSS styling

Mandatory footer block


Com

mer

cial

in C

onfid

ence

Dig

ital s

tyle

gui

de


3rd party area BaseCSS styling


9.0

3rd

Part

y Te

mpl

ate

Dig

ital s

tyle

gui

de

Com

mer

cial

in C

onfid

ence



9.0

3rd

Part

y Te

mpl

ate

Arial 33ptBold

Arial 13pt Regular

70% Opacity

5pxgap

Arial 13pt Bold #ffcc00

90% Opacity

Arial 13ptBold

Image: 300x113px

Image: 210x120px

Arial 17pt

Com

mer

cial

in C

onfid

ence

Dig

ital s

tyle

gui

de


3rd party areaBase CSSstyling


9.0

3rd

Part

y Te

mpl

ate

Dig

ital s

tyle

gui

de

Com

mer

cial

in C

onfid

ence



9.0

3rd

Part

y Te

mpl

ate

70% Opacity Arial31pxBold

Arial13pxBold

90%Opacity

7px


Arial 13ptBold

Arial 12pt


10.0 Background Image

Individualandpowerfulvisualcontentputsthebrandimmediatelyintoanemotionalcontextwhilstprovidinganexhilaratingplatformtosupportuserfunctionalityofthesite.Choiceofcontent should follow 4 simple guidelines:

• Inspiringandprovocative–butalsoachievableandrealistic• 1stpersonexperience–butalsoengagingtoabroadaudience• Challenging–butalsoaccessible• Positiveandsafe–butalsoauthenticandreal

Avoid overly busy images.Imagesneedtobechosencarefullyinordertoworkasabackgroundimageforthesite.Eachimagemust be no larger than 80k (recommended). Theresolutionshouldbenolessthan1600pxwide.


A central focal point works best in order to draw the eye to the promotion whilst keeping the imageontheleftandrightedgesimple.(Imagesize1584x924)


Thepromotionaltextiswhite(CachetStdfont)andneedtoreadwelloverthebackgroundimage–avoidwhitetextoverwhiteareasoftheimage


Body copy

Arial is the chosen system font for online activity.See HTML styling page for more detail.

Arial ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789

Arial Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789

Cachet bold italicsABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789

Cachet book italicsABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 0123456789

11.0 Typography

Brand messaging

Cachet italic is the STA Travel typeface. Any weight of this typeface can be used. ThetypeshouldalwaysappearinUPPERCASEITALICS,exceptwithinthebodycopy where lowercase/sentence case italics should be used for readability.


12.0 Colours

This is the STA Travel colour palette. No other colours should be used apart from these. Tints of colourscanbeused.Choosetherightcolourreferenceforyourdesignneed.RGBandHexcolourvalues are supplied below.

R 251G 79B 20

Hex#FB4F14

R 0G 173B 208

Hex#00ADD0

R 174G 164B 68

Hex#AEA444

R 182G 18B 52

Hex#B71234

R 242G 175 B 0

Hex#F2AF00

R 190G 214B 0

Hex#BED600

R 0G 101B 189

Hex#0065BD

R 146G 139B 129

Hex#928B81

R 66G 20B 95

Hex#42145F

R 130G 75B 176

Hex#824BB0

R 240G 77B 152

Hex#F04D98

R 161G 222B 233

Hex#A1DEE9

Colour palette


13.0 Country Navigation variations

Germany

Australia

USA

UK

Design

Sta Travel Rebrand Style Guide