UX/UI rethink

[jueyang]

@mikelmaron

Here's the UX/UI/rethink I've done for the site. To recap the meeting, here're the goals we are hitting:

• prioritize school profile as it has information for all the audience groups
• make the site more friendly (look- and use-wise)

  Landing:

Idea here is to address different parts of the site: first and foremost, the map, and then the blog and the data page. I've written the copies to include all the constituents, from parents to NGOs. The map is now the main focus of the site.

I think it's also valuable to change the tags so it's more friendly for parents. I've included

• the search of school names
• education type (nursery, primary, etc)
• sponsor (public/private) and
• teacher/student ratio

since these are what the parents care about the most. This is a suggestion, if you think other filters make more sense (since they cater to other audience) let's discuss :)

School Profile:

Rather than introducing fancy UI elements, I think the way to distinguish the OSM/Gov datasets is to give them a better hierarchy. I've broken down the OSM (Map Kibera Trust) datasets into Amenity, School and Area (the fields are from the actual page.) The gov datasets is broken into school and area. The former consists of enrollment and infrastructure (ie. toilet) info and the latter, admin info.

The categorization of data fields is up for discussion. Let me know if

• this is the correct understanding of the datasets, and
• how much work you think it takes to format datasets into smaller pieces

If we present the data as is, clear typography and layout would make a big difference.

Aesthetic:

Lighter site + iconography aka smily faces = more friendly

Next actions:

@mikelmaron If you agree with the direction I'm going with the front page, I can start implementing the css, which impacts the blog/data pages as well. :shipit:

cc @ianschuler @smit1678

[mikelmaron]

This is looking great jue

I can't respond in detail at the moment, do have some questions ....

Sent from my iPhone

On Aug 22, 2014, at 6:11 PM, Jue Yang notifications@github.com wrote:

@mikelmaron

Here's the UX/UI/rethink I've done for the site. To recap the meeting, here're the goals we are hitting:

prioritize school profile as it has information for all the audience groups make the site more friendly (look- and use-wise) Landing:

Idea here is to address different parts of the site: first and foremost, the map, and then the blog and the data page. I've written the copies to include all the constituents, from parents to NGOs. The map is now the main focus of the site.

I think it's also valuable to change the tags so it's more friendly for parents. I've included

the search of school names education type (nursery, primary, etc) sponsor (public/private) and teacher/student ratio since these are what the parents care about the most. This is a suggestion, if you think other filters make more sense (since they cater to other audience) let's discuss :)

School Profile:

Rather than introducing fancy UI elements, I think the way to distinguish the OSM/Gov datasets is to give them a better hierarchy. I've broken down the OSM (Map Kibera Trust) datasets into Amenity, School and Area (the fields are from the actual page.) The gov datasets is broken into school and area. The former consists of enrollment and infrastructure (ie. toilet) info and the latter, admin info.

The categorization of data fields is up for discussion. Let me know if

this is the correct understanding of the datasets, and how much work you think it takes to format datasets into smaller pieces If we present the data as is, clear typography and layout would make a big difference.

Aesthetic:

Lighter site + iconography aka smily faces = more friendly

Next actions:

@mikelmaron If you agree with the direction I'm going with the front page, I can start implementing the css, which impacts the blog/data pages.

cc @ianschuler @smit1678

— Reply to this email directly or view it on GitHub.

[jueyang]

Good luck! I'll write a few things that I forgot to mention in the note above in the mean time.

[mikelmaron]

Jue, we like this a lot. Here's our feedback.

Front Page

• Was good to have some pictures on the front page. What do you think about moving the rotating image widget, at the top of the current site, to within the "Schools for Everyone" section?
• Likewise, what do you think about having 2-4 recent blog posts listed in the "Stories from You and Us"? In other words, we like the simplicity of your front page, but don't want to lose all the content.
• The former map had the filters above, your mockup has them below. Do you see the filters simply opening below as well? Any potential issue with page scroll?

Schools Page

• Good to have the tags broken up into groups. This is doable. Will look in detail at groupings that make sense.
• Where would you place photographs? Each schools have 1-4 photos.
• Do you see the sources being expandable? We might link in school exam results, and other sources? Could these be additional columns, scrolling in from the right.
• The OSM locations and Kenya Government locations differ. Is there an elegant way to show both locations, without being confusing?

[ericahagen]

Hi here are my additional comments:

We might want a bit different look so it is accessible but not too childish, might just be a color scheme change? Accessible yet professional.

Not sure about idea of photos inside the schools for everyone. I think we have to decide how to have a bit of a showy photo/video intro plus the functions we want.

Also I thought of having some statistics visualized in the Data part. For Data perhaps people don't just want to download, they want to learn and see how it's interoperable, which is indeed the main challenge we're addressing. IN light of that we might wish to ask people to please submit their data on schools to us.

That's the main stuff not captured by Mikel already!

[jueyang]

@mikelmaron & @ericahagen Thanks, the feedback is very helpful. I was in the middle of changing the school profile mock. So for all the feedback you posted about the school profile, I just changed the mockup accordingly to address the list.

Front Page

@ericahagen we can still have the pictures/videos on the top if that's where you'd like to draw the attention from the users first :) We can change the order of "Schools for everyone" to the top with an action button that goes to the map (which the mockup has), then the map and everything else. The flow would be similar to the current staging site.

Otherwise having images in the "Schools for Everyone" and featured blogs in "Stories from You and Us" are totally feasible.

Also, good call on the filter location. I think it's better to have it on top in that case.

Current colors derive from the OSM tile pixels :) I'll change the color scheme to be less playful.

School Page

Clarifying the concept of a Profile

I realized that the summary table is dynamically populated depending on the data availability. Since this table is to give people a general idea of the school, I think it would be better if the summary fields are consistent. This makes the concept of a school profile more obvious. For someone who's tweeting or facebook sharing a url like schools/1875796685/toi-primary-school/, they probably want to share a page that's understandable within a few seconds.

In the mockup above I have filled in four fields - Education Type, Status of School, Sponsor, and Pupil Student Ratio. Schools without any of these data field will display as No data available, which gives the audience a sense of data completeness for the respective school. (This doesn't have to be four fields. Totally flexible to change the fields/number of the fields.)

Multiple Data Sources

If there's going to be more than two datasets, I think the best way is to display is one at a time. I've mocked up this session with selectable data source. This might take some backbone template/view fiddling, but it shouldn't be too bad.

Displaying gallery and location difference between datasets

Gallery will appear with the summary fields :) Location difference can be displayed in the similar manner as the data sources. A dropdown would allow people to see different datasets (Map Kibera Trust vs Kenya Gov). Ideally a demarcation of the the government location on the map would appear, but adding that feature might take more time than necessary.

An alternative to show the gov data difference is to show the lat/lon side by side. In that case I'll think harder about the layout/type of that info.

Renaming data fields

The current school profile use the tags and native data fields from the datasets. To improve the readability about the school profile page, it'd benefit from processed texts instead of raw OSM tags. A lookup section for the tags/data fields can be documented in the data page.

It's almost the same as setting up a translation :)

[jueyang]

Also, while anticipating some other feedback from you, I'm going to start making style/feature changes on this fork. The general direction is pretty clear. Some things proposed for the school profile page might take some time, and I'd like to start with the code to get a sense of how long it'll actually take.

We can discuss further details when I've got a decent screenshot from a live site on this fork. Thanks!