-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
337 lines (320 loc) · 18.5 KB
/
index.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
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
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!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" />
<title>DH 110 Assignment 2</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
>×</a
>
<a href="index.html">
Home
</a>
<a href="index.html#Research">
Research
</a>
<a href="index.html#Ideation">
Data Synthesis & Ideation
</a>
<a href="index.html#User">
User Persona and Journey
</a>
<a href="index.html#functionality"
>App Functionality</a
>
<a href="index.html#Wireframes"
>Wireframes</a
>
<a href="index.html#Information"
>Information Architecture</a
>
<a href="index.html#Prototype"
>Prototype</a
>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">
<svg class="menu" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
</svg>
</button>
<section id="landing-page" class="mt-2">
<div class="container">
<div class="row">
<div class="landing-text col-xl-6">
<h1 class="Title"><br><br><br><br>TimePal <br /></h1>
<p class="by">By: Celeste Knapp, Elena Alimin, Osbert Reynaldi Sudjana</p>
</div>
<div class="landing-pic col-xl-6 d-flex justify-content-end">
<img class="movie-poster mt-2" src="images/6 October.png" alt="Movie_poster">
<img class="movie-poster mt-2 ml-5" src="images/Add Event.png" alt="Movie_poster">
</div>
</div>
</div>
</div>
<section id="Research">
<div class="container">
<div class="row">
<div class="col-xl-12 d-flex">
<h2 class="abstract" >Market Research</h2>
</div>
<div class="col-xl-12 d-flex">
<h3> <br>Google Calendar (Elena)</h3>
</div>
<div class="col-xl-12 d-flex justify-content-center">
<img class="apps" src="images/gcal.png" alt="GCal">
</div>
<div class="col-xl-12 d-flex">
<p><b>How I use it:</b> Google Calendar is my #1 tool in staying organized, wherein I segment my team most clearly and find myself actually following the schedule I set out most of the time. I would check the mobile/web application at least 5 times a day, with more use on the Google Calendar tab on my browser. I put all my tasks and input time-blocks for even things such as lunch and doing homework, which I have found to be an efficient way to organize my time.
</p>
<br>
<br>
</div>
<div class="col-xl-12 d-flex">
<p><b>Strengths:</b> I like that there are several integrations that make planning very seamless, including the Zoom/Google Meets integration, the maps location function, and sending calendar invites that automatically adjust to the respective timezones to avoid confusion. They have also added other features to embed meeting notes and other cross-functional applications that blend into the Google Suite ecosystem, which is useful as I am also an avid user of Google Drive. I like the tasks feature that you can set to repeat a custom number of times, thus making it seamless for the user to set things such as a weekly goal, etc.
</p>
<br><br>
</div>
<div class="col-xl-12 d-flex">
<p><b>Pain Points:</b> The daily, weekly, monthly, and yearly views can be quite limiting in terms of how it fits in the screen (some events can get cut off, etc.), and cross-integration of multiple gmail accounts can lead to some discrepancies such as having to log-in from different devices several times. The zoom plug-in also only appears when you go to the calendar view of the gmail account connected to the Zoom account - it would reduce the number of steps if users were able to log-in to these web conference applications separately to integrate with other gmail calendars.
</p>
<br><br>
</div>
<div class="col-xl-12 d-flex">
<p><b>Overall Review:</b> A really good product that has an edge in the context of the overall Google Suite ecosystem, and is able to sync to multiple devices. While there is a learning curve to get accustomed to all the features and buttons, GCal, given its large user base due to the integrations with Gmail, is a well-designed product available to target many users from different levels of technical expertise.
</p>
</div>
<div class="col-xl-12 d-flex">
<h3> <br>Forest App (Osbert)</h3>
</div>
<div class="col-xl-12 d-flex justify-content-center">
<img class="apps" src="images/forest.png" alt="forest">
</div>
<div class="col-xl-12 d-flex">
<p><b>How I use it:</b> Forest is a time-management and productivity tool that I use a lot. It encourages you to stay away from your phone and focus on your work or life. How it works is that whenever you want to focus, you plant a tree - which will grow in your specified amount of time. If you leave the app, the tree will die and might cause a visible withered tree in your collection. Essentially, it works as a timer for focus periods.
<br>
</div>
<div class="col-xl-12 d-flex">
<p><b>Strengths:</b> The app employs a lot of gamification to make the concept of time management and productivity incentivized. You can build a forest collection (your dead trees will be visible - looks ugly), plant trees together with friends so you focus together, and focusing gives you coins to buy different types of trees (pretty forest) and even plant real trees. It provides an interest in achieving a pleasant and philanthropic goal, instead of just an app that blocks other apps or prevents you from exiting. It also builds a sense of community where you are given the accountability of being responsible for your own trees and collection.
</p>
<br><br>
</div>
<div class="col-xl-12 d-flex">
<p><b>Pain Points:</b> While using the app, you cannot use it to answer any urgent messages or check anything else hat you might need or is important without the tree withering. This causes frustration for some users, including me sometimes because we are not given the option to pause in our “productivity”. I have also noticed a lack of retention for users because once you plant a tree, it’s just there growing without there being any reminders or prompts for the user to keep focusing.
</p>
<br><br>
</div>
<div class="col-xl-12 d-flex">
<p><b>Overall Review:</b> Overall, I think it is definitely one of the better designed time management apps out there. It does a great job in giving users a different take to time management; making it a pleasant and fun experience to be productive. The seamlessness of usability, and retention methods other than during focus time, including, achievements, social good and the gamification, gives it a real appeal to all types of users of all demographics.
</p>
</div>
<div class="col-xl-12 d-flex">
<h3> <br>Physical Calendar (Celeste)</h3>
</div>
<div class="col-xl-12 d-flex">
<p><b>How I use it:</b> I rely on a physical calendar, a traditional planner that I journal down to efficiently manage my time and tasks. The act of writing down my schedule and to-dos provides a tangible engagement that digital tools often lack. Each morning, I take a few minutes to update it, allowing me to set the tone for the day and stay organized. This method works due to its simplicity and gives me satisfaction from physically marking off completed tasks.
</p>
<br>
</div>
<div class="col-xl-12 d-flex">
<p><b>Strengths:</b> The tangible nature of jotting down plans offers a level of engagement that digital options don't provide. It grants a clear visual overview of my schedule, aiding effective planning and time allocation. Additionally, being able to personalize it using colors, stickers, and notes enhances its visual appeal and aids in distinguishing different activities.
</p>
<br><br>
</div>
<div class="col-xl-12 d-flex">
<p><b>Pain Points:</b> They lack instant accessibility from anywhere; if forgotten or left behind, I lose immediate access to my schedule. Making changes or rescheduling requires manual adjustments, often leading to a cluttered appearance due to erasing or crossing out. Additionally, physical calendars lack automated reminders for tasks or events, necessitating the need to frequently check and remember upcoming commitments. As it is physical, it’s also an added baggage when I have to go places, in comparison to my phone that I can access anytime and will always have with me.
</p>
<br><br>
</div>
<div class="col-xl-12 d-flex">
<p><b>Overall Review:</b> The physical calendar remains a reliable tool for those who appreciate the traditional approach to time management. It offers a personal touch and a sense of satisfaction through physically tracking tasks and events. However, its limitations in terms of accessibility, flexibility, and integrated reminders may pose challenges for students seeking a more dynamic and technologically integrated solution. There’s no such thing as notifications for physical calendars, so you have to hold yourself accountable in remembering the tasks you set out for yourself.
</p>
</div>
<div class="col-xl-12 d-flex">
<h2 class="abstract" ><br><br>User Research<br><br></h2>
</div>
<div class="col-xl-12 d-flex">
<h2 class="abstract" >Moderated Interviews <br><br></h2>
</div>
<div class="col-xl-6 d-flex">
<img src="images/Screen Shot 2023-10-15 at 3.45.19 AM.png" alt="Interview 1">
</div>
<div class="col-xl-6 d-flex">
<img src="images/Screen Shot 2023-10-15 at 3.45.32 AM.png" alt="Interview 1">
</div>
<div class="col-xl-4 d-flex">
<img src="images/Screen Shot 2023-10-15 at 3.45.44 AM.png" alt="Interview 1">
</div>
</div>
</div>
</div>
</section>
<section id="Ideation">
<div class="container">
<div class="row">
<div class="col-xl-12 d-flex">
<h2 class="abstract" ><br><br>Data Synthesis & Ideation <br><br></h2>
</div>
<div class="col-xl-12 d-flex">
<h3>Motivation / Brainstorming</h3>
</div>
<div class="col-xl-12 d-flex">
<p>It seems like many people use both a calendar (time-scheduling) application and a note-taking application.</p>
</div>
<div class="col-xl-12 d-flex">
<p>While both have different use cases, a prototype application idea we can explore is to integrate these two applications into one seamless platform →
</p>
</div>
<div class="col-xl-12 d-flex">
<p>1. A chrome extension to integrate Google Keep & Google Calendar - exploring note taking in relation to events in a more accessible and shorter format, rather than the GDocs meeting notes.
</p>
</div>
<div class="col-xl-12 d-flex">
<p>To address the pain point of reminders feature not being very good →
</p>
</div>
<div class="col-xl-12 d-flex">
<p>2. design an improvement to the existing tasks/reminders feature and be able to check it off visibly (there’s an existing tasks app, but IA is not as intuitive)
</p>
</div>
<div class="col-xl-12 d-flex">
<p>To address the reminders pain point →
</p>
</div>
<div class="col-xl-12 d-flex">
<p>3. design a new app that integrates Google/Apple calendar API or has its own calendar, then inputs features of reminders that has its own separate view
</p>
</div>
<div class="col-xl-12 d-flex">
<h3><br><br>Questions <br><br></h3>
</div>
<div class="col-xl-12 d-flex">
<p>What should the solution take form of – add-on or extension to an existing app? Or should it be an entirely new app with a value add to the existing GCal function?
</p>
</div>
<div class="col-xl-12 d-flex">
<h3><br><br>Pain Points <br><br></h3>
</div>
<div class="col-xl-12 d-flex">
<ol>
<li><p>The extra step to download functions that require an additional extension for</p></li>
<li><p>Its tasks/reminders feature is not good. There’s no way to visibly check it off. It’s only useful for events, I have to outsource my checklists, assignments, and tasks.
</p></li>
<li><p>the reminder feature is harder to see, they’re at the top of the screen
</p></li>
<li><p>Use a different app (notes app) to set reminders for assignments and tasks, highlighting lack of functionality within Google Calendar
</p></li>
</ol>
</div>
</div>
</div>
</section>
<section id="User">
<div class="container">
<div class="row">
<div class="col-xl-12 d-flex">
<h2 class="abstract" ><br><br>User Persona and Journey <br><br></h2>
</div>
<div class="col-xl-12 d-flex">
<h3>User Persona and Journey<br><br></h3>
</div>
<div class="col-xl-6 d-flex justify-content-center">
<img class="movie-poster" src="images/User Persona.png" alt="Persona">
</div>
<div class="col-xl-6 d-flex justify-content-center">
<img class="movie-poster" src="images/User Journey.png" alt="Journey">
</div>
</div>
</div>
</section>
<section id="Functionality">
<div class="container functionality">
<div class="row">
<div class="col-xl-12 d-flex">
<h2 class="abstract" ><br><br>Functionality <br><br></h2>
</div>
<div class="col-xl-12 d-flex justify-content-center">
<img class="movie-poster" src="images/Application Functionality.png" alt="Functionality">
</div>
</div>
</div>
</section>
<section id="Wireframes">
<div class="container">
<div class="row">
<div class="col-xl-12 d-flex">
<h2 class="abstract" >Design Process<br><br><br><br></h2>
</div>
<div class="col-xl-12 d-flex">
<h3>Style Sheet and Design System <br><br></h3>
</div>
<div class="col-xl-12 d-flex justify-content-center">
<img class="movie-poster" src="images/Style Sheet.png" alt="Style Sheet">
<img class="movie-poster" src="images/Design System.png" alt="Style Sheet">
</div>
<div class="col-xl-12 d-flex ">
<h3>Initial Sketches and Lo-Fi Wireframe <br><br></h3>
</div>
<div class="col-xl-12 d-flex justify-content-center">
<img class="movie-poster" src="images/Initial Sketches.png" alt="Sketches">
</div>
<div class="col-xl-12 d-flex">
<h3>High-Fidelity Wireframe <br><br></h3>
</div>
<div class="col-xl-12 d-flex justify-content-center">
<img class="movie-poster" src="images/Hi-Fi Wireframe.png" alt="Hi-Fi">
</div>
<div class="col-xl-12 d-flex">
<h3>Flow <br><br></h3>
</div>
<div class="col-xl-12 d-flex justify-content-center">
<img class="movie-poster" src="images/Screen Shot 2023-10-15 at 4.27.06 AM.png" alt="Hi-Fi">
</div>
</div>
</div>
</section>
<section id="Information">
<div class="container">
<div class="row">
<div class="col-xl-12 d-flex">
<h2 class="abstract" ><br><br>Information Architecture <br><br></h2>
</div>
<div class="col-xl-12 d-flex justify-content-center">
<img class="movie-poster" src="images/Information Architecture.png" alt="IA">
</div>
</div>
</div>
</section>
<section id="Prototype">
<div class="container">
<div class="row">
<div class="col-xl-12 d-flex">
<h2 class="abstract" ><br><br>Prototype <br><br></h2>
</div>
<div class="col-xl-12 d-flex justify-content-center">
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqpcDYRMLrxARrAIQzKtMAH%2FDIG-HUM-110%3Fpage-id%3D70%253A2%26type%3Ddesign%26node-id%3D75-3%26viewport%3D109%252C464%252C0.22%26t%3Drih2e5igJsYRliuq-1%26scaling%3Dscale-down%26starting-point-node-id%3D75%253A3%26mode%3Ddesign" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
</div>
<script src="animate.js" defer></script>
</body>
</html>