-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcontent-transit-center.php
More file actions
190 lines (163 loc) · 10.7 KB
/
content-transit-center.php
File metadata and controls
190 lines (163 loc) · 10.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<section id="opportunity" class="page-section">
<div class="outer-container">
<div class="inner-container mt-5">
<h2 class="future-A h3">opportunity</h2>
<p>Given our skills and interest in transit, working with TransitCenter was a dream project. The non-profit was formed from the sale of TransitCheck to advocate for better transit across America. We saw that, despite confusion with city transit interchanges, a name change for TransitCenter was off the table.</p>
<p>So we proposed a refresh for the brand, visual identity and website, to capitalize on its growing status. We saw an opportunity to enhance its web presence, with a user-focused site to better tell the story of the organization and elevate its voice in the transportation ecosystem.</p>
</div>
</div>
<figure class="alignnone mt-5">
<div class="parallax-container">
<blockquote class="parallax-node" data-speed-modifier="0.5">
<p><span class="quote">“</span>Objective Subject’s system and website are the foundation for our communications. With it, TransitCenter channels a clear, cohesive and consistent message to cities, transit organizations and policy makers.<span class="quote">”</span><br/><small>— David Bragdon, TransitCenter Executive Director</small></p>
</blockquote>
<img src="<?php echo os_path('Bus.jpg', 'transitcenter') ?>" srcset="<?php echo os_path('Bus.jpg', 'transitcenter') ?> 1x, <?php echo os_path('Bus@2x.jpg', 'transitcenter') ?> 2x" width="1600" height="1008" alt="Broadway Boogie Woogie by Piet Mondrian">
</div>
<figcaption class="outer-container"><div class="inner-container">A Metro Rapid bus in Los Angeles</div></figcaption>
</figure>
</section>
<section id="process" class="page-section ">
<div class="outer-container">
<div class="inner-container mt-5">
<h2 class="future-A h3">process</h2>
<p>We conducted brand, communications and market audits and recognized that TransitCenter was both missing opportunities to explain its mission through its website, logo, self-description and other materials. Multiple communications materials were developed in different styles, which missed the benefits of a consistent brand in building recognition.</p>
<p>TransitCenter’s existing color scheme of blues and greens was commonly used in the sector, which didn’t allow it to stand out, and there was both a challenge and an opportunity to ensure its visual identity could pair with partner organizations. We saw the need to match communications with organizational strategy: publications that made more impact; more frequent hosting of events; and a raised profile as a commentator on transit developments.</p>
</div>
</div>
<figure class="alignnone mt-5">
<img src="<?php echo os_path('TC-graffitiSubway.jpg', 'transitcenter') ?>" width="1212" height="978" srcset="<?php echo os_path('TC-graffitiSubway.jpg', 'transitcenter') ?> 1x, <?php echo os_path('TC-graffitiSubway@2x.jpg', 'transitcenter') ?> 2x" width="1600" height="1008">
<div class="outer-container">
<figcaption class="inner-container">1982, New York, subway, at rush hour</figcaption>
</div>
</figure>
</section>
<section id="solution" class="page-section ">
<div class="outer-container">
<div class="inner-container mt-5">
<h2 class="future-A h3">solution</h2>
<p>We created a bold visual identity and ‘house style’ for all future materials, and a style guide for consistent implementation. We gave TransitCenter a bold and ‘ownable’ distinctive purple for differentiation and gravitas. We created a bold and flexible logo which adapts to different contexts.</p>
</div>
</div>
<figure class="aligncenter mt-5" style="background-color:#fff; margin-top:4rem;">
<div class="outer-container">
<figure class="inner-container" style="border-top:5px solid #5E29AC; margin-bottom: 4.2rem; max-width: 90%; min-width:300px;">
<div id="logo-text" style="width:240px;padding-top: 16px; padding-right:39.25px;border-right: 5px solid #5E29AC; line-height: 0px;">
<img src="<?php echo os_path('TC-logo-text.svg', 'transitcenter') ?>" >
</div>
<div class="outer-container">
</div>
</figure>
</div>
</figure>
<div class="outer-container">
<figcaption class="inner-container">TransitCenter Wordmark</figcaption>
</div>
<div class="outer-container">
<div class="inner-container mt-5">
<p>We extended the logo style into a full visual language, based on the streets of different American cities and taking cues from other transit features, and crafted the succinct tagline ‘We put transit in the center of cities’.</p>
</div>
</div>
<figure class="aligncenter">
<div class="inner-container mt-5">
<img src="<?php echo os_path('TC-streets.png', 'transitcenter') ?>" srcset="<?php echo os_path('TC-streets.png', 'transitcenter') ?> 1x, <?php echo os_path('TC-streets@2x.png', 'transitcenter') ?> 2x"/>
</div>
<div class="outer-container">
<figcaption class="inner-container">TransitCenter Avatars</figcaption>
</div>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p>We elevated the design of TransitCenter’s influential research reports and worked with an illustrator to bring the ‘human impact’ of transit to life.</p>
</div>
</div>
<figure class="os-slideshow-container mt-5">
<div id="bps-billboard-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#bps-billboard-nav .prev", "nextArrow": "#bps-billboard-nav .next", "appendDots": "#bps-billboard-dots" }'>
<li>
<img src="<?php echo os_path('TC-CoverBig.jpg', 'transitcenter'); ?>" srcset="<?php echo os_path('TC-CoverBig.jpg', 'transitcenter'); ?> 1x, <?php echo os_path('TC-CoverBig@2x.jpg', 'transitcenter'); ?> 2x" width="850" height="566" />
<figcaption>Illustration by Max Halton for Bus Turnaround publication</figcaption>
</li>
<li>
<img src="<?php echo os_path('TC-spo1.jpg', 'transitcenter'); ?>" srcset="<?php echo os_path('TC-spo1.jpg', 'transitcenter'); ?> 1x, <?php echo os_path('TC-spot1@2x.jpg', 'transitcenter'); ?> 2x" width="850" height="566" />
<figcaption>Illustration by Pete Gamlen for fact sheet on On-Demand Transportation</figcaption>
</li>
<li>
<img src="<?php echo os_path('TC-Lesson3.jpg', 'transitcenter'); ?>" srcset="<?php echo os_path('TC-Lesson3.jpg', 'transitcenter'); ?> 1x, <?php echo os_path('TC-Lesson3@2x.jpg', 'transitcenter'); ?> 2x" width="850" height="566" />
<figcaption>Illustration by Adam Avery for report on transit operations contracting</figcaption>
</li>
</ul>
<?php os_slide_nav("bps-billboard-nav"); ?>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p>The visual identity system can be applied to publications created with partners, to a greater or lesser degree depending on the relationship.</p>
</div>
</div>
<figure class="alignnone mt-5">
<img src="<?php echo os_path('TC-PublicationCovers.jpg', 'transitcenter') ?>" width="1212" height="978" srcset="<?php echo os_path('TC-PublicationCovers.jpg', 'transitcenter') ?> 1x, <?php echo os_path('TC-PublicationCovers@2x.jpg', 'transitcenter') ?> 2x" width="1600" height="1008">
<div class="outer-container">
<figcaption class="inner-container">TransitCenter Publications</figcaption>
</div>
</figure>
<figure class="alignnone mt-5">
<img src="<?php echo os_path('TC-Stationery.png', 'transitcenter') ?>" width="1212" height="978" srcset="<?php echo os_path('TC-Stationery.png', 'transitcenter') ?> 1x, <?php echo os_path('TC-Stationery@2x.png', 'transitcenter') ?> 2x" width="1600" height="1008">
<div class="outer-container">
<figcaption class="inner-container">TransitCenter Stationery</figcaption>
</div>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p>The Brand Guidelines give TransitCenter staff the guidance they need to ensure the visual identity is implemented consistently: crucial to ensuring that the impact of the brand is felt at every opportunity and core to supporting their strategic vision.</p>
</div>
</div>
<figure class="alignnone mt-5">
<img src="<?php echo os_path('TC-BrandMockup.png', 'transitcenter') ?>" width="1212" height="978" srcset="<?php echo os_path('TC-BrandMockup.png', 'transitcenter') ?> 1x, <?php echo os_path('TC-BrandMockup@2x.png', 'transitcenter') ?> 2x" width="1600" height="1008">
<div class="outer-container">
<figcaption class="inner-container">TransitCenter Brand Guidelines</figcaption>
</div>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p> We redesigned the website to demonstrate TransitCenter’s voice in the transportation world and expose the most important content.</p>
</div>
</div>
<figure class="os-slideshow-container mt-5">
<div id="oakland-toolkit-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#oakland-toolkit-nav .prev", "nextArrow": "#oakland-toolkit-nav .next", "appendDots": "#oakland-toolkit-dots" }'>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('TC-Homepage-.png', 'transitcenter'); ?>" srcset="<?php echo os_path('TC-Homepage-.png', 'transitcenter'); ?> 1x, <?php echo os_path('TC-Homepage-@2x.png', 'transitcenter'); ?> 2x" width="850" height="780">
</div>
</div>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('TC-Publications-page.png', 'transitcenter'); ?>" srcset="<?php echo os_path('TC-Publications-page.png', 'transitcenter'); ?> 1x, <?php echo os_path('TC-Publications-page-@2x.png', 'transitcenter'); ?> 2x" width="850" height="780">
</div>
</div>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('TC-Team.png', 'transitcenter'); ?>" srcset="<?php echo os_path('TC-Team.png', 'transitcenter'); ?> 1x, <?php echo os_path('TC-Team-@2x.png', 'transitcenter'); ?> 2x" width="850" height="780">
</div>
</div>
</li>
</ul>
<?php os_slide_nav("oakland-toolkit-nav"); ?>
<div class="outer-container">
<figcaption class="inner-container">TransitCenter Blog Page</figcaption>
</div>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p>The live feed of news items, centered around the bold white-on-purple line knits together a consistent narrative around the commitment to better transit.</p>
<p class="future-A h3"><a href="http://transitcenter.org/" class="cta-link" target="_blank">transitcenter.org <span class="icon arnhem rotate-cc-45">→</span></a></p>
</div>
</div>
</section>