Improve design of officer profiles

[redshiftzero]

Our officer profiles could use a snazzier design (example here is https://openoversight.com/officer/22934):

[redshiftzero]

I highly recommend this as background/inspiration: https://elgrito.witness.org/officer-profiles/

The timeline concept is definitely one I think would be great for OpenOversight

[nmorduch]

General notes

• My goals in this design are:
  • More polished ⇒ more trustworthy
  • Remove unnecessary text (e.g. some self-evident labels)
  • Make it more clear in which order to read things
  • Design little-used fancier features (e.g. incidents) so that some profiles can be impressive to show off
• I'm using the existing branding here but I also want to update it some in the near future. The colors I'm using are mostly just Sketch's default colors, and I'll give them more thought when I look at branding in general (but I think these are higher priority than branding).

Officer profiles

With minimal data	With lots of photos	With lots of incidents
With minimal data, I want to acknowledge the some things are missing, and omit others.	I didn't put all the photos in the timeline, just one for an example. Also I think this guy's assignment data isn't very accurate.	In theory, you would display on this page the first media item if there is one, or the map if there's a map but no photos

• There isn't currently functionality to grab maps. It will require adding a field for an address where the pin should be dropped (more specific than the display address).
• I have lots of buttons about contributing data that I think won't actually get to go in yet because there isn't the infrastructure to accept contributions.
• I haven't given the timeline a title saying it's a timeline, on the theory that it's self-evident, but we totally could.
• On narrow screens, the line for the timeline will run down the left-hand side of the screen, and the information for each item will be in one column.
• Note that the photo thumbnails are cropped to the face, and the main photo is just made to be the width of the column. If it's too small I think I'll center it on a dark box.
• If there are a lot of photos there could be a lot of white space to the left of them. I might consider only displaying a few of them there, and doing something like Facebook has been doing for photo posts

Photo viewer

Photo taller than box proportions	Photo wider than box proportions
This shows without the face highlighted	This shows after you click the highlight face button

• These are what you get when you click on a photo on the profile or click on the view fullsize image button. On second thought maybe that should say something like "larger" instead of full size, since these still aren't full.
• I think that highlighting the face should be left for a later issue, but I thought it would be a nice feature to mock up.
• Ideally I'd like viewing each image to have its own URL that you could link to, which is why I've included some general info on the left.
• I don't think the styling to show which photo is selected stands out enough right now. I'll keep thinking on it. The problem is that the photos can be all sorts of color palettes so there's nothing that will stick out 100% of the time.
• I might want to move the 1 of 5 label to the sidebar.
• The sidebar will have to scroll when it gets long.
• I think I won't show any thumbnails when there's only one photo, but will say 1 of 1

Incidents

Since the incident page was mostly already redesigned by doing the profile timeline, I threw this together too.

[redshiftzero]

First, these look amazing! 😍 I filed a few followup issues based on things we'd need to implement elsewhere first (e.g. the maps), but most of this can obviously be done with what is currently in the database. I expect in the next year of the project we will have a lot more incidents making their way into the database, so focusing on building up the timeline view makes a lot of sense (and eventually it can also include e.g. salary, awards, etc.).

Two important things I forgot earlier (arg sorry):

1. There can be both videos and links that are NOT associated with an incident. For example, here's an officer that has a news story on his profile: https://openoversight.com/officer/21672. It's not really an incident with the public documented by a police oversight/accountability org, so it was added to his profile separately. What we could do is optionally add these to the timeline if there's a date/time (we'd need to add a datetime field and fill them in for the existing links/videos) or have another area on the profile to show this stuff... ? Let me know if you have a bright idea there.

2. There can also be notes on an officer's profile (these are currently private to admins and area coordinators) - this is a recent addition in #475.

I haven't given the timeline a title saying it's a timeline, on the theory that it's self-evident, but we totally could.

This makes total sense.

I have lots of buttons about contributing data that I think won't actually get to go in yet because there isn't the infrastructure to accept contributions.

Makes sense, though most of this info can be edited by admins/area coordinators, so buttons will appear for them to: edit/add incidents, edit/add assignments, edit/add private notes, edit/add basic officer information.

Ideally I'd like viewing each image to have its own URL that you could link to, which is why I've included some general info on the left.

Yep, I think what we want is the cutout on the profile (this is 300 x 300 so that will make designin' simpler, this migration will occur when the thumbnail PR gets deployed #459 (my bad, I'm blocking on that)), and then a link to the static page for the image. The good news is that we have a static link for images, e.g. https://openoversight.com/image/73:

So we can link out to those for people that want to see the full image and the context.

Incident mockup: This looks great. Minor notes that will come up when we come to implementation there can be multiple officers/license plates (or no license plates) associated with an incident, and we should note which user added/last edited the incident (all of this is already stored so we're good there). Leaving off the map until it's implemented I feel like will still look pretty nice. Note however that there may be multiple videos and also links here too.

[nmorduch]

First, these look amazing! 😍

Thank you :D :D :D

1. There can be both videos and links that are NOT associated with an incident. ... What we could do is optionally add these to the timeline if there's a date/time (we'd need to add a datetime field and fill them in for the existing links/videos) or have another area on the profile to show this stuff... ? Let me know if you have a bright idea there.

Yes, this is exactly what I was thinking without even knowing you already content for this feature. Issue here: #507

2. There can also be notes on an officer's profile (these are currently private to admins and area coordinators) - this is a recent addition in #475.

Hmmm let's maybe add a field for a public description like I have under the name on the profile, and can display private notes under it for admins?

most of this info can be edited by admins/area coordinators, so buttons will appear for them to: edit/add incidents, edit/add assignments, edit/add private notes, edit/add basic officer information.

Cool, we can pepper liberally with edit buttons, and that'll make it really easy for you to know where to throw in contribute buttons should you gain the capability to deal with more kinds of contributions.

The good news is that we have a static link for images, e.g. https://openoversight.com/image/73 .... So we can link out to those for people that want to see the full image and the context.

Innnnteresting. What I would like is a page for the image as associated with a given officer. Do images get associated to more than one officer?

Incident mockup: This looks great. Minor notes that will come up when we come to implementation there can be multiple officers/license plates (or no license plates) associated with an incident, and we should note which user added/last edited the incident (all of this is already stored so we're good there). Leaving off the map until it's implemented I feel like will still look pretty nice. Note however that there may be multiple videos and also links here too.

Here's an incident that displays the following things:

• No map
• Admin with info about which user added/last edited the incident and links to edit (though the latter might change with branding changes)
• Multiple license plates, I'm not that tied to how I did this and am open to other ideas
• I put text links in the sidebar with a Sources heading, making a stab in the dark guess at how they might be used. How do you actually intend to use text links?

[redshiftzero]

Hmmm let's maybe add a field for a public description like I have under the name on the profile, and can display private notes under it for admins?

I dig it!

Innnnteresting. What I would like is a page for the image as associated with a given officer. Do images get associated to more than one officer?

Ahhhhh I hear you. One page that has all the cops for a single officer makes a lot of sense. It is the case that there are images that point to multiple officers.

I put text links in the sidebar with a Sources heading, making a stab in the dark guess at how they might be used. How do you actually intend to use text links?

Links might be: news articles related to the incident, links to lawsuits related to the incident. Maybe a generic title like "See also" or "Links" could do the trick?

[dismantl]

It seems like a lot of other planned features and issues touch on this profile redesign. @nmorduch are there any updates on this, or could someone else use your mockups to begin implementing this?

[nmorduch]

Someone else could definitely implement these mockups!