ally brand documentation

ally Brand Guidelines 1

1.1 Master Logo1.1 Master LogoText Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Brand Guidelines

2About these guidelines

These guidelines are designed to help everyone at ally, and our partners, to use our brand with confidence and consistency.

Our brand is what sets us apart, defining our reputation and aspirations. By using it effectively we will better establish our leading position in the marketplace.

These guidelines have been designed to be easy to work with and give you the flexibility you need to create the best work possible.

Use these guidelines as what they are; guidelines. It is very likely that one may find themselves in a position that has not been addressed in these guidelines. Or that some guidelines conflict when used in peculiar contexts. Use your initiative to keep within the feel of the ally brand and make us look awesome!

ally Brand Guidelines


1.0 Brand introduction 1.1 Defining ally 5 1.2 Brand values 5

2.0 Logo 2.1 Master logo - stacked version 7 2.2 Master logo Horizontal version 7 2.3 Horizontal logo with claim 8 2.4 ally pin 8 2.5 Logo isolation 9 2.6 Logo size 9 2.7 Logo misuse 10

3.0 Colours 3.1 Colour Scheme 12

4.0 Typography 4.1 Primary Typeface 14 4.2 Secondary Typeface 14

5.0 Photography style 5.1 General photography style 16 5.2 Product based images 16 5.3 Transport images 17 5.4 Event photography 18 5.5 Office images 19

6.0 Adverts 6.1 Social media ads 21 6.2 Mockups 22

7.0 App icon 7.1 App icon 24

8.0 In the app 8.1 In the app 26

9.0 Iconography 9.1 Usage of the icons 28

10.0 Presentations 10.1 Presentation style 30 10.2 Icon style 31

11.0 Tone of voice 11.1 Tone overview 33 11.2 Examples for positive feedback 34 11.3 Examples for improvements 35

12.0 Contact 36

Contents

1.0 Brand introduction



1.1 Defining ally

1.2 Brand Values

Our vision is a world of data-driven mobility, where we experience self-driving mass transit.

Our mission is to build the best local transport app. Powered by the first global platform for local transport data. Helping millions of people to improve their daily commute. We want to build a community of smart commuters and essentially Make Cities Smarter!

Everything we create should reflect the wider brand experience. We want to separate ourselves from our competitors and create a brand image that will be directly related to us and our values.

These guidelines are a designed to be a helping hand in ensuring we do just that!

Our brand values define us not only through our applications but in our customers perception of who we are.

Reliable - Our users know they can always rely on our service.Approachable - Were fun and easy going.Determined - Were on a mission to make the world a better place!Innovative - Were using the latest technology in creative ways to achieve our goal.


2.0 Logo


Different logo formations (stacked and horizontal) are to be used depending on the context and shape of surrounding space.

The stacked version is our preferred version for open spaces.

The logo should be used in full colour when possible. The ally blue gradient should never be used for print purposes.

The horizontal version of the master logo should be used when there in minimum space available: i.e. on banners, headers, horizontal ads.

Again, the colour version is preferred but the mono version can be used when appropriate. I.e. on coloured images.

2.1 Master logo - Stacked version

2.2 Master logo - Horizontal version

ally blue

ally blue

ally blue gradient

ally blue gradient

Mono

Mono

Mono on black

Mono on black


2.3 Horizontal logo with claimThe claim states what we do - we are making cities smarter! This version of the logo can be used when appropriate to provide a context for the brand on first sight.

The claim and logo have been separated by colour to highlight each part individually. However, when using the mono logos, ensure both the claim and logo are the same.

The ally pin should only be used as an illustrative icon when the presence of the brand is obvious. I.e. in presentations, on the website or inside the app.

The pin can also be used as a location/go icon when appropriate to highlight the brand as a utility in navigating.

2.4 ally pin

ally blue

ally blue gradient

Mono

Mono on black

ally blue ally blue gradient Mono Mono on black


The ally logo should always be surrounded by a minimum area of space. This area of isolation ensures that the logo remains prominent and attention is not drawn away from the brand.

The area is defined by the 2 times the width or height of the a used in the logo you are isolating.

This area of separation should be increased when possible.

The minimum logo sizes ensure that the text is always readable. Especially the logo the claim.

