Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/xaviablaza/hugo-lodi-theme.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorXavi Ablaza <xlablaza@gmail.com>2017-10-17 01:26:31 +0300
committerXavi Ablaza <xlablaza@gmail.com>2017-10-17 01:26:31 +0300
commitb5d3d9784393aa5d3ff6a67dc41fcb9b81acca55 (patch)
treedaa680a89d57ed57cb9b56f2fa75c8f34d8cfc03
parent2e8484669e4f168244d6eccacf89d3f3b669370a (diff)
Added exampleSite folder
-rw-r--r--exampleSite/archetypes/default.md6
-rw-r--r--exampleSite/config.toml36
-rw-r--r--exampleSite/content/360pro.md186
-rw-r--r--exampleSite/content/cope.md186
-rw-r--r--exampleSite/content/tedx.md186
-rw-r--r--exampleSite/data/process/design.yaml4
-rw-r--r--exampleSite/data/process/development.yaml4
-rw-r--r--exampleSite/data/process/discovery.yaml4
-rw-r--r--exampleSite/data/process/iteration.yaml4
-rw-r--r--exampleSite/data/process/repeat.yaml4
-rw-r--r--exampleSite/data/process/research.yaml4
-rw-r--r--exampleSite/static/ResumeCollado.pdfbin0 -> 36991 bytes
-rw-r--r--exampleSite/static/cope.pdfbin0 -> 5833011 bytes
-rw-r--r--exampleSite/static/cope/img/add-medicine.pngbin0 -> 227500 bytes
-rw-r--r--exampleSite/static/cope/img/calendar.pngbin0 -> 309511 bytes
-rw-r--r--exampleSite/static/cope/img/competition-cope.jpgbin0 -> 135903 bytes
-rw-r--r--exampleSite/static/cope/img/cope-final.pngbin0 -> 271527 bytes
-rw-r--r--exampleSite/static/cope/img/discarded.jpgbin0 -> 177549 bytes
-rw-r--r--exampleSite/static/cope/img/featured-cope.jpgbin0 -> 239383 bytes
-rw-r--r--exampleSite/static/cope/img/flow.pngbin0 -> 209181 bytes
-rw-r--r--exampleSite/static/cope/img/john.jpgbin0 -> 51717 bytes
-rw-r--r--exampleSite/static/cope/img/persona.pngbin0 -> 389071 bytes
-rw-r--r--exampleSite/static/cope/img/sketch.pngbin0 -> 1509432 bytes
-rw-r--r--exampleSite/static/cope/img/summary.pngbin0 -> 1497763 bytes
24 files changed, 624 insertions, 0 deletions
diff --git a/exampleSite/archetypes/default.md b/exampleSite/archetypes/default.md
new file mode 100644
index 0000000..f5a9e45
--- /dev/null
+++ b/exampleSite/archetypes/default.md
@@ -0,0 +1,6 @@
+---
+title: "{{ replace .TranslationBaseName "-" " " | title }}"
+date: {{ .Date }}
+draft: true
+---
+
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
new file mode 100644
index 0000000..a14a108
--- /dev/null
+++ b/exampleSite/config.toml
@@ -0,0 +1,36 @@
+baseURL = "localhost:1313"
+languageCode = "en-us"
+title = "My Portfolio Website"
+theme = "hugo-lodi-theme"
+
+[params]
+ description = "Portfolio of Alexis Collado, UX Designer"
+ email = "myemail@gmail.com"
+ facebook = "lex.collado"
+ twitter = "lexiscollado"
+ dribbble = "alexiscollado"
+ linkedin = "https://www.linkedin.com/in/alexander-hans-collado-jr-9444146a"
+ medium = "ahvccollado"
+
+[params.nav]
+ enable = true
+
+[params.hero]
+ enable = true
+ avatar = "avatar.jpg"
+ subtitle = "Hi! I'm Alexis, a UX Designer and Evangelist from Manila."
+ hero_right = ["**Currently doing consultancy work at UX Society. Previously doing UX and product at Agoda in Bangkok, Thailand as an international intern.**", "I founded [User Experience Society](https://www.facebook.com/UXSoc/), the first student UX organization in the Philippines. For two years, we've had 20+ events with 30+ speakers for over 300 members and 500+ attendees. We've expanded to [California](https://www.facebook.com/profile.php?id=245708449193012) this year.", "I do a bit of writing as well. [Here's an article with a total of 21,000+ views to InVision & Medium](http://blog.invisionapp.com/ux-internship-wisdom/) talking about 50 things I learned spending 3 years as a UX intern.", "I help cultivate the design community in Manila too. I'm the youngest core member of [UX Philippines](https://www.facebook.com/groups/uxphilippines/) and I moderated a panel with some cool people for the [UXPH 2017 Conference](https://www.uxphilippines.com).", "I'm finishing my Bachelor's degree in Management Information Systems at the Ateneo de Manila University, expecting to graduate in 2018."]
+ resume = "ResumeCollado.pdf"
+
+[params.process]
+ enable = true
+ title = "My Process"
+ subtitle = "Full Process Design"
+
+[params.case_studies]
+ enable = true
+ title = "Case Studies"
+ subtitle = "Selected Works"
+
+[params.footer]
+ enable = true \ No newline at end of file
diff --git a/exampleSite/content/360pro.md b/exampleSite/content/360pro.md
new file mode 100644
index 0000000..d15bb87
--- /dev/null
+++ b/exampleSite/content/360pro.md
@@ -0,0 +1,186 @@
+---
+weight: 1
+title: "Cope | Alexis Collado"
+description: "I set a direction for the branding and identity of the product and crafted a functioning prototype ready for usability testing and development."
+nav_heading: "Cope Case Study"
+thumbnail: "cope.jpg"
+case_title: "Cope iOS App"
+case_subtitle: "Mobile App Design"
+case_description: "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."
+case_feature_img: "featured-cope.jpg"
+case_summary: "Cope is an application that helps users track their mental health. Progress is measured through the use of a check-in system, calendar, medicine tracker and a summary dashboard. I created a minimum viable product for this application."
+team: ["Alexis Collado", "Carlos Arcenas", "Kat Uytiepo", "John Palomo"]
+roles: ["Branding and Identity", "User Interface Design", "Prototyping", "User Research"]
+methods: ["Sketching", "Mockups", "Guerilla Testing"]
+button_links:
+ - link: "https://marvelapp.com/g4b64e/screen/14364499"
+ img: "eyeball.svg"
+ text: "View Prototype"
+ - link: "http://copenow.co/"
+ img: "eyeball.svg"
+ text: "View Landing Page"
+ - link: "cope.pdf"
+ img: "download.svg"
+ text: "Download Feature Sets"
+testimonial: "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."
+testimonial_photo: "john.jpg"
+testimonial_author: "John Robert Palomo"
+testimonial_subtitle: "Co-founder, Cope"
+date: 2017-10-15T03:29:08-07:00
+draft: false
+---
+
+# The Challenge
+
+![](//localhost:1313/cope/img/persona.png)
+
+A startup called Cope hired me to create a **minimum viable product**
+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.
+
+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.
+
+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.
+
+# Informal Competitive Analysis
+
+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.
+
+![](//localhost:1313/cope/img/competition-cope.jpg)
+
+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.
+
+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.
+
+# Pivoting
+
+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.
+
+![](//localhost:1313/cope/img/discarded.jpg)
+
+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.
+
+# Ideation and Feature Prioritization
+
+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?
+
+![](//localhost:1313/cope/img/sketch.png)
+
+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.
+
+![](//localhost:1313/cope/img/summary.png)
+
+# Assumptions and Considerations
+
+**The boundaries of self-reporting and analysis**
+<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.
+
+![](//localhost:1313/cope/img/calendar.png)
+
+**Frequency of data collection**
+<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.
+
+# User Flow Brainstorming
+
+![](//localhost:1313/cope/img/flow.png)
+
+**Designing the onboarding process**
+<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.
+
+# Hi-Fidelity Design
+
+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 [landing page as well.](http://copenow.co)
+
+![](//localhost:1313/cope/img/add-medicine.png)
+
+**Design Intentionality**
+<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.
+
+# Prototyping
+
+I built [the prototype](https://marvelapp.com/g4b64e/screen/14364499)
+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.
+
+# Guerilla Testing
+
+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.
+
+# Next Steps
+
+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.
+
+![](//localhost:1313/cope/img/cope-final.png)
+
+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. \ No newline at end of file
diff --git a/exampleSite/content/cope.md b/exampleSite/content/cope.md
new file mode 100644
index 0000000..d15bb87
--- /dev/null
+++ b/exampleSite/content/cope.md
@@ -0,0 +1,186 @@
+---
+weight: 1
+title: "Cope | Alexis Collado"
+description: "I set a direction for the branding and identity of the product and crafted a functioning prototype ready for usability testing and development."
+nav_heading: "Cope Case Study"
+thumbnail: "cope.jpg"
+case_title: "Cope iOS App"
+case_subtitle: "Mobile App Design"
+case_description: "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."
+case_feature_img: "featured-cope.jpg"
+case_summary: "Cope is an application that helps users track their mental health. Progress is measured through the use of a check-in system, calendar, medicine tracker and a summary dashboard. I created a minimum viable product for this application."
+team: ["Alexis Collado", "Carlos Arcenas", "Kat Uytiepo", "John Palomo"]
+roles: ["Branding and Identity", "User Interface Design", "Prototyping", "User Research"]
+methods: ["Sketching", "Mockups", "Guerilla Testing"]
+button_links:
+ - link: "https://marvelapp.com/g4b64e/screen/14364499"
+ img: "eyeball.svg"
+ text: "View Prototype"
+ - link: "http://copenow.co/"
+ img: "eyeball.svg"
+ text: "View Landing Page"
+ - link: "cope.pdf"
+ img: "download.svg"
+ text: "Download Feature Sets"
+testimonial: "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."
+testimonial_photo: "john.jpg"
+testimonial_author: "John Robert Palomo"
+testimonial_subtitle: "Co-founder, Cope"
+date: 2017-10-15T03:29:08-07:00
+draft: false
+---
+
+# The Challenge
+
+![](//localhost:1313/cope/img/persona.png)
+
+A startup called Cope hired me to create a **minimum viable product**
+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.
+
+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.
+
+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.
+
+# Informal Competitive Analysis
+
+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.
+
+![](//localhost:1313/cope/img/competition-cope.jpg)
+
+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.
+
+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.
+
+# Pivoting
+
+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.
+
+![](//localhost:1313/cope/img/discarded.jpg)
+
+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.
+
+# Ideation and Feature Prioritization
+
+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?
+
+![](//localhost:1313/cope/img/sketch.png)
+
+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.
+
+![](//localhost:1313/cope/img/summary.png)
+
+# Assumptions and Considerations
+
+**The boundaries of self-reporting and analysis**
+<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.
+
+![](//localhost:1313/cope/img/calendar.png)
+
+**Frequency of data collection**
+<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.
+
+# User Flow Brainstorming
+
+![](//localhost:1313/cope/img/flow.png)
+
+**Designing the onboarding process**
+<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.
+
+# Hi-Fidelity Design
+
+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 [landing page as well.](http://copenow.co)
+
+![](//localhost:1313/cope/img/add-medicine.png)
+
+**Design Intentionality**
+<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.
+
+# Prototyping
+
+I built [the prototype](https://marvelapp.com/g4b64e/screen/14364499)
+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.
+
+# Guerilla Testing
+
+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.
+
+# Next Steps
+
+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.
+
+![](//localhost:1313/cope/img/cope-final.png)
+
+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. \ No newline at end of file
diff --git a/exampleSite/content/tedx.md b/exampleSite/content/tedx.md
new file mode 100644
index 0000000..d15bb87
--- /dev/null
+++ b/exampleSite/content/tedx.md
@@ -0,0 +1,186 @@
+---
+weight: 1
+title: "Cope | Alexis Collado"
+description: "I set a direction for the branding and identity of the product and crafted a functioning prototype ready for usability testing and development."
+nav_heading: "Cope Case Study"
+thumbnail: "cope.jpg"
+case_title: "Cope iOS App"
+case_subtitle: "Mobile App Design"
+case_description: "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."
+case_feature_img: "featured-cope.jpg"
+case_summary: "Cope is an application that helps users track their mental health. Progress is measured through the use of a check-in system, calendar, medicine tracker and a summary dashboard. I created a minimum viable product for this application."
+team: ["Alexis Collado", "Carlos Arcenas", "Kat Uytiepo", "John Palomo"]
+roles: ["Branding and Identity", "User Interface Design", "Prototyping", "User Research"]
+methods: ["Sketching", "Mockups", "Guerilla Testing"]
+button_links:
+ - link: "https://marvelapp.com/g4b64e/screen/14364499"
+ img: "eyeball.svg"
+ text: "View Prototype"
+ - link: "http://copenow.co/"
+ img: "eyeball.svg"
+ text: "View Landing Page"
+ - link: "cope.pdf"
+ img: "download.svg"
+ text: "Download Feature Sets"
+testimonial: "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."
+testimonial_photo: "john.jpg"
+testimonial_author: "John Robert Palomo"
+testimonial_subtitle: "Co-founder, Cope"
+date: 2017-10-15T03:29:08-07:00
+draft: false
+---
+
+# The Challenge
+
+![](//localhost:1313/cope/img/persona.png)
+
+A startup called Cope hired me to create a **minimum viable product**
+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.
+
+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.
+
+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.
+
+# Informal Competitive Analysis
+
+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.
+
+![](//localhost:1313/cope/img/competition-cope.jpg)
+
+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.
+
+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.
+
+# Pivoting
+
+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.
+
+![](//localhost:1313/cope/img/discarded.jpg)
+
+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.
+
+# Ideation and Feature Prioritization
+
+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?
+
+![](//localhost:1313/cope/img/sketch.png)
+
+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.
+
+![](//localhost:1313/cope/img/summary.png)
+
+# Assumptions and Considerations
+
+**The boundaries of self-reporting and analysis**
+<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.
+
+![](//localhost:1313/cope/img/calendar.png)
+
+**Frequency of data collection**
+<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.
+
+# User Flow Brainstorming
+
+![](//localhost:1313/cope/img/flow.png)
+
+**Designing the onboarding process**
+<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.
+
+# Hi-Fidelity Design
+
+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 [landing page as well.](http://copenow.co)
+
+![](//localhost:1313/cope/img/add-medicine.png)
+
+**Design Intentionality**
+<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.
+
+# Prototyping
+
+I built [the prototype](https://marvelapp.com/g4b64e/screen/14364499)
+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.
+
+# Guerilla Testing
+
+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.
+
+# Next Steps
+
+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.
+
+![](//localhost:1313/cope/img/cope-final.png)
+
+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. \ No newline at end of file
diff --git a/exampleSite/data/process/design.yaml b/exampleSite/data/process/design.yaml
new file mode 100644
index 0000000..ab88546
--- /dev/null
+++ b/exampleSite/data/process/design.yaml
@@ -0,0 +1,4 @@
+weight: 3
+title: "Design"
+icon: "ui.svg"
+description: "I design delightful, purposeful interactions and interfaces that help the user accomplish his or her tasks." \ No newline at end of file
diff --git a/exampleSite/data/process/development.yaml b/exampleSite/data/process/development.yaml
new file mode 100644
index 0000000..b1d7366
--- /dev/null
+++ b/exampleSite/data/process/development.yaml
@@ -0,0 +1,4 @@
+weight: 4
+title: "Development"
+icon: "closetag.svg"
+description: "I prototype the final design either in code (HTML, CSS, JS), InVision, Framer Studio or other tools depending on the job." \ No newline at end of file
diff --git a/exampleSite/data/process/discovery.yaml b/exampleSite/data/process/discovery.yaml
new file mode 100644
index 0000000..6ea65a5
--- /dev/null
+++ b/exampleSite/data/process/discovery.yaml
@@ -0,0 +1,4 @@
+weight: 2
+title: "Discovery"
+icon: "rulerpencil.svg"
+description: "I ideate solutions by wireframing or creating mockups, facilitate design studios, and gather user feedback." \ No newline at end of file
diff --git a/exampleSite/data/process/iteration.yaml b/exampleSite/data/process/iteration.yaml
new file mode 100644
index 0000000..5cdb62f
--- /dev/null
+++ b/exampleSite/data/process/iteration.yaml
@@ -0,0 +1,4 @@
+weight: 5
+title: "Iteration"
+icon: "wand.svg"
+description: "I perform research through series of usability tests and A/B testing, evaluate design with analytics, and iterate." \ No newline at end of file
diff --git a/exampleSite/data/process/repeat.yaml b/exampleSite/data/process/repeat.yaml
new file mode 100644
index 0000000..8b3b16f
--- /dev/null
+++ b/exampleSite/data/process/repeat.yaml
@@ -0,0 +1,4 @@
+weight: 6
+title: "Repeat"
+icon: "repeat.svg"
+description: "I redo the entire process and use new insights to further bolster the product’s user experience." \ No newline at end of file
diff --git a/exampleSite/data/process/research.yaml b/exampleSite/data/process/research.yaml
new file mode 100644
index 0000000..e20e082
--- /dev/null
+++ b/exampleSite/data/process/research.yaml
@@ -0,0 +1,4 @@
+weight: 1
+title: "Research"
+icon: "book.svg"
+description: "I collaborate with stakeholders, ask meaningful questions, probe user goals, motivations, to understand context." \ No newline at end of file
diff --git a/exampleSite/static/ResumeCollado.pdf b/exampleSite/static/ResumeCollado.pdf
new file mode 100644
index 0000000..a5230bc
--- /dev/null
+++ b/exampleSite/static/ResumeCollado.pdf
Binary files differ
diff --git a/exampleSite/static/cope.pdf b/exampleSite/static/cope.pdf
new file mode 100644
index 0000000..7c04a2c
--- /dev/null
+++ b/exampleSite/static/cope.pdf
Binary files differ
diff --git a/exampleSite/static/cope/img/add-medicine.png b/exampleSite/static/cope/img/add-medicine.png
new file mode 100644
index 0000000..bb877fb
--- /dev/null
+++ b/exampleSite/static/cope/img/add-medicine.png
Binary files differ
diff --git a/exampleSite/static/cope/img/calendar.png b/exampleSite/static/cope/img/calendar.png
new file mode 100644
index 0000000..7230870
--- /dev/null
+++ b/exampleSite/static/cope/img/calendar.png
Binary files differ
diff --git a/exampleSite/static/cope/img/competition-cope.jpg b/exampleSite/static/cope/img/competition-cope.jpg
new file mode 100644
index 0000000..6e492e2
--- /dev/null
+++ b/exampleSite/static/cope/img/competition-cope.jpg
Binary files differ
diff --git a/exampleSite/static/cope/img/cope-final.png b/exampleSite/static/cope/img/cope-final.png
new file mode 100644
index 0000000..11854cd
--- /dev/null
+++ b/exampleSite/static/cope/img/cope-final.png
Binary files differ
diff --git a/exampleSite/static/cope/img/discarded.jpg b/exampleSite/static/cope/img/discarded.jpg
new file mode 100644
index 0000000..ff62415
--- /dev/null
+++ b/exampleSite/static/cope/img/discarded.jpg
Binary files differ
diff --git a/exampleSite/static/cope/img/featured-cope.jpg b/exampleSite/static/cope/img/featured-cope.jpg
new file mode 100644
index 0000000..f3d605e
--- /dev/null
+++ b/exampleSite/static/cope/img/featured-cope.jpg
Binary files differ
diff --git a/exampleSite/static/cope/img/flow.png b/exampleSite/static/cope/img/flow.png
new file mode 100644
index 0000000..7f8f596
--- /dev/null
+++ b/exampleSite/static/cope/img/flow.png
Binary files differ
diff --git a/exampleSite/static/cope/img/john.jpg b/exampleSite/static/cope/img/john.jpg
new file mode 100644
index 0000000..dcc4ea7
--- /dev/null
+++ b/exampleSite/static/cope/img/john.jpg
Binary files differ
diff --git a/exampleSite/static/cope/img/persona.png b/exampleSite/static/cope/img/persona.png
new file mode 100644
index 0000000..7eb2ddc
--- /dev/null
+++ b/exampleSite/static/cope/img/persona.png
Binary files differ
diff --git a/exampleSite/static/cope/img/sketch.png b/exampleSite/static/cope/img/sketch.png
new file mode 100644
index 0000000..03b078c
--- /dev/null
+++ b/exampleSite/static/cope/img/sketch.png
Binary files differ
diff --git a/exampleSite/static/cope/img/summary.png b/exampleSite/static/cope/img/summary.png
new file mode 100644
index 0000000..5352c7f
--- /dev/null
+++ b/exampleSite/static/cope/img/summary.png
Binary files differ