Issuu on Google+

PROCESS BOOKLET DESN-420 Elena Syrovatkina

1


TABLE OF CONTENTS INTRODUCTION NAME + LOGO CREATION VISUAL IDENTITY CREATION PROMOTIONAL MATERIALS MOBILE APP SITEMAP MOBILE APP DESIGN USER TESTING VIDEO CREATION PROCESS WEBSITE 10. VBIKE BRAND GUIDELINES

2 vbike


INTRODUCTION In early 2015, Vancouver will launch a network of shared bicycles available for short-term use for a fee. The vBike will add a convenient, comfortable, flexible, and affordable way to cycle in Vancouver. The implementation of a public bike share system vBike is an action within the Greenest City Action Plan (GCAP) and will provide people with an easy and convenient transportation option to help support sustainable transportation within the City. Green Transportation targets outlined in these plans call for half of all trips to be made on foot, bicycle or transit by 2020 and two-thirds by 2040. vBike is a system of self-serve bike stations at which users can rent bikes for short one way trips. Users can purchase annual memberships or 24 hr passes which gives them access to the system and unlimited trips of 30 min or less. Members simply approach any vBike station and swipe their membership card which releases a bike, then ride the bike to another station near their final destination and dock the bike. All trips under 30 min are free with a membership while trips longer than 30 min incur additional usage fees. Vancouver’s vBike system will also include the option for users to rent a helmet with their bike through an integrated helmet vending machine and return receptacle. I created a brand identity, advertising campaign elements and united them in one concept. I used my communication design abilities to connect vBike system to the public, accelerate the adoption of this system, and make it a prominent tool of nurturing the culture of biking in Vancouver.

3


NAME + LOGO CREATION The original name “Public Bike Sharing” (PBS) didn’t engage the audience when it was first introduced in the beginning of the project. It made an impression of being too generic and didn’t represent the service at its fullest. In order to represent the unique offer of Public Bike Sharing in Vancouver, a new name: vBike Vancouver was developed. It put an extra emphasis on the letter “V“, suggesting its close connection to the City of Vancouver

4 vbike


NAME + LOGO CREATION

5


NAME + LOGO CREATION

6 vbike


NAME + LOGO CREATION Sketching process was meant to do the following: • • • • •

Enhance the name “PBS” and come up with something bike-related and local; Make designs more authentic and less generic (hand-drawn, minimalistic, or typography-based); Create several motivational taglines and interesting typographical treatments; Think about maps/app/another deliverables in a bigger context, think about connecting all elements with one strong concept; Revisit the logo – maybe some letterforms and graphic elements can bring PBS logo to life.

7


NAME + LOGO CREATION

8 vbike


NAME + LOGO CREATION

9


NAME + LOGO CREATION

10 vbike


NAME + LOGO CREATION

11


NAME + LOGO CREATION

12 vbike


NAME + LOGO CREATION After sketching several possible variations for the logo, I moved to the digital logo iterations; I developed some bold approaches to the logo, enhanced with one bright color. At this stage, the name wasn’t finalized, but the mockups helped me with ideation. The word “bike“ stood out on its own, as opposed to the long “public bike sharing“ name. Adding the letter “V“ created a unique memorable name.

13


NAME + LOGO CREATION

sharing+trust+community

V

bike

uBike

UBIKE

u

bike

va n c o u v e r

uBike vancouver

14 vbike

V vbike V

ucycle/bbike/ubike/vbike/skybike/b-cycle

bike va n c o u v e r

bike

va n c o u v e r

uBike uBike vancouver

vancouver


NAME + LOGO CREATION

uBike

UBike

uBike

ubike

vbike

vbike

vancouver

vancouver

vancouver

vancouver

15


NAME + LOGO CREATION vBike logo was enhanced with the graphic that consists of three vibrant colors. This shape is easy recognizable (bicyclist on a bike), and the cropping makes this graphic look like a map layout. Various croppings of this design was later incorporated into the promotional materials (posters, flyers, buttons, etc.).

vbike

VANCOUVER

vbike

PUBLIC BIKE SHARING

vbike VANCOUVER

VANCOUVER

16 vbike


NAME + LOGO CREATION

17


