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. Also, this is just a "Greatest Hits" page. If there is a prototype you recall and it is not here, just ping and ask! :)

---

SDW Client Seen By & Download

• For: Adding "Seen By" feature into the Files display
• Figma Design File · Figma Prototype

SDW Export All

• For:
  • Primary: So users may export alltehthings for a Source from the Kebab menu
  • Secondary: To standardize design things for all dialogs, from Printing to Deletion to all Export screens
  • Tertiary: To standardize the export experience in such a fashion that will scale nicely when Export to VM is implemented
    • ...so, yes, Export to VM will be designed, both for per-file and per-source, once per-source to USB is finished; and small updates to the per-file to USB experience, will also be a part of the per-source to USB delivery.
• Figma Design File · Figma Prototype
  • Includes variations on the menu language and icon design, as well as a flow chart
  • 2 different flows prototyped thus far; both accessible from pink text after completing the initial flow from the menu

SDW Design System

• For: Standardizing visual and interactive design decisions across client components
• To be implemented on a component-by-component basis, as is easiest for developers, once completed
• very in progress! Figma Design File

Source UI "New User" Experience (2021)

• For: Improve new source guidance
• 2.2.0 Proposed
  • Features (Flow Inversion): Rethink Source UI flow to prioritize intuitive ordering of information and broader usability needs. Wd result in code simplification and potentially improve codename/passphrase comprehension.
    • Passphrase as receipt; GPG stuff behind hide/show div triggered by graphic link; :active on Submit button; more common text/upload boxes stacking; room for multi-files queued for upload to be listed; 1 file at a time clarified, until then; Replies moved to top. Single page app idea + Kev's "1-2-3 Punch" idea w/ customizable instructions on 1st page, yet to explore.
  • Links: Inversion Deux (Nov 2021) · Inverted Flow(Oct 2021) · InVision (Sep 2021)
  • Features (Current Flow): Instructive copywriting, update colors, codename semiotics (lock), codename widget on "Submit" page, Source UI design principles, footer update w/ links
  • Links: [InVision Team Workshop (Aug 2021) Synthesis, InVision (Jun) · InVision (Jan)

SDW Client Export (May 2021)

• Proof-Of-Concept video (for research participant; shows only one direction)
  • Shows option to export to a sd-sanitize vm, and what that might look like
• "2 Directions" video (shared with team)
  • 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
• Links: UXPin · InVision

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

SDW Client "Export" OG (August 2019)

• For: Team PoC
• Features: Flow-chart at beginning of flow, lots of fun tidbits since de-scoped or done differently
• Nav Instructions: Click on yellow shapes in upper-right to go back to flow chart; pink arrow, to go forward if no hot spots.
• Link: InVision

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/Nov 2019)

• For: Early user feedback
• Features: Devices widget how-to wizard, download/decrypt, open dvm
• Nav Instructions: Click through the initial Muybridge photo screens that were created only to orient users through the prototype as a simulation of motion.
• Link: InVision

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.