-
Notifications
You must be signed in to change notification settings - Fork 0
/
gingercove.html
342 lines (309 loc) · 19.7 KB
/
gingercove.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ginger Cove App | Katherine Vo</title>
<!--Favicon-->
<link rel="shortcut icon" href="assets/img/katedoodle.PNG">
<!-- Links CSS file: fontawesome, Bootstrap -->
<link href="assets/fontawesome/css/all.css" rel="stylesheet"/>
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/gingercove.css" type="text/css"/>
<!--Sofia Pro font-->
<link rel="stylesheet" href="https://use.typekit.net/ekz7plf.css">
</head>
<body>
<!-- NAV BAR -->
<nav class="navbar navbar-light navbar-expand-sm">
<div class="container">
<a href="index.html" class="navbar-brand">Katherine Vo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myTogglerNav" aria-controls="myTogglerNav" aria-expanded="false" aria-label="Toggle nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myTogglerNav">
<div class="navbar-nav ms-auto">
<a href="about.html" class="nav-item nav-link">About</a>
<a href="education.html" class="nav-item nav-link">Education</a>
<a href="projects.html" class="nav-item nav-link">Projects</a>
</div>
</div>
</div>
</nav>
<!-- CONTENT -->
<div class="container">
<!--Banner-->
<img src="assets/img/gingercove/GingerCoveBanner.png" alt="Ginger Cove Banner" width="100%" height="auto">
<!--Intro-->
<div class="container mt-3">
<div class="row">
<div class="col-md-8">
<h1>Ginger Cove Wellness Tracking App</h1>
<p class="gingercovedescription">
Ginger Cove is an assisted living community in Annapolis, MD that houses 350 residents
of 60 years of age and older. Ginger Cove offers unique events daily and allows their
residents to pursue their personal interests.
<br>
<br>
Ginger Cove wanted to reinvent the way they ran their programs. With many of their
record-keeping and event sharing on paper, they wanted to make things more convenient
by turning it digital and creating a mobile app. Furthermore, Wellness Director Alena
Daily wanted the app to serve as a holistic wellness tracker, record the
events the residents signed into and their emotional well being, and allow them to
connect more with the Ginger Cove community online.
</p>
</div><!-- end 1st col-->
<div class="col-md-4">
<div class="background">
<p class="label">Type</p>
<p>iOS Mobile App / Team Project</p>
<p class="label">My Role</p>
<p>UI/UX Researcher, UI/UX Design</p>
<p class="label">Software</p>
<p>Adobe XD</p>
<p class="label">Collaborators</p>
<p>Team Lead: Ani Tansinda</p>
<p>Researchers & Designers: Manar Al-badarneh,
<br>Timothy Yun, Gwangin Cho,
<br>Kevin Zhao, Momina Khan, Jae Lee</p>
<p>Wellness Director: Alena Daily</p>
<p class="label">Duration</p>
<p>3 months</p>
</div>
</div><!-- end 2nd col -->
</div><!-- end row -->
</div><!--end container-->
<hr>
<div class="container">
<!--The Problems-->
<div class="mb-5">
<h2>The Problems</h2>
<p>The team is here to help <b>build memory care</b>.</p>
<ul>
<li>Go paperless; lack of organization and tracking on residents’
activities, which made it hard to see the results of their work.</li>
<li>Introduce a new system to ease sign-ups and check-ins.</li>
<li>Allow residents to express their feelings and concerns whenever through the app.</li>
<li>Ease of finding new activities at their fingertips without having to go to find the flyer for it.</li>
<li>Build a stronger community through virtual interactions on the app.</li>
</ul>
</div>
<!--Stakeholders-->
<div class="mb-5">
<h2 class="mb-3">Stakeholders</h2>
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-3 text-center stakeholders">
<div class="col">
<img src="assets/img/gingercove/stakeholders.jpg" alt="residents" width="100%" height="auto" style="max-width:150px;">
<h4>Ginger Cove Residents</h4>
<p class="px-2">As the primary stakeholders, this project can help them find and sign up for events faster,
record how they are feeling, & be more connected with the community.
</p>
</div>
<div class="col">
<img src="assets/img/gingercove/wellnessdirector.jpg" alt="wellness director" width="100%" height="auto" style="max-width:150px;">
<h4>Wellness Director(s)</h4>
<p class="px-2">They will be able to check in on the residents and assist them faster.</p>
</div>
<div class="col">
<img src="assets/img/gingercove/ceo.jpg" alt="CEO" width="100%" height="auto" style="max-width:150px;">
<h4>CEO</h4>
<p class="px-2">He will be able to understand the daily activities to improve the organization as a whole.</p>
</div>
</div>
</div>
<!-- Project's Goals -->
<div class="mb-5">
<h2>Project's Goals</h2>
<p><u>For Residents</u></p>
<ul>
<li>View Ginger Cove Announcements via the app and push-notifications</li>
<li>Personal Reminders</li>
<li>View Calendar of Events</li>
<li>Sign Up for Events/Activities</li>
<li>Add Friends (can see which friends are interested or going to an event)</li>
<li>Share public activity with your friends to their feed</li>
<li>Profile (Personal QR Code, Personal Goals, Steps of the Day, Diary, “How are you feeling today”)</li>
</ul>
<p><u>For Wellness Coach or Director</u></p>
<ul>
<li>Track participation of events by seeing who checked in</li>
<li>Read ratings and reviews left by residents</li>
<li>View Weekly Wellness Reports of the residents</li>
</ul>
</div>
<!--Research-->
<div class="mb-5">
<h2>Research</h2>
<p><u>From Team Lead's Research</u></p>
<ul>
<li>Many residents used an iPad or Apple iPhone (over an Android)</li>
<li>Decision: iOS Mobile App Development</li>
</ul>
<p><u>From Personal Research</u></p>
<p>Compiled tables to report to the team at weekly meetings</p>
<ul>
<li>Conducted a Technologies Review on softwares and tools to use for the development of the app
<ul>
<li>Team came to agreement that XCode was ideal for iOS App Development</li>
<li>Team came to agreement that Adobe XD was what we would use for collaborating on the UI/UX design of the app.</li>
</ul>
</li>
<br>
<li>Researched the Design Feasibility of certain features
<ul>
<li>I was assigned to research the diary feature and photo feed.</li>
<li>Diary feature was approved while photo feature was decided to be a non-priority given our three month time frame.</li>
</ul>
</li>
<br>
<li>Researched UI/UX trends and color psychology for the branding to start building our high-fidelity mockup
<ul>
<li>Decided to use one font for simplicity and to differentiate the same font with parameters such as size,
weight, and color depending on information hierarchy and organization.</li>
<li>Blue - most likeable color, soothing, relaxing, and the most dominant color of Ginger Cove
<li>White - color of empty space & harmony; good for separating large chunks of info</li>
<li>Determined other UI elements like rounded corners of 10 for buttons, and a bright blue color for call-to-action buttons</li>
</ul>
</li>
</ul>
</div>
<!--User Flow-->
<div class="mb-5">
<h2>User Flow - My Proposal to the Team</h2>
<p class="diagram"><b><em>Map</em></b></p>
<img src="assets/img/gingercove/ufd.JPG" alt="userflowdiagram" width="100%" height="auto">
<p class="diagram"><b><em>Wireframe</em></b></p>
<img src="assets/img/gingercove/wireframe1.png" alt="wireframe 1/2" width="100%" height="auto" style="max-width:600px;">
<img src="assets/img/gingercove/wireframe2.png" alt="wireframe 2/2" width="100%" height="auto" style="max-width:600px;">
</div>
<!--Branding-->
<div class="mb-5">
<h2>Branding</h2>
<p>We applied branding to the wireframe in various versions and sent that out to the residents for feedback.</p>
<img src="assets/img/gingercove/branding.png" alt="branding" width="100%" height="auto" style="max-width:600px;">
</div>
<!--User Feedback-->
<div class="mb-5">
<h2>User Feedback</h2>
<img src="assets/img/gingercove/userfeedback.png" alt="user feedback" width="100%" height="auto" style="max-width:600px;">
<div class="row">
<div class="col">
<img src="assets/img/gingercove/uservoteop1.png" alt="log in screen option 1" width="100%" height="auto" style="max-width:300px;">
</div>
<div class="col">
<figure class="figure">
<img src="assets/img/gingercove/uservoteop2.png" class="figure-img" alt="log in screen option 1" width="100%" height="auto" style="max-width:300px;">
<figcaption class="figure-caption">Option 2 for the Login Screen, which was the mockup users liked best.</figcaption>
</figure>
</div>
</div><!--end row-->
</div>
<!--Solutions-->
<div class="mb-5">
<h2 class="mb-3">Solutions</h2>
<div class="mb-5">
<h5 class="mb-1"><strong>1. The experience the user has when logging in</strong></h5>
<p class="credit m-0">Designed by Katherine Vo</p>
<p class="m-0">We created two separate log in portals for residents and wellness coaches.</p>
<video src="assets/img/gingercove/SignIn&ForgotPassword.mp4" width=300px height=600px controls>Video not supported</video>
<video src="assets/img/gingercove/SignInAsCoach&LogOut.mp4" width=300px height=600px controls>Video not supported</video>
</div>
<div class="mb-5">
<h5 class="mb-1"><strong>2. The experience the user has when signing up</strong></h5>
<p class="credit m-0">Designed by Katherine Vo</p>
<video src="assets/img/gingercove/SignUp&News.mp4" width=300px height=600px controls>Video not supported</video>
</div>
<div class="mb-5">
<h5 class="mb-1"><strong>3. The experience the user has when looking for an event</strong></h5>
<p class="credit m-0">Designed by Manar Al-badarneh & Katherine Vo</p>
<video src="assets/img/gingercove/FiltersSearch.mp4" width=300px height=600px controls>Video not supported</video>
</div>
<div class="mb-5">
<h5 class="mb-1"><strong>4. The experience the user has when looking at their personal calendar of events they signed up for</strong></h5>
<p class="credit m-0">Designed by Ani Tansinda & Katherine Vo</p>
<video src="assets/img/gingercove/PersonalCalendar.mp4" width=300px height=600px controls>Video not supported</video>
</div>
</div>
<!--Challenges & Takeaways-->
<div class="mb-5">
<h2>Challenges & Takeaways</h2>
<ul>
<li><b>Working Remotely:</b> While building the design of this app, it was challenging to know everyone's style since
we have never met each other before. We were all undergraduate students hoping to build our skills during the summer of
quarantine. Additionally, we were given creative freedom to design it any way we liked as long as it had the features
that the CEO and Wellness Instructor specifically wanted. This means we had to set clear deadlines for ourselves for three
months, often meeting once to twice a week to present our progress to the Team Lead and determine the next set of deliverables.
With everyone's varying summer schedules because of other work or summer courses, we were all at different points in the project.
I took initiative to take on more tasks and inform the team of improvements and resources for suggestions.</li>
<br>
<li><b>Understanding the User:</b> As a critical part of creating a user-centered design, it was difficult to get feedback from
the residents of Ginger Cove. Communication with the residents was never direct: Our team lead would communicate to the
Wellness Coach, who would then communicate to the residents. Through the Wellness Coach, we had a survey sent out asking of
which wireframes they enjoyed the most, and included an area to leave feedback. However, only 5 residents responded. This made
it challenging to design for everyone.</li>
<br>
<li><b>Designing the high-fidelity prototype:</b> Although I had a basic understanding of how the app was supposed to look through
the finalized user flow diagram and wireframe, it was more difficult to actually implement our ideas than expected. Getting the
team to fully understand the branding and smallest details of the UI was challenging because of our remote environment.
Secondly, this was everyone's first time using Adobe XD. I had to watch videos and read articles on how to design certain
aspects. I collaborated with the rest of the team on how to use features in Adobe XD that would make our work look more unified
and simple for our users. </li>
<br>
<li><b>My first ever UI/UX Project:</b> This app was my first time working on a UI/UX design team. I got to dabble in
learning about what the basic design process is, illustrating my first user flow diagram, making my first wireframe, and
building my first working prototype! It was so exciting to see screens flow together based on the vision we had in mind.
I have never touched Adobe XD before this experience, but I loved being able to play around with transitions and
movements between screens based on certain actions by the user. I learned that a lot goes into good design, which is
often something I take for granted. This experience has opened my eyes to see that there are so many details that go into making
the user experience pleasurable, and that even the smallest details make the biggest differences.</li>
</ul>
</div>
</div><!-- end content container -->
</div><!--end main body container-->
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<hr>
<div class="row">
<p class="text-center text-muted">
© Katherine Vo 2021
</p>
</div>
<div class="row text-center">
<div class="col">
<a href="https://www.linkedin.com/in/katherine-vo/" target="_blank" class="ms-2"><i class="fab fa-linkedin" style="font-size: 300%;"></i></a>
<a href="https://github.com/kthrnv", target="_blank" class="ms-2"><i class="fab fa-github-square" style="font-size: 300%;"></i></a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="assets/bootstrap/js/jquery.slim.min.js"></script>
<script src="assets/bootstrap/js/popper.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="projects.js"></script>
<!--Back To Top Button-->
<br>
<button onclick="topFunction();" id="myBtn" title="Go to top"><i class="fas fa-chevron-circle-up"></i></button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>