VISUAL IDENTITY CREATION At first, the advertisement campaign was based on clever poster taglines about the history of biking. Later, I explored the idea of comparing biking to other forms of transportation, putting a bigger emphasis on the health aspects of biking. In the posters below, I used an idea of a historical timeline.

1860

The term “bicycle� was not introduced until the 1860s, when it was coined in France to describe a new kind of two-wheeler with a mechanical drive.

2014

18 vbike

1935

Fred A. Birchmore, 25, circled the globe by bicycle in 1935. The entire trip, through Europe, Asia, and the United States, covered forty thousand miles. He pedaled about 25,000 miles. The rest was traveled by boat. He wore out seven sets of tires.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis vulputate tempor est ut placerat. Suspendisse et

Duis vulputate tempor est ut placerat. Suspendisse et

gravida metus. Mauris varius euismod mi, a congue

gravida metus. Mauris varius euismod mi, a congue

sapien malesuada in. In hac habitasse platea dictumst.

sapien malesuada in. In hac habitasse platea dictumst.


VISUAL IDENTITY CREATION

MYTH BIKING IS TOO DANGEROUS

FACT

THERE ARE ROUGHLY ONE BILLION BICYCLES IN THE WORLD (ABOUT TWICE AS MANY AS MOTOR VEHICLES).


VISUAL IDENTITY CREATION In these poster variations, I added Vancouver-specific facts that could interest locals and attract tourists. These posters were replaced with more effective and dynamic advertisements, such as car decals and parking meters.

20 vbike


VISUAL IDENTITY CREATION

LOOKING FOR CHANGE? SWITCH TO

21


VISUAL IDENTITY CREATION Utilizing the shapes from the logo and rearraging them created an interesting pattern that was strikingly different from the dark poster designs. The contrast between the white background and logo graphic, along with the graphic placements created an energetic layout.

22 vbike


VISUAL IDENTITY CREATION My next concept was a small brochure with the pops of color. It included an infographic, a map with the bike stations locations, and overall description of a bike sharing concept. The brochure will have rounded corners to follow the shape of the logo; its square and small format will allow users to store it easily and refer to it when they need to find the nearest location.

ABOUT VBIKE

VBIKE STATISTICS

Lorem ipsum dolor sit amet, consectetur adipi-

Lorem ipsum dolor sit amet, consectetur adipi-

scing elit. Duis vulputate tempor est ut placerat.

scing elit. Duis vulputate tempor est ut placerat.

Suspendisse et gravida metus. Mauris varius

Suspendisse et gravida metus. Mauris varius

euismod mi, a congue sapien malesuada in. In

euismod mi, a congue sapien malesuada in.

hac habitasse platea dictumst. Integer non

VANCOUVER

Nunc placerat nisi neque, nec sagittis ligula eleifend vitae. Phasellus lorem lacus, dapibus ultrices sagittis sed, vehicula nec nunc. Quisque egestas mauris massa, ac accumsan ipsum hendrerit luctus. Nulla hendrerit diam eget diam.

RED

100%

mauris mauris. Vivamus ut porttitor massa.

BLUE

75%

35% Aliquip 50% Nostrud 75% Amet 83% Ipsum 100% Lorem

GREEN

50%

YELLOW

50 85 %

%

25%

0%

2004

2005

2006

2007

2008

2009

2010

2011

MAP LEGEND Mauris massa, ac accumsan ultrices sagittis sed Mauris massa, ac accumsan ultrices sagittis sed Mauris massa, ac accumsan ultrices sagittis sed Mauris massa, ac accumsan ultrices sagittis sed

Find a location near you.

23


VISUAL IDENTITY CREATION I used the service called Mapbox to represent the vBike brand at its fullest. With the use of this service, I was able to customize the map of Vancouver to match it to the colors of vBike visual identity. This map is easy to embed, and it can be used on any device due to the Mapbox’s cross-device compatibility.

24 vbike


VISUAL IDENTITY CREATION Enlarging and cropping the logo elements provided another dynamic approach to the flyers. The bright colors against the white background create a nice energetic feel. In other materials, I used light green city illustrations to show how vBike can affect Vancouver and help build a sustainable future.

25


VISUAL IDENTITY CREATION

EXPLORE VANCOUVER FREE DAY PASS

EXPLORE VANCOUVER

26 vbike


VISUAL IDENTITY CREATION

