-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
332 lines (300 loc) · 16.5 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wellness App</title>
<style>
/* Add your CSS styles here */
img {
max-width: 100%;
height: auto;
}
.video-container {
max-width: 100%;
overflow: hidden;
margin: 0 auto;
}
video {
width: 100%;
height: auto;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
color: #333;
min-height: 100vh;
}
header,
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
width: 100%;
}
section {
padding: 20px;
margin: 20px 0;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 800px;
width: 100%;
}
h1,
h2 {
color: #333;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
color: #007bff;
text-decoration: none;
}
footer {
margin-top: 40px;
}
</style>
</head>
<body>
<header>
<img src="logo.png">
</header>
<section>
Hassan Moharram - 40158285 <br>
Alexander El Ghaoui - 40200062
</section>
<section>
<h2>Introduction to the Problem Statement</h2>
<p>In recent years, the aging population has seen a significant increase in lifespan, with Canadians expected to
live up to 82.8 years. Nevertheless, an increase in years does not always equate to a higher standard of
living. Technology offers a potential to improve elderly people's general well-being, social involvement,
and sense of independence. Even with this potential, older people still don't use these technologies as much
as they could, mostly because the designs don't take into account their varied requirements and
capabilities. Developing user-friendly, adaptive, and elder-friendly solutions that may effectively engage
this group while considering their different technological experiences and physical or cognitive limitations
is a challenge that must be addressed.</p>
</section>
<section>
<h2>Our Solution</h2>
<p>Addressing the unique needs and challenges faced by the elderly, especially in times of increased social
distancing and isolation due to the COVID-19 pandemic, our team proposes the development of a simplified,
highly accessible mobile application. This app is designed to support the physical and mental well-being of
elderly users, whether they are living independently at home or in a nursing facility. By incorporating
activities such as meditation, gentle reminders for physical movement, stretching exercises, and other
health-promoting tasks, the app aims to foster a more active and healthy lifestyle. Recognizing the critical
role of technology in maintaining social connections and access to health resources, our solution
prioritizes ease of use and inclusivity, ensuring that even users with minimal technological experience can
benefit fully.</p>
</section>
<section>
<h2>Research and Market Analysis</h2>
<p>Our initial market analysis reveals a landscape where existing applications either focus narrowly on specific
aspects of well-being (such as physical fitness or mental health) or fail to address the unique usability
needs of the elderly population. Many apps offer valuable features but lack the comprehensive approach
needed to truly enhance the day-to-day lives of older adults. To understand our target users better and to
tailor our app to meet their specific needs, we plan to conduct a survey exploring their daily routines,
technology use, and health habits. This survey will help identify key functionalities that could
significantly improve their quality of life, such as easy-to-navigate interfaces, large text options, voice
commands, and reminders for medication, hydration, or activity. Through this research, we aim to pinpoint
gaps in the current market offerings and design an app that not only appeals to the elderly demographic but
also effectively supports their physical and mental well-being during and beyond the pandemic era.</p>
<h2>Alternatives</h2>
<p>There were many alternatives on the market but many either lack features or focus on one feature and do it
well but there were not many that include all the features with proper attention to the individual’s
difficulties.</p>
<ul>
<li>The first example, Pill Reminder - All in One, is an app that reminds the user to take their medication
but lacks in many other features:<br>
<img src="pillreminder.png"> <br>
<a href="https://apps.apple.com/us/app/pill-reminder-all-in-one/id816347839">Pill Reminder - All in
One</a>
</li>
<li>The next example, Pocket Physio, is an app that focuses on physical well-being. It provides a wide range
of physical activities and features but lacks some of the non-physical aspects of our app:<br>
<img src="pocket.png"> <br>
<a href="https://apps.apple.com/gb/app/pocket-physio/id811124736?platform=iphone">Pocket Physio</a>
</li>
</ul>
</section>
<section>
<h2>Survey</h2>
<p>Survey Demographic: Older than 65<br>
Survey Location: Canada<br>
Survey Size: 33</p>
<p>Question 1: Are you comfortable with using mobile apps or technology in general?<br>
Yes: 23<br>
No: 10</p>
<img src="yesno.png"> <br>
<p>Question 2: What challenges do you face when trying to improve your health? (checkbox)<br>
Technology: 23<br>
Physical: 27<br>
Mental: 12</p>
<img src="mentalgrapjh.png"> <br>
<p>Question 3: What concerns or reservations do you have about using a mobile app for managing your health and
well-being? (open-ended)<br>
<img src="concerngraph.png"> <br>
Ease of use: Various responses highlighting difficulties in navigating apps, understanding features, or
manipulating small interfaces.<br>
Cost and Affordability: Some expressed concerns about the potential expenses associated with using health
management apps, including subscription fees or in-app purchases.<br>
Privacy: Several respondents voiced worries regarding the security and privacy of their personal health data
when using mobile apps, expressing fears of data breaches or unauthorized access.
</p>
</section>
<section>
<h2>Personas</h2>
<p>Based on the results of our survey, we created three personas which we considered to be representative of
certain archetypes within the general demographic.</p>
<h3>Persona 1: Jacques</h3>
<img src="jacBio.png"> <br>
<p>Jacques resides in a nursing home in Montreal. He used to be an avid painter and enjoyed going for walks in
the park, but his mobility has decreased in recent years due to arthritis. Jacques has limited vision and
hearing impairments, which make it difficult for him to engage with traditional communication methods like
phone calls and video chats. He enjoys listening to classical music and reminiscing about his travels with
his late wife. Jacques is feeling increasingly isolated and longs for opportunities to connect with his
family and friends, as well as engage in activities that stimulate his mind and body.</p>
<h3>Persona 2: Margaret</h3>
<img src="margBio.png"> <br>
<p>Margaret is a retired teacher who lives alone in her own home in Quebec City. She has been relatively healthy
but finds it challenging to stay active and connected since the onset of the pandemic. Margaret enjoys
reading, gardening, and spending time with her grandchildren, but she misses social interactions with her
friends from her weekly book club and gardening club meetings. She has a smartphone but is not very
tech-savvy and often struggles to navigate new apps and features. Margaret is concerned about maintaining
her physical health and emotional well-being during this period of isolation.</p>
</section>
<section>
<h2>User goals</h2>
<p>Find a platform to stay connected with family and friends and to stay physically and mentally active by
providing features for personalized exercise routines, brain games, and hobby suggestions tailored to their
interests and abilities.</p>
<p>Access Resources: Offer access to relevant resources such as healthcare information, mental health support,
and local community services to address the diverse needs of users.</p>
<p>Promote emotional well-being by offering features for mindfulness exercises, guided relaxation techniques,
and mood tracking tools to help users manage stress and maintain a positive outlook.</p>
</section>
<section>
<h2>User Journey</h2>
<p>We listed all the requirements and features as a user journey map to show the general use flow of our app.
</p>
<img src="appmap.png"> <br>
</section>
<section>
<h2>StoryBoard</h2>
<p>
We also created a storyboard to show how a user may interact with our app. We can see the effects on a user
clearly in this example.
</p>
<img src="storyboard.png">
</section>
<section>
<h2>User flow diagram</h2>
<p>
After determining the main objectives of the users, we needed to know how the goals would be satisfied. We
produced a user flow diagram that illustrates the key actions required in order to help visualize how we
would build the framework.
</p>
<img src="flowchart.png">
</section>
<section>
<h2>Sketches</h2>
<p>We were able to sketch the app's first design after finishing the user journey. These sketches, which came
from a brainstorming session, were essential for seeing the app's layout.</p>
<img src="sketch.png">
</section>
<section>
<h2>Typography</h2>
<img src="typo.png">
<p>A single font was chosen for all of the app’s modules and features in order to increase cohesion. The font
used is Poppins.</p>
</section>
<section>
<h2>Colors</h2>
<img src="colors.png">
<p>The color palette presented in the image showcases a harmonious blend of cool and warm tones, carefully
selected to create an eye-soothing and relaxing atmosphere, ideal for the intended elderly user base of the
app. The light blue tones are reminiscent of clear skies, promoting a sense of tranquility and calmness. The
muted purple adds a touch of warmth and softness, while the deep black provides a strong contrast for
readability. The vibrant orange offers an energizing splash, albeit used sparingly to maintain the overall
soothing theme. Neutral tones of gray and beige serve as balancing elements, grounding the palette and
ensuring that the design remains light and accessible. The inclusion of pure white completes the palette,
ensuring a clean and uncluttered aesthetic that enhances usability and contributes to the overall gentle and
inviting interface of the app.</p>
</section>
<section>
<h2>Final design and prototype</h2>
<h3>Onboarding</h3>
<p>The user is first being prompted to login or create an account then suggested to start taking care of
themselve either mentally or physically. The onboarding process was designed to be short and easy and mostly
elderly friendly to not complicate things.</p>
<img src="onboarding.png">
<h3>Mental Health</h3>
<p>The mental health section of the app provides users with mood tracking capabilities, allowing them to record
and monitor their emotional well-being through a simple interface. It also offers a platform for social
interaction, enabling users to engage with others via chat or video, thus fostering a supportive community
environment. Additionally, the app includes a feature to listen to calming music, to aid in relaxation and
stress reduction. These features collectively support the mental health of users by providing tools for
self-awareness, social connection, and relaxation.</p>
<img src="mentalhea.png">
<h3>Physical Health</h3>
<img src="physicalhea.png">
<p>The physical health section of the app is a comprehensive suite designed to support users in monitoring and
enhancing their fitness. It includes a personalized fitness dashboard that tracks key health metrics like
hydration levels, and sleep patterns, encouraging users to meet daily targets for water intake and calorie
burn. There's also an activity tracker visualizing progress throughout the week and a workout tracker that
schedules exercises, suggesting routines like full-body or lower body workouts, tailored to the user's
preferences. The section appears to be rounded off with a user profile, displaying personal statistics and
achievements, fostering a sense of accomplishment and motivation. These integrated features provide a
holistic approach to physical wellness, promoting an active lifestyle tailored to the user's individual
health goals.</p>
<img src="fbw.png">
<p>
Here is an example of a full body workout with clear written instructions or a visual representation on the
steps to take depending on the user’s preference.
</p>
</section>
<section>
<h2>Demo</h2>
<div class="video-container">
<video controls src="demo.mp4" width="100%" height="auto"></video>
</div>
</section>
<section>
<h2>Conclusion</h2>
<p>In conclusion, our design team has undertaken a comprehensive approach to address the pressing need for a
mobile application that supports the physical and mental wellbeing of the elderly. Through diligent
research, market analysis, surveys, and persona development, we gained valuable insights into the specific
needs, preferences, and limitations of our target demographic.<br>
In the future, we envision further refinement
of the app based on user feedback and usability testing, as well as potential partnerships with healthcare
providers and community organizations to enhance its reach and impact. Ultimately, our goal is to make a
meaningful contribution to the wellbeing of elderly individuals in Quebec, helping them live happier,
healthier lives through the power of our app.</p>
</section>
<!-- Add more sections for different parts of your content -->
<footer>
<p>Tools and references:</p>
<ul>
<li>Persona: <a href="https://userpersona.dev">userpersona.dev</a></li>
<li>User journey: <a href="https://www.canva.com">canva.com</a></li>
<li>Design: <a href="https://www.figma.com">figma.com</a></li>
<li><a href="https://apps.apple.com/us/app/pill-reminder-all-in-one/id816347839">Pill Reminder - All in
One</a></li>
<li><a href="https://apps.apple.com/gb/app/pocket-physio/id811124736?platform=iphone">Pocket Physio</a></li>
</ul>
</footer>
</body>
</html>