pennapps2019.github.io/index.html at master · pennapps2019/pennapps2019.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
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta property="og:title" content="StillSpace">
    <meta property="og:url" content="https://pennapps2019.github.io/">
    <meta property="og:description" content="Android application which shows study space hotspots and current usage, crowdsourced with data from students who recently studied in the area processed with machine learning.">
    <meta property="og:image" content="res/img/logos/logo.png">

    <!-- Colors -->
    <meta name="msapplication-TileColor" content="#0A5E28">
    <meta name="theme-color" content="#0A5E28">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

    <title>StillSpace</title>


    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">

    <link rel="stylesheet" href="lib/bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="res/css/styles.css">
  </head>

  <body>

  <header>
    <img class="img-fluid d-block mx-auto" id="banner" src="res/img/logos/logo-with-text.png">

    <p>
      <div class="text-center py-3">
        <i>Democratizing Study Space with <br /> Predictive Forecast Machine Learning</i>
      </div>
    </p>
  </header>

  <div id="about-content">

    <hr>

    <p class="mt-5">
      <span class="accent">StillSpace</span> is an Android application which shows study space hotspots and current usage, crowdsourced from students who recently studied in the area and processed with machine learning.
    </p>
    <p>
      The project was created during September 6-8, 2019 for <a href="https://pennapps.com/" target="_blank">PennApps XX Fall 2019</a>, at the University of Pennsylvania - a 36 hour hackathon, the 20th iteration of the first-ever student hackathon, and one of the largest in the world with 1200 attendees.
    </p>

    <div class="d-block mx-auto py-4" style="text-align: center;">
      <a href="https://github.com/pennapps2019" target="_blank">
        <img class="d-inline px-4 company-logo" src="res/img/tech/github.png" alt="GitHub" title="View the source code on GitHub">
      </a>
      <a href="https://play.google.com/store/apps/details?id=com.pennapps2019.application" target="_blank">
        <img class="d-inline px-4 company-logo" src="res/img/tech/google-play.png" alt="Google Play" title="Download the app on Google Play">
      </a>
    </div>

    <img class="img-fluid d-block mx-auto mb-5 pt-5" src="res/img/team/presenting.jpg" alt="Team picture">

    <hr>

    <h1 class="my-4">The Problem</h1>
    <p>
      Students today are under immense pressure to do well in difficult academic situations and achieve high grades to be accepted into exclusive institutions. In order to support this, universities often  design specifically-designated study areas for students to use.
    </p>

    <img class="img-fluid d-block mx-auto py-4" src="res/img/study-space.jpg">

    <p>
      Though the spaces are often excellent for studying, supply rarely if ever satisfies demand. Expensive renovations cannot meet the needs of smaller universities, let alone for universities with over 20,000 enrolled. The result is that students consistently have a significant lack of study area with enough space and quiet in which they can think and learn at their best capacities. Students often must make do with loud, crowded areas, spend time travelling to a different location off-campus, or skip studying due to the demoralizing hunt for suitable study space.
    </p>

    <h2 class="my-4">Target Audience</h2>
    <p>
      We isolated our key target audiences to be university students from high school, continuing learners, and self-educators. These people have enough time or need to warrant heavy studying to learn sufficiently to do well, but are often deprived of the ability.
    </p>

    <h1 class="my-4">Solution</h1>
    <p>
      Our solution is <span class="accent">StillSpace</span>, an Android application which displays study space hotspots. These hotspots display relative availability of study areas and may also reveal previously unknown study spots. Over time, a population using StillSpace will redistribute students to better and more fairly utiilize all possible study areas.
    </p>
    <p>
      Data for StillSpace is crowdsourced from other students who recently studied in the area and used the application. It is processed with machine learning algorithms from AWS Forecast to provide predictive forecast data for the future.
    </p>

    <h2 class="my-4">Screens</h2>

    <div class="d-block mx-auto py-4 container-fluid" style="text-align: center;">
      <div class="row">
        <div class="col-md-6">
          <img class="img-fluid d-inline" src="res/img/screenshots/1-splash.png">
        </div>
        <div class="col-md-6">
          <img class="img-fluid d-inline" src="res/img/screenshots/2-onboarding.png">
        </div>
      </div>
    </div>

    <div class="d-block mx-auto py-4 container-fluid" style="text-align: center;">
      <div class="row">
        <div class="col-md-6">
          <img class="img-fluid d-inline" src="res/img/screenshots/3-onboarding.png">
        </div>
        <div class="col-md-6">
          <img class="img-fluid d-inline" src="res/img/screenshots/4-maps.png">
        </div>
      </div>
    </div>

    <h2 class="my-4">The System</h2>

    <h3 class="my-4">Android Application</h3>
    <a href="https://www.android.com/" target="_blank">
      <img class="img-fluid d-block mx-auto py-4 company-logo" src="res/img/tech/android.svg" alt="Android logo">
    </a>
    <p>
      The mobile application on <a href="https://www.android.com/" target="_blank"><strong>Android</strong></a> was the user-facing section of StillSpace, providing a locator and predictor for study space availability as well as tracking location data during studying.
    </p>
    <p>
      Download the application on the <a href="https://play.google.com/store/apps/details?id=com.pennapps2019.application" target="_blank"><strong>Google Play Store here</strong></a>.
    </p>
    <p>
      The application utilizes Google Location Services as well as <a href="https://developers.google.com/maps/documentation/android-sdk/utility/heatmap" target="_blank"><strong>Google Maps Heatmap Utility</strong></a>, an advanced and less-known Play Services API.
    </p>
    <p>
      The map view is set to automatically display Towne Building in the Engineering Division at the University of Pennsylvania, as this was the location of the hackathon and demo.
    </p>

    <h3 class="my-4">User Experience/Interface (Figma and Zeplin)</h3>
    <div class="d-block mx-auto py-4" style="text-align: center;">
      <a href="https://www.figma.com/" target="_blank">
        <img class="d-inline px-4 company-logo" src="res/img/tech/figma.png">
      </a>
      <a href="https://zeplin.io/" target="_blank">
        <img class="d-inline px-4 company-logo" src="res/img/tech/zeplin.png">
      </a>
    </div>
    <p>
      To understand how users would experience the application, interface mockups were created using <a href="https://www.figma.com/" target="_blank"><strong>Figma</strong></a>. Once complete, assets were then passed to the developers with <a href="https://zeplin.io/" target="_blank"><strong>Zeplin</strong></a>.
    </p>

    <h3 class="my-4">Machine Learning (Amazon Web Services Forecast)</h3>
    <a href="https://aws.amazon.com/forecast/" target="_blank">
      <img class="img-fluid d-block mx-auto pt-2 pb-5 company-logo" src="res/img/tech/aws.png" alt="Amazon Forecast Logo">
    </a>
    <p>
      The machine learning component of StillSpace utilizes <a href="https://aws.amazon.com/forecast/" target="_blank"><strong>Amazon Web Services Forecast</strong></a>, an online machine learning service which processes trends in time series data to predict future forecasts.
    </p>
    <p>
      Using Amazon Forecast also entailed creating an <a href="https://aws.amazon.com/s3/" target="_blank"><strong>Amazon S3</strong></a> bucket which contained a CSV file to be imported.
    </p>
    <p>
      We encountered heavy limitations when working with the machine learning framework. First, a sufficient amount of suitable sample data which mimicked actual conditions was incredibly difficult to generate. Second, there was not nearly enough time and data to train the network sufficiently well in a single weekend. Third, we initially hoped on having the data be automatically uploaded to the server and to configure the machine learning to be run on the dataset on a set recurring schedule. Unfortunately, the Amazon Forecast API is still greatly under development, and did not have this capability. Instead, each dataset needed to be run automatically using the web console.
    </p>
    <p>
      The services available for machine learning are still in the process of being developed and made ready for public use but, when ready, they will empower even students to easily be able to find valuable trends across vast datasets.
    </p>

    <h3 class="py-3">Pitch</h3>
    <p>
      Watch a video of our pitch here:
    </p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Azbyz3Crxho" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    <hr>

    <h1 class="my-4">About the Team</h1>
    <p></p>
      The creators of this project are
        <a href="https://github.com/jleung51" target="_blank">Jeffrey Leung</a>,
        <a href="https://github.com/Jophs" target="_blank">Joseph Chao</a>,
        <a href="https://github.com/amemichelle" target="_blank">Michelle Swolfs</a>, and
        <a href="https://github.com/fyang3" target="_blank">Funing Yang</a>.
    </p>
    <img class="img-fluid d-block mx-auto my-4" src="res/img/team/team.jpg" alt="Team picture">

    <hr>

    <p>
      <i>Disclaimer: This page was created after the hackathon's completion.</i>
    </p>

    <script src="lib/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="lib/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

  </div></body>
</html>