27


VISUAL IDENTITY CREATION Combination of vBike graphics and green city illustrations were later applied to the t-shirt designs, animation, car decal, and stickers.

28 vbike


BRAND GUIDELINES PROMOTIONAL MATERIALS Introduction

Promotional Elements

Visual Identity Brand Elements Colour Palette Typography Examples Contact LOOKING FOR CHANGE? SWITCH TO

29


PROMOTIONAL MATERIALS To highlight the beauty of Vancouver and connect it to the vBike brand message, I developed a series of postcards that feature some motivational verbs such as “explore“, “discover“, and “experience“. After exploring several typographical treatments, I used vBike graphic to combine several different photos of Vancouver that featured people biking in the sunny weather.

30 vbike


PROMOTIONAL MATERIALS

JOHN JONES MARKETING DEPT 10-123 1/2 MAIN ST NW MONTREAL QC H3Z 2Y7

31


PROMOTIONAL MATERIALS

32 vbike


PROMOTIONAL MATERIALS

33


PROMOTIONAL MATERIALS

34 vbike


PROMOTIONAL MATERIALS T-shirt designs should be printed only on white colored shirts in order to maintain the same dynamic and clean feel as in the flyers and the rest of promotional materials.

35


PROMOTIONAL MATERIALS The stickers explore various graphic approches to vBike branding and combine vBike brand colours, green city illustrations, logo graphic, and bike images. People who love biking can easily decorate their bike with these stickers and show their support of Vancouver sustainable goals.

36 vbike


PROMOTIONAL MATERIALS

EXPLORE VANCOUVER ENJOY THE RIDE

37


PROMOTIONAL MATERIALS

LOREM IPSUM LOREM IPSUM Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed facilisis lorem, at elementum sem. Donec tincidunt metus eget congue rutrum. Donec arcu ligula, blandit a ultricies id, rhoncus in purus. Mauris at dui at mi.

38 vbike

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sed facilisis lorem, at elementum sem. Donec tincidunt metus eget congue rutrum. Donec arcu ligula, blandit a ultricies id, rhoncus.


PROMOTIONAL MATERIALS I added some additional information to the back of the flyers. The back of the promotional materials feature short explanation about the vBike sharing concept and provide a link to the process website. The coupon for one free 24 hour vBike experience explains the rules and limitations for obtaining your free pass.

Use this coupon for one FREE vBike experience. Valid for use with vBike only. Valid for 24 hours at any vBike station. Copies not accepted. Limit one pass per person. Free pass must be surrendered at time of purchase. This offer is valid until May 2nd, 2015. This pass is not redeemable for cash. Cannot be combined with any other offer. Associates please enter sku: 9918305250001.

In 2015, the City will launch a network of shared bicycles available for short-term use for a fee. vBike system will add a convenient, comfortable, flexible, and affordable way to cycle in Vancouver. Bikes will be located at secure, easy-to-use, automated docking stations. This system will be privately owned and operated. More than 500 cities around the world, such as Montreal, New York City, Boston, and Washington, DC, have started public bike shares. Find out more at vBike.ca.

39


PROMOTIONAL MATERIALS

In 2015, the City will launch a network of shared bicycles available for short-term use for a fee. vBike system will add a convenient, comfortable, flexible, and affordable way to cycle in Vancouver. Bikes will be located at secure, easy-to-use, automated docking stations. This system will be privately owned and operated. More than 500 cities around the world, such as Montreal, New York City, Boston, and Washington, DC, have started public bike shares. Find out more at vBike.ca.

In 2015, the City will launch a network of shared bicycles available for short-term use for a fee. vBike system will add a convenient, comfortable, flexible, and affordable way to cycle in Vancouver. Bikes will be located at secure, easy-to-use, automated docking stations. This system will be privately owned and operated. More than 500 cities around the world, such as Montreal, New York City, Boston, and Washington, DC, have started public bike shares. Find out more at vBike.ca.

40 vbike


MOBILE APP SITEMAP After working on vBike print materials, I started working on the mobile application. This application has a map with the available vBike locations, an option to pay for vBike subscriptions, and an option to track your own biking progress. After creating your profile, you can see the duration of your trip, calories burnt, etc. vBike app will also give you an option to share your progress onVBIKE social media. SITEMAP: MOBILE APP