There is no maximum size for the logo, however when drastically changing the size of the logo make sure to use a vector format. w: 8mm / 25px w: 15mm / 40px w: 30mm / 85px

2.5 Logo isolation

2.6 Logo size


01. The ally logo can be used in white over a solid colour. Ideally a brand colour, but is acceptable on other colours in exceptional circumstances.

02. The claim should never be used with the stacked version of the logo.

03. Dont add embellishments like drop-shadows, embossing etc. to the logo.

04. Dont use the brand in low contrast.

05. The blue logo can be used on top of images only when the colours work. (e.g. blue and orange work.)

06. The ally pin can be used as a location icon on maps.

07. Dont use the blue logo on clashing colours.

08. Dont use colours outside of the brand colour scheme.

09. Do not tilt or rotate the logo.

10. The tag line should not be bolder/larger than the logo.

2.7 Logo misuse

01. 02. 03. 04.

05. 06. 07.

08. 09. 10.


3.0 Colours



3.1 Colour scheme

Blue and white are our primary colours. To maintain consistency and recognition they should be the lead colours in all applications.

The other colours are action and accent colours, with the blue-toned grey being our choice of text colour when possible.

ally Blue

HEX 3282c4C78 M42 Y0 K0R50 G130 B196

Green

HEX 27bfb0C70 M0 Y39 K0R39 G191 B176

Turquoise

HEX 27b1beC72 M7 Y26 K0R39 G177 B190

Orange

HEX ff9433C0 M51 Y87 K0R255 G148 B51

Grey

HEX 4f616eC72 M54 Y44 K19R79 G97 B110

White

HEX ffffffC0 M0 Y0 K0R255 G255 B255

4.0 Typography

13ally Brand Guidelines


4.1 Primary Typeface

4.2 Secondary Typeface

ABCabc

ABCabc

ABCabc

ABCabc

Our Primary typeface is Asap. It is simple, a slightly rounded making it both legible and approachable.

Asap should be used in either regular or bold.

Ideally the text should be 20% cyan and 80% black. If the cyan is not possible, 80% black is acceptable.

Asap is a google font meaning it is widely accessible and usable on many platforms.

Our secondary typeface is Helvetica Neue. This is the font we use in the app itself as it has exceptional flexibility for languages and platforms.

This font should only be used other than in the app when Asap is not available.

Regular 72pt

Regular 72pt

Regular 16pt, 20% cyan, 80% black

Regular 16pt, 20% cyan, 80% black

Bold 16pt, 20% cyan, 80% black

Bold 16pt, 20% cyan, 80% black

Bold 72pt

Bold 72pt

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz(!@$%^&*?:|{}_+) 0123456789




5.0 Photography Style



The general photography style consists of bright pictures in daylight, showing vivid colours in a low depth of field.

When taking photographs ask yourself:

Does the image feel natural, observed and shot on a real location?

Is the image full colour and treated in the same way as other ally images?

Does the image feel unique and not like a stock photo?

Is the photo friendly and approachable? Does it represent the core brand values of

ally?

Low aperture, bright light. Phone placed in right third to leave space for the text. Shows functions of the app in a non distracting setting.

5.1 General photography style

5.2 Product based images


5.3 Transport images

Low shutter speed, bright/ daylight. Shows people waiting, trains passing by under long exposure, movement of people and urban transport.


Where possible: reduced highlights increased brightness. Shows representatives of ally on panel discussions, networking and notable people visiting the ally office.

5.4 Event photography


Bright light, high colour contrast. Showing the team being productive in a fun environment.

5.5 Office images



6.0 Adverts



We use social media platforms to promote our product on a regular basis. We want to be consistent in both form and feel across every platform while following the regulations of each social media site.

Our ads should reflect the brand values while also being simple and straight to the point.

The ads should all be eye catching, yet they should not look ugly in their surroundings so keep in mind who, where and how they will see the ad.

01. A bold heading in the ally primary typeface, Asap. This is always over a dark blue box with hex value #171e24.

02. App in focus with a blurred background.

03. Prominent branding without taking away from the subject of the image.

04. Icons showing the platforms that we support.

6.1 Social media ads01.

03. 04.

02.


We often need to show off new features in our app both in slide decks and adverts. To ensure we remain consistent and professional, we use phone mockups around our screenshots.

