Update Mission Screens to make them more informative/educational, fun, and gamified :)

[jonfroehlich]

Our mission screens are a key opportunity to help motivate users but also to help them learn about sidewalk accessibility and correct/incorrect labeling behavior. I don't think we take advantage.

For example, here's a current validation screen:

And here's a quick mockup of a version aimed towards better informing our users:

There are lots of potential ways of doing this. For example, an alternative would be to randomly pick one incorrect example to show users for the target label type each time the mission screen is shown. This incorrect example would be curated from a small list of prepared images based on our CHI2019 paper:

And we'd explain that these are common user errors that we need to correct.

[misaugstad]

Here are some related issues... #1695 #1798 #234 #1838 #94 #1323

[jonfroehlich]

The next step would be to generate some mock ups and solicit feedback from the team. So, if someone wants to gain some user Interface design experience, This would be a great opportunity

Sent from my iPhone

On Jun 26, 2020, at 2:04 PM, Mikey Saugstad notifications@github.com wrote:

 Here are some related issues... #1695 #1798 #234 #1838 #94 #1323

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[NityaVenkat]

Hi

in case no one is currently working on this, i would like to volunteer

[jonfroehlich]

Sure. That would be great. Please use the tool first to get a sense of it and then post some rapid mocks for feedback!

Remember, we are trying to keep the user experience fun and supportive and gamelike!

Sent from my iPhone

On Jun 30, 2020, at 9:51 AM, NityaVenkat notifications@github.com wrote:

 Hi

in case no one is currently working on this, i would like to volunteer

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[misaugstad]

@NityaVenkat yep the help on this would be greatly appreciated!! Also please check out the other issues I linked to above to get an idea of some of the things we might want to have included on these screens.

[NityaVenkat]

@jonfroehlich @misaugstad Trying to get some background here, so will the users be doing this on their mobiles since i saw posts that talks about maps and routes walked. Or is this just going to be informational guide screens?

I did see the link to this application somewhere, but i'm unable to locate it now. Can someone just post the link to the current version here.

[jonfroehlich]

The application is here and is only for desktops/laptops (one small part is available on mobile). Please spend some time using the app (~maybe 3 auditing missions and 3 validation missions) and let us know if you have any more questions. Best way to explain Project Sidewalk is to use Project Sidewalk :) And you'll need in-depth understanding if you're going to be able to design new UX :)

[jonfroehlich]

I started collecting images that we could use to point out common "correct" and "incorrect" labeling activity:

• Surface Problems
• Obstacles
• Curb Ramps
• Missing Curb Ramps
• No Sidewalks

[jonfroehlich]

Here's an updated example mission screen. Is it glanceable enough? What do you think @gari01234?

[gari01234]

Here's an updated example mission screen. Is it glanceable enough? What do you think @gari01234?

looks great! Do you think it looks even glanceabler if you write the word "correct" in green and the word "incorrect" in red?

[jonfroehlich]

Good idea. I'll try that. Let's keep collecting correct/incorrect examples in these slide decks so we have good content for the mission screens.

[jonfroehlich]

Note that in addition to making these screens more educational, I also think they should be more fun and game'y, incorporating game design aspects like we are doing for the mission sidebar (https://github.com/ProjectSidewalk/SidewalkWebpage/issues/2260#issuecomment-705545794), user dashboard (https://github.com/ProjectSidewalk/SidewalkWebpage/issues/2281), and leaderboard (https://github.com/ProjectSidewalk/SidewalkWebpage/issues/2177).

So, for example, at the mission screens, we'll want to emphasize:

• how close they are to their next achievement related to that mission
• possibly their current rank (or some other aspect of leaderboard)
• overall stats
• and then some educational component

[jonfroehlich]

Just playing around with very early ideas here.

Original:

Very rapid draft of update:

Or something like this (a bit too busy):

[gari01234]

Good idea. I'll try that. Let's keep collecting correct/incorrect examples in these slide decks so we have good content for the mission screens.

I updated all the slide decks. I will continue, from time to time, to upload more images. But I guess/hope we have enough for now ;)

[jonfroehlich]

I just reviewed the slide decks. They look great. I agree that we have enough for now.

[katrimana]

Hi all, I have made mockups for the validation mission start and end screens.

Validation mission start screen:

• Focus on educating users the common mistakes in labels (inspired by how they are being presented in hackathons)
• The screen will only show 1 common error at a time so screen will not feel cluttered and user can at least get 1 takeaway
• Sequence of displaying the error can be either 1) showing the most common problem first or 2) random so user can learn a new thing each time (as suggested by Mikey)
• This layout can work for a variety of errors - see full range here: https://www.figma.com/file/m8eLiFP824qZ49QMJB8Hq1/Proj-Sidewalk-mission-screens?node-id=0%3A1

• Also considered matching the pop up screen border color with the label color

Validation mission end screen:

• Make it more delightful with a gif (this gif is royalty free, or I can try to make something similar)
• Show how many more labels they have got to reach next level
• Taken out the summary stats of their labels in the mission (are those important?)

[jonfroehlich]

The team distilled mission start screens into three core principles:

(1) user direction (e.g., giving a mission objective); (2) user engagement (e.g., making them feel excited, interested, engaged, empowered that they are helping change urban accessibility, etc.); (3) and user education (e.g., helping them learn more about urban design and improving their labeling/validating)

I think the mission completion screens are similar but maybe with additional focus on making people feel satisfied/gratified with the work that they're doing, helping show them a review of what they just accomplished, and highlighting how close they are to both personal (badges) and community (neighborhood completion) objectives.

[katrimana]

As discussed, for the mission start screens we'll have correct examples (in illustrations) and wrong examples (in images), and these will be displayed to the user on random. Figma link: https://www.figma.com/file/WIta6wAMpsnw9mAgKexlpk/Proj-Sidewalk-mission-screens?node-id=532%3A796

1. Layout for correct example screen (illustration)

   • Will create versions for other label types once illustrations are finalized by David

2. Layout for wrong examples (images)

   • Would like to have feedback on the images chosen and the copy describing the images.
   • There are other backup images in the Figma file.

[jonfroehlich]

Overall, looks great!

There are a few images that are either incorrect or could be improved. For example, in the following case, this is actually a correct label because there is a height difference between the dirveweay and sidewalk and a curb ramp is needed.

My other suggestion is that the pop-up that says "Wrong Label / Mark Disagree" is a wonderful area to catch the eye but I think we underutilize it. Rather than just saying "Wrong Label / Mark Disagree", I wonder if we could also have a bit of text about why it's wrong. For example, "Driveways are not curb ramps" and then on the left sidebar we repeat this but more expansively and with greater detail.

Finally, when we show Daniel's illustrations, let's be sure to put the labels in appropriate spot. They should be more like this (and you'll have to move the wheelchair and person to accommodate)

[hoominchu]

We started working on the implementation of these screens. Attaching a short video of the work in progress.

https://user-images.githubusercontent.com/8168506/200907226-f12b8815-aa5c-47b4-9618-02acaaedde95.mov