INTRO PAGE

MAP

VBIKE PAY-TO-GO

HEALTH STATS

FIND YOUR LOCATION

DAY SUBSCRIPTION

DISTANCE TRAVELLED

PACE/SPEED

FIND BIKE STATIONS

WEEKLY SUBSCRIPTION

CALORIES

BREAK TIME

YOUR FAVORITE BIKE STATIONS

MONTHLY SUBSCRIPTION

ELEVATION

HEART RATE

RECORDED PATH

YEARLY SUBSCRIPTION

DURATION

DATE/CALENDAR

SHARE YOUR PROGRESS ON SOCIAL MEDIA

FACEBOOK

TWITTER

INSTAGRAM

41


MOBILE APP DESIGN

MAP BACKGROUND BACKGROUND

LOGO YOU ARE HERE

LOCAL TIME

BUY MEMBERSHIP 42 vbike

TRACK YOUR PROGRESS

PLACES NEAR YOU

DAY 1: STATS

YOU

TIME


LOGO

MOBILE APP DESIGN

YOU ARE HERE

LOCAL TIME

BUY MEMBERSHIP

TRACK YOUR PROGRESS

PLACES NEAR YOU

DAY 1: STATS

YOU

DAY PASS MONTHLY PASS YEARLY PASS

DAY 1

DAY 2

DAY 3

DAY 4

DAY 5

DAY 6

FIRST TIME USER CLICK TO FIND OUT THE DETAILS

TIME

DISTANCE TRAVELLED CALORIES ELEVATION RECORDED PATH DURATION PACE BREAK TIME HEART RATE PATH SHARING SPEED DATE POWER CADENCE NEAREST BIKE STATION GPS

43


MOBILE APP DESIGN The vBike mobile app layout had to match the overall branding, while being minimalistic and functional at the same time. After the first round of mockups, I created a set of minimalistic icons that helped me find a right visual approach that connected well to the vBike print collateral.

44 vbike


MOBILE APP DESIGN

MAP

MAP

PAY TO GO

PAY TO GO

HEALTH STATS

HEALTH STATS

SHARE PROGRESS

SHARE PROGRESS BACK

45


MOBILE APP DESIGN

YOUR HEALTH PROFILE

CAMBIE BIKE STATION 0.5 KM

ELENA S. LAST RIDE

5.3.14 TODAY’S DATE

6.3.14

GPS

20 KM/H

FIND BIKE STATION Closest bike stations:

5 HRS

100 CAL

1. CAMBIE BIKE STATION

FAVOURITE STATIONS

2. DAVIE BIKE STATION 3. SEYMOURS BIKE STATION

RECORDED PATH BACK

46 vbike

BACK

100/MIN BACK

100 KM


MOBILE APP DESIGN

PAY TO GO

YOUR HEALTH PROFILE

MONTHLY PASS

ELENA S.

YOUR TOTAL IS 50$

DAILY PASS

WEEKLY PASS

ENTER YOUR SETTINGS HEIGHT WEIGHT GENDER AGE

MONTHLY PASS

HEALTH LEVEL

PAY WITH CREDIT CARD

PULSE ELEVATION

PAY WITH PAYPAL

BACK

BACK

BACK

47


USER TESTING I tested some of the print materials and mobile app layouts during my user testing. I distributed some questionnaires among Emily Carr students and online through the website to find out the aspects that could be improved in my print and web materials. Their feedback was mixed, but overall the print materials received positive feedback; however, the mobile application needed more brand consistency and content.

USER TESTING PLAN: Public Bike Sharing OVERVIEW: Develop a user testing strategy that will help define the potential areas of improvement. Expose PBS collateral and web materials to public. Create a system that will guide users through the user testing. Coordinate online meetings with users in remote locations IMPLEMENTATION: Distribute the user testing survey online and arrange personal interviews. Gather user feedback and define the key aspects of the project that need to be adjusted to suit the users’ needs. Apply changes to the designs, taking into consideration the areas that received most feedback.

INTRO

Introduce PBS project, talk about the sustainable transport in Vancouver and explain the importance of sharing and engaging with Vancouver community.

NAMING

Gather feedback on proposed names for PBS. Which names better reflect the unique identity of PBS and connect to the users’ needs?

