Complete branded bits & color schema

[ninavizz]

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

• Keep it light
• Factoring-in Workstation Network Failure #32, Workstation Client Content Inventory + Design #17, Messaging System: Categories, nuances, accompanying styles #29 will help

Acceptance Criteria

• Mockup that team agrees upon as good-to-go
• Mockup(s) demonstrating possible different states
• Ready to handoff to @creviera

---

This is a sub-task within #31

[ninavizz]

Rev 4

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

• Jen:
  • Likes blue palette of sd.org
  • Of the 4 shown today, likes Peter the most
  • Likes SD logo same size as other hexagons
  • Hexagons and logo(s) can be smaller/more-condensed
• Erik:
  • Agrees with Jen on all her points
  • Doesn't have to be color intensity 1:1 as the website, which is too intense for looking at all the time
  • Whatever color scheme we use for the logo should be more or less consistent with visual identity guidelines that are inevitably published; good to use this exercise as an opportunity to set future brand precedent.
  • Mickey is too light; more "punch" sought.
  • Likes that Peter fades at the bottom.
• David:
  • Journalists are heavy Microsoft users, so will be looking at those kinds of apps all day long
  • Journos used to sparse apps
• Action Items:
  • Nina to iterate asap and push updates to folks by COB Friday
  • Focus on a more literal interpretation of hexagons/branding from website
  • Balance sizing of logo/hexagons to something between Peter and Mickey
    • More punch, but be mindful to not make it too busy
    • Doesn't need to be as intense as the website, but more punch is sought

[eloquence]

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]

Rev 5

• Presented in 28 March UX Meeting
  • Reviewed: Invision Proto here

Erik:

• "Reading Room" moniker dead; interest in keeping it simply by calling Client "Workstation" or "SecureDrop"
  • Nina flags high probability for confusion in customer communication between the device and a client app BOTH sharing the same name, and "SecureDrop" too likely referring either a server, a Source UI, or the Web UI; requests tabling for separate convo.
  • It's a product... we shd be treating it like more of a product and less of a project. <3
  • Interim "Lorem Ipsum'd" that bit.
• Likes Client B
  • Wants the logo to look a little less shy (aww!)... bring it out a bit more? Not more than 10-20%
• Logins
  • Generally doesn't like logo crashing into side; feels it looks erroneous
  • Likes login "B" without the Signin copy
  • Likes the way logo is done in Login C, labels are done in B
  • Agrees with standard labeling convention for usability concerns
  • Reeeally into congeniality and mood set by "Greetings!" salutation

Jen:

• Likes Client B
  • If insides of logo could be a tad crisper/clearer
• Questions the teal on Peter Parker... ??
• Agrees with standard labeling convention for usability concerns
• Diggs Login B (?)

General Discussion Discussion

• Need to look more closely at username color schema/palette

  • Jen likes Signal Desktop's color generation

• Harris appreciates the History icon; Erik likes word "History"

• Everyone likes "Greetings!"

  • Will try to do if layout permits; don't kill self to make layout permit, though

• Do Read/Unread for next week

• Action Items

  • Resolve Download behavior;
  • by Monday have more explorations of Reply activity
  • Resolve Network activity
  • Explore avatar icon colors?
  • Get with Allie to get error text things that currently show in top bar.
    • Think-through that awful star-state error edge-case to resolve
  • For revs on today's stuff...
    • Include Read/Unread states for next week
    • Tighten branding bar stuff
    • Bits cited above

• Sidenotes

  • Filter By Codename will likely show-up in Beta
  • How to do messaging along the top bar?
    • Ugh. Reflect upon discussion points from end-o-meeting... #thinkingface

[ninavizz]

Rev 6

• 11 Apr UX Review
• Presented for review: Invision Skreenz
  • Workstation VisDe applied to WebUI (to TEST design system, not to propose to implement!)
  • VisDe system applied to Source UI

---

• Feedback, Authenticated User Badge:
  • Jen
    • Likes text white
    • Square icon teal is ok, PP text white helps
  • Allie
    • Likes contrast with white; doesn't feel it's overly contrast-y
    • Likes either one
    • Feels the 4th one from the bottom looks more polished/sleek, but really likes the white on the cyan
• Feedback on Journo web ui presented as design "test" of system
  • Nina warning: This is only a test of the established design system. It is only a test.
    • Cyan as bg to links really doesn't work well in web mockups
    • Info color (purple) works
    • Green doesn't work so well
• Action Items
  • Left column branding
    • Refine Need to recruit non-customer users for testing #2
      • John really liked Qubes Known UX Issues #4
      • Erik neutral
      • Jen cool with Need to recruit non-customer users for testing #2 or SecureDrop Client Error Messaging Inventory #3
  • Convo pane ID Badges
    • Keep authenticated user's intials in white to be uniform w/ other newsroom journalists
  • Authenticated user ID badge
    • All white or 4th one from the bottom
    • Not so "punchy" as the cyan is; does it need so much attention called to itself?

[ninavizz]

Complete To CLOSE this Issue:

• Update Styleguide
  • Reflect resolution around use of Punchy Cyan
  • Reflect palette for Convo Pane ID Badge colors
• Left Pane branding art
  • Refine Need to recruit non-customer users for testing #2
    • John really liked Qubes Known UX Issues #4
    • Erik neutral
    • Jen cool with Need to recruit non-customer users for testing #2 or SecureDrop Client Error Messaging Inventory #3
  • Update item on Content Inventory page
• Convo pane ID Badges
  • Keep authenticated user's intials in white to be uniform w/ other newsroom journalists
  • Upload/Update spec in Zeplin, and possibly GH Issue for Convo Pane styles?
• Auth Widget user ID badge color
  • All white or 4th one from the bottom
  • Not so "punchy" as the cyan is; does it need so much attention called to itself?
  • Update spec in Zeplin
    • Also update greyscale screens, and eliminate out-of-spec things for Beta
• Check all colors against WebAIM

[ninavizz]

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]

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]

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]

Signal boost @redshiftzero @eloquence @harrislapiroff 😸

Happy Monday!

[eloquence]

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:

• "SecureDrop" for in-workstation branding of the client app
• "SecureDrop Workstation" whenever we refer to the product as a whole (e.g., "The new SecureDrop Workstation greatly simplifies the use of SecureDrop" etc.)
• "SecureDrop server" if and when we need to refer to the server to assist the user in understanding the source of a problem ("We're sorry, we're having trouble contacting the SecureDrop server right now")

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]

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.

2. 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.

3. 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).

[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.

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]

^ 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]

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!!!