-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathFTF.html
More file actions
265 lines (215 loc) · 11.4 KB
/
FTF.html
File metadata and controls
265 lines (215 loc) · 11.4 KB
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FTF</title>
<link rel="stylesheet" href="CaseStudy.css">
<link rel="icon" href="favicon.webp" type="image/webp">
<meta name="theme-color" content="#BDD8CA">
</head>
<body>
<div class="background" style="background: linear-gradient(to bottom, #BDD8CA, #b1cabe);"></div>
<style>
.box-title {
color: #3B856C;
}
</style>
<main class="main-container">
<div class="icon" style="background-image: url('Im/FTF.webp');"></div>
<div class="icon-title">Free to FT</div>
<div class="main-title">Catch up again.<br> Are you free?</div>
<img src="Im/FTF-Key.webp" class="key-image">
<div class="main-title">Designed for Spontaneity.</div>
<div class="main-text">Free To FaceTime makes catching up with a distant loved one a breeze. Know exactly who’s free to call and who’s free later. Never forget that weekly call to mom. And personalize your contacts with moving photos, video, and more like never before.</div>
<div class="light-text">In Development</div>
<div class="subtitle">Research</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Introduction</div>
<div class="small-text">
Staying connected through life changes can be tough, and finding the right time to catch up is a challenge—if we remember to catch up at all.<br><br>
While scheduling calls is an option, it can feel impersonal, especially with friends and family who aren't just colleagues.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">In a Nutshell</div>
<div class="small-text">
Free to FT serves as a simple extension app to FaceTime, the leading video call platform in the U.S.<br><br>
It makes remembering to reach out easier, without losing the feeling of spontaneity.<br><br>
</div>
</div>
</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">What People Say</div>
<div class="small-text">
15 unstructured interviews and 3 focus groups (n=31) revealed forgetfulness, limited free time, and not wanting to burden busy loved ones as the top three obstacles to connect.<br><br>
Other answers included: appearance, awkwardness due to the time in between calls, and not feeling in the mood to talk.<br><br>
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Call Gap “awkwardness”</div>
<div class="small-text">
When questioned about not reconnecting with friends, a surprising finding emerged: Most gave up after around 4 missed calls. <br><br>
What's worse, the longer it had been since their last conversation, the more uncomfortable it felt to reach out, resulting in a cycle of diminishing contact. <br><br>
For those going through significant life changes, an average of 5 friendships that they wished hadn't faded were lost in the past 4 years.
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Constraints</div>
<div class="small-text">
“It” should be compatible with the leading video platform, accessible across various age groups, and minimally determine your availability.<br><br>
“It” should be easy to set up, easy to invite friends, and be reliable enough to use weekly.<br><br>
“It” should make it hard to forget to call, reliably inform a user if someone is free, and maintain a sense of spontaneity.
</div>
</div>
</div>
<div class="subtitle">Contacts</div>
<div class="box-row">
<div class="box">
<div class="box-title">See who's Free</div>
<div class="focus-row">
<div class="focus-text">Contacts with an all-face design.</div>
<img src="Im/FTF-Cover.webp" class="iPhone">
</div>
</div>
</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Contact Design</div>
<div class="small-text">
Regardless of font-size, wiser participants always saw a face before the name.<br><br>
Several iterations (documented in the footer) explored how contact size could be used to convey less or more information. Approaches with the least face obstruction won out in prototype tests.<br><br>
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Human Interface</div>
<div class="small-text">
Contacts are organized by last call, with the more recent calls toward the top.<br><br>
The interface is simple and displays elements in line with prior expectations: recents at the top, green is call, and grayed buttons indicate a changed condition.<br><br>
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Contact Pages</div>
<div class="focus-row">
<div class="focus-text">Set call reminders and add photos.</div>
<img src="Im/Tools.webp" class="iPhone-2">
</div>
</div>
</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">No More Phone Tag</div>
<div class="small-text">
Set reminders tailored to your unique relationships. Get nudged at just the right intervals, and only when the other person is free to talk.<br><br>
Never forget your weekly call with Mom again. Or your monthly check-in with a long-distance friend.<br><br>
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Moving Photos and Update Notes</div>
<div class="small-text">
Contacts come alive with photos, videos, and voice clips—rich reminders of shared memories. <br><br>
Come back everyday to a gallery of your favorite people, taking you back to when there wasn't so much distance.<br><br>
</div>
</div>
</div>
<div class="subtitle">FreeTime</div>
<div class="box-row">
<div class="box">
<div class="box-title">Location and Time</div>
<div class="focus-column">
<div class="focus-text-center">Your availability adjusts on its own.</div>
<img src="Im/FTF-FreeTime.webp" class="iPhone-3">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Notifications</div>
<div class="focus-row">
<div class="focus-text">Get reminded only when they're free.</div>
<img src="Im/FTF-Notif.webp" class="notif">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Add a Wallpaper</div>
<div class="focus-row">
<div class="focus-text">Make it yours.</div>
<img src="Im/FTF-Yours.webp" class="iPhone-6">
</div>
</div>
</div>
<div class="subtitle">Lessons Learned</div>
<div class="box-row">
<div class="box-text">
<div class="box-title">Chase a Smile</div>
<div class="small-text">
I continued iterating until something clicked. FTF needed to be warm and welcoming like a well-loved home, yet crafted with iOS fluidity in mind. <br><br>
When my grandmother smiled when opening the prototype, just staring at her children's faces, not reading names, not thinking or trying to figure something out—I knew I had something wonderful.<br><br>
</div>
</div>
<div class ="box-2-ghost"></div>
<div class="box-text">
<div class="box-title">Defend your Render</div>
<div class="small-text">
Every element demands power, not only from your device but also from your mind. Exercise care in what you present to the eyes. <br><br>
An interface should fit the variability of people. FTF is designed for both quick, on-the-go glances and leisurely, couch-bound gazes. Each element carries intention and purpose, defending itself well.<br><br>
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Getting to "Home"</div>
<div class="focus-column">
<img src="Im/FTF-Home.webp" class="Evolution">
</div>
</div>
</div>
<div class="box-row">
<div class="box">
<div class="box-title">Getting to FreeTime</div>
<div class="focus-column">
<img src="Im/FTF-FreeTime2.webp" class="Evolution">
</div>
</div>
</div>
<div class="box-row" style="margin-bottom: 84px;">
<div class="box">
<div class="box-title">Adaptive Toolbar - Poor Usability</div>
<div class="focus-column">
<img src="Im/FTF-Toolbar.webp" class="Evolution">
</div>
</div>
</div>
<div class="footer">
<div class="sidebar" style="background: rgba(63, 90, 63, 0.8);">
<a href="index.html" class="button">
<img src="Im/i-values.webp">
Home
</a>
<a href="work.html" class="button" style="opacity: 1;">
<img src="Im/i-work.webp">
Work
</a>
<a href="about.html" class="button">
<img src="Im/i-about.webp">
About
</a>
<a href="audio.html" class="button">
<img src="Im/i-audio.webp">
Audio
</a>
</div>
</div>
</main>
</body>