PRINT

Gather feedback on print collateral through online distribution and personal interviews. Identify potential issues and concerns.

WEB

Define the required set of functionalities for a mobile app. Discuss the layout and user experience. Find potential usability issues. Take note of functionalities that work well and are appropriate for the PBS needs.

Completed by Elena Syrovatkina DESN-420

48 vbike


USER TESTING USER TESTING PLAN: Questionnaire 6. Posters: These promotional posters will evolve into a simple infographic related to the

HELLO, Thank you for agreeing to contribute to the development of the Public Bike Share awareness strategy

history of biking. What do you think about the effectiveness of this concept?

initiative. In 2014, the City will launch a network of shared bicycles available for short-term use for a fee. The public bike share system (PBS) will add a convenient, comfortable, flexible, and affordable way to cycle in Vancouver. Bikes will be located at secure, easy-to-use, automated docking stations. The information you provide will help in devising a strategy that will contribute to the global efforts to make

7. Posters: How easy was the content to digest? Does this information attract you to the PBS?

our environment more sustainable. If you have any questions, please contact me at design@elenasyr.com NAMING

8. Logo: Please comment on the colors of the logo and typographical treatment.

1. The name PBS was too generic, wasn’t associated with Vancouver and didn’t have a recognizable identity. Alternate name Vbike was created and added to all print and web materials. Below, please write your thoughts on this new revised name . WEB 9. Mobile app: What could be done to improve the content?

2. Do you think that this name could be improved? If yes, please write your suggestions.

Which functionalities would you like to use more?

10. Mobile app: What was your level of confidence - (a) at the

PRINT

beginning of your experience and (b) at the end of using this app?

3. Please take a look at the print materials provided to you and write your overall impression.

11. Mobile app: Please comment on the visual aspects, and

4. Flyer: What do you think about the arrangement of information? Was it easy

the way this app works with other materials (including print).

to find the needed information? Is there any content you would like to add?

12. General comments

5. Flyer: Please notice the logo treatment. What do you think about the way logo relates to the rest of information? What about the colors?

THANK YOU FOR YOUR PARTICIPATION!

-1-2-

49


USER TESTING OVERVIEW

To enhance my design process, I developed a questionnaire for my project vBike Vancouver in order to refine my print and web deliverables according to the users’ needs. After exposing my questionnaire to the public, I got feedback that helped me adjust my designs and see the potential areas of improvement. While still in progress, my visual identity already has an established logo, color palette, and fonts that I intend to use in the supporting materials. The message of the brand is more refined compared to the previous PBS deliverables. The brand has a stronger connection to the City of Vancouver goals and mission statement. This user testing influenced my design brief, and helped me explore more possibilites of various print and textile deliverables. For this testing, I created several sticker designs, made a T-shirt, postcards, several promo concepts, and changed the look and the url of my previous research website from pbsvancouver.ca to vbike.ca in order to maintain consistency throughout all my deliverables. User testing allowed me to expose vBike to the public and raise awareness about the possibility of launching sustainable transport in Vancouver, BC. The feedback was gathered throughout online surveys, personal interviews, and Skype meetings. Some potential issues were discovered during these user testing activities. This user testing was mostly aimed at the brand’s message, refinement of promotional materials, as well as mobile app structure and consistency of brand application. I am currently working on the vBike brand guidelines: a document that contains guidelines for the proper use of the vBike identity. It also contains general templates for typical applications of the other branding elements. The aim of this document is to maintain and preserve the vBike brand because the brand is only as strong as the consistency of the communications materials that convey it.

2

vBike

50 vbike


USER TESTING NAME + LOGO

THE SHAPE COMBINES THE BICYCLE IMAGERY AND A MAP. THIS APPROACH REFLECTS THE MESSAGE OF THE BRAND WELL.

USERS LIKED THE MODERN, CRISP LOOK OF THE TYPEFACE LOCATION-SPECIFIC LOGO HELPED MAKE IT MORE “LOCAL”

