-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex1.html
More file actions
187 lines (174 loc) · 8.1 KB
/
index1.html
File metadata and controls
187 lines (174 loc) · 8.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Details | Jankari Disaster App</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link rel="stylesheet" href="style1.css" />
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a href="index.html#home" class="logo">Pratik Kumar Sethi</a>
<ul class="nav-links">
<li><a href="index.html#home" class="nav-link">Home</a></li>
<li><a href="index.html#about" class="nav-link">About</a></li>
<li><a href="index.html#projects" class="nav-link">Projects</a></li>
<li><a href="index.html#contact" class="nav-link">Contact</a></li>
</ul>
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
<section id="project-detail">
<div class="container">
<a href="index.html#projects" class="btn btn-back">
<i class="fas fa-arrow-left"></i>
Back to Projects
</a>
<div class="project-content">
<h2 class="section-title">Jankari - Disaster Management App</h2>
<p class="fade-in">
Jankari is a high-fidelity mobile application concept designed to be
an all-in-one safety companion during emergencies. It provides
<strong>"Smart help when it matters most"</strong> by bridging the
gap between receiving a disaster alert and getting tangible,
real-time assistance. As the sole UI/UX designer, I handled all
aspects of this project, from research and user flow to the final
high-contrast, easy-to-navigate UI.
</p>
<div class="image-wrapper fade-in">
<img
src="imgs/one.jpg"
alt="Jankari App UI Collage"
onerror="this.src='https://placehold.co/1000x600/0A192F/FFFFFF?text=Image+Not+Found'"
/>
</div>
<h4>The Problem:</h4>
<p class="fade-in" style="text-align: left">
My research into India's existing disaster management apps revealed
a critical gap:
</p>
<p class="fade-in" style="text-align: left">
<strong>1. Poor UI/UX:</strong> Many official apps are criticized
for having cluttered interfaces, confusing navigation, and
inconsistent button designs. In a high-stress situation, this is a
dangerous flaw.
</p>
<p class="fade-in" style="text-align: left">
<strong>2. Fragmented Services:</strong> Users often need multiple
apps—one for weather alerts, another for general SOS, and none that
integrate specific utility services. This fragmentation wastes
critical time.
</p>
<p class="fade-in" style="text-align: left">
<strong>3. Vague Information:</strong> Users are often presented
with an overwhelming "information load" but lack a clear,
prioritized view of the
<strong>most immediate threat</strong> versus
<strong>potential</strong> threats.
</p>
<div class="image-wrapper medium fade-in">
<img
src="imgs/two.jpg"
alt="Jankari App Home and Alert Screens"
onerror="this.src='https://placehold.co/1000x500/0A192F/FFFFFF?text=Image+Not+Found'"
/>
</div>
<h4>Key Design Decisions & Solutions:</h4>
<p class="fade-in" style="text-align: left">
I designed Jankari to directly solve these problems with a focus on
clarity, speed, and consolidation.
</p>
<p class="fade-in" style="text-align: left">
<strong>Problem:</strong> In a panic, users are confused by
cluttered interfaces and ambiguous alerts. <br />
<strong>Solution:</strong> The Home screen provides immediate
situational awareness. It greets the user by name and instantly
displays the <strong>single most significant threat</strong> (e.g.,
"Heavy Rain alert"). This is followed by a clearly separate "Other
Threats" section (e.g., "Cyclone," "Flash Flood"), allowing users to
prioritize their safety without confusion.
</p>
<p class="fade-in" style="text-align: left">
<strong>Problem:</strong> Existing apps are fragmented, forcing
users to find numbers for police, fire, or medical services
separately.
<br />
<strong>Solution:</strong> Jankari is an
<strong>all-in-one "Smart Help" platform</strong>. The "Map" tab
integrates one-tap access to not only "SOS," "Medical," "Fire," and
"Police," but also essential utilities like
<strong>"Power Utility"</strong> and
<strong>"Animal Aid,"</strong>
which are often overlooked.
</p>
<div class="image-wrapper medium fade-in">
<img
src="imgs/three.jpg"
alt="Jankari App Map and Navigation"
onerror="this.src='https://placehold.co/400x800/0A192F/FFFFFF?text=Image+Not+Found'"
/>
</div>
<p class="fade-in" style="text-align: left">
<strong>Problem:</strong> Calling for help is only the first step.
The user is still left wondering <em>when</em> help will arrive.
<br />
<strong>Solution:</strong> The app closes the loop. When a user
requests "Medical" help, the map instantly calculates and displays
the route and
<strong>real-time ETA of the nearest unit</strong> (e.g., "Capital
Hospital" in "6 Minutes"), managing user anxiety and providing a
concrete action plan.
</p>
<p class="fade-in" style="text-align: left">
<strong>Problem:</strong> Accidental "panic-presses" of an SOS
button are common, while a high-contrast, accessible UI is rare.
<br />
<strong>Solution:</strong> The primary "Need help?" card features a
prominent <strong>3-second "click-and-hold" SOS button</strong>.
This prevents false alarms while remaining incredibly fast in a real
emergency. The entire app uses a clean, high-contrast red-and-white
theme to ensure it's readable and navigable even in the most
stressful conditions.
</p>
<h4>Takeaways & Next Steps:</h4>
<p class="fade-in" style="text-align: left">
<strong>What I Learned:</strong> This project taught me that in a
life-or-death context, UI/UX is not about being clever; it's about
being invisible. Every decision must reduce cognitive load. The goal
is to get the user from "panic" to "action" in the fewest, most
intuitive steps possible.
</p>
<p class="fade-in" style="text-align: left">
<strong>Next Steps:</strong> If I were to continue this project, the
immediate next step would be to build and test a live prototype with
users in a timed, high-stress simulation. This should be the only
way to truly validate whether the 3-second hold and map flows are as
intuitive as intended.
</p>
<h3>Thank You for Exploring Jankari!</h3>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<p>© 2025 Pratik Kumar Sethi. All Rights Reserved.</p>
</div>
</footer>
<script src="script1.js"></script>
</body>
</html>