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
|
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
{{ partial "head_casestudy.html" . }}
</head>
<body>
{{ partial "nav_casestudy.html" . }}
{{ partial "casestudy_main.html" . }}
<section class="testimonial" style="background:#fdfcfc;">
<div class="results-content">
<h1>"Alexis designed everything for Cope from the ground up. What I
really like about him is his true understanding and grasp of what makes a
great UI great. He knows that the user experience needs a lot of
refining from customers and he isn't shy to take feedback even if it's
critical. Alexis is one of those rare people who just gets it."
</h1>
<hr>
<img src="Cope%20%7C%20Alexis%20Collado_files/john.jpg" alt="">
<h2>John Robert Palomo</h2>
<h3>Co-founder, Cope</h3>
</div>
</section>
<section>
<div class="content-case-study">
<h1>The Challenge</h1>
<img src="Cope%20%7C%20Alexis%20Collado_files/persona.png" alt="">
<p>A startup called Cope hired me to create a <strong>minimum viable product</strong>
for their new idea — tracking mental health. It was the first project
where I handled mobile app design, and I was very excited to learn the
intricacies of the iOS platform.
</p>
<p>My clients John and Kat have done some preliminary interviews
with psychologists and psychiatrists to get their side of the picture.
They have established a user persona, a business model canvas, and
several startup prep work for the product to take off. My job was to
actually create the experience for their users and make sure they are
represented in the design process.
</p>
<p>The design I created was a result of self-started questions,
validating assumptions, benchmarking, and guerilla testing. I could
have done some more usability studies early in the process, however.
</p>
<h1>Informal Competitive Analysis</h1>
<p>We checked the App Store for similar applications, and we found
out that there were no well-designed niche applications for handling
mental health. We found another app called Cope as well, but their
solution was more of a community-based social sharing platform. We saw
this as an opportunity for our own version of Cope to solve a unique
problem in the space.
</p>
<img src="Cope%20%7C%20Alexis%20Collado_files/competition-cope.jpg" alt="">
<p>Instead, we drew inspiration from applications that feature the
design components we needed: menstrual cycle management apps that have
good summaries and calendars, emotion tracking apps, medicine tracking
apps.
</p>
<p>I used the concepts gained from these applications to study how
they understood the mental models of their own users and hopefully
replicate that kind of empathy whenever I create design decisions for
Cope.
</p>
<h1>Pivoting</h1>
<p>We had feature changes and a lot of design decisions cancelled.
Before, we had different modules for the design: forums, mental health
doctor search, messaging.
</p>
<img src="Cope%20%7C%20Alexis%20Collado_files/discarded.jpg" alt="">
<p>We finalized the components of Cope that we wanted to build and
we decided that we wanted to focus on tracking their progress for
mental health. I had to drop some UI explorations I did for the first
version of Cope we were building.
</p>
<h1>Ideation and Feature Prioritization</h1>
<p>How do we exactly track one's progress in mental health? How do
we make sure that the design is as usable as possible? What specific
things should we track? How do we gauge someone's well-being in as few
questions as possible? How do we design an efficient system for tracking
and managing medication, and how does it tie up with the overall
well-being score and progress of the user? How do we make a
habit-forming product?
</p>
<img src="Cope%20%7C%20Alexis%20Collado_files/sketch.png" alt="">
<p>There were so many questions we had to answer going into the
project, but we decided on four key features that will serve as the
solution to the mental health tracking problem: a self-report check-in
system, medicine tracker, calendar overview, and summary dashboard. All
modules work together to form a cohesive whole as a mental health
tracking platform.
</p>
<img src="Cope%20%7C%20Alexis%20Collado_files/summary.png" alt="">
<h1>Assumptions and Considerations</h1>
<p><strong>The boundaries of self-reporting and analysis</strong><br>
We cannot really derive a diagnosis from the self-report component of
the application because doctors are the only ones qualified to do it.
There are so many factors that relate to mental health, and we realized
as a team that the last thing that our app would want to do is to guess.
The design decision is to tally user's progress based on his or her own
input, and we would assign a total well-being score based on the
aggregate of their answers.
</p>
<img src="Cope%20%7C%20Alexis%20Collado_files/calendar.png" alt="">
<p><strong>Frequency of data collection</strong><br>How exactly do
we know if the emotion that was self-reported persisted all throughout
the day? As human beings, our emotions constantly change. We can't do a
self-check just once a day because the data becomes inaccurate. We
decided to have multiple check-ins as the solution. That changed the
initial design I created for the calendar screen.
</p>
<h1>User Flow Brainstorming</h1>
<img src="Cope%20%7C%20Alexis%20Collado_files/flow.png" alt="">
<p><strong>Designing the onboarding process</strong><br>The
onboarding process starts with the user signing up or logging in and
keying important data. The user then performs his or her first symptoms
check-in. This is essential so there could be a baseline for his or her
data in the calendar and summary screens. He or she is led to an empty
state of the medicine tracker screen. From there, the user could add
medicine or check out his summary or calendar.
</p>
<h1>Hi-Fidelity Design</h1>
<p>After asking so many questions about the product and validating
our assumptions with experts, I created different screens using Sketch.
There were multiple versions and ideas that I had to validate, and
frankly, I feel like I haven't tested the solutions that I created yet.
During this phase, I got advice from a data visualization desginer if I
were designing the graphs correctly. I created a quick <a href="http://copenow.co/" target="blank">landing page as well.</a>
</p>
<img src="Cope%20%7C%20Alexis%20Collado_files/add-medicine.png" alt="">
<p><strong>Design Intentionality</strong><br>
There are so many nuances during the high fidelity design phase
and so we kept on going back to sketching all the time. I tried to be
smarter in thinking about the usability of each design. My focus was to
be more intentional in all of the affordances I create within the
application.
</p>
<h1>Prototyping</h1>
<p>I built <a href="https://marvelapp.com/g4b64e/screen/14364499" target="blank">the prototype</a>
with Invision first but I encountered some problems with the tool.
MarvelApp proved a better choice. After building the prototype with
normal hotlinks, I believe we were ready to try it out with some users.
</p>
<h1>Guerilla Testing</h1>
<p>I tested the application with 7 college students from Ateneo de
Manila University with convenience sampling. The results revealed some
usability questions for the app. What would the users actually do after
keying in their symptoms for the day? What if they do not have
medication ready? How can we get them to come back and actually use it
again? Indeed, there are many more things to design for the product that
we have not explored yet.
</p>
<h1>Next Steps</h1>
<p>The project is actually in development now and the next step is
to conduct usability tests, install analytics and use new insights to
inform new iterations of the product. Design a better onboarding
process. Design for empty states. Design copywriting and strategy for
push notifications as trigger. Integrate a social aspect into the
application. All these will be helpful to create a better design for the
app.
</p>
<img src="Cope%20%7C%20Alexis%20Collado_files/cope-final.png" alt="">
<p>In reality, product design is the easy part. The real problems
we're facing involve fighting a stigma around mental health, building an
open, supportive and vulnerable community, and creating a sustainable
business model for the product.
</p>
</div>
</section>
<section data-scroll-index="2">
<div class="case-studies">
<div class="header">
<h1 class="title">Case Studies</h1>
<h2 class="subtitle">Selected Works</h2>
</div>
<div class="case-studies-wrapper">
<div class="case-study-item">
<a href="http://alexiscollado.com/cope.html"><img src="Cope%20%7C%20Alexis%20Collado_files/cope.jpg" alt=""></a>
<h4>Cope iOS App</h4>
<h5>MOBILE APP DESIGN</h5>
<p>Cope is a mobile app that allows mental health help seekers
track their symptoms and medication. I helped them create a minimum
viable product for testing.
</p>
<a href="http://alexiscollado.com/cope.html" class="read-more">Read Me</a>
</div>
<div class="case-study-item">
<a href="http://alexiscollado.com/360pro.html"><img src="Cope%20%7C%20Alexis%20Collado_files/360.jpg" alt=""></a>
<h4>360 Pro Tracker</h4>
<h5>WEB APP DESIGN</h5>
<p>The 360 Pro Tracker is a performance tracking system for
the 360 Pro gym. It tracks an athlete’s statistics and calculates his or
her pro score.
</p>
<a href="http://alexiscollado.com/360pro.html" class="read-more">Read Me</a>
</div>
<div class="case-study-item">
<a href="http://alexiscollado.com/tedx.html"><img src="Cope%20%7C%20Alexis%20Collado_files/tedx.jpg" alt=""></a>
<h4>TEDxADMU Website</h4>
<h5>WEB DESIGN</h5>
<p>The TEDxADMU website was a project for the Ateneo Junior
Marketing Association. It's a project where I helped them reach a 66.8%
conversion rate from scratch.
</p>
<a href="http://alexiscollado.com/tedx.html" class="read-more">Read Me</a>
</div>
</div>
</div>
</section>
<footer>
<div class="icons">
<!--?xml version="1.0" encoding="UTF-8"?-->
<a href="mailto:lex.collado@gmail.com">
<svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>ui-16px-1_email-84</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-94.000000, -336.000000)" id="Group" fill="#505050">
<g transform="translate(94.000000, 335.000000)">
<g id="ui-16px-1_email-84" transform="translate(0.000000, 1.000000)">
<path d="M15,0 L1,0 C0.448,0 0,0.447 0,1 L0,13 C0,13.553 0.448,14 1,14 L15,14 C15.552,14 16,13.553 16,13 L16,1 C16,0.447 15.552,0 15,0 Z M14,12 L2,12 L2,5.723 L7.504,8.868 C7.812,9.044 8.189,9.044 8.496,8.868 L14,5.723 L14,12 Z M14,3.42 L8,6.849 L2,3.42 L2,2 L14,2 L14,3.42 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</a>
<a href="https://facebook.com/lex.collado" target="blank">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>social-16px_logo-facebook</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-131.000000, -335.000000)" id="Group" fill="#505050">
<g transform="translate(94.000000, 335.000000)">
<g id="social-16px_logo-facebook" transform="translate(37.000000, 0.000000)">
<path d="M15.3,0 L0.7,0 C0.3,0 0,0.3 0,0.7 L0,15.4 C0,15.7 0.3,16 0.7,16 L8,16 L8,11 L6,11 L6,8 L8,8 L8,6 C8,3.9 9.2,3 11,3 L13,3 L13,6 L12,6 C11.4,6 11,6.4 11,7 L11,8 L13.6,8 L13,11 L11,11 L11,16 L15.3,16 C15.7,16 16,15.7 16,15.3 L16,0.7 C16,0.3 15.7,0 15.3,0 Z" id="White_2_"></path>
</g>
</g>
</g>
</g>
</svg>
</a>
<a href="https://twitter.com/alexiscollado" target="blank">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>social-16px_logo-twitter</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-169.000000, -336.000000)" id="Group" fill="#505050">
<g transform="translate(94.000000, 335.000000)">
<g id="social-16px_logo-twitter" transform="translate(75.000000, 1.000000)">
<path d="M16,2 C15.4,2.3 14.8,2.4 14.1,2.5 C14.8,2.1 15.3,1.5 15.5,0.7 C14.9,1.1 14.2,1.3 13.4,1.5 C12.8,0.9 11.9,0.5 11,0.5 C9.3,0.5 7.8,2 7.8,3.8 C7.8,4.1 7.8,4.3 7.9,4.5 C5.2,4.4 2.7,3.1 1.1,1.1 C0.8,1.6 0.7,2.1 0.7,2.8 C0.7,3.9 1.3,4.9 2.2,5.5 C1.7,5.5 1.2,5.3 0.7,5.1 L0.7,5.1 C0.7,6.7 1.8,8 3.3,8.3 C3,8.4 2.7,8.4 2.4,8.4 C2.2,8.4 2,8.4 1.8,8.3 C2.2,9.6 3.4,10.6 4.9,10.6 C3.8,11.5 2.4,12 0.8,12 L0,12 C1.5,12.9 3.2,13.5 5,13.5 C11,13.5 14.3,8.5 14.3,4.2 L14.3,3.8 C15,3.3 15.6,2.7 16,2 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</a>
<a href="https://dribbble.com/alexiscollado" target="blank">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>social-16px_logo-dribbble</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-206.000000, -335.000000)" id="Group" fill="#505050">
<g transform="translate(94.000000, 335.000000)">
<g id="social-16px_logo-dribbble" transform="translate(112.000000, 0.000000)">
<path d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z M10.2,7.4 C10.2,7.4 10,6.8 9.9,6.6 C11.6,5.8 12.7,4.9 13.1,4.4 C13.8,5.3 14.2,6.4 14.3,7.6 C13.5,7.4 11.7,7.1 10.2,7.4 Z M9.1,5.1 C8.3,3.7 7.4,2.5 7,1.8 C8.9,1.3 10.6,1.9 11.9,3.1 C11.5,3.6 10.7,4.4 9.1,5.1 Z M5.1,2.5 C5.5,3 6.3,4.2 7.1,5.7 C4.9,6.2 2.9,6.3 2,6.3 C2.4,4.7 3.6,3.3 5.1,2.5 Z M8,7.3 C8.1,7.5 8.2,7.7 8.3,7.8 C5.5,8.7 3.7,11 3.1,11.9 C2.3,10.8 1.8,9.5 1.8,8.2 C2.7,8.1 5.3,8 8,7.3 Z M9,9.5 C9.7,11.5 10.1,13.1 10.2,13.9 C8.1,14.6 5.7,14.2 4.4,13.1 C4.8,12.4 6.1,10.6 9,9.5 Z M11.9,12.9 C11.7,12.1 11.4,10.7 10.8,9 C11.9,8.8 13.5,9 14.1,9.2 C13.8,10.7 13,12 11.9,12.9 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</a>
<a href="https://www.linkedin.com/in/alexander-hans-collado-jr-9444146a" target="blank">
<!--?xml version="1.0" encoding="UTF-8"?-->
<svg width="17px" height="16px" viewBox="0 0 17 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
<title>social-16px_logo-linkedin</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Portfolio" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-243.000000, -335.000000)" id="Group" fill="#505050">
<g transform="translate(94.000000, 335.000000)">
<g id="social-16px_logo-linkedin" transform="translate(149.000000, 0.000000)">
<path d="M15.3,0 L0.7,0 C0.3,0 0,0.3 0,0.7 L0,15.4 C0,15.7 0.3,16 0.7,16 L15.4,16 C15.8,16 16.1,15.7 16.1,15.3 L16.1,0.7 C16,0.3 15.7,0 15.3,0 Z M4.7,13.6 L2.4,13.6 L2.4,6 L4.8,6 L4.8,13.6 L4.7,13.6 Z M3.6,5 C2.8,5 2.2,4.3 2.2,3.6 C2.2,2.8 2.8,2.2 3.6,2.2 C4.4,2.2 5,2.8 5,3.6 C4.9,4.3 4.3,5 3.6,5 Z M13.6,13.6 L11.2,13.6 L11.2,9.9 C11.2,9 11.2,7.9 10,7.9 C8.8,7.9 8.6,8.9 8.6,9.9 L8.6,13.7 L6.2,13.7 L6.2,6 L8.5,6 L8.5,7 L8.5,7 C8.8,6.4 9.6,5.8 10.7,5.8 C13.1,5.8 13.5,7.4 13.5,9.4 L13.5,13.6 L13.6,13.6 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
</a>
<a href="https://medium.com/@ahvccollado" target="blank">
<!--?xml version="1.0" encoding="UTF-8"?-->
<img src="Cope%20%7C%20Alexis%20Collado_files/medium.png" style="width: 16px;" alt="">
</a>
</div>
<a href="http://alexiscollado.com/index.html" style="color: #574cdd
; text-decoration: underline;">Go back home</a>
</footer>
<script src="Cope%20%7C%20Alexis%20Collado_files/jquery-1.js"></script>
<script src="Cope%20%7C%20Alexis%20Collado_files/stickUp.js"></script>
<script src="Cope%20%7C%20Alexis%20Collado_files/scrollIt.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
$(document).ready( function() {
$('.main-navigation').stickUp({
//enabling marginTop with the 'auto' setting
});
});
});
$(function(){
$.scrollIt({
topOffset: -70, // offste (in px) for fixed top navigation
activeClass: 'active' // class given to the active nav element
});
});
</script>
</body>
</html>
|