The original name “Public Bike Sharing” (PBS) didn’t engage the audience when it was first introduced in the beginning of the project. It made an impression of being too generic and failed to represent the service. In order to represent the unique offer of Public Bike Sharing in Vancouver, a new name: vBike Vancouver was developed. It put an extra emphasis on the letter “V“, suggesting its close connection to the city. Users were asked to assist in defining the language of vBike Vancouver’s identity during the process of user testing. It was vital to use the visual identity correctly to properly convey the message behind it. After analyzing the logo developed for vBike, most users responded positively, mentioning the modern polished look of the logo. The name vBike reminded some users about something virtual, and one user suggested to change the name to VanBike. This name is already used by a bike shop in Vancouver, and I decided to disregard this particular comment. Overal, the user input and comments about the name and the logo helped me look at my project from a different perspective which was incredibly helpful.

3

51


USER TESTING CONCLUSION The user testing was revolving around several types of promo materials (T-shirt, stickers, postcards, waterbottle mockups, car decals, etc.) Users commented on the limited use of supporting colors and the heavy usage of the green colour. The saturation, brightness, and playfulness of these materials received a positive review; however, the users were confused by the lack of information on these materials. They suggested to put an URL with a link to the website, create a self-explanatory tagline, or add a QR code that will lead to the mobile app. The mobile design was too clean and less engaging than the promo materials. The users appreciated the health aspects provided by the app, but they didn’t feel the connection between the app and the illustrations that were featured in promo materials. To enhance the print and web deliverables, I’ve decided to add more content, and spend some additional time revising it. Visual aspect of the brand should be applied more consistently and thoroughly. Many users mentioned the possibility of having a short video that will help with the vBike introduction. Taking into consideration the limited time and the approaching deadlines, I will try to add a short video to the final deliverables.

4

vBike

52 vbike


VIDEO CREATION I decided to include an animation in my promotional materials to add more excitement to the vBike launch and created several animation storyboards. Originally, I was planning to shoot a video. I had only several weeks left to create the video, so I decided to use the photos with some animated elements instead.

53


VIDEO CREATION I decided to incorporate several motivational verbs from vBike postcards to different signs around the city. The static nature of the photos would be enhanced by the vBike animations, therefore showing users that vBike can bring more excitement to their everyday lives.

54 vbike


PHOTOGRAPHY I took some photos of Yaletown, capturing various signs, billboards, and stands. Later, I photoshopped the content of these signs to incorporate the vBike verbs and branding elements. The photos were meant to capture the life of the city and expose the everyday life.

55


PHOTOGRAPHY

56 vbike


PHOTOGRAPHY The week of the photoshoot was rather dull, so I added some sunlight to the photos and added more saturation to the buildings, sky, and grass.

57


PHOTOGRAPHY Adding moving type and vBike elements to the photographs.

58 vbike


VIDEO CREATION I found an animated font called Franchise online; I changed its colours to the brand colors of vBike, and changed the letterforms to match it to the vBike font. Some of the words were skewed to follow the angle of the signs and banners.

59


VIDEO CREATION

60 vbike


VIDEO CREATION

61


VIDEO CREATION

62 vbike


VIDEO CREATION

63


VIDEO CREATION

vBike logo was animated with the use of the licensed flipping effect found online.

64 vbike


PROCESS WEBSITE I created a process website to keep my researched information about vBike in one place, test my map, keep track of the collateral creation, and have a place to store all my surveys and questionnaires. Later, I also added my brand guidelines and final deliverables booklets to the website.

65


PROCESS WEBSITE

66 vbike


PROCESS WEBSITE

67


PROCESS WEBSITE

68 vbike


PROCESS WEBSITE

69


These brand guidelines include all final print, web and promo materials developed over the course of this semester. The final grad show will include most of them, as well as an example of the vBike brand identity applied to a bike.

BRAND GUIDELINES

70 vbike


BRAND GUIDELINES Introduction Visual Identity Brand Elements Colour Palette Typography Examples Contact

2

About vBike In 2015, Vancouver will launch a network of shared bicycles available for short-term use for a fee. I created a brand identity and advertising campaign called vBike and developed a set of strategic and creative recommendations that will drive the brand and engage the target audience. The purpose of my project was also to generate a public awareness strategy for vBike and apply it to a brand and advertisement campaign. vBike will add a comfortable, flexible, and affordable way to cycle in Vancouver. This campaign will explain the importance of a healthy and active transportation option compared to a personal vehicle or short transit trips. The high level goal will be to spread awareness throughout the whole province, achieve goals laid out in the Greenest City Action Plan and Transportation 2040, and increase cycling mode share and expand a self-sufficient vBike system throughout the City. vBike will rely on funding from sponsors and exposing it to the public will help establish a strong business strategy. Additional funding and increased amount of memberships will stabilize this initiative’s success in the long run, helping it play an important role throughout the province of British Columbia.

