-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsignal_design.html
106 lines (91 loc) · 6.24 KB
/
signal_design.html
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Signal for iOS</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/main.css" rel="stylesheet">
<link href="assets/css/font-awesome.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="assets/js/hover.zoom.js"></script>
<script src="assets/js/hover.zoom.conf.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">JOYCE YAN</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="index.html#work">Work</a></li>
<li><a href="resume.pdf">Resume</a></li>
<li><a href="#contact-me">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- +++++ Projects Section +++++ -->
<div class="container pt">
<div class="row mt">
<div class="col-lg-8 col-lg-offset-2 centered">
<h3>AUDIO MESSAGES ON SIGNAL</h3>
<hr>
<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>
</div>
<div class="row mt centered">
<div class="col-lg-7">
<img src="assets/img/signal/gpg_key_creation.png" alt="GPG Key Creation">
</div>
<div class="col-lg-5">
<img src="assets/img/signal/signal_demo.png" alt="Signal Demo">
</div>
</div><!-- row -->
<div class="row mt">
<div class="col-lg-8 col-lg-offset-2 centered">
<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"><br><br>
<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"><br><br>
<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"><br><br>
<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>
</div>
</div>
</div><!-- /container -->
<!-- +++++ Footer Section +++++ -->
<div id="footer">
<h6 id="contact-me">
<a href="mailto:[email protected]" class="contact-link"><i class="fa fa-envelope fa-2x fa-inverse"></i></a>
<a href="https://twitter.com/joyce_y" class="contact-link"><i class="fa fa-twitter fa-2x fa-inverse"></i></a>
<a href="https://github.com/joyceyan" class="contact-link"><i class="fa fa-github fa-2x fa-inverse"></i></a>
<a href="https://www.linkedin.com/in/yanjoyce" class="contact-link"><i class="fa fa-linkedin-square fa-2x fa-inverse"></i></a>
</h6>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>