search

freedomofpress / securedrop-ux

Public wiki and repository for the SecureDrop User Experience team
8 stars 0 forks source link

Complete branded bits & color schema #36

Closed ninavizz closed 5 years ago

ninavizz commented 5 years ago

Problem

Decided-upon visual design direction (#16) needs the left-column part for SecureDrop Branding to be finalized, and the rest of the client chrome massaged, accordingly.

Considerations

Acceptance Criteria

This is a sub-task within #31

ninavizz commented 5 years ago

Rev 4

14 March UX Meeting Design Review: [Hey, hey, it's some VisDe!]

eloquence commented 5 years ago

This issue will determine the final look & feel of all core client components for the beta.

This is Nina's primary focus for the current sprint, from 3/21 to 4/3. The plan of record is for her to present a "close to final, your input welcome" version of the design on 3/28 at the UX meeting, and the "final for reals unless anything is totally off" at the 4/4 UX meeting.

No other sprint commitments are blocked on the completion of this work, and indeed other UX client tasks are actionable already should we make faster progress than anticipated.

ninavizz commented 5 years ago

Rev 5

Erik:

Jen:

General Discussion Discussion

ninavizz commented 5 years ago

Rev 6

ninavizz commented 5 years ago

Complete To CLOSE this Issue:

ninavizz commented 5 years ago

Ohai! Crossing fingers that this might be the end of this issue... :D https://invis.io/K4RI3UKE5GJ#/357660809_Desktop

Because of how well the Purple ID Badge for the authenticated user works between both the Left-Pane and the Conversation Pane, it is my recommendation to use it (we left the last meeting a bit fuzzy on where exactly to land with it). I created 2 alternative versions, though, taking everyone's additional feedback into consideration (see 2 comments ago, for said feedback). I want the ID Badge in the Left Pane to look nice, but to also draw a clear and recognizable parity to the authenticated user's ID badge in the Convo pane. White text on the Cyan square for an ID badge, sadly was just not legible because the contrast ratio between the two was so low—hence, the darker blue, on it.

What do y'all think @eloquence @redshiftzero @creviera @harrislapiroff?

Harris: How do you feel about the cleaned-up Left Pane and Login window hexagons artwork? Will dump Sketch file into GitHub (UX Repo's files), if you want to take a look (or to poke at it), there.

Once I hear back from folks and we're all in agreement, I will close this issue (and do a big happy dance).

sssoleileraaa commented 5 years ago

lgtm!

Sad to see the Cyan square go, but I think the white text to match other badges is an improvement.

Curious if you think the airplane should either be the same shade of purple or a shade more distinct from the user icon? Or maybe it is the same color and my eyes are playing tricks on me.

ninavizz commented 5 years ago

LOL!! No trix... I had the exact same thought as I sat there staring at it, watching my Sketch push the final mockups to Invision. Validating to hear it wasn't just my OCD.

Let's wait on the others to get back with their thoughts on the other stuff, then circle-back to resolve the Awesome Airplane™?

ninavizz commented 5 years ago

Signal boost @redshiftzero @eloquence @harrislapiroff 😸

Happy Monday!

eloquence commented 5 years ago

This looks great to me as well. Before we close out this issue, I feel we should have consensus about the use of names (there are still placeholder "AppName" texts in the design), since this issue is after all in significant part about branding.

I would like to make the case for keeping it simple:

Rationale:

When I install an app on my phone or desktop that has a server dependency, that app typically has simple, standardized branding ("Signal", "Slack", etc.). As a user, I don't care about the client/server distinction. I just want to get to SecureDrop.

The long term goal is to have a single experience for accessing SecureDrop as a journalist. That's the SecureDrop client application, replacing the old web application. Given this, we should not worry too much about disambiguating this application from the web experience in particular.

If we want to add a word after "SecureDrop" to make sure we can always refer to the client app using the same language without ambiguity especially with the server side of things, I would recommend picking a word that doesn't distract from the centrality of the "SecureDrop" brand. So, "SecureDrop Desktop" I think could make sense, but "SecureDrop Reading Room" IMO does not.

Thoughts?

ninavizz commented 5 years ago

So: My thoughts... (TL;DR, I'd like to split this convo out into its own ticket and examine the issue more holistically—cuz 1. I do feel this is problematic, elsewhere, and 2. I don't want to conflate written content with visual design.)

  1. "SecureDrop" is not a stand-alone anything. It is the name of the ecosystem; it's the total container for this experience. First and foremost, we have to accept and honor that. I feel it's currently redundant and imposes a cognitive burden onto users, to name "SecureDrop" persistently in documentation and in UI writing, in addition to a named artifact.

SD is also a brand—but the mental model of a "brand," is the E2E experience that includes all users. Like... I have a Nest thermostat, a Nest app, and a Nest camera (the latter, for cats). I also have a GMail mail app, my GMail web experience, and then there's the GMail server. People often refer to their "GMail" in the singular, but they rarely refer to their "Nest" in the singular. We need to figure-out how that resolves intuitively, for SecureDrop.

  1. I appreciate the drive for simplicity in what I'm observing as a stern discipline against creating Yet Another Named Nomenclature Tidbit. I do—and I don't want to add complexity where it's not needed.

  2. In acknowledgement of this being an ecosystem, each piece imho should be named — so that users can more easily understand what pieces of the ecosystem we're referencing, when we address them. We're just not there, wrt killing the web experience, too. That's at least 2 years off.

The deeper I'm getting into this response, the more I'm feeling urgency around doing a content style workshop w/ you, @huertanix, @zenmonkeykstop, and maybe @redshiftzero, to resolve the "How do we speak to users?" stuff.

This issue. The Tor messaging. All of our messaging to users (that I've also been poking at, separately... see PNG, below).

image

harrislapiroff commented 5 years ago

Harris: How do you feel about the cleaned-up Left Pane and Login window hexagons artwork? Will dump Sketch file into GitHub (UX Repo's files), if you want to take a look (or to poke at it), there.

I think they look great! Something's not quite right in the login window alignment—the corners don't meet the corners in the background hexagons—but hopefully that's quick adjustment and overall I think both look great.

ninavizz commented 5 years ago

^ Exactly the feedback you offered above, is what I am/was hoping for from you, my visually-attuned comrade! Will look at that, now—thx! Hoping I just forgot to update that Invision thingy, heh.

ninavizz commented 5 years ago

Ok! I re-examined the login screen art, and—wow—that is ONE exceptionally nit-picky observation! Thank you!! :)

It has since been fixed, and I now crown thee issue DONE!!!