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:00:11 +0300
committerXavi Ablaza <xlablaza@gmail.com>2017-10-17 01:00:11 +0300
commit4057e1c336ff7dbe9d6cf8d7bca2904a21c032c2 (patch)
treed8ed4486f47a6a6099408d1a3cd20e30aa626f46
parent5440aa3ccab86576d0e96a5bdf0e6dc8c3e5f178 (diff)
Finished wiring content for case study
-rw-r--r--layouts/_default/single.html342
-rw-r--r--layouts/partials/case_studies.html6
-rw-r--r--layouts/partials/casestudy_main.html2
-rw-r--r--layouts/partials/nav.html2
-rw-r--r--layouts/partials/testimonial.html9
5 files changed, 34 insertions, 327 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index af75b57..279d759 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,329 +1,27 @@
<!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>
+ <head>
+ {{ partial "head_casestudy.html" . }}
+ </head>
+ <body>
+ {{ partial "nav_casestudy.html" . }}
+ {{ partial "casestudy_main.html" . }}
+ {{ partial "testimonial.html" . }}
+
+ <section>
+ <div class="content-case-study">
+ {{ .Content }}
</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
+ </section>
- });
+ {{ if .Site.Params.case_studies.enable }}
+ {{ partial "case_studies.html" . }}
+ {{ end }}
- });
- });
- $(function(){
- $.scrollIt({
- topOffset: -70, // offste (in px) for fixed top navigation
- activeClass: 'active' // class given to the active nav element
- });
- });
+ {{ if .Site.Params.footer.enable }}
+ {{ partial "footer.html" . }}
+ {{ end }}
-</script>
-</body>
+ {{ partial "scripts.html" . }}
+ </body>
</html> \ No newline at end of file
diff --git a/layouts/partials/case_studies.html b/layouts/partials/case_studies.html
index 40c06ee..ccaddde 100644
--- a/layouts/partials/case_studies.html
+++ b/layouts/partials/case_studies.html
@@ -5,10 +5,10 @@
<h2 class="subtitle">{{ .Site.Params.case_studies.Subtitle }}</h2>
</div>
<div class="case-studies-wrapper">
- {{ .Content }}
- {{ range .Pages }}
+ {{ $baseUrl := .Site.BaseURL }}
+ {{ range .Site.RegularPages }}
<div class="case-study-item">
- <a href="{{ .URL }}"><img src="img/{{ .Params.thumbnail }}" alt=""></a>
+ <a href="{{ .URL }}"><img src="{{ $baseUrl }}img/{{ .Params.thumbnail }}" alt=""></a>
<h4>{{ .Params.case_title }}</h4>
<h5>{{ .Params.case_subtitle }}</h5>
<p>{{ .Params.case_description }}</p>
diff --git a/layouts/partials/casestudy_main.html b/layouts/partials/casestudy_main.html
index 8bbc661..a9f0eb0 100644
--- a/layouts/partials/casestudy_main.html
+++ b/layouts/partials/casestudy_main.html
@@ -2,7 +2,7 @@
<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="">
+ <img src="img/{{ .Params.case_feature_img }}" alt="">
<p class="summary">{{ .Params.case_summary }}</p>
<div class="case-details">
<div class="case-details-item">
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 9505f88..70f75d7 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -1,5 +1,5 @@
<nav class="main-navigation stuckMenu">
- <a href="index.html">
+ <a href="{{ .Site.BaseURL }}">
<img class="logo" src="{{ .Site.BaseURL }}img/logo.png" alt="My Portfolio">
</a>
<div class="sub-navigation">
diff --git a/layouts/partials/testimonial.html b/layouts/partials/testimonial.html
new file mode 100644
index 0000000..13388d9
--- /dev/null
+++ b/layouts/partials/testimonial.html
@@ -0,0 +1,9 @@
+<section class="testimonial" style="background:#fdfcfc;">
+ <div class="results-content">
+ <h1>"{{ .Params.Testimonial }}"</h1>
+ <hr>
+ <img src="img/{{ .Params.testimonial_photo }}" alt="">
+ <h2>{{ .Params.testimonial_author }}</h2>
+ <h3>{{ .Params.testimonial_subtitle }}</h3>
+ </div>
+</section> \ No newline at end of file