71


BRAND GUIDELINES Introduction Visual Identity Brand Elements Colour Palette Typography Examples Contact

72 vbike

Why do we need brand guidelines? Brand consistency is about maximizing the benefits of the marketing communications by ensuring that all materials represent the brand correctly. The use of Brand Guidelines is the most effective way of guaranteeing suppliers and staff understand how to represent the brand. It is necessary to use the visual identity correctly; from the business cards, to the website, across social media channels, or the brochures, the way the brand identity is presented needs to be given consideration. Everyone involved in communicating about the vBike initiative has a responsibility to apply the identity in a consistent and accurate way. Brand Guidelines are very specific, clear and simple rules about how the brand should appear and behave and contains templates for various applications of the branding elements.

3


BRAND GUIDELINES Introduction Visual Identity Brand Elements Colour Palette Typography

Logo Versions The vBike logo has three color variations. The horizontal version includes both the name and tagline; the vertical version should be used where the space is limited. The simple logo can be used in small promo materials. The black and white versions of the logo should use only one shade of grey, both for the graphic element and the letter V.

Examples Contact

4

Standard

Vertical

Simple

B&W simple

B&W vertical

73


BRAND GUIDELINES Introduction Visual Identity Brand Elements Colour Palette Typography Examples

Minimum Size When it is necessary to use the logo at a smaller width, use the simple logo variation. The minimum width for the vBike logo is 3/4”. If it is necessary to use the logo with a tagline, don’t make it smaller than 1 1/4”. For horizontal logo variation, the smallest size allowed is 1/4”. Simple

Contact

Standard

Vertical

74 vbike

5


BRAND GUIDELINES Introduction Visual Identity Brand Elements Colour Palette Typography

Safe Area The logo should always have a clear area surrounding it; this area is preserved to allow for maximum legibility of the logo. The safe area around the vBike logo is defined by the height of the letter V. The elements such as typography, other logos, graphics or photos can’t break the rules of this safe area.

Examples Contact

6

75


BRAND GUIDELINES Introduction

Incorrect Use

Visual Identity Brand Elements Colour Palette Typography Examples Contact

76 vbike

The correct application of the logo is necessary for the vBike brand. By following the guidelines and learn how to use them will help ensure a unified and effective identity. There are several rules that should be followed when using the vBike logo: the logo can’t be placed over a busy background, it can’t be stretched, tilted, and it can’t be placed on a white box. The colors of the logo shouldn’t be altered or manipulated. The proportions of the logo can’t be changed, and its elements can’t be rearranged.

7


BRAND GUIDELINES Introduction Visual Identity Brand Elements Colour Palette

Imagery All imagery used for vBike collateral and promotion will include Vancouver landscapes and biking pictures. The contrast between pictures will be fully explored in promotional materials, such as postcards and stickers.

Typography Examples Contact

8

77


BRAND GUIDELINES Introduction Visual Identity Brand Elements Colour Palette Typography

Brand Elements Brand elements include cropped elements of the logo, such as the letter V and parts of the vBike wordmark, green city illustrations, and map elements. The collateral also includes several motivational verbs, such as “engage”, “discover“, or “explore” which will send a message to tourists; these taglines will invite people to bike in Vancouver, as well as learn more about this city.

Examples Contact

78 vbike

9


BRAND GUIDELINES Introduction Visual Identity Brand Elements

Color Palette vBike color palette features three main colours.

Colour Palette Typography Examples Contact

10

C - 50 M- 0 Y - 100 K -0

C -0 M - 50 Y - 100 K -0

C - 73 M - 20 Y -5 K -0

R - 141 G - 198 B - 63

R - 247 G - 148 B - 30

R - 40 G - 161 B - 210

79


BRAND GUIDELINES

BRAND GUIDELINES

Introduction

Typography

Visual Identity Introduction

Typography For all collateral, Uni Sans SemiBold and Uni Sans Book are used.

