-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcleanride.html
More file actions
229 lines (220 loc) · 13.4 KB
/
cleanride.html
File metadata and controls
229 lines (220 loc) · 13.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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>CleanRide Case Study</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style_cleanride.css">
<!-- JQuery -->
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!-- Header -->
<header>
<nav class="container">
<a name="top"></a>
<div class="header">
<ul id="headers" class="menu no-bullet" >
<li><a data-page="home" href="index.html"><h5>Home</h5> </a></li>
<li><a data-page="about" href="index.html#about"><h5>About</h5> </a></li>
<li><a data-page="contact" href="index.html#contact"><h5>Contact</h5> </a></li>
</ul>
</div>
<hr id="headerline"/>
</nav>
</header>
<main role="main">
<section class="case-study">
<div class="intro">
<div class="intro-left">
<li id="title-img">
<img src="Assets/CleanRide/CleanRide.png" alt="Portfolio" />
</li>
</div>
<div class="intro-right">
<li id="title">
<h1>CleanRide</h1>
</li>
</div>
</div>
<div class="center-text" id="process-right">
<li id="blurb">
<p>A subway cleanup effort designed to encourage conscious recycling and trashing.</p>
</li>
<div class="designheading">
<hr id="problemline1"/>
<h2>The Problem</h2>
<hr id="problemline2"/>
</div>
<p>New York subway stations are filled with trash, resulting in a longer and less pleasant commutes thanks to delays from trash fires, and increased maintenance.</p>
<h2>The Solution</h2>
<p>The community we’re focusing on are New Yorkers who commute, and we’re aligning them towards accomplishing a city-wide cleanup for the MTA in terms of litter.
<li class="bullet">We believe that littering is caused by a combination of bad habits and carelessness.</li>
<li class="bullet">The problem of littering can be alleviated by incentivising subway commuters into keeping their station cleans.</li>
<li class="bullet">We’ll find validation if track fires caused by trash decrease.</li></p>
</div>
<div class="designheading">
<hr id="approachline1"/>
<h2>Research</h2>
<hr id="approachline2"/>
</div>
<div class="center-text">
<p>Our process started off with gathering research data. We based our data off of existing research for the cause of delays on the MTA, research data we pulled from an MTA employee, and short in-person polling from users of the MTA and transportation in general for NYC.</p>
<img src="Assets/CleanRide/UserResearch.jpeg" alt="Portfolio"/>
<p>Pain Points & Insights
<li class="bullet">“Trains aren’t running”</li>
<li class="bullet">“The walls are filthy. The floors are filthy”</li>
<li class="bullet">“The city spends so much money just to maintain this level of cleanliness”</li>
<li class="bullet">People are more likely motivated to do something if there is an incentive</li>
<li class="bullet">“We are a culture of instant gratification”</li>
<li class="bullet">MTA costs keep going up to cover operations costs (particularly for damage control)</li>
<li class="bullet">“I need somewhere to throw away my trash on the subway.”</li></p>
<p>MTA Employee Interview
<li class="bullet">Trash found primarily in locations with high volume and a lot of wind</li>
<li class="bullet">Tracks have cages for collecting trash, but they overflow</li>
<li class="bullet">Most people are not throwing trash on the tracks, but the wind and shape of different stations causes the trash to end up building up on the tracks</li>
<li class="bullet">Believes the public doesn’t understand how bad trash is, and that they need to be educated more</li>
<li class="bullet">Believes littering is a habit that needs to be changed</li>
<li class="bullet">Believes MTA is going to hire more cops to start ticketing people for littering</li>
<li class="bullet">Often important maintenance is deferred as MTA has to deal with cleaning trash and trash fires instead of doing needed repairs.</li></p>
<p>Confessed Litterer Reasons
<li class="bullet">No location to throw trash away on subway</li>
<li class="bullet">Didn’t want to miss train</li></p>
<p>Using our research data, we brainstormed a user persona for the typical MTA user and what they were looking for in their commute.</p>
<p>User Persona - New Yorkers who....
<li class="bullet">Would like a discount on their fair</li>
<li class="bullet">Are incentivized by cash and/or cheaper subway fare</li>
<li class="bullet">Are tired of delays on the subway due to trash fires</li>
<li class="bullet">Are commuters</li>
<li class="bullet">Believe in a clean environment</li></p>
</div>
<div class="designheading">
<hr id="designline1"/>
<h2>Ideation</h2>
<hr id="designline2"/>
</div>
<div class="center-text">
<img src="Assets/CleanRide/Ideation.jpg" alt="Portfolio"/>
<p>Upon completion of our user research, we began ideating different possible solutions to our existing problem. We came up with several methods of solving a variety of issues found in our research data, but narrowed our selection down to a vending machine that would encourage New Yorkers to be more environmentally conscious.
<br/>
<p>Related (Emerging) Technologies
<li class="bullet">Mobile Wallets</li>
<li class="bullet">Interactive kiosks and trash receptacles</li></p>
<p>Features
<li class="bullet">Participation-based credit</li>
<li class="bullet">Recyclables / Trash collection</li></p>
<p>Deciding to name our product "CleanRide", we then brainstormed a user flow for what a typical user wanted out of their MTA experience with CleanRide.</p>
<img src="Assets/CleanRide/UserFlow.png" alt="Portfolio"/>
</div>
<div class="designheading">
<hr id="problemline1"/>
<h2>Wireframing</h2>
<hr id="problemline2"/>
</div>
<div class="center-text">
<p>After we decided which direction to take our project, we went on to create simple wireframes for our vending machine and how the interface would look.</p>
<img src="Assets/CleanRide/Machine.JPG" alt="Portfolio" />
<p>Above is the initial idea we had for our recycling/vending machine. It was a variation of the machines already in existence on MTA platforms that would check card balances, but with an additional receptacle for trash/recycling.
<img src="Assets/CleanRide/Interface.JPG" alt="Portfolio" />
<p>We also planned an alternative interface that worked directly with the current MTA card vending machines, where we could still implement our idea but not disrupt the existing user experience too much. As such, this version is a mirror of the current vending machine with an additional receptacle for trash/recycling.</p>
</div>
<div class="designheading">
<hr id="approachline1"/>
<h2>Mockups</h2>
<hr id="approachline2"/>
</div>
<div class="mockups">
<div class="center-text">
<img src="Assets/CleanRide/MedFiMockup.png" alt="Portfolio" />
<p>After our lo-fi wireframes, we went on to develop a med-fi digital mockup of our interface and how it would work, as well as a hi-fi mockup of our actual vending machine. We decided to add a MobilePay option as well, for users to add currency back onto their bank account instead of just the MTA card. In making that decision, we wanted to be forward thinking in how this machine would operate throughout the years, as MobilePay has and continues to grow in adoption as a technology utilized by the majority.</p>
<div class="designheading">
<hr id="designline1"/>
<h2>Prototyping</h2>
<hr id="designline2"/>
</div>
<div class="center-text">
<img src="Assets/CleanRide/Prototype.jpg" alt="Portfolio" />
<p>The final step was to send out our full prototype for user testing, record their feedback and make subsequent small changes to the product to reflect that feedback. Overall, the experience was well received by the majority of users who tested it. Users enjoyed how
it would promote a cleaner environment for commuters, as well as the simplicity of the design and functions. Some feedback we got from testing was:
<li class="bullet">Time constraints for catching train would affect decision to use kiosk or not</li>
<li class="bullet">Next time the user would choose to use MobilePay instead of sliding MTA card</li>
<li class="bullet">Clarify what the machine does in a better way</li>
<li class="bullet">Incentivise more with higher reward payments or recycling for charity</li>
<li class="bullet">“I litter because there’s nowhere on the platform to throw trash out, and I’m in a hurry to catch my train.”</li></p>
<img src="Assets/CleanRide/CleanRide.png" alt="Portfolio" />
</div>
<div class="conclusion center-text">
<div class="designheading">
<hr id="conclusionline1"/>
<h2>Conclusion</h2>
<hr id="conclusionline2"/>
</div>
<p>Our product encourages positive collective behavior in spaces shared daily by millions, and offers a viable solution to a pervasive problem.</p>
<p>In brief:
<li class="bullet">USER – Riders who need somewhere to throw away their trash, and who need incentives not to litter</li>
<li class="bullet">WHAT – A subway cleanup effort designed to engage and encourage conscious recycling and trashing.</li>
<li class="bullet">WHERE – Near Metrocard machines outside the subway turnstyles</li>
<li class="bullet">WHEN – Entering the subway with trash on hand</li>
<li class="bullet">WHY – The subway experience is dirty and has major delays.</li>
<li class="bullet">HOW – A vending kiosk that transacts trash and recyclables for metrocard value</li></p>
<p>Impact:</p>
<li class="bullet">Improve subway environment</li>
<li class="bullet">Percentage-based decrease of cost for subway rides</li>
<li class="bullet">Improve subway riding experience</li>
<li class="bullet">Reduce number of track trash fires</li></p>
<h3>Doubts</h3>
<p>My doubts going into this project was that we wouldn’t be able to find enough research to support our project, given that this was a hackathon and took place over the course of 8 hours.</p>
<br/>
<h3>Surprises</h3>
<p>What surprised me the most was how positive the reaction to our product was. New Yorkers are very clearly fed up with the amount of construction and train delays for the MTA and are ready to do something about it to reduce those pain points.</p>
<br/>
<h3>More Time/Resources
<p>If I had more time or resources, I would have made sure that our product could have introduced a viable workaround for homeless/less privileged who make it their daily living to collect recyclables.</p>
<br/>
<h3>Takeaways
<p>This was my second hackathon, and I enjoyed the teamwork and group participation immensely. Being in a mentor program for most of my design career so far, having multiple viewpoints really made me enjoy how collaborative the whole process was.</p>
</div>
<div class="center-text">
<div class="designheading">
<hr id="approachline1"/>
<h2>More Projects</h2>
<hr id="approachline2"/>
</div>
<a href="http://agchen.design/blocbox.html"> <img src="Assets/BlocboxBanner.png" alt="Portfolio"/> </a>
<a href="http://agchen.design/knode.html"> <img src="Assets/KnodeBanner.png" alt="Portfolio"/> </a>
<a href="http://agchen.design/paycrave.html"> <img src="Assets/PayCraveBanner.png" alt="Portfolio"/> </a>
</section>
</main>
<!-- Footer -->
<hr/>
<footer>
<div class="footer-nav-block">
<div class="footer-left"><a href="index.html"><img class="logo" src="Assets/Logo3-sm.png" alt="Portfolio" /></a></div>
<div class="footer-mid">
<div class="back"><a href='#top' class="back">back to top</a></div>
</div>
<div class="footer-right"><ul class="social_icons">
<li class="social"><a href="http://instagram.com/ackeepitcool"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://twitter.com/ackeepitcool"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://linkedin.com/agchen"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i></li>
<li class="social"><a href="http://dribbble.com/ackeepitcool"><i class="fa fa-dribbble fa-2x" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</footer>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-107040718-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-107040718-1');
</script>
</body>
</html>