joyceyan.github.io/signal-design.html at master · joyceyan/joyceyan.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Messages on Signal — Joyce Yan</title>
  <link rel="icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Besley:wght@400;700&family=Figtree:wght@400;700&display=swap" rel="stylesheet">
  <link href="assets/css/main.css" rel="stylesheet">
</head>
<body>
  <div class="container-wide">
    <nav>
      <a class="site-name" href="/">Joyce Yan</a>
      <div class="nav-links">
        <a href="/contact">Contact</a>
      </div>
    </nav>

    <main>
      <h1>Audio Messages on Signal</h1>
      <p>Strong encryption has been around for a while. There is also a clear need for strong cryptography, especially in light of the NSA leaks by Edward Snowden. So why is encryption not commonly used to protect our most sensitive data, such as emails and text messages? The problem is that most encryption tools today, such as GPG, require knowledge of the command line. While early adopters of computers might have been more likely to be familiar with the command line, this is an unreasonable expectation for most users today. Interestingly, it's not the inability to create effective algorithms that's holding us back, it's the poor user experience of many of these tools that's preventing mainstream adoption.</p>
      <p>Signal aims to change this. It's an iOS messaging app that's as easy to use as any other messaging app on your phone, and abstracts the complexities of encryption away from the user. It's been endorsed by whistleblowers and cryptographers as one of the most user-friendly encryption tools. Take a look at a comparison between command-line GPG and Signal to see how much easier it is to get encryption software up and ready to go with Signal:</p>

      <div class="screenshots screenshots-side-by-side">
        <img src="assets/img/signal/gpg_key_creation.png" alt="GPG Key Creation">
        <img src="assets/img/signal/signal_demo.png" alt="Signal Demo">
      </div>

      <p>One of the features I worked on in the 2.0 release of Signal was implementing support for audio messages. I was responsible for designing how the feature would look, as well as actually implementing the designs with code. This was the initial state of how audio messages looked when I joined the project:</p>
      <img src="assets/img/signal/signal_v0.png" alt="Version 0">

      <p>In the initial design, tapping the black message bubble would play the audio message, but the user would receive no other UI clues for what's happening. The user would have no idea how far along in the message they are and how much time is left in the audio message. The next iteration I worked on focused on perfecting the user experience and designing the unit to provide useful information for the user:</p>
      <img src="assets/img/signal/signal_v1.png" alt="Version 1">

      <p>This version was definitely a step up from the last. An audio message a user received would look like a gray bar with a play button, and tapping it would create an animation that would slide across as the message gets played, and would also display how much time is left in the audio message. While this was a huge improvement in terms of UX because it provided the user with much more useful information, it still looked pretty plain and the rectangular message bubble didn't fit in well with the rest of the app.</p>
      <img src="assets/img/signal/signal_v2.png" alt="Version 2">

      <p>This was the final version I settled on. The wavelength is generated based on the audio contents of the message, and animates as the audio message is played. This is a much more polished look than the prior rectangular design, and fits in better with the rest of the message bubbles.</p>
    </main>
  </div>
</body>
</html>