Design of the top page

[kotarohara]

Matt's comment: First page, looks nice but I don’t really know what the little indicators under the map mean… is this map supposed to be interactive? Okay, sometimes it is… when I hover over the right spots, but it doesn’t do anything which is something I sort of expected. The description, or call to action, leaves me asking what accessibility problems? And, what am I actually getting involved with? Some kind of image carousel instead of the map that explains the project visually and what I need to do might be helpful.

[kotarohara]

I'll come back to the design of the top page when I'm done with fixing the issues for the labeling interface.

[nguyenist-zz]

@kotarohara label here is high priority. shall i work on this one next? i know you already have a ton of ideas. if so, let me know what you're thinking. if not, happy to provide a first pass at how to make the landing page better. my gut says remove the intermediary landing page and go directly into https://sidewalk.umiacs.umd.edu/audit

[kotarohara]

@nguyenist Hmmm, I would like to have a landing page, which allows us to give more context to people visiting the site. I'll actually have design prototypes that I will go through with people in the lab, so let me handle this :)

[nguyenist-zz]

Sweet!

[kotarohara]

Note to myself: I should make a placeholder image for the top-page video.

[jonfroehlich]

@nguyenist It would be great to get your feedback on the landing page redesign. Kotaro did a very nice job of creating a number of nice alternative designs. We consider it one of the most important parts of our website as it should: (i) inform and excite people about our mission; (ii) motivate them to donate their time and work; (iii) look good!

[jonfroehlich]

And the landing page is currently in flux it looks like. @kotarohara pushed a new version but it is not rendering correctly, at least on my 30" monitor.

[kotarohara]

@jonfroehlich I think it's cache.

[kotarohara]

@nguyenist Yes, it would be great if you could provide feedback as @jonfroehlich said.

I'm changing this from a high priority issue to discussion as we are done with the first version.

[jonfroehlich]

So, the landing page is greatly improving. Some comments.

1. For aesthetic reasons, I think we should take out the menu bar at top. If we do this, then we need two buttons: "Participate" and "Sign-In"
2. I think we need to darken the opacity overlay on the video. I think we should also reduce the video size, so that we can better see what's going on. As now, it's really hard to see what's going on--the interfaces are cutoff/cropped.
3. Some of the video has whitespace on left and right side, which makes it look weird. We should have fullscreen video.

[jonfroehlich]

The video size is fine on my 30" monitor, so I think we just need to scale things differently, perhaps, for smaller monitors/resolutions.

[nguyenist-zz]

