/
content-boston-public-schools.php
209 lines (196 loc) · 12.7 KB
/
content-boston-public-schools.php
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
<section id="opportunity" class="page-section outer-container">
<div class="inner-container mt-5">
<h3 class="future-A h3">opportunity</h3>
<p>Every year in Boston, 57,000 students must be placed in 137 public schools. The Discover Boston Public Schools project was born out of a 2011 Code for America fellowship by Joel Mahoney, to address the school department’s critical mandate to engage parents in the process of placing their students in schools. In its first pilot year, upwards of half the parents in Boston used the platform to identify the right school for their child — a pretty remarkable adoption rate for new civic technology.</p>
<p>In 2013, the school district enacted a policy to transition from a zone-based model to a home-based model of placement, allowing parents to find the best schools for their children within close proximity to their home. The New York Times wrote about the genesis of this algorithm.</p>
</div>
</section>
<section class="page-section mt-5" >
<figure class="alignnone mt-nudge">
<div style="overflow:hidden; position: relative;">
<blockquote class="parallax-node" data-speed-modifier="0.5">
<p><span class="quote">“</span>[Discover BPS] changed the way we relate to parents.<span class="quote">”</span><br/><small>— Carol R. Johnson, <em>Superintendent, Boston Public Schools</em></small></p>
</blockquote>
<img src="<?php echo os_path('DBPS-Parallax.jpg', 'bps') ?>" srcset="<?php echo os_path('DBPS-Parallax.jpg', 'bps') ?> 1x, <?php echo os_path('DBPS-Parallax.jpg', 'bps') ?> 2x" width="1600" height="1008">
</div>
<div class="outer-container">
<figcaption class="inner-container">Boston Public School busses</figcaption>
</div>
</figure>
</section>
<section id="process" class="page-section" >
<div class="outer-container">
<div class="inner-container mt-5">
<p>
<strong>Complex choices, easy decisions</strong><br/>
To address this policy change, the Discover BPS tool would need to be re-worked. The project team reached out to our team to lead the design of a highly accessible interface that addresses the needs of key constituents with a map-driven interface, centering school options around the location entered by the user.
</p>
<p>Key to the solution was to ensure that standardized test scores alone did not lead user selection of schools. To that effect, we emphasized an extensive list of school characteristics that might play a critical role in a parent’s choice. By viewing schools options with preferences such as ‘focus on the arts,’ ‘full-time nurse,’ specific care hours or facilities, parents are empowered to find the schools that are the right fit for their student.</p>
<h3 class="future-A h3 mt-5">process</h3>
<p>With a full understanding of all that the tool needed to accomplish, our team considered how parents would learn about Discover BPS. In the first incarnation of the tool, the initiative had been branded as an individual product, with little to no relationship with the school district.</p>
</div>
</div>
<figure class="bps-wordmarks aligncenter active-on-inview mt-5" data-offset="0.5">
<div style="background-color: #0077D2;" >
<img src="<?php echo os_path('Discover.png', 'bps') ?>" srcset="<?php echo os_path('Discover.png', 'bps') ?> 1x, <?php echo os_path('Discover-@2x.png', 'bps') ?> 2x" width="820" height="240">
<img src="<?php echo os_path('Register.png', 'bps') ?>" srcset="<?php echo os_path('Register.png', 'bps') ?> 1x, <?php echo os_path('Register-@2x.png', 'bps') ?> 2x" width="820" height="240">
<img src="<?php echo os_path('Succeed.png', 'bps') ?>" srcset="<?php echo os_path('Succeed.png', 'bps') ?> 1x, <?php echo os_path('Succeed-@2x.png', 'bps') ?> 2x" width="820" height="240">
</div>
<div class="outer-container">
<figcaption class="inner-container">Discover Boston Public Schools wordmarks</figcaption>
</div>
</figure>
<div class="outer-container">
<p class="inner-container mt-5">Since the role of this tool is to serve as the first step in part of the larger registration process, we proposed branding the process holistically, using the bright blue of Boston Public Schools as the unifying element for a streamlined visual system. This cohesive system will play an integral part in the communications campaign to parents.</p>
</div>
<figure class="aligncenter mt-5" style="background-color: #D7EFFC;">
<img src="<?php echo os_path('DBPS-Poster-min.png', 'bps') ?>" srcset="<?php echo os_path('DBPS-Poster-min.png', 'bps') ?> 1x, <?php echo os_path('DBPS-Poster-@2x-min.png', 'bps') ?> 2x" width="1200" height="797">
</figure>
<div class="outer-container">
<figcaption class="inner-container">A poster for a school showcase using the visual system</figcaption>
</div>
</section>
<section id="solution" class="page-section" >
<figure class="aligncenter mt-nudge">
<div class="image-bg" style="padding: 60px 0 0; ">
<img src="<?php echo os_path('DBPS-Results.png', 'bps') ?>" srcset="<?php echo os_path('DBPS-Results.png', 'bps') ?> 1x, <?php echo os_path('DBPS-Results-@2x.png', 'bps') ?> 2x" width="843" height="317">
</div>
<div class="outer-container">
<figcaption class="inner-container">Comprehensive Icon system for filtration of schools</figcaption>
</div>
</figure>
<div class="outer-container">
<div class="inner-container mt-5">
<h3 class="future-A h3">solution</h3>
<p>In addition to helping parents take control of an important decision in the children''s life, rethinking the user experience represents an opportunity to position Boston Public School as a proactive, innovative and trustworthy organization. A positive perception of the school district can only engender more goodwill and participation from parents, students, and the community alike.</p>
<p>Celebrated online urban policy publication Next City wrote about the project and our involvement in this November 2013 piece: <a href="http://nextcity.org/sharedcity/entry/how-boston-is-building-the-hotels.com-of-public-schools" class="cs-body-link" target="_blank">How Boston Is Building the Hotels.com of Public Schools</a></p>
</div>
</div>
<figure class="os-slideshow-container mt-5">
<div id="bps-website-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#bps-website-nav .prev", "nextArrow": "#bps-website-nav .next", "appendDots": "#bps-website-dots" }'>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('DBPS-Home-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Home-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Home-@2x-min.png', 'bps'); ?> 2x" width="850" height="800">
</div>
</div>
<figcaption>Discover Boston Public Schools 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('DBPS-Schools-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Schools-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Schools-@2x-min.png', 'bps'); ?> 2x" width="850" height="800">
</div>
</div>
<figcaption>School results</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('DBPS-Schools-Details-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Schools-Details-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Schools-Details-@2x-min.png', 'bps'); ?> 2x" width="850" height="800">
</div>
</div>
<figcaption>School detail</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('DBPS-Compare-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Compare-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Compare-@2x-min.png', 'bps'); ?> 2x" width="850" height="800">
</div>
</div>
<figcaption>Compare schools</figcaption>
</li>
<li class="browser">
<div class="browser-bar"></div>
<div class="browser-window">
<div class="browser-inner">
<img src="<?php echo os_path('DBPS-Ready-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Ready-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Ready-@2x-min.png', 'bps'); ?> 2x" width="850" height="800">
</div>
</div>
<figcaption>Schools chosen</figcaption>
</li>
</ul>
<div class="outer-container">
<div class="inner-container">
<?php os_slide_nav("bps-website-nav"); ?>
</div>
</div>
</figure>
<figure class="os-slideshow-container mt-5">
<div id="bps-mobile-dots"></div>
<ul class="list-unstyled os-slideshow center-mode" data-slick='{ "prevArrow": "#bps-mobile-nav .prev", "nextArrow": "#bps-mobile-nav .next", "appendDots": "#bps-mobile-dots", "centerPadding": "0", "slidesToShow" : 1 }'>
<li>
<div class="iphone">
<img src="<?php echo os_path('iPhone.svg'); ?>" alt="iphone" width="318" height="660" />
<div class="iphone-window">
<div class="iphone-window-inner">
<img src="<?php echo os_path('DBPS-Mobile1-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Mobile1-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Mobile1-@2x-min.png', 'bps'); ?> 2x" width="268" height="1184"/>
</div>
</div>
</div>
<figcaption class="text-center">Mobile Homepage</figcaption>
</li>
<li>
<div class="iphone">
<img src="<?php echo os_path('iPhone.svg'); ?>" alt="iphone" width="318" height="660" />
<div class="iphone-window">
<div class="iphone-window-inner">
<img src="<?php echo os_path('DBPS-Mobile2-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Mobile2-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Mobile2-@2x-min.png', 'bps'); ?> 2x" width="268" height="2094"/>
</div>
</div>
</div>
<figcaption class="text-center">School results</figcaption>
</li>
<li>
<div class="iphone">
<img src="<?php echo os_path('iPhone.svg'); ?>" alt="iphone" width="318" height="660" />
<div class="iphone-window">
<div class="iphone-window-inner">
<img src="<?php echo os_path('DBPS-Mobile3-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Mobile3-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Mobile3-@2x-min.png', 'bps'); ?> 2x" width="268" height="1534"/>
</div>
</div>
</div>
<figcaption class="text-center">Compare and rank</figcaption>
</li>
<li>
<div class="iphone">
<img src="<?php echo os_path('iPhone.svg'); ?>" alt="iphone" width="318" height="660" />
<div class="iphone-window">
<div class="iphone-window-inner">
<img src="<?php echo os_path('DBPS-Mobile4-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Mobile4-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Mobile4-@2x-min.png', 'bps'); ?> 2x" width="268" height="1426"/>
</div>
</div>
</div>
<figcaption class="text-center">Ranked school choices</figcaption>
</li>
</ul>
<?php os_slide_nav("bps-mobile-nav"); ?>
</figure>
<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('DBPS-Billboards1-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Billboards1-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Billboards1-@2x-min.png', 'bps'); ?> 2x" width="850" height="566" />
<div class="photo-credit">© Mindy Best Photography</div>
</li>
<li>
<img src="<?php echo os_path('DBPS-Billboards2-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Billboards2-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Billboards2-@2x-min.png', 'bps'); ?> 2x" width="850" height="566" />
<div class="photo-credit">© Mindy Best Photography</div>
</li>
<li>
<img src="<?php echo os_path('DBPS-Billboards3-min.png', 'bps'); ?>" srcset="<?php echo os_path('DBPS-Billboards3-min.png', 'bps'); ?> 1x, <?php echo os_path('DBPS-Billboards3-@2x-min.png', 'bps'); ?> 2x" width="850" height="566" />
<div class="photo-credit">© Mindy Best Photography</div>
</li>
</ul>
<?php os_slide_nav("bps-billboard-nav"); ?>
<figcaption class="outer-container"><div class="inner-container">Discover BPS Billboards</div></figcaption>
</figure>
<div class="outer-container mt-5">
<p class="h3 future-A h3 inner-container"><a href="https://discover.bostonpublicschools.org" class="cta-link" target="_blank">discover.bostonpublicschools.org <span class="icon arnhem rotate-cc-45">→</span></a></p>
</div>
</section>