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-16 13:12:38 +0300
committerXavi Ablaza <xlablaza@gmail.com>2017-10-16 13:12:38 +0300
commit26679c9b8b8334f6d5abe6f857e674e3e5d3d6a6 (patch)
tree1ae377cd3c91702cc96e4b5234ab5be4e91d6d74
parentbeeac83e5c034a7be1ad48a64e24f05f822ab2aa (diff)
Wiring in progress for case study post
-rw-r--r--layouts/_default/single.html329
-rw-r--r--layouts/index.html4
-rw-r--r--layouts/partials/case_studies.html6
-rw-r--r--layouts/partials/casestudy_main.html72
-rw-r--r--layouts/partials/head_casestudy.html22
-rw-r--r--layouts/partials/nav_casestudy.html9
6 files changed, 437 insertions, 5 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index e69de29..af75b57 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -0,0 +1,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> \ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 7501a30..54d00ae 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
-<html lang ="{{ .Site.LanguageCode }}">
+<html lang="{{ .Site.LanguageCode }}">
<head>
- {{ partial "header.html" . }}
+ {{ partial "head.html" . }}
</head>
<body>
<div>
diff --git a/layouts/partials/case_studies.html b/layouts/partials/case_studies.html
index de82f15..40c06ee 100644
--- a/layouts/partials/case_studies.html
+++ b/layouts/partials/case_studies.html
@@ -9,9 +9,9 @@
{{ range .Pages }}
<div class="case-study-item">
<a href="{{ .URL }}"><img src="img/{{ .Params.thumbnail }}" alt=""></a>
- <h4>{{ .Title }}</h4>
- <h5>{{ .Params.subtitle }}</h5>
- <p>{{ .Description }}</p>
+ <h4>{{ .Params.case_title }}</h4>
+ <h5>{{ .Params.case_subtitle }}</h5>
+ <p>{{ .Params.case_description }}</p>
<a href="{{ .URL }}" class="read-more">Read Me</a>
</div>
{{ end }}
diff --git a/layouts/partials/casestudy_main.html b/layouts/partials/casestudy_main.html
new file mode 100644
index 0000000..998ec04
--- /dev/null
+++ b/layouts/partials/casestudy_main.html
@@ -0,0 +1,72 @@
+<section>
+ <div class="main-case-study">
+ <h1 class="title" style="text-align: center;">{{ .Params.case_title }}</h1>
+ <h2 class="subtitle" style="text-align: center;">{{ .Params.case_subtitle }}</h2>
+ <img src="{{ .Site.BaseURL }}img/{{ .Params.case_feature_img }}" alt="">
+ <p class="summary">{{ .Params.case_summary }}</p>
+ <div class="case-details">
+ <div class="case-details-item">
+ <p><strong>Team</strong>
+ {{ range .Params.team }}
+ <br>{{ . }}
+ {{end}}
+ </p>
+ </div>
+ <div class="case-details-item">
+ <p><strong>My Role</strong>
+ {{ range .Params.roles }}
+ <br>{{ . }}
+ {{ end }}
+ </p>
+ </div>
+ <div class="case-details-item">
+ <p><strong>Methods</strong>
+ {{ range .Params.methods }}
+ <br>{{ . }}
+ {{ end }}
+ </p>
+ </div>
+ </div>
+ <h1 style="color: black; font-family: merriweather; font-size: 26px; line-height: 1.7em; margin-top: 20px;">{{ .Description }}</h1>
+ <div class="case-links">
+ <div class="link-div">
+ <a href="https://marvelapp.com/g4b64e/screen/14364499" target="blank" class="case-detail-link">
+ <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16">
+ <g>
+ <path fill="#5f4feb" d="M8,14c4.707,0,7.744-5.284,7.871-5.508c0.171-0.304,0.172-0.676,0.001-0.98C15.746,7.287,12.731,2,8,2
+ C3.245,2,0.251,7.289,0.126,7.514c-0.169,0.303-0.168,0.672,0.002,0.975C0.254,8.713,3.269,14,8,14z M8,4
+ c2.839,0,5.036,2.835,5.818,4C13.034,9.166,10.837,12,8,12c-2.841,0-5.038-2.838-5.819-4.001C2.958,6.835,5.146,4,8,4z"></path>
+ <circle data-color="color-2" fill="#5f4feb" cx="8" cy="8" r="2"></circle>
+ </g>
+ </svg>
+ View Prototype
+ </a>
+ </div>
+ <div class="link-div">
+ <a href="http://copenow.co/" target="blank" class="case-detail-link">
+ <svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16">
+ <g>
+ <path fill="#5f4feb" d="M8,14c4.707,0,7.744-5.284,7.871-5.508c0.171-0.304,0.172-0.676,0.001-0.98C15.746,7.287,12.731,2,8,2
+ C3.245,2,0.251,7.289,0.126,7.514c-0.169,0.303-0.168,0.672,0.002,0.975C0.254,8.713,3.269,14,8,14z M8,4
+ c2.839,0,5.036,2.835,5.818,4C13.034,9.166,10.837,12,8,12c-2.841,0-5.038-2.838-5.819-4.001C2.958,6.835,5.146,4,8,4z"></path>
+ <circle data-color="color-2" fill="#5f4feb" cx="8" cy="8" r="2"></circle>
+ </g>
+ </svg>
+ View Landing Page
+ </a>
+ </div>
+ <div class="link-div">
+ <a href="http://alexiscollado.com/cope.pdf" target="blank" class="case-detail-link">
+ <svg style="top: 1.8px !important;" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16">
+ <g>
+ <polygon data-color="color-2" fill="#5f4feb" points="9,8 9,1 7,1 7,8 4.6,8 8,12 11.4,8 "></polygon>
+ <path fill="#5f4feb" d="M15,16H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h3v2H2v7h12V7h-2V5h3c0.6,0,1,0.4,1,1v9C16,15.6,15.6,16,15,16z
+ "></path>
+ </g>
+ </svg>
+ Download Feature Sets
+ </a>
+ </div>
+ </div>
+ </div>
+</section> \ No newline at end of file
diff --git a/layouts/partials/head_casestudy.html b/layouts/partials/head_casestudy.html
new file mode 100644
index 0000000..3238fd3
--- /dev/null
+++ b/layouts/partials/head_casestudy.html
@@ -0,0 +1,22 @@
+<meta charset="UTF-8">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<title>{{ .Params.Title }}</title>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#574CDD">
+
+<!-- desc -->
+<meta name="description" content="{{ .Description }}">
+<meta property="og:description" content="{{ .Description }}">
+<meta name="twitter:description" content="{{ .Description }}">
+
+<!-- image -->
+<meta property="og:image" content="{{ .Params.Thumbnail }}">
+<meta name="twitter:image" content="{{ .Params.Thumbnail }}">
+
+<link rel="icon" href="{{ .Site.BaseURL }}img/favicon.png" type="image/x-icon">
+<link rel="shortcut icon" href="{{ .Site.BaseURL }}img/favicon.png" type="image/x-icon">
+
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/css.css" >
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/final.css">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/normalize.css">
diff --git a/layouts/partials/nav_casestudy.html b/layouts/partials/nav_casestudy.html
new file mode 100644
index 0000000..3b83a82
--- /dev/null
+++ b/layouts/partials/nav_casestudy.html
@@ -0,0 +1,9 @@
+<nav class="main-navigation stuckMenu">
+ <a href="http://alexiscollado.com/index.html">
+ <img class="logo" src="{{ .Site.BaseURL }}img/logo.png" alt="My Portfolio">
+ </a>
+ <h5>{{ .Params.nav_heading }}</h5>
+ <div class="sub-navigation">
+ <a href="{{ .Site.BaseURL }}" class="main-navigation-link" data-scroll-goto="2">Case Studies</a>
+ </div>
+</nav> \ No newline at end of file