...
Later that day, Stephen receives a message from someone claiming to be on Team Pullman. He asks to establish a secure messaging connection with Stephen, which Stephen agrees to. The other person turns out to be Tom Duffy, campaign manager of Team Pullman, and he suspiciously suggests that Stephen ought to consider working for Team Pullman instead of Team Morris. Stephen does not like where the conversation is heading, and decides to end the conversation. He also erases any record of the conversation occurring and removes Tom as a contact, to ensure that no trace of the conversation can be found.
Design 1
Design Notes: These were drawn in pencil (a ui mockup program) as my hand writing is pretty much illegible. I specifically chose to use Comic Sans as the font to indicate to users that this is not a finished product (as no sane designer would use comic sans).
First, in order to establish a secure connection, Stephan meets with Team Morris and shares his identity. He does this by going to his Contacts panel and clicking share.
...
Storyboard | Learnability
| Efficiency
| Safety
|
|---|
 Secure Chat Window
Stephen must now update the team with new orders. On the Messaging tab,
Stephen can see a conversation with an individual or group, much like the
standard chat application on his phone. In this case, his can message John Doe
securely because he has a public key stored for him. The application reminds him
that he can securely communicate via color (background color), and each past
message that was sent with encryption is also set off by color and a lock icon. Groups
can be handled similarly to individuals with a group key.
Touching on the message area to enter a message brings up the keyboard and a lock
button, giving access to encryption options for the message (encrypt via personal
private key or public key of John Doe). The default encrypts via public key to ensure
safety, but Stephen can remove this if he decides encryption is not necessary for a particular message.
. 
|||||||||\Unsecure Chat Window
This is the same view of the messaging window but for a contact without a stored
public key. The background color is red, reminding Stephen that no message can
be sent securely, and the lock icon near the message window is disabled.
| Pros: Mimics Conversation/Chat flow concepts.
Multiple signals for secure or unsecure communications
(lock icon near name, Lock on each securely sent/received
message, background color, message bubble color).
Cons: User must learn difference between using public or
private key.
| Pros: Streamlined interface for all secure and
unsecure communications with a single person or
group.
Default option uses secure public key encryption,
which requires user intervention if a different option
is desired (assumes this is the most likely selected
option).
Cons: Receiving a secure message
requires decryption using either personal private
or contact's public key, requiring extra time.
| Pros: Multiple visual cues to signify message security.
Cons: User can still send an unsecure message, so there
is still risk of secret information being sent unsecurely.
|
...
Storyboard | Learnability
| Efficiency
| Safety
|
|---|
Sending keys Pros:
Cons:
Pros:
Cons: Pros:
Cons:  Image Removed
Description of Storyboard Pros:
Cons: Pros:
Cons: Pros:
Cons: |
Secure chat
Stephen first wants to send a key to Mike Smith. He begins
to type his name into the empty field, and auto-complete
shows him contacts with the same characters for him to pick.
He explcitly sees that Mike Smith is going to be added when he
hits the send key button. After hitting "Send Key", Mike Smith is
notified and given a key upon accepting the request.
| Pros: Straightforward to operate for new users, as most of the
cryptograhpic lingo is abstracted away and the users deal with
only clear statements.
Cons: More knowledgeable users may feel like they're missing
something do to the sheer simplicity. | Pros: Quick and easy.
Cons: Not as efficient as a QR code
transfer when the person is nearby. | Pros: Very clear what's going to happen.
Cons: |
Image Added
Mike Smith then shows up on the list of available contacts contacts.
Clicking the contact will take him to the messaging page. Clicking the
explicitly labeled edit buttons will take him to a simple edit page. From
there he can delete the contact, wipe all messages, or issue a new key.
Confirmations are required for each action.
| Pros: Straightforward interface. Clear what does what.
Cons: May not be obvious that clicking on a name opens up
the messaging page for that person. | Pros: Quick access to all the needed
commands.
Cons: | Pros: All actions are very explicit and require
confirmation. This is what should happen in a
situation where sensitive information is being
dealt with.
Cons: |
Secure chat
Storyboard | Learnability
| Efficiency
| Safety
|
|---|
 Image Added
The chat window is in the same style as many other messaging programs
to keep it easy to use. After Stephen clicks on Mike Smith on the contact list,
he can message as he's used to. He's explicitly told the communication is
secure so there is no uncertainty. If the communications were unencrypted,
the the background would turn red, signifying the user should be cautious
and the "Secure" at the top would turn to "Insecure." | Pros: Just like standard text messaging interfaces
that most people are very familiar with.
Cons:
| Pros: As efficient as a standard chat interface
once the user is in it.
Cons: | Pros: Explicitly states if the communication is secure
or not. |
Storyboard | Learnability
| Efficiency
| Safety
|
|---|
Image Removed
Description of Storyboard
Pros:
Cons:
Pros:
Cons: Pros:
Cons: |