display school facts

[HarlanH]

currently, we have no UI to show or explore details of schools. We should design some sort of way such that when you're looking at a school (such as when you've selected it in the schools page), there should be a box, probably in the lower-left part of the screen, with information about the school. Initially that'll be official report-card data, but over time it should include a much broader set of data.

[cmgiven]

Lunch break mockups! This is my first pass at revising the school view. I suggest pulling the filters above the information; potentially this box collapses once a school is selected. Then to incorporate school boundaries (#20), I suggest tabbing the map to flip back and forth between commute and boundary data (and other maps when new ideas/data present themselves). Reactions? Balsamiq XML below if anyone wants to suggest other ideas.

<mockup version="1.0" skin="sketch" fontFace="Balsamiq Sans" measuredW="910" measuredH="665" mockupW="769" mockupH="637">
  <controls>
    <control controlID="0" controlTypeID="com.balsamiq.mockups::BrowserWindow" x="141" y="28" w="769" h="637" measuredW="450" measuredH="400" zOrder="0" locked="false" isInGroup="-1">
      <controlProperties>
        <text>Open%20Schools%21%0Ahttp%3A//edu.codefordc.org/</text>
      </controlProperties>
    </control>
    <control controlID="1" controlTypeID="com.balsamiq.mockups::Canvas" x="157" y="120" w="728" h="167" measuredW="100" measuredH="70" zOrder="1" locked="false" isInGroup="-1"/>
    <control controlID="2" controlTypeID="com.balsamiq.mockups::SubTitle" x="169" y="129" w="-1" h="-1" measuredW="170" measuredH="27" zOrder="2" locked="false" isInGroup="-1">
      <controlProperties>
        <text>Select%20a%20School</text>
      </controlProperties>
    </control>
    <control controlID="3" controlTypeID="com.balsamiq.mockups::ButtonBar" x="169" y="156" w="-1" h="-1" measuredW="129" measuredH="27" zOrder="3" locked="false" isInGroup="-1">
      <controlProperties>
        <text>Charter%2C%20Public</text>
      </controlProperties>
    </control>
    <control controlID="4" controlTypeID="com.balsamiq.mockups::ButtonBar" x="313" y="156" w="-1" h="-1" measuredW="205" measuredH="27" zOrder="4" locked="false" isInGroup="-1">
      <controlProperties>
        <text>Elementary%2C%20Middle%2C%20High</text>
      </controlProperties>
    </control>
    <control controlID="5" controlTypeID="com.balsamiq.mockups::ButtonBar" x="169" y="198" w="349" h="27" measuredW="337" measuredH="27" zOrder="5" locked="false" isInGroup="-1">
      <controlProperties>
        <text>All%20Wards%2C%201%2C%202%2C%203%2C%204%2C%205%2C%206%2C%207%2C%208</text>
      </controlProperties>
    </control>
    <control controlID="6" controlTypeID="com.balsamiq.mockups::ComboBox" x="169" y="240" w="349" h="-1" measuredW="103" measuredH="25" zOrder="6" locked="false" isInGroup="-1">
      <controlProperties>
        <size>14</size>
        <text>Thomas%20ES</text>
      </controlProperties>
    </control>
    <control controlID="8" controlTypeID="com.balsamiq.mockups::Paragraph" x="533" y="156" w="337" h="109" measuredW="200" measuredH="80" zOrder="7" locked="false" isInGroup="-1">
      <controlProperties>
        <text>Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Aenean%20commodo%20aliquet%20turpis%20in%20imperdiet.%20Sed%20fringilla%20euismod%20lorem%2C%20nec%20vulputate%20quam.%0A%20%0AMaecenas%20velit%20mauris%2C%20commodo%20vel%20ullamcorper%20nec%2C%20laoreet%20posuere%20quam.%20Sed%20volutpat%20ligula%20massa.</text>
      </controlProperties>
    </control>
    <control controlID="9" controlTypeID="com.balsamiq.mockups::Title" x="157" y="302" w="-1" h="-1" measuredW="213" measuredH="43" zOrder="8" locked="false" isInGroup="-1">
      <controlProperties>
        <bold>true</bold>
        <text>Thomas%20ES</text>
      </controlProperties>
    </control>
    <control controlID="10" controlTypeID="com.balsamiq.mockups::Map" x="437" y="302" w="448" h="322" measuredW="252" measuredH="222" zOrder="9" locked="false" isInGroup="-1"/>
    <control controlID="12" controlTypeID="com.balsamiq.mockups::MultilineButton" x="157" y="565" w="265" h="59" measuredW="139" measuredH="66" zOrder="10" locked="false" isInGroup="-1">
      <controlProperties>
        <color>10470904</color>
        <text>Zoning%20Boundaries%0AWhich%20areas%20are%20in%20boundary%20for%20this%20school%3F</text>
      </controlProperties>
    </control>
    <control controlID="13" controlTypeID="com.balsamiq.mockups::MultilineButton" x="157" y="498" w="265" h="59" measuredW="165" measuredH="66" zOrder="11" locked="false" isInGroup="-1">
      <controlProperties>
        <color>16777215</color>
        <text>Student%20Commutes%0AWhere%20do%20the%20students%20at%20this%20school%20live%3F</text>
      </controlProperties>
    </control>
    <control controlID="14" controlTypeID="com.balsamiq.mockups::Paragraph" x="157" y="360" w="265" h="138" measuredW="200" measuredH="80" zOrder="12" locked="false" isInGroup="-1">
      <controlProperties>
        <text>650%20Anacostia%20Ave%20NE%0AWashington%2C%20DC%2020019%0A%20%0AAt%20Neval%20Thomas%20Elementary%20School%2C%20our%20mission%20is%20to%20help%20our%20students%20excel%20academically%20while%20becoming%20well-rounded%2C%20global%20citizens.%20We%20partner%20with%20the%20DC%20Promise%20Neighborhood%20Initiative%20which...</text>
      </controlProperties>
    </control>
  </controls>
</mockup>

[ajschumacher]

Super cool!

I'm currently on a Bret Victor kick, so I submit as meta-design-comment his
70-page "Magic Ink": http://worrydream.com/MagicInk/

A philosophical opinion: These are all public schools. The trend toward
thinking of the distinction between charter and non-charter public schools
as the most important distinction you can make about public schools is
largely the result of the conflict between unquestioning advocates of
charter schools and unquestioning critics of charter schools I don't think
it's helpful. I don't think we should encourage this mindset, and I
certainly don't think we should encourage parents to think that their
decision process starts with a choice to go charter or not.

A practical opinion: I don't know how relevant this is to DC, but schools
can come in a lot of different configurations. Not just HS, middle,
elementary. In fact, not everyone agrees about what grades belong to these
divisions. What do you do with a K-6? An 8-12? And of course there are the
more common combos, like K-8 and 6-12. It's easy to side-step this by just
asking: what grade are you looking for? Everybody (more or less, in the US
public system) agrees about the grades. This is flexible and works for
parents who wonder if they can find a school that both their children can
attend, etc.

Please don't ever make a user select a school from a drop-down list. (I
think Bret is with me on this one.) (Maybe include an auto-completing
search box or something.) The map is there, let's use the map for all
selection. Schools that don't serve the relevant grade(s) or whatever get
greyed out.