Please make sure the status bar is clean with full battery and full signal strength.

6.2 Mockups



7.0 App icon


7.1 App icon

The app launcher icon is not a logo alternative and should not be used instead of the full wordmark logo.

Do not alter the app icon artwork in any way.

iOS Android


8.0 In the app


8.1 In the app

01.

02.

03.

The internal components of the app are subject to change to compliment UX and UI design decisions but some specific branding guidelines still apply.

01. Logo has correct isolation area.

02. Correct colour used for action buttons.

03. ally blue is still the most used brand colour


9.0 Iconography


9.1 Usage of the iconsIcons should be ally blue whenever possible. The blue can be used over light backgrounds too. Use a white icon over dark backgrounds.

All icons should be solid colour and not lined


10.0 Presentations


Consistency is key in presentation material. Pitches to investors and business partners must be clear and simple but following these guide lines.

For best results, produce every slide deck in Keynote using the ally presentation theme.

Every slide deck should begin with the ally logo and claim. Every page after should have the horizontal master logo in the bottom right corner.

Every icon should be ally blue. And every map should be white. (See 10.2)

All screenshots should never be without a phone mockup and should never have a background.

All pictures should be full bleed.

10.1 Presentation style


Almost all icons should consist of solid ally blue colour. Greys etc. can be used in exceptional circumstances to provide clarity in single icons.

10.2 Icon style


11.0 Tone of voice


11.1 Tone Overview

We speak in a confident way with a knowledge of what is going on. We do so in a humorous

tone in at least two languages.

In our replies/posts/comments/tweets/blogs readers can feel that we care and connect with

us. They can feel the empathy we have, due to our approachable or relatable tone of voice. We

speak their language and are not shy to interact on a personal level.

Confident, nonchalant (if there`s negative feedback somehow) Goal-oriented/know what is going on Humorous International German/English du/Du? Euch Du? Euphoric Approachable/relatable With empathy Individually Speak the language of the target group Service-oriented


11.2 Examples for positive feedback

- Hi XX, thank you so much for the great review! Were happy you like it!

- Hi XX, vielen Dank fr Deine Bewertung. Wir freuen uns, dass es Dir gefllt.

- Thank you so much, we feel flattered.

- Hab vielen Dank, tolles Lob.

- Thank you so much for messaging us. We are happy to hear you like the new feature, what a

perfect way to start a new week!

- Danke fr Dein Lob, so starten wir doch gleich besser in die Woche/das ist ein guter Abschluss fr

die Woche

- Thats amazing, Im very glad you like it. Keep enjoying the app, we are happy to have you

onboard.

- Thank you for the tip, enjoy allryder on your xx (bike/car/pt).


11.3 Examples for improvements

- Thank you so much for your ideas/input/feedback. We appreciate your message a lot - please

know that we do work on these ideas. Could you tell me when you would use this feature? How

would you envision it?

- Danke fr Deine Verbesserungsvorschlge. Wir arbeiten stets fleiig daran und ich hoffe, wir

knnen auch Deine Ideen bald umsetzen. Knntest Du mir sagen, wie Du Dir diese Funktion

genau vorstellst? Wann wrdest Du sie brauchen wollen?

- Dear XX, could I ask what exactly is not working anymore? I would like to check, what it is I can

do for you. Please drop us a mail at [email protected] I hope we can solve this issue very soon,

kind regards and many thanks, XX

- Hi XX, darf ich fragen, was genau nicht mehr klappt? Von wo bis wo hast Du genau gesucht?

Gibt es eventuell einen Screenshot, den Du mir zeigen knntest?

- Dear XX, thank you very much for you input. We were indeed already talking about [integrating

that feature]. Would you be so kind to tell us how you would plan to [use that feature]? This

would help our developers to implement it in the best manner.

- Lieber XX, vielen Dank fr deinen Input! Wir haben uns [diese Funktion] auch schon berlegt.

Knntest du mir vielleicht sagen, wann und wie du [diese Funktion] nutzen wolltest? Das hilft

auch unseren Developer-Jungs, das Feature so gut wie mglich umzusetzen.


12.0 ContactNick Morgan-JonesVisual Designer

[email protected]

Kate SaundersProduct Designer

[email protected]

Laura BurgerHead of Product

[email protected]

ally brand documentation

Documents