-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcontent-claremont-graduate-university.php
More file actions
266 lines (235 loc) · 16.7 KB
/
content-claremont-graduate-university.php
File metadata and controls
266 lines (235 loc) · 16.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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<section id="opportunity" class="page-section">
<div class="outer-container">
<h3 class="future-A h3 inner-container mt-5">opportunity</h3>
<div class="inner-container">
<p>Claremont Graduate University is an integral part of the prestigious Claremont Colleges, a collection of liberal arts colleges in an idyllic corner of Southern California, 30 miles east of Los Angeles. Founded in 1925, CGU boasts globally renowned scholars and a unique, multi-disciplinary approach to graduate studies. We helped CGU identify and embody these brand pillars and reinvent its fragmented and sprawling online experience, in the process transforming the website management process for staff. </p>
<p>We saw the opportunity to unite the different constituting schools, each with disparate and varied identities, under a masterbrand that would convey the university’s offer and raise the profile of the university overall. At the same time, their visual assets (logo, color palette, typography) could be updated to work effectively on a new and refreshed website. </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 helped us get to the essence of who we are as a university, and then worked with us to clearly communicate that information to our audience with a unified, efficient, and award-winning user experience.<span class="quote">”</span><br/><small>— Hollis Cooper, Director of Digital Strategy, Claremont Graduate University</small></p>
</blockquote>
<img src="<?php echo os_path('cgu.jpg', 'cgu') ?>" srcset="<?php echo os_path('cgu.jpg', 'cgu') ?> 1x, <?php echo os_path('cgu@2x.jpg', 'cgu') ?> 2x" width="1600" height="1008">
</div>
<figcaption class="outer-container"><div class="inner-container">Student Graduating</div></figcaption>
</figure>
<div class="outer-container">
<p class="inner-container mt-5">
<strong>Reigniting the Flame</strong><br/>
Over the years, CGU’s adapted many iterations of a university seal that all incorporated traditional academic symbols of lamps and flames, signifying passion in the pursuit of knowledge. CGU’s motto, Multa Lumnia Una Lux (“Many lamps, one Light”), represents the diverse backgrounds yet unified passion of its students. Inspired by these allegories, we sought out to coalesce the university’s presence around its shared principles.
</p>
</div>
<figure class="aligncenter mt-5" style="background-color: white;">
<img src="<?php echo os_path('CGU-cacophony.png', 'cgu'); ?>" srcset="<?php echo os_path('CGU-cacophony.png', 'cgu'); ?> 1x, <?php echo os_path('CGU-cacophony@2x.png', 'cgu'); ?> 2x" width="1193" height="200"/>
<!-- <figcaption>explanatory caption</figcaption> -->
</figure>
</section>
<section id="process" class="page-section ">
<div class="outer-container">
<h3 class="future-A h3 inner-container mt-5">process</h3>
<div class="inner-container">
<p>Through stakeholder interviews across the organization, we refined a brand platform to inform the creation of the visual identity. This captured the spirit and heritage of the university and the outlook of the staff and students. Through a visual audit of the university’s current identity and iterations through its history, we identified the seal of the university as a key visual asset, and the flame its logical shorthand.</p>
<p>The need to convey program interdisciplinarity in a way that would not impact negatively on the online experience informed our approach to content strategy. Through a full content audit, followed by sorting and categorizing of the site’s content, we created information architecture rules which supported the CGU team’s efforts to streamline and redraft the site.</p>
</div>
</div>
<div class="alignnone" style="background-color:#ffffff;">
<div class="outer-container mt-5">
<figure class="inner-container " style="padding-bottom:5rem;">
<img src="<?php echo os_path('CGU-Diagram.png', 'cgu'); ?>" srcset="<?php echo os_path('CGU-Diagram.png', 'cgu'); ?> 1x, <?php echo os_path('CGU-Diagram@2x.png', 'cgu'); ?> 2x" width="1600" height="1008"/>
</figure>
</div>
</div>
<div class="outer-container">
<p class="inner-container mt-5">We created user journey maps to envision how prospective or current students would navigate through the website and anticipate their needs through the reorganized content. In the development phase, we adapted the back-end structure and controls to work with organizational behaviors, which ensures a consistent front-end user experience.</p>
</div>
<figure class="aligncenter mt-5">
<img src="<?php echo os_path('CGU-Campus.png', 'cgu'); ?>" srcset="<?php echo os_path('CGU-Campus.png', 'cgu'); ?> 1x, <?php echo os_path('CGU-Campus@2x.png', 'cgu'); ?> 2x" width="1600" height="1008"/>
<div class="outer-container">
<figcaption class="inner-container">1925, The founding of Claremont Graduate University</figcaption>
</div>
</figure>
</section>
<section id="solution" class="page-section ">
<div class="outer-container">
<h3 class="inner-container future-A h3 mt-5">solution</h3>
<p class="inner-container">The flame symbol was a unique and ownable asset which we simplified into an icon suitable for digital uses. Paired with the flame, we minimized the typographic elements to create a simplified wordmark to serve as a foundation for the university’s many schools, programs, and offices. We added flexible straplines ‘Founded 1925’ and ‘A Member of the Claremont Colleges’ to strengthen the brand positioning.</p>
</div>
<div class="aligncenter mt-5" style="background-color: white;">
<div class="outer-container" style="padding: 40px 0; max-width: 49vw; line-height:0px">
<img width="100%" src="<?php echo os_path('CGU-straight-logo.png', 'cgu'); ?>" srcset="<?php echo os_path('CGU-straight-logo.png', 'cgu'); ?> 1x, <?php echo os_path('CGU-straight-logo@2x.png', 'cgu'); ?> 2x" height="690" />
<div class="cycle-each" style="padding-left:5vw;height:1vw;">
<img style="height:1vw;" src="<?php echo os_path('CGU-strapline1.png', 'cgu'); ?>" srcset="<?php echo os_path('CGU-strapline1.png', 'cgu'); ?> 1x, <?php echo os_path('CGU-strapline1@2x.png', 'cgu'); ?> 2x" height="690" />
<img style="height:1vw;" src="<?php echo os_path('CGU-strapline2.png', 'cgu'); ?>" srcset="<?php echo os_path('CGU-strapline2.png', 'cgu'); ?> 1x, <?php echo os_path('CGU-strapline2@2x.png', 'cgu'); ?> 2x" height="690" />
</div>
</div>
</div>
<div class="outer-container">
<figcaption class="inner-container">Claremont Graduate University logo</figcaption>
</div>
<div class="outer-container">
<p class="inner-container mt-5">A refreshed visual identity brought CGU’s personality, values, and heritage to light. Building upon our research into the university’s brand architecture, we strengthened the hierarchy of elements and came up with visual treatments that illuminate each tier.</p>
</div>
<figure class="aligncenter mt-5">
<img src="<?php echo os_path('CGU-Brand-Architecture.png', 'cgu'); ?>" srcset="<?php echo os_path('CGU-Brand-Architecture.png', 'cgu'); ?> 1x, <?php echo os_path('CGU-Brand-Architecture@2x.png', 'cgu'); ?> 2x" width="1600" height="1008"/>
<div class="outer-container">
<figcaption class="inner-container">Claremont Graduate University brand architecture</figcaption>
</div>
</figure>
<figure class="aligncenter mt-5">
<div class="outer-container">
<img src="<?php echo os_path('CGU-Stationery-Mockup.png', 'cgu'); ?>" srcset="<?php echo os_path('CGU-Stationery-Mockup.png', 'cgu'); ?> 1x, <?php echo os_path('CGU-Stationery-Mockup@2x.png', 'cgu'); ?> 2x" width="1600" height="1008"/>
<figcaption class="inner-container">Claremont Graduate University print materials</figcaption>
</div>
</figure>
<div class="outer-container">
<p class="inner-container mt-5">Recognizing a breadth of touchpoints – from formal administrative communications to student event materials – we devised an implementation spectrum for the identity system that could just as easily portray subdued, institutional gravitas as it could an energetic, bold style.</p>
</div>
<figure class="aligncenter mt-5">
<img src="<?php echo os_path('CGU-Lookbooks.png', 'cgu'); ?>" srcset="<?php echo os_path('CGU-Lookbooks.png', 'cgu'); ?> 1x, <?php echo os_path('CGU-Lookbooks@2x.png', 'cgu'); ?> 2x" width="1600" height="1008"/>
<div class="outer-container">
<figcaption class="inner-container">Claremont Gradute University Lookbooks</figcaption>
</div>
</figure>
<figure class="os-slideshow-container mt-5">
<div id="cgu-billboard-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#cgu-billboard-nav .prev", "nextArrow": "#cgu-billboard-nav .next", "appendDots": "#cgu-billboard-dots" }'>
<li>
<img src="<?php echo os_path('Signs1.png', 'cgu'); ?>" srcset="<?php echo os_path('Signs1.png', 'cgu'); ?> 1x, <?php echo os_path('Signs1@2x.png', 'cgu'); ?> 2x" width="850" height="566" />
<!-- <div class="photo-credit">© Mindy Best Photography</div> -->
</li>
<li>
<img src="<?php echo os_path('Signs2.png', 'cgu'); ?>" srcset="<?php echo os_path('Signs2.png', 'cgu'); ?> 1x, <?php echo os_path('Signs2@2x.png', 'cgu'); ?> 2x" width="850" height="566" />
<!-- <div class="photo-credit">© Mindy Best Photography</div> -->
</li>
</ul>
<?php os_slide_nav("cgu-billboard-nav"); ?>
<figcaption class="outer-container"><div class="inner-container">Claremont Graduate University Viewbook</div></figcaption>
</figure>
<div class="outer-container">
<p class="inner-container mt-5">The website now has a clear logic, consistent user experience, and is easy and efficient to update for university staff through a streamlined process and customized backend user interface. Upon launch of the new site, information requests increased by 10% in the first week alone.</p>
</div>
<figure class="os-slideshow-container mt-5">
<div id="cgu-website-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#cgu-website-nav .prev", "nextArrow": "#cgu-website-nav .next", "appendDots": "#cgu-website-dots" }'>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGU-Homepage.png', 'cgu/browser-carousel-1'); ?>" srcset="<?php echo os_path('CGU-Homepage.png', 'cgu/browser-carousel-1'); ?> 1x, <?php echo os_path('CGU-Homepage@2x.png', 'cgu/browser-carousel-1'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University Homepage</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGU-Academics.png', 'cgu/browser-carousel-1'); ?>" srcset="<?php echo os_path('CGU-Academics.png', 'cgu/browser-carousel-1'); ?> 1x, <?php echo os_path('CGU-Academics@2x.png', 'cgu/browser-carousel-1'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University Academics Page</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGU-School.png', 'cgu/browser-carousel-1'); ?>" srcset="<?php echo os_path('CGU-School.png', 'cgu/browser-carousel-1'); ?> 1x, <?php echo os_path('CGU-School@2x.png', 'cgu/browser-carousel-1'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University School Page</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGU-Art.png', 'cgu/browser-carousel-1'); ?>" srcset="<?php echo os_path('CGU-Art.png', 'cgu/browser-carousel-1'); ?> 1x, <?php echo os_path('CGU-Art@2x.png', 'cgu/browser-carousel-1'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University Art Page</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGU-Gallery.png', 'cgu/browser-carousel-1'); ?>" srcset="<?php echo os_path('CGU-Gallery.png', 'cgu/browser-carousel-1'); ?> 1x, <?php echo os_path('CGU-Gallery@2x.png', 'cgu/browser-carousel-1'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University Gallery Page</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGU-Why.png', 'cgu/browser-carousel-1'); ?>" srcset="<?php echo os_path('CGU-Why.png', 'cgu/browser-carousel-1'); ?> 1x, <?php echo os_path('CGU-Why@2x.png', 'cgu/browser-carousel-1'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University Why Page</figcaption>
</li>
</ul>
<?php os_slide_nav("cgu-website-nav"); ?>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<p class="h3 future-A h3"><a href="http://cgu.edu/" class="cta-link" target="_blank">cgu.edu <span class="icon arnhem rotate-cc-45">→</span></a></p>
<p>To ensure consistent implementation of the new visual system across the university, we adapted the brand guidelines into a living document online. The central resource allows for ongoing stewardship of the brand and is accessible to all university stakeholders to address their marketing, advertising, and communications needs.</p>
</div>
</div>
<figure class="os-slideshow-container mt-5">
<div id="cgu-toolkit-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#cgu-toolkit-nav .prev", "nextArrow": "#cgu-toolkit-nav .next", "appendDots": "#cgu-toolkit-dots" }'>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGUBrand-Home.png', 'cgu/browser-carousel-2'); ?>" srcset="<?php echo os_path('CGUBrand-Home.png', 'cgu/browser-carousel-2'); ?> 1x, <?php echo os_path('CGUBrand-Home@2x.png', 'cgu/browser-carousel-2'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University Brand Home Page</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGUBrand-Visual-Identity.png', 'cgu/browser-carousel-2'); ?>" srcset="<?php echo os_path('CGUBrand-Visual-Identity.png', 'cgu/browser-carousel-2'); ?> 1x, <?php echo os_path('CGUBrand-Visual-Identity@2x.png', 'cgu/browser-carousel-2'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University Visual Identity</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGUBrand-Identity.png', 'cgu/browser-carousel-2'); ?>" srcset="<?php echo os_path('CGUBrand-Identity.png', 'cgu/browser-carousel-2'); ?> 1x, <?php echo os_path('CGUBrand-Identity@2x.png', 'cgu/browser-carousel-2'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University Brand Identity</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGUBrand-Color.png', 'cgu/browser-carousel-2'); ?>" srcset="<?php echo os_path('CGUBrand-Color.png', 'cgu/browser-carousel-2'); ?> 1x, <?php echo os_path('CGUBrand-Color@2x.png', 'cgu/browser-carousel-2'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University Brand Color Pallet</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('CGUBrand-Type.png', 'cgu/browser-carousel-2'); ?>" srcset="<?php echo os_path('CGUBrand-Type.png', 'cgu/browser-carousel-2'); ?> 1x, <?php echo os_path('CGUBrand-Type@2x.png', 'cgu/browser-carousel-2'); ?> 2x" width="850" height="780">
</div>
</div>
<figcaption>Claremont Graduate University Brand Typography</figcaption>
</li>
</ul>
<?php os_slide_nav("cgu-toolkit-nav"); ?>
</figure>
<div class="outer-container">
<div class="inner-container my-5">
<p class="h3 future-A h3"><a href="http://brand.cgu.edu/" class="cta-link" target="_blank">brand.cgu.edu <span class="icon arnhem rotate-cc-45">→</span></a></p>
</div>
</div>
</section>