-
Notifications
You must be signed in to change notification settings - Fork 0
/
sixtysix.html
162 lines (122 loc) · 8.8 KB
/
sixtysix.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
<!DOCTYPE html>
<html lang='en'>
<head>
<!-- Basic Page Needs -->
<meta http-equiv="content-type" content="text/html"; charset="utf-8"/>
<meta name="author" content="Mai Dang">
<meta name="keyword" content="Mai Dang">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Title and Meta Description -->
<title> sixty six </title>
<meta name="description" content="a developer, creator, coffee addict">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- favicon -->
<link rel="shortcut icon" href="assets/initials.png"/>
<!-- <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> -->
<link rel="stylesheet" type="text/css" href="./css/about.css"/>
<link rel="stylesheet" type="text/css" href="./css/main.css"/>
<link rel="stylesheet" type="text/css" href="./css/sixtysix.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<!-- Favicon -->
</head>
<body onLoad="typeWriter()">
<div class="frame">
<div class="frame-body">
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="https://mai-nhien.github.io" id="menuLink"><li>Home</li></a>
<a href="https://mai-nhien.github.io./about.html" id="menuLink"><li>About</li></a>
<a href="https://mai-nhien.github.io./projects.html" id="menuLink"><li>Projects</li></a>
<a href="https://mai-nhien.github.io./contact.html" id="menuLink"><li>Contact</li></a>
</ul>
</div>
</nav>
<p class="aboutTitle"> sixty six </p>
<div class="container-fluid" style="padding-top: 15px">
<div class="row justify-content-center">
<div class="col-7">
<p id="heading">some background</p>
<p id="content">
I was in the Spring 2018 cohort of LavaLab, an organization at USC. LavaLab is a startup community and USC's premier startup incubator- the 28 accepted students each semester are split into teams of 4 (2 developers, 1 product manager, and 1 designer). I was the backend developer on a team called sixty six. I created an Express.js server that handled all requests and data. I was also responsible for the creation and maintenance of our Mongo database.
</p>
<p id="heading">the problem</p>
<p id="content">
Our team was interested in lifestyle and health related issues- specifically productivity. We agreed that a big reason why people can't keep up with their goals and habits is that they lose motivation due to lack of results and accountability. After doing some research, we found that recent studies have shown that it takes at least <span id="bold">66 days</span> to fully establish a habit Additionally, after surveying over 2,000 students, we found that <span id="bold">75%</span> of them don't feel supported by their communities, and many of them struggle with long term goals.
</p>
<p id="heading">the solution</p>
<img src = "assets/66logoResized.png">
<p id="content">
That's where sixty six comes in. It's a mobile app that combines that benchmark of 66 days and the idea of a supportive community. The app is a productive space for people who want to better themselves and make <span id="bold">lasting</span> change. And although there is competition in the productivity space, most apps are over-gamified and over-priced. Most of all, they lack community.
<img src = "assets/demoAccount.png">
sixty six implements: <br>
- customizable notifications <br>
- visual tracking <br>
- and an inspiring and supportive community
</p>
<p id="heading">the user experience</p>
<p id="content">
Users can add habits to their account and label them as either internal (reading, meditating) or external (volunteer, talk to new people). When creating a new habit, users also have the freedom to customize when they are notified to complete the habit and how often.
<img src = "assets/createHabit.png">
As the user checks off the habit after each notification, the countdown to 66 days on the habit is updated.
<img src = "assets/count.png">
</p>
<p id="content">
In the community section of the app, users can see what habits their <span id="bold">connections</span> are working on,
<img src = "assets/community.png" >
as well as draw motivation from their <span id="bold">inspirations</span>.
<img src = "assets/inspirations.png" >
Users also have the option to create group habits with people they are connected with- this allows friends to keep each other motivated and accountable.
</p>
<p id="heading">the takeaway</p>
<p id="content">
I can confidently say that being a part of the sixty six team has been one of the most rewarding parts of college so far! I had no experience with Node.js, MonogoDb, or hosting a database on a server (Heroku) and I came out of the project having learned many new things. I was proud that our team produced such a funtional app in so little time. The process of taking a product from the ideation to production stage with a full team was challenging but enriching, and our team ended up winning Best Demo at LavaLab's Demo Night. sixty six is not live, and our team has left it's future a little up in the air. However, we are all still excited about sixty six's mission, and will continue to work to give others a <span id="bold">life, lived better</span>.
</p>
<p id="heading">the sixty six team <3</p>
<img src = "assets/team.png" >
</div>
</div>
</div>
</div>
</div>
</body>
<!-- JS -->
<!-- Typed.js -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<!-- Bootstrap JS -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">
</script>
<script src="./js/squares.js"></script>
<!-- Enable Bootstrap tooltips -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</html>