Hey @kotarohara wanted to work on this but the site is down (https://sidewalk.umiacs.umd.edu/audit). Assuming you're working on it or is there a different link? Let me know if I should wait to provide comments / edits on this one.

Service Temporarily Unavailable

The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

Apache/2.2.15 (Red Hat) Server at sidewalk.umiacs.umd.edu Port 443

[jonfroehlich]

Looks like it's still down... :(

[nguyenist-zz]

Some aesthetic suggestions:

1. Update the icons. The previous ones had inconsistent line widths and therefore looked less clean aesthetically than it could have been. Hope you like them, if not-- don't feel like you have to use them.
2. I also changed the formatting a bit so it looked less squished together. I am also going to update the text under the icons so it is all the same size. Pull request soon.

[jonfroehlich]

I think it's also crucial that we mention the computer vision part of this project--that is, how the labels will be used not just for accessibility aware GIS apps but to train CV algorithms to make labeling even faster. Telling this story, I think, is absolutely critical to portraying our application and to building excitement. I can work with you on the direct language... but I think we should literally have a very simple flow diagram that shows how labels are used to help train CV algorithms.

[nguyenist-zz]

Ok I'll hold off on the pull request. Let's work on exact phrasing for these points:

• Use our tool to label accessibility attributes in Google Street View
• The collected data will be stored on our server
• [Your labels] will be used to train our algorithms to make labeling (for what specifically) faster?
• Accessibility will be visualized with the collected data -- I think we need to reword this to read a little smoother. Perhaps: Accessibility [routes? maps? visualizations?-- would be helpful to have a specific noun here] can be created with collected data

@jonfroehlich Would you like to add the flow diagram as another icon above? Or is this a separate visualization?

[nguyenist-zz]

Also, there are other suggestions I have for the home page, but would like to start small and touch base with you all to see where you are with opportunities for improvement so we can prioritize the most important thing for your team!

[kotarohara]

Icons and other design features (@nguyenist) I like the icons you designed. It's cleaner than the ones I made/used; they were too dark and didn't match the overall aesthetics. Can you make the versions without the outer circle for each icon though? I might like them even better. It would be great if you could paste the screenshot(s) of versions of the flowcharts like you did previously.

Also, do you want to take over the task of improving the design of the landing page?

Information about the automation algorithms (@jonfroehlich @nguyenist) I agree we should mention it somewhere on the landing page. But, I disagree that it should be integrated into the current flowchart. The flowchart should briefly and quickly inform what the task is for the people who are willing to contribute and how the data is used. Adding additional information will dilute that message.

Alternatively, we could have sections below the flowchart, each of them detailing corresponding stage of the flowchart. Like: (1) first section describing how we gather data manually, (2) the second section telling a story about the fact that we will store and distribute accessibility data, and (3) we use the collected data for multiple different goals, including making applications like accessibility geo-visualization, a11y-aware navigation, etc, and how we use the collected data to train CV algorithms. Obviously, one downside of this structure is that the CV component comes at the bottom of the page, but I think it's not a big problem.

Web page down (@ngyenist) Thanks for pointing that out! Yes, I'm aware. Our server shut down for maintenance and killed the application process. I restarted the process and I think I fixed the issue. I wrote a script that reacts to server reboot and runs the application. I hope it works next time they shut down the server, but I can't really test it... (I don't think the admin people will shutdown the system for me just to test if one script is working.)

[nguyenist-zz]

Icons and other design features Yes I will take on improving the landing page!

Information about the automation algorithms Need more context on this to weigh in.

Here are some edits: icons, formatting, text consistency: https://github.com/ProjectSidewalk/SidewalkWebpage/pull/90/commits/cad7268a7db0ed09e3154d86af4f4dafbb8e5e5b

Attaching the images for you here also if helpful:

[jonfroehlich]

@kotarohara I think we need to discuss more whether CV algorithms should be integrated into the default flow chart. I vote yes. The notion that these labels are not just used to build apps but to actually train computer vision (i.e., machine learning) algorithms to speed up the process is both fascinating and motivating. My vote is that this is a core part of our story and thus should be part of the flowchart. I feel pretty strongly about this.

The beauty of our work is that we are essentially double dipping on human labor. We need to express that.

[nguyenist-zz]

Helpful research for me and thought I'd share / document. Looking at landing pages that relate to crowdsourcing something. Specifically trying to focus on design elements that show: (1) how they best explain what they do (2) how they explain the value of a participant's work.

• http://pulse.media.mit.edu/
• http://www.placemeter.com/
• http://climatecolab.org/
• https://www.waze.com/
• http://www.tiramisutransit.com/#reloaded
• https://openideo.com/
• https://www.mturk.com/mturk/welcome
• https://www.yelp.com/writeareview/biz/WW3wAnODM6bZZlnlIqV2TQ?return_url=%2Fbiz%2FWW3wAnODM6bZZlnlIqV2TQ

[nguyenist-zz]

@kotarohara An idea. Would love your thoughts. What could be helpful is to see the tangible outcomes of helping to label accessibility points visually.

Currently you use these 2 paragraphs. I think we should use less text, more imagery to condense these concepts. Design for ease of scanning content and assume not everyone will read all text in depth.

Instead of this:

---

We need your help to map the accessibility of the city. Problems such as lack of curb ramps make navigation more difficult for people with mobility impairments. Knowing where problems exist will help people plan their trip. Use our tool to walk through streets in Google Street View and report where the accessibility problems exist. We will use the data to visualize the city’s accessibility!

The collected accessibility data could be used in accessibility-aware map applications. For example, we could visualize whether one neighborhood has problems or not. The visualization allows a person with mobility impairment (e.g., a wheelchair user) to decide if they can go to their destination alone or they need someone to tag along to help them navigate inaccessible sidewalks.

---

Do this instead: Right now you subtly allude to it, but I think this should be more obvious. Show the value of your data in a very concrete / tangible way. For example (I made these up but know you probably have a better grasp of the value proposition).

With your help we can use the data to:

1. Create accessibility-aware maps so people can plan their travel. Ex: visualize whether one neighborhood has problems or not.
2. Improve city safety. Provide city governments with data to include planning and development opportunities to improve their neighborhood streets.
3. Increase academic awareness. For civic based research on city accessibility to continue initiatives to make sidewalks more walkable.

See the placemeter.com example here.

[kotarohara]

Addressed computer vision thing. Added a text saying "The collected accessibility data will also be used to train computers to automatically find and label accessibility attributes at scale and fast."

[kotarohara]

Got rid of the demo video. Because the video we had was designed as a background video, it doesn't have any textual explanation of what's going on in the shot and doesn't convey what's going on to the viewers. Maybe put it back in the future if we make a good demo video.

With a video:

Without a video:

[nguyenist-zz]

@kotarohara did you happen to get any user feedback on the video?

[kotarohara]

@nguyenist No, we need to get feedback and iterate on it. The video issue moved to #107