-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathp_mrmapp.html
382 lines (335 loc) · 24.6 KB
/
p_mrmapp.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
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Jaiki:: Projects: MrmApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FAVICON for all pages -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- styles for all pages -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" type="text/css" href="css/jaiki01.css"/>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<!-- styles for icon font -->
<link rel="stylesheet" type="text/css" href="font.css">
<!--go to top -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
</script>
<!--go down -->
<script>
$(document).ready(function () {
var img = $(".page-wrapper-gray");
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.bounce').fadeOut();
} else {
$('.bounce').fadeIn();
}
});
$('.bounce').click(function () {
$("html, body").animate({
scrollTop: 140 + img.height()
}, 600);
return false;
});
});
</script>
</head>
<!-- ********************************************************************************** -->
<body>
<div class="page-wrapper" style="background-color:#f2f2f2"><!--page background-->
<center>
<!-- //// T O P N A V I G A T I O N //////////////////////////////////////////////////////////////////////////////////////////////////// -->
<!--Top Nav Wrapper Starts-->
<div class="top-nav-wrapper" style="background-color:#f2f2f2;border-bottom:#caefff 0px solid;">
<div class="top-nav" style=" border-bottom:#ccc 0px solid;">
<div class="mm-a"><!--MM Left-->
<ul>
<li>
<a href="/"><i class="icGold1-logo-jaiki"></i></a><!--Jaiki logo-->
<a href="about">About</a>
<a href="notes">Notes</a>
<a href="projects" class="active">Projects</a>
<a href="contact">Contact</a>
</li>
</ul>
</div>
</div><!--Top Nav ends-->
</div><!--Top Nav Wrapper ends-->
<!-- **** B A R ****************************************************************************** -->
<!--bar starts--><div id="bar"></div><!--bar ends-->
<!--go to top button starts-->
<article><a href="#" class="scrollup">Scroll</a></article>
<!-- **** A T F ****************************************************************************** -->
<div class="page-wrapper-gray" style="background-color:#f2f2f2; padding: 0px 0 0px 0px;"><!--page background gray-->
<div class="j-top"><img src="images/projects/mrmapp_top.jpg" alt="image_top"/></div>
<div class="go-down"><a class="bounce" href="#">See the full project</a></div>
<div class="j-wrapper">
<div class="j-title-top">
<span>
MrmApp // Supported by: Ministry of human resource and development, Govt. of India / Explore more at: <a href="https://www.localsofmumbai.com/" target="_blank">www.localsofmumbai.com</a>
</span>
</div>
<div class="clearcolumn"></div>
</div><!--j-wrapper ends -->
</div><!--page wrapper gray ends-->
<!-- **** B O D Y ****************************************************************************** -->
<div class="j-wrapper">
<div class="j-post960">
<span>
<h1 class="xxlarge"><br>Design of the complete travel application for the Mumbai sub-urban rail network ‘<b>Mrm</b>App’</h1>
<p class="large">MrmApp is a step to further assist the commuters with a smoother travelling experience by providing all the required information available at a tap. Includes Mumbai Local, Metro and Mono rail </p>
</span>
<img src="images/projects/mrmapp_preview1.jpg" alt="mrmapp_preview1"/>
</div>
<div class="j-post960">
</div>
<div class="j-title">
<span>
<h6>May - June 2014</h6>
<h5>Mumbai</h5><br>
<h4>While testing of the Mumbai Rail Map (print version 5.0) at Dadar central and Mumbai Chhatrapati Shivaji Terminus</h4>
</span>
</div>
<div class="j-post700">
<img src="images/projects/mrmapp_preface2.jpg" alt="mrmapp_preface2"/>
<span>
<h3>The first thought</h3>
<p>After getting user feedback on the Mumbai Rail Map Project through the online media and testing done with the commuters at central railway stations – Mumbai CST & Dadar Central, it is observed that at every moment a large number of regular and new commuters requires help for information. Having a detailed version of railway map can serve the need only when it is installed at the right places. To reach out to a large number of fast moving crowds with well-equipped mobile devices, a mobile application could be more efficient and easily accessible as opposed to the traditional printed map. MrmApp is a step to further assist the commuters with a smoother travelling experience by providing all the required information available at a tap. </p>
<div class="quote">
<h3><a href="p_mrm"target="_blank"><img src="images/projects/mrm_v6.jpg"alt="mrm_v6"/>Mumbai Rail Map</a></h3>
<p>मुंबई रेल नक्शा . ممبئی ریل کا نقشہ . मुंबई रेल नकाशा . મુંબઈ રેલ નક્શો</p>
<p>An extensive journey that started over a year back with two design students dreaming to give the cosmopolitan city of Mumbai a Rail Map has led us this far. Since the first Mumbai Rail Map launch in December 2013, the project has grown due to the perseverance of a motivated team, and the encouragement and feedback from the people of Mumbai.</p>
<p class="medium">The latest version of the MRM are available for download in Hindi, Marathi, Gujarati, Urdu & English languages. <a href="https://localsofmumbai.com/mumbairailmap/" target="_blank">Download the latest maps at localsofmumbai.com</a></p>
</div>
<p>One of the requests kept reappearing during the feedback. Most people were asking for a digital version of the Mumbai Rail Map to be accessed from their phones. Most wanted to click a picture of it for future reference. It can often be seen that as designers we tend to analyze and approach a design problem with an external point of view, as we may or may not be directly affected by it. It is, therefore, necessary to request and obtain user-feedback at numerous stages during the design process in order to keep true to the course, and help evolve the design to best resolve the problem at hand.</p>
</span>
</div>
<div class="j-post960">
<img src="images/projects/mrmapp_preface1.jpg" alt="mrmapp_preface1"/>
</div>
<div class="j-post700">
<span>
<p>Most wanted to click a picture of it for future reference. It was noticed that people requested either the map be circulated through the Internet or be made available as an application that could be accessed through digital devices. This let the MRM project in an interesting direction.There has been a staggering increase in the number of smartphone users in Urban India. While it was estimated at 51 million in 2013, the number is likely to have crossed approximately 104 million by the end of 2014. As per our user testing many of the commuters were already using the available mobile applications to get information on the plying trains and stations. This is increasingly becoming second nature to people – to be able to access any information as per their convenience. But of course accessibility and availability aren’t the only key factors at play here.</p>
<p>People have become habituated to accessing information in a more filtered manner. While a print map is more static in nature and has to display all the information together, including the routes (both fast and slow), station names and codes, travelling time, and kind of trains for every possible scenario or permutation; an interactive map is far more convenient as it reduces the cognitive load on the user by providing search specific information. It is an efficient approach for a world that is always on the move. The primary hurdle with a static or a print map is, when installed on stations the user has to approach it whenever needed, it also is particularly difficult to update.</p>
</span>
</div>
<div class="devider"></div><!-- ///////////////////////////////////////////////// -->
<div class="j-title">
<span>
<h6>May - June 2014</h6>
<h5></h5><br>
</span>
</div>
<div class="j-post700">
<span>
<h3>Existing Travel Apps related to the mumbai local </h3>
<h3>in Concern to a new commuter: </h3>
<p class="pull">Do I need to know the connecting routes, prior to any query?</p>
<p>Most of the applications carry the database that includes timings of trains, lines, station code and station names. They provide timings of a particular train only for on railway line at a time. And if a journey requires to switch the line for ex. Central line to Western or Harbour line, the user is expected to search for each of them individually. And that requires certain pre knowledge about routes and stations. Also another very prominent issue is that none of them provide an overview of the journey that is very crucial especially for a new commuter in Mumbai. There are a few very particular issues in the overview model of Mumbai. As the station codes are not always related to the concerned station name. Also the whole model of Mumbai railway is mainly based on north - south direction as they were lenient when started. Now when all the lines extended and new lines have been introduced, there are lines which intersect east to west also, having connected to the north south line. Without having an overview of the city, its very difficult to figure out.</p>
</span>
<img src="images/projects/mrmapp_harbour.jpg" alt="mrmapp_harbour"/>
<span>
<p class="pull">An overview of my journey</p>
<p>None of the available apps provide a complete journey information with all the exchange details. List of trains are available only for a single route. In such cases I need to answer that which direction I want go first. For lines which are lenient, its easy to understand but for ex. if I have to travel from Andheri to Panvel or Khopoli to Kasara, it doesn’t seem to be clear which is up direction and which is down.<br><br>Currently all the details of the journey are based on textual input and results. None of them provide an overview on the map for a search query.</p>
</span>
</div>
<div class="devider"></div><!-- ///////////////////////////////////////////////// -->
<div class="j-title">
<span>
<h6>July 2014</h6>
<h5></h5><br>
</span>
</div>
<div class="j-post700">
<span>
<h3>Redesigning the Print Mumbai Rail Map for interactive application. <b>Design for touch</b></h3>
</span>
<img src="images/projects/mrmapp_code2.jpg" alt="mrmapp_code2"/>
<img src="images/projects/mrmapp_digital5.jpg" alt="mrmapp_digital5"/>
<span>
<h3>Visible content</h3>
<p>In a print scenario where all the information has to be up front at any point of the time in a layout. Where in the interactive map there can be multiple layer of information. And all of them need not be present on screen all the time. Only relevant content based on the search query can be visible and other can be hidden. Few of the most prominent content in print version are not necessary in the digital version of the map. Such as the numerical grid, Slow and Fast lines, Grid (Box) numbers, Terminal station indicators, Time between stations and Index for the map, </p>
<p>Density of the layout can be much relaxed as the size of the panel is not a constrain. So keeping a minimum change in visual language from the print layout, elements such as thickness of the lines, type size & weight, icons, shapes and their contrast have been modified. So the layout contents which are necessary for one particular search result. Rest of the information can appear later based on the query.</p>
</span>
<img src="images/projects/mrmapp_digital2.jpg" alt="mrmapp_digital1"/>
<img src="images/projects/mrmapp02.jpg" alt="mrmapp02"/>
<span>
<h3>Touch friendly forms</h3>
<p>Station markers presently used in the print map, are designed to orient the names of the station for the print situation. As markers had to mark fast and slow lines together (irrespective of the fact that both fast and slow stop are the same station), they were wide and thin to save the limited space available in the layout. But in the interactive map doesn’t need 2 lines that represent fast and slow track separately. Just a single line is enough to display the direction of the journey. That actually simplifies the layout very much. And the station markers can have more space for the touch screen devices. So the new station marker gets much circular form than the liner one used in the print version maps. Many times a single station carries its name more than once in the map because it has Mumbai Local, Metro rail and Mono rail station together. But because these stations in different railway systems, even after having same name, do not belong to the same place. To clarify the confusion, and to maintain consistency, we have used capsule marker forms for Mumbai Local and circular forms for others such as Metro rail and Mono rail. </p>
</span>
<img src="images/projects/mrmapp_digital3.jpg" alt="mrmapp_digital3"/>
<span>
<h3>Highlighting the markers</h3>
<p>Each Station marker has been colour coded based on the line colour. Station marker is filled with a centre dot of same colour when highlighted and shown empty when they are not highlighted. Every-time the journey includes an interchange, the highlighting path has to highlight the respective station marker also. In that case only half part of a station marker needs to be highlighted. The other part of the station on the same junction remains un-highlighted. </p>
</span>
<img src="images/projects/mrmapp_digital1.jpg" alt="mrmapp_digital2"/>
<img src="images/projects/mrmapp_digital4.jpg" alt="mrmapp_digital4"/>
<img src="images/projects/mrmapp_map.jpg" alt="mrmapp_map"/>
</div>
<div class="devider"></div><!-- ///////////////////////////////////////////////// -->
<div class="j-title">
<span>
<h6>August - September 2014</h6>
</span>
</div>
<div class="j-post960">
<img src="images/projects/mrmapp_screens_all.jpg" alt="mrmapp_screens"/>
</div>
<div class="j-post700">
<span>
<h3>Draft wireframes</h3>
<p>Version 1.0 for iOS</p>
</span>
<img src="images/projects/mrmapp_screens_v0.jpg" alt="mrmapp_screens"/>
<img src="images/projects/mrmapp_screens_v02.jpg" alt="mrmapp_screens"/>
<img src="images/projects/mrmapp_screens_v03.jpg" alt="mrmapp_screens"/>
<img src="images/projects/mrmapp_screens_v04.jpg" alt="mrmapp_screens"/>
<img src="images/projects/mrmapp_screens_v05.jpg" alt="mrmapp_screens"/>
<img src="images/projects/mrmapp_screens_v06.jpg" alt="mrmapp_screens"/>
<img src="images/projects/mrmapp_screens_v07.jpg" alt="mrmapp_screens"/>
<img src="images/projects/mrmapp_screens_v08.jpg" alt="mrmapp_screens"/>
<img src="images/projects/mrmapp_screens_v09.jpg" alt="mrmapp_screens"/>
<img src="images/projects/mrmapp_screens_v010.jpg" alt="mrmapp_screens"/>
<img src="images/projects/mrmapp_screens_v011.jpg" alt="mrmapp_screens"/>
</div>
<div class="devider"></div><!-- ///////////////////////////////////////////////// -->
<div class="j-post700">
<span>
<h3>MrmApp Version 1.0</h3>
<p>Launched on 14th February 2015, for iOS on App Store. Currently the latest versions are available for Android and iOS</p>
</span>
<img src="images/projects/mrmapp_id2.jpg" alt="mrmapp_id2"/>
</div>
<div class="j-post960">
<img src="images/projects/mrmapp03.jpg" alt="mrmapp03"/>
</div>
<div class="j-post700">
<img src="images/projects/mrmapp04.jpg" alt="mrmapp04"/>
</div>
<div class="j-post960">
<img src="images/projects/mrmapp05.jpg" alt="mrmapp05"/>
<img src="images/projects/mrmapp_poster1.jpg" alt="mrmapp_poster1"/>
</div>
<div class="j-post700">
<span>
<p>Explore more at <a href="https://www.localsofmumbai.com/" target="_blank">www.localsofmumbai.com</a></p>
<p>Please Like and Share the Facebook Page <a href='https://facebook.com/localsofmumbai/' target="_blank">#LocalsOfMumbai</a> for updates</p>
<!--facebook - LOCALS of MUMBAI Share without faces starts-->
<iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fwww.facebook.com%2Flocalsofmumbai%2F&layout=button_count&mobile_iframe=true&width=87&height=20&appId" width="100" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
<!--facebook - LOCALS of MUMBAI Like ends-->
<br><br><br>
</span>
</div>
<div class="clearcolumn"></div>
</div>
<!--contents ends -->
<!-- **** B C ****************************************************************************** -->
<div class="section-wrapper" style="background-color:#fafafa; border-top: #e8c790 1px dashed;"><!--section background-->
<div class="j-wrapper">
<!--Bread Crumbs starts -->
<ul id="crumbs">
<li><a href="/" class="first-child">Home</a></li>
<li><a href="projects">Projects</a></li>
<li><a href="#" class="active">MrmApp</a></li>
</ul>
<!--AD starts -->
<div class="j-ad-b">
<ul><li><a href="projects" target="_self">View all Design Projects</a></li></ul>
</div><!--AD ends -->
<div class="clearcolumn"></div>
</div><!--j-wrapper ends -->
</div><!--section wrapper ends-->
<!-- **** J - A L B U M ****************************************************************************** -->
<div class="section-wrapper" style="background-color:#fafafa;"><!--section background-->
<div class="j-wrapper">
<!--All project list starts -->
<div class="j-album-wrapper">
<ul class="j-album"><span>Related Projects</span>
<!--MRM EXT -->
<li class='active'><a href='p_mrmext'><img src="images/home/p_mrmext_thumb.png" alt="Meri Mumbai Meri Local">
<span>My Mumbai My Local<br/><h2 class="tag">#LoveMumbai</h2></span></a></li>
<!--mumbai rail map -->
<li class='active'><a href='p_mrm'><img src="images/home/p_mrm_thumb.png" alt="Mumbai Rail Map">
<span>Mumbai Rail Map<br/><h2 class="tag">Print</h2></span></a></li>
</div><!--All project list ends -->
<div class="clearcolumn"></div>
</div><!--j-wrapper ends -->
</div><!--section wrapper ends-->
<!-- :::: F O O T :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<div class="foot"><!--foot starts -->
<div class="foot-wrapper"><!--foot wrapper starts -->
<div class="footmenu"><!--foot menu starts -->
<span>Social Media Links</span><!--Social starts -->
<ul>
<li class="social">
<a href='https://facebook.com/jaiki123/' target="_blank"><i class="icGold1-icon-facebook"></i></a>
<a href="https://instagram.com/j.a.i.k.i/" target="_blank"><i class="icGold1-icon-instagram"></i></a>
<a href='https://twitter.com/jaikishan_patel/' target="_blank"><i class="icGold1-icon-twitter"></i></a>
<a href="https://dribbble.com/jaiki/" target="_blank"><i class="icGold1-icon-dribbble"></i></a>
<a href="https://github.com/jaikishanpatel/" target="_blank"><i class="icGold1-icon-github"></i></a>
<a href="https://in.pinterest.com/jaikishanpatel/" target="_blank"><i class="icGold1-icon-pinterest"></i></a>
<a href="https://www.youtube.com/channel/UCmJiLpqZzmU5CsB5M8Gibvg?/" target="_blank"><i class="icGold1-icon-youtube"></i></a>
<a href="https://linkedin.com/in/jaiki123/" target="_blank"><i class="icGold1-icon-linkedin"></i></a>
<a href='https://behance.net/jaikishan' target="_blank"><i class="icGold1-icon-behance"></i></a>
</li>
</ul>
<ul><!--copyright menu -->
<li>
© <a href='https://jaiki.in/' target="_blank"><i class="icGold1-logo-jaiki"></i></a> All Rights Reserved ·
<a href='disclaimer'>Disclaimer and Acknowledgement · </a>
<a href='contact'>Feedback · </a>
<a href='contact'>Contact · </a>
<a href='sitemap'>Sitemap</a>
</li>
</ul>
<ul><!--SHARE buttons -->
<li>
Share the website on :
<a href="https://www.facebook.com/sharer/sharer.php?u=jaiki.in">Facebook</a>
<a href="https://twitter.com/intent/tweet?text=Website of Jaikishan Patel&url=jaiki.in&via=jaikishan_patel"> Twitter</a>
<a href="https://pinterest.com/pin/create/button/?url=jaiki.in&description=YOUR-DESCRIPTION&media=images/illustration_home.png"> Pinterest</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=jaiki.in&title=Website&source=jaiki.in"> LinkedIn</a>
</li>
</ul>
</div><!--foot menu ends -->
</div><!--foot wrapper ends -->
</div><!--foot ends-->
<!-- ********************************************************************************** -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-65033586-1','auto');ga('send','pageview');
</script>
</center>
</div><!--page wrapper ends-->
</body>
</html>