Brand Elements Visual Identity Colour BrandPalette Elements

For motivational verbs, font Blender Pro Bold is used.

For all collateral, Uni Sans SemiBold and Uni Sans Book are used. For motivational verbs, font Blender Pro Bold is used.

Typography Colour Palette Typography Examples Examples Contact Contact

80 vbike 10

11


BRAND GUIDELINES Introduction

Flyers

Visual Identity Brand Elements Colour Palette

EXPLORE VANCOUVER FREE DAY PASS

Typography Examples Contact

12

81


BRAND GUIDELINES Introduction

Promotional Elements

Visual Identity Brand Elements Colour Palette Typography Examples Contact LOOKING FOR CHANGE? SWITCH TO

82 vbike

13


BRAND GUIDELINES Introduction

Mobile Application

Visual Identity Brand Elements Colour Palette

3G

4:08 PM

3G

4:08 PM

3G

Typography

3G

4:08 PM

YOUR MEMEBERSHIP HAS EXPIRED. WHICH PASS WOULD YOU LIKE TO BUY?

4:08 PM

3G

YOUR MEMEBERSHIP HAS EXPIRED. WHICH PASS WOULD YOU LIKE TO BUY?

4:08 PM

YOU PICKED A MONTHLY PASS. PLEASE PROCEED TO CHECKOUT.

Examples Contact

PAY WITH CREDIT CARD

5 HRS

100 CAL

100/MIN

100 KM/H

DAY

WEEK

DAY

WEEK

MONTH

YEAR

MONTH

YEAR

PAY WITH PAYPAL

MONTH

CLOSEST BIKE STATIONS 1. CAMBIE BIKE STATION 2. DAVIE BIKE STATION 3. SEYMOURS BIKE STATION

3G

14

3G

4:08 PM

4:08 PM

3G

3G

4:08 PM

4:08 PM

GPS

PAY TO GO

GPS

PAY TO GO

FIND STATION

YOUR LOCATION

FIND STATION

YOUR LOCATION

HEALTH STATS

SHARE PROGRESS

HEALTH STATS

SHARE PROGRESS

FAVORITE STATION

RECORDED PATH

FAVORITE STATION

RECORDED PATH

83


BRAND GUIDELINES Introduction

Postcards

Visual Identity Brand Elements Colour Palette Typography Examples Contact

84 vbike

15


BRAND GUIDELINES Introduction

T-shirts

Visual Identity Brand Elements Colour Palette Typography Examples Contact

16

85


BRAND GUIDELINES Introduction

Posters

Visual Identity Brand Elements Colour Palette Typography Examples Contact

86 vbike

17


BRAND GUIDELINES Introduction

Banner

Visual Identity Brand Elements Colour Palette Typography Examples Contact

18

87


BRAND GUIDELINES Introduction

Stickers + Water Bottle

Visual Identity Brand Elements Colour Palette Typography Examples Contact

88 vbike

19


BRAND GUIDELINES Folded Brochure

Introduction Visual Identity Brand Elements Colour Palette Typography Examples Contact

ABOUT BIKE SHARES A bicycle sharing system is a service in which bicycles are made available for shared use to individuals who do not own them. The central VANCOUVER

concept of these systems is to provide free or affordable access to bicycles for short-distance trips in an urban area as an alternative to motorized public transportation or private vehicles, thereby reducing traffic congestion, noise, and air pollution.

MAP LEGEND Zone 1 Zone 2 Zone 3 Zone 4

Find a location near you. Visit vbike.ca for more info.

20

89


BRAND GUIDELINES Introduction

Animation

Visual Identity Brand Elements Colour Palette Typography Examples Contact

90 vbike

21


BRAND GUIDELINES Introduction Visual Identity Brand Elements Colour Palette Typography Examples Contact

22

91


BRAND GUIDELINES Introduction Visual Identity Brand Elements Colour Palette Typography Examples Contact

92 vbike

23


BRAND GUIDELINES Introduction Visual Identity Brand Elements Colour Palette

Contact Please contact Elena Syrovatkina at design@elenasyr.com for questions regarding vBike brand standards. If you’d like to learn more about the vBike, please visit vbike.ca. vBike promotional animation is available on the About page of our website.

Typography Examples Contact

24

93


vBike process booklet