Redesigning right sidebar of primary UI for auditing and validation missions

[jonfroehlich]

While overseeing my son's Kindergarten today (remote education ftw), I mocked up some more informative and gamified versions of the right sidebar in the validation mission screen. I added validation rate information (to help users compare their validation behavior to others) and some gamifiction ideas. What do you think @gari01234 and @misaugstad?

[gari01234]

the first one is my favorite. It looks great with the Badges!!

[jonfroehlich]

Thanks @gari01234. This will be a slightly dev/design TODO for me, so probably won't be done by the time we ship the new Mexico tags and leaderboard.

Like the leaderboard, I'm trying to think of features that will help our mapathons, however.

[misaugstad]

I don't think I like the idea of including how frequently others agree... It encourages people to conform to the average, but we don't know that the average is where people should be aiming.

And I agree with @gari01234 that I like the first one the best, but that also requires a system of badges that we don't have yet lol.

And what is the point of surfacing the user's (and other users') agreement percentage? Why does your average user care about that? I think you and I find that interesting, but I feel like most people wouldn't care and it just takes up space. The total number they've done, a progress bar, and badges are the things I expect people to actually enjoy looking at.

[jonfroehlich]

I also worried about showing other users' agreement percentages both in terms of its potential to nudge towards conformance and needless information clutter. So, we can cut it. I guess I was trying to give people a sense of how they did compare to general behavior.

Re: badges. This is relatively easy to implement if we keep it a frontend feature (which is just a matter of doing some conditional checks). I think, longterm, we'll probably want to do something more coherent on the backend so we can display this stuff in the user dashboard, etc.

[misaugstad]

I also worried about showing other users' agreement percentages both in terms of its potential to nudge towards conformance and needless information clutter. So, we can cut it.

Agreed.

Re: badges. This is relatively easy to implement if we keep it a frontend feature (which is just a matter of doing some conditional checks). I think, longterm, we'll probably want to do something more coherent on the backend so we can display this stuff in the user dashboard, etc.

I think that's fair, especially if the badges are just about total labels validated to start off with (something that we are already keeping track of on the front-end).

[jonfroehlich]

I want to revisit this redesign once I'm finished with the new user dashboard designs.

Interestingly, in going back through old UI ideas and mockups for late 2015 and early 2016, I see that we had "Achievements" on the right mission sidebar. Good ideas persist! :D

[jonfroehlich]

Iterating on this now that I've been working on the user dashboard (badges, leaderboard trophies, etc.).

This one feels too busy:

I would have mouseover (tooltip) text for the overall stats icons:

[jonfroehlich]

Again, while overseeing Kindergarten, more design work. I think I like this one best so far.

Trying to keep the sidebar clean and minimalistic while still being fun and encouraging.

A slight variation. Not sure what to do with positive and negative examples (also will be redesigning front mission screen to include positive/negative examples to help educate users, so maybe these are less necessary on the sidebar).

[jonfroehlich]

Newest version. Again, maybe feels too busy?

[gari01234]

Looks great to me! is this sidebar also going to be added to the explore mission screens?

[jonfroehlich]

Yes, I'm working on that too but a bit further behind on that. Here's an early draft:

I also like the idea of keeping track of stats and certain achievements per neighborhood in addition to overall. But I'm just haven't had much time to mock things up:

[jonfroehlich]

Another draft:

Original:

[jonfroehlich]

I think the MVP version of this, as discussed with @misaugstad, is simply to add a lil version of the dashboard stats on the sidebar. A key advantage is always showing the "accuracy" stat (which is currently only available if you're on the leaderboard or if you click on your user dashboard).

Labeling

Validating

[jonfroehlich]

As this is part of our ongoing UI redesigns, just putting this here from Slack.

If I might take a swing at synthesizing this into higher level themes, we want our UI redesigns to focus on:

User education: how can we continuously help users learn about urban design and accessibility assessment. Relatedly, how can we help them become more effective labelers. One great example of this is the mission screen redesigns but another is feedback—how can users get timely feedback on their performance so they can take corrective action. See Section 1.1.2 of my PhD dissertation.

Collective action: how can we help people feel part of something bigger than themselves. For example, the sidebar should not just track my progress in a neighborhood but the overall progress of our collective efforts together. Being part of a community is a human need, and the best way to make a difference.

Fun, motivation, engagement. how can we make the experience feel fun and engaging. What are current pain points (one you identified is the "overwhelm" that users might feel in starting or feelings of "anxiety" when they don't know how to label something). Sometimes, little UI tweaks (like animations) can help make an experience feel more cohesive and fun.

Making a difference. how can/should we remind people of how their work can make a difference?

Human presence. How can we better imbue the interface with feelings of empathy and that this task is fundamentally about helping people and improving cities. It would just be nice to have more human presence in the UX. This relates to: https://github.com/ProjectSidewalk/SidewalkWebpage/issues/3083

[jonfroehlich]

After seeing some of these mocks from 2020, I'm not as certain about them now! They seem a bit overly dense and complicated.

Oh, how time heals and changes us.