Create interactive prototype iteration

[eloquence]

In #102 we created and discussed some first interactive prototypes for the client, notably the "messaging" prototype inspired by Jen's mockup. Now that we have @ninavizz to help with UX design, we should create a higher fidelity iteration:

• showcasing all must-have functionality identified in the user stories spreadsheet in interactive form;
• using a more consistent design language that is easy to iterate on, instead of the arbitrary grab-bag of icons in the current prototype;
• addressing findings from the first round of user feedback (Gather user feedback on UI prototype and mockup #117); specifically, ditching the "mark as archival" flow in favor of a more straightforward export workflow.

This prototype does not have to be limited to what's going to be implemented in the client in Qt. A lot of the UX complexity will likely be in the integration of the client with Qubes OS itself. So we should be prepared to build out interactive wireframes to show key OS-level interactions, to identify pain points. Examples include:

• Interacting with Qubes to launch the client
• specific dialogs, e.g., for decrypting content or transferring files to external media.

To the extent that they are known, @eloquence can help provide an inventory and screenshots for those workflows.

[eloquence]

The iteration of the prototype @ninavizz showed at the 9/13 design review can be found here; this completed our commitment for the current sprint:

https://projects.invisionapp.com/share/27O1AEPXTGA#/screens

The next step is to match the prototype more closely to the must-have functionality for the 0.1.0alpha release, and to start using visual design consistent with what's available to us using Qt UI components. We also anticipate that we'll want to do some validation on this design soon, especially for wholly new ideas showcased in the prototypes, such as the idea of a trash/undelete workflow.

[eloquence]

For the 9/24 sprint we will aim for

• a prototype that more closely resembles the Qt default design (we can add styles in a future iteration), and that only includes must-do functionality. That should include mock-ups of the dialogs for deletion, etc.
• moving other features (e.g., trash) into a "visioning" prototype for showcasing next-generation functionality
• beginning the scheduling process for some validation of the ideas in the 0.1.0alpha prototype as well as the "visioning" one.

[eloquence]

We have exceeded our goals for this sprint and completed 2 user test sessions for the second iteration of the prototype (though I think we still have some way to go in bringing the design more in line with Qt). Marking as done for the purposes of this sprint but keeping task open, as we will likely do another iteration in the next sprint. Detailed notes and links from this round of testing will be posted here:
https://github.com/freedomofpress/securedrop-ux/wiki/Qubes-Journalist-Workstation

[eloquence]

For the 10/4-10/17 sprint, our goals are:

• identifying any potential implementation roadblocks by systematically comparing the current wireframes with Qt library capabilities. @eloquence will set up a synchronous conversation with @ntoll and @ninavizz to do a screen-by-screen review.

• iterating on the presentation of online/offline state. The current wireframes open up with a "split screen" -- submissions on the left, sign-in on the right. User-testing has shown that this tends to be confusing; users don't understand why they're able to see submissions before signing in. We may want to try something closer to the idea described here, where the user has to choose between working online vs. offline before seeing submissions.

• adding a design for the "export to USB" workflow

• performing 2-3 additional user tests (depending on confirmations from potential participants)

• other tweaks to the wireframes based on user testing and finalization of alpha functionality.

[eloquence]

Update: We have three user tests confirmed for next week and another two in the scheduling stage.

[eloquence]

Recapping of what was accomplished during the 10/4-10/17 sprint period:

• Exceeding our goal, we were able complete five user test sessions and have used a survey for additional recruiting; we have another session scheduled for Friday. Findings will be posted as usual to the UX wiki: https://github.com/freedomofpress/securedrop-ux/wiki/Qubes-Journalist-Workstation

• Nina has indeed iterated on online/offline state, arriving at a "demoted" offline mode (less prominent on the login screen) as the best path forward for now. The split screen interface is gone.

• Nina has also added a prototype design for the "export to USB" workflow, which has raised some points for technical discussion, see Add support for exporting documents/messages securedrop-client#21

Proposed goals for the next sprint period:

• Detail work: completing dialog flows, busy indicators, etc.
• Iteration on recent additions (e.g., export) based on technical feedback
• Review of current client UI iteration against prototype w/ Nicholas, Jen, Erik, others
• Additional recruiting to build pool of testers
• Additional user testing based on focus areas identified in synthesis review w/ Jen

[eloquence]

Closing this long-lived issue; specific improvements are now tracked in the UX repo:
https://github.com/freedomofpress/securedrop-ux/issues