Prototypes Archive

FYI

As prototypes created with visual prototyping tools and to demonstrate specific features or functionalities, all of the below must be navigated exactly as prescribed—else they will break. Most imply multiple features that do not "work," while other features will work, for this same reason. More, at the end.

---

Source UI "New User" Experience (2021)

• For: Improve new source guidance
• Features: Instructive copywriting, update colors, codname semiotics (lock), codename widget on "Submit" page, Source UI design principles, footer update w/ links
• Links: InVision (Jan) · InVision (Jun)

SDW Client Export (May 2021)

• Proof-Of-Concept video for research participant
  • Shows option to export to a sd-sanitize vm, and what that might look like
• "2 Directions" video
  • Shows two options...
    • One, to allow users to choose from a simple "VM/USB" binary in the Client, and then to pick the VM in the Qubes qrexec dialog.
    • Two, to allow users to choose either "USB" or from any VMs tagged to show-up in the Client menu—showing users a qrexec dialog with no options in the dropdown.

SDW Client Safe Delete (Apr 2021)

• For: UxR study
• Features: Safe Delete from JI, mirrored in Client; "tear" pattern, muted-lilac overlays & cubes spinner
• Navigation Instructions
  • 1st, Benign Artichoke, files/messages
  • 2nd, Cuddly Antelope, account
• Link: UXPin

SDW Client Tagging (Jan 2021)

• For: Team PoC (no idea why this was requested, I'd honestly forgotten about it!)
• Features: Journalist ID tagging, Source tagging, googly-eyes "seen by"
• Navigation Instructions: hover over screen on-click. Invision UI arrows will overlay the screen on each side; use these to navigate. No "hot spots" on screen.
• Link: InVision

Journalist Web UI: Safe Delete (Dec 2020)

• For: UxR study (script, tbd)
• Features
  • MClemens: (tbd)
  • NBly:(tbd)
• Links: MClemens · NBly

Source UI Hide/Show "Encryption Options" (Nov 2020)

• For: Team PoC for progressive disclosure pattern on SUI
• Features: Hide/Show div on text above uploads box
• Nav Instructions: It's just 2 pages. :)
• Link: InVision

SDW Client Read/Unread (Jul 2020)

• For: UxR study (script, tbd)
• Features Shown: Read/Unread (auto), Mark Read/Unread, Muting, View Filters, User Guide, Seen By
• Link: UXPin

Source UI: "Learn More" Page (Jun 2019)

• For: Team PoC
• Features: Content outlining TL;DR opsec risks for sources unwilling to read more thorough documentation
• Nav Instructions: It's 2 InVision pages; hover over and browser back/forth arrows should appear to navigate between them
• Link: InVision

SDW Client "Failure" Scenarios (May 2019)

• For: Team PoC
• Features: Error "Log" visible to users, bang icon in Source Widget,
• Nav Instructions: Pink annotations at top are "hot" links; Error Log should open/close by hexabang icon in UI
• Link: InVision

SDW Client "Briefcase" Export (Mar 2019)

• For: Team PoC
• Features: Bulk export w/ a shopping-cart like feature we anti-Capitalist'd as "Briefcase"
• Nav Instructions: I forgot, click & see "hot" areas highlighted.
• Link: InVision

Source UI Design Principles

• For: Team peeps to view on mobile devices, while looking at other prototypes on laptops
• Features: None; literally, just writing formatted for easy consumption on a mobile phone
• Link: InVision

Early Source UI stuff (Jan 2019)

• For: Team PoC
• Features: A lot; many, in current Source UI, or were early suggestions that were later iterated on to get where the Source UI is, today.
• Nav Instructions: Built-in; everything magenta = annotation
• Link:
  • 1st InVision
  • 2nd InVision

SDW Client (Nov 2018)

• For: Early user feedback
• Features: Download/Decrypt, Export w/ Decryption, Read/Unread
• Nav Instructions: I forgot, click around—some fun animations I'd forgotten about!
• Link: InVision Studio

SDW Client (Oct 2018)

• For: Early user feedback on
• Features: Demonstrates Qubes boot, online/offline, login
  • Click into Reply Pane to see "ideas pu-pu-platter" screen w/ Trash Can, Notepad, Waterline, and lots of other implied options
• Nav Instructions: I forgot, click & see "hot" areas highlighted.
• Link: InVision

---

UXPin prototypes are generated with React code that requires Javascript. Invision prototypes are effectively static JPGs with "hot spots" to navigate to other static JPGs. Invision Studio uses some fancy rendering something I don't know much about, but presume it requires Javascript.

Final design "mockups" are exported to Zeplin, for developers to grab font, hex, and pixel-perfect measurement values from. Yes, I really want to migrate to Figma, eventually. Figma was built to mostly support mobile workflows, however, so does not support hover states—and has vested most of its product development efforts to support things like transitions, that are helpful for consumer mobile apps. Figma also has a broken local/cloud fonts management workflow, that I hope it someday resolves.