Show the boundaries we care about by default, yes? (Oh and this balsamiq
thing is pretty fun, but... any kind of line you want, as long as it's
vertical or horizontal, eh?)

Are wards relevant if we're already looking at a map? I don't know how the
school selection process works here; maybe parents want to click on their
home location and see what schools they're eligible for? Is that a thing?
It seems like people can go anywhere, based on the commute patterns?

There's a better way of putting the data in than what I'm mocking up
here... Oh and that's "slipsum" (Samuel L. Jackson lorem ipsum) :) Maybe
really instead of the bubble thing we have it throw up little info-cards
with key stats on the right hand side, so you can put up a couple and
compare them?

[image: Inline image 1]

There's a little idea dump for now - maybe I'll get on this nodification
stuff. :)

• Aaron

On Wed, Oct 2, 2013 at 12:36 PM, Chris Given notifications@github.comwrote:

Lunch break mockups! This is my first pass at revising the school view. I
suggest pulling the filters above the information; potentially this box
collapses once a school is selected. Then to incorporate school boundaries (
#20 #20), I suggest
tabbing the map to flip back and forth between commute and boundary data
(and other maps when new ideas/data present themselves). Reactions?
Balsamiq XML below if anyone wants to suggest other ideas.

[image: school-mockup]https://f.cloud.github.com/assets/5375557/1255147/868a06da-2b80-11e3-97b4-c776a8e045e8.png

Open%20Schools%21%0Ahttp%3A//edu.codefordc.org/ Select%20a%20School Charter%2C%20Public Elementary%2C%20Middle%2C%20High All%20Wards%2C%201%2C%202%2C%203%2C%204%2C%205%2C%206%2C%207%2C%208 14 Thomas%20ES Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20Aenean%20commodo%20aliquet%20turpis%20in%20imperdiet.%20Sed%20fringilla%20euismod%20lorem%2C%20nec%20vulputate%20quam.%0A%20%0AMaecenas%20velit%20mauris%2C%20commodo%20vel%20ullamcorper%20nec%2C%20laoreet%20posuere%20quam.%20Sed%20volutpat%20ligula%20massa. true Thomas%20ES 10470904 Zoning%20Boundaries%0AWhich%20areas%20are%20in%20boundary%20for%20this%20school%3F 16777215 Student%20Commutes%0AWhere%20do%20the%20students%20at%20this%20school%20live%3F 650%20Anacostia%20Ave%20NE%0AWashington%2C%20DC%2020019%0A%20%0AAt%20Neval%20Thomas%20Elementary%20School%2C%20our%20mission%20is%20to%20help%20our%20students%20excel%20academically%20while%20becoming%20well-rounded%2C%20global%20citizens.%20We%20partner%20with%20the%20DC%20Promise%20Neighborhood%20Initiative%20which...

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/63#issuecomment-25554278
.

[ajschumacher]

works now?

[cmgiven]

Yes, Balsamiq: good for when your creativity is limited to the 25 most common UI elements used exactly as they have been used a million times before. On the upside, it's easy and I'm lazy. And I love the slipsum, although I somehow don't think that will fly for client projects.

I agree 100% with all three points: 1. charters are public schools too, 2. DC schools don't fit neatly into ES/MS/HS categories, and 3. a dropdown is a poor means of selecting from a list of hundreds of schools.

I don't know that the answer is to go to a 100% map solution. This prioritizes location over all else, and makes it difficult to find a specific school if you don't already know where it is. The popover idea will also be difficult to translate directly for mobile. Some quick thoughts:

• I think it's useful to create a separation between the search/selection interface and the information interface as we beef up both of them. I tried to move the existing functionality in this direction in my mockup.
• I think the neighborhood view is already part of the way there to your point about clicking on a home location and learning what they're zoned for. We would need a more granular means of selection (probably inputting an address), but this view could then show both the boundary schools as well as where else near-ish families send their kids.

Is there interest in taking the neighborhood view and turning it into a more generalized map-based school search view? Or the alternative might be to refine the existing search interface on the school view page? The former's probably a larger leap, the latter a smaller step.

[cherihung]

so many good points and good ideas here.

I also think we should have a search interface that is not entirely map-based to find a school. auto-search box sounds like a good way to go. a big feature for users who know exactly which schools they want to see.

I do like the idea of a general map-based school search view though. Good for exploration purpose. e.g. show pins of all the schools that are in an user's view? then the school pins can be filtered out with UI options like the "schools serving grades" menu.

maybe we can have the pop-over window show just a tiny bit of info to accommodate for issue on mobile. but then include a link or way to toggle/display more data on the side? (which seems that we'll have to do eventually anyway as we integrate more and more data about each school)

(it's 3am. and i really should get some sleep.)