Merge pull request #491 from neontribe/490-content-update

intial content update

package.json

@@ -33,6 +33,9 @@
     "react-helmet": "5.2.1",
     "react-malarquee": "0.0.13",
     "rehype-react": "3.1.0",
+    "remark": "13.0.0",
+    "remark-html": "13.0.1",
+    "remark-preset-lint-recommended": "5.0.0",
     "slugify": "1.4.0",
     "styled-jsx": "3.3.0"
   },

src/components/WorkDescription/ProblemSolution.js

@@ -1,31 +1,70 @@
 import React from 'react'
+import remark from 'remark'
+import recommended from 'remark-preset-lint-recommended'
+import remarkHtml from 'remark-html'
 
 import H from '../Heading'
 import VerticalSpacing from '../VerticalSpacing'
 import Text from '../Text'
 
-export default ({ problem, solution }) => (
+const Content = props => (
   <>
-    <Text size="normal" weight={700}>
-      <H>Problem</H>
-    </Text>
+    <div className="content" {...props} />
+    <style jsx global>{`
+      .content * + * {
+        margin-top: 1.5em;
+      }
 
-    <VerticalSpacing size={1} />
+      .content li + li {
+        margin-top: 1em;
+      }
 
-    <p>{problem}</p>
+      .content li {
+        line-height: 1.5;
+      }
 
-    {solution && (
-      <>
-        <VerticalSpacing size={2} />
+      .content > div > div:not(:first-child) {
+        margin-top: 2rem;
+      }
 
-        <Text size="normal" weight={700}>
-          <H>Solution</H>
-        </Text>
-
-        <VerticalSpacing size={1} />
-
-        <p>{solution}</p>
-      </>
-    )}
+      .content a {
+        text-decoration: underline;
+      }
+    `}</style>
   </>
 )
+
+export default ({ problem, solution }) => {
+  solution = remark()
+    .use(recommended)
+    .use(remarkHtml)
+    .processSync(solution)
+    .toString()
+
+  return (
+    <>
+      <Text size="normal" weight={700}>
+        <H>Challenges</H>
+      </Text>
+
+      <VerticalSpacing size={1} />
+
+      <p>{problem}</p>
+
+      {solution && (
+        <>
+          <VerticalSpacing size={2} />
+          <Text size="normal" weight={700}>
+            <H>How we helped</H>
+          </Text>
+          <VerticalSpacing size={1} />
+
+          <Content
+            className="content"
+            dangerouslySetInnerHTML={{ __html: solution }}
+          />
+        </>
+      )}
+    </>
+  )
+}

src/components/WorkDescription/index.js

@@ -24,7 +24,7 @@ const imageStyles = css.resolve`
 const WorkDescription = ({
   id,
   title,
-  subtitle,
+  client,
   fluid,
   problem,
   solution,
@@ -34,17 +34,17 @@ const WorkDescription = ({
     <ConstrainedWidth>
       <Content imagePosition={imagePosition}>
         <Content.Title>
-          <Text size="medium" weight={700}>
-            <H>{title}</H>
-          </Text>
-
-          <VerticalSpacing size={1} />
-
           <Section>
             <Text size="normal">
-              <H>{subtitle}</H>
+              <H>{client}</H>
             </Text>
           </Section>
+
+          <VerticalSpacing size={1} />
+
+          <Text size="medium" weight={700}>
+            <H>{title}</H>
+          </Text>
         </Content.Title>
 
         <Content.Image>

src/data/projects/Docready.md

@@ -0,0 +1,16 @@
+---
+title: |
+  Help for young people visiting their GP with mental health issues
+client: |
+  Docready
+problem: |
+  Comic Relief’s 2012 Innovation Labs brought the voice of young people right into the design of services for them to use. Neontribe were one of a consortium who facilitated the labs. Eight of the ideas that came out of that process were selected for funding. One was Docready, which we were chosen to develop. 8 years later, it’s still helping hundreds of people every week.
+solution: |
+  - Empowered users to remember what they wanted to say to their GP, and how they wanted to say it. 
+  - Developed, tested and iterated a digital service with young people.
+  - Balanced user needs for security and functionality with an eye to keeping maintenance very low cost.
+  - Built a tool to last with technologies that wouldn’t go out of date.
+  - Collaborated with 3 organisations to deliver the project.
+
+image: images/Doc ready mock up copy.jpg
+---

src/data/projects/alexandra-rose.md

@@ -1,11 +1,16 @@
 ---
 title: |
-  Helping more young families get fresh fruit and veg
-subtitle: |
-  Delivering simple technology for the Alexandra Rose charity
+  Simple technology to help more young families get fresh fruit and veg
+client: |
+  Alexandra Rose Charity
 problem: |
-  Partners working on the Rose Vouchers for Fruit & Veg Project were writing out lists by hand and their team was copying them into several different spreadsheets. To help more people access healthy food they wanted to embrace technology.
+  The Rose Voucher fruit and veg project provides vouchers for families. When our work together began, people involved in the project were writing out lists by hand. Alexandra Rose’s administrator was typing up the information into spreadsheets. They wanted to use technology to reach more families but had limited budgets.
 solution: |
-  We mapped processes, prioritised pain points, and researched prototypes with market traders and children’s centre staff so that we could keep the fruit and veg buying simple for families. We’ve thrown out several possible solutions along the way and created digital tools that are easy to use AND work in low tech street markets.
+  - Researching and testing prototypes with traders and children’s centre staff.
+  - Mapping the journey of vouchers and the feelings of families and workers.
+  - Throwing out “great” solutions when they turned out not to fit reality.
+  - Building the technology in stages, starting in the place where we could make the biggest impact.
+  - Creating a system that currently supports over 2000 families to get fresh fruit and veg every week.
+  - Supporting the charity to make successful funding bids to Comic Relief, Esmee Fairbairn and National Lottery Community Foundation.
 image: images/arc.jpg
 ---

src/data/projects/allegiant.md

@@ -1,11 +1,16 @@
 ---
 title: |
-  1 billion customers flying around the USA need top of the line booking systems that don’t let them down.
-subtitle: |
-  Delivering enterprise interfaces for Allegiant Air
+  Delivering an enterprise interface for flying customers around the USA
+client: |
+  Allegiant Air
 problem: |
-  Allegiant require engineering excellence based on a solid long-term technology strategy. Currently, they’re focused on ensuring the highest quality user experience across a digital estate which is rapidly growing to keep up with their business expansion.
+  Allegiant needed top of the line booking systems for over 1 billion customers. They wanted to provide the highest quality user experience at the same time as expanding their business and their digital estate.
 solution: |
-  We work with our partners Lola Tech to provide development and support services with an emphasis on accessibility. We help them make the kind of technology choices that mean they can lead a rapidly evolving market. Right now we’re using Next.js and GraphQL to improve performance and maintainability, and we’re looking forward to building the next generation of customer-facing features in the top layers of booking systems.
+  - Working in partnership with other software companies (our partner Lola Tech)
+  - Creating a strategy so that Allegiant could make the right technology choices
+  - Providing an emphasis on accessibility
+  - Leading problem-solving in agile development teams
+  - Focusing on Next.js and GraphQL to improve performance and maintainability
+
 image: images/allegiant.jpg
 ---

src/data/projects/catalyst-discovery-programme .md

@@ -0,0 +1,16 @@
+---
+title: |
+  Online training and mentoring for charities getting started with user-led design
+client: |
+  Catalyst Discovery Programme
+problem: |
+  More and more charities are turning to digital projects to help them make a difference.  They need skills and confidence to help them make clear decisions about technology.  Training, mentoring and peer learning have to fit around very busy day jobs. This project needed to support charities of different sizes. They also had varied knowledge and different projects to complete.
+solution: |
+  - Re-used existing training materials and designed new ones.
+  - Combined group training activities with individual mentoring.
+  - Helped people understand how to deliver user research that is fair, safe and meaningful.
+  - Passed on skills in service design that charities decided to use across their work, not only for digital projects.
+  - Supported people to understand how to choose a new piece of software or technology.
+
+image: images/discovery learning.jpg
+---

src/data/projects/haven.md

@@ -1,11 +1,17 @@
 ---
 title: |
-  Exploring whether visual storytelling persuades more people to seek help earlier.
-subtitle: |
-  Working with women at The Haven Wolverhampton
+  Developing a small storytelling app to help persuade women to seek help
+client: |
+  The Haven Wolverhampton
 problem: |
   Abusive behaviour in a relationship can be hard to recognise. Women experiencing abuse often are unaware that support is available. Online support tools can be jargon laden and lack relatable examples.
 solution: |
-  Women who had been through this journey themselves encouraged us to focus on breaking down the fears and barriers to getting help. We built an app that combines womens’ stories with illustrations and encourages people to call a helpline.  We’re also testing whether the app can be used with different content for other support services.
+  - Designed safe, inclusive user research activities that women felt helped them as well as helping us
+  - Listened to women who had been through this journey to understand the fears and barriers they wanted us to focus on
+  - Collaborated with frontline workers and volunteers to collect women’s stories.
+  - Shared with the women the version we wanted to put online to help others
+  - Built an award winning app that combines women’s stories with illustrations and encourages people to call a helpline
+  - Helped convert elements of the app to social media and poster based advertising
+
 image: images/haven.jpg
 ---

src/data/projects/mind-of-my-own.md

@@ -1,14 +1,15 @@
 ---
 title: |
   Helping more than 450 services across the UK hear young people’s voices
-subtitle: |
-  Developing apps for Mind of my Own
+client: |
+  Mind Of My Own
 problem: |
-  Young people weren’t keen on filling in endless paper forms, and they had no way of keeping track of what they had said and whether social workers listened.
+  Young people were always being asked to fill in paper forms and had know way of keeping track of whether they were heard. The Mind of my Own team came together to see if digital technology could make it easier for young people to get their social workers to listen to them. They discovered that apps could do this. These apps need to be appealing to young people, tailored to their needs, easy to use for workers, safe and secure.
 solution: |
-  We began by experimenting with how to help young people get their voices heard,
-  and now Mind of My Own has a suite of digital tools they sell to councils.
-  We build and maintain the apps that let young people say important things in different ways.
-  Our expertise helps Mind of My Own meet ISO27001 and GDPR standards so councils and young people trust the system.
+  - Starting in 2015 with a learn, build, measure approach funded by Nominet. We used paper prototypes, tests and experiments.
+  - Helping the Mind of my Own team learn about user research, service design and product management
+  - Providing expertise on information security so that all Mind of my Own’s apps meet ISO27001 and GDPR standards
+  - Building and improving the apps which are now used by over 100 organisations to talk with the young people in their care.
+
 image: images/mind-of-my-own.jpg
 ---

src/data/projects/ncvo.md

@@ -0,0 +1,17 @@
+---
+title: |
+  Improving online information that explains safeguarding responsibilities to small organisations
+client: |
+  NCVO and partners
+problem: |
+  The project aimed to provide clear, simple safeguarding advice for small charities. It focused on supporting organisations that only work with young people or adults at risk from time to time.  Existing information could be hard to find and confusing.
+solution: |
+  - Led a uk wide user research programme, exploring how people searched and how they reacted to what they found.
+  - Produced a content style guide for use by all partners.
+  - Helped NCVO plan a structure for a core set of information pages.
+  - Content designed and edited step by step plans with safeguarding subject specialists.
+  - Collaborated on evaluation for the funders: DCMS and the National Lottery Community Fund.
+  - Took learning from this project into 2 more content design projects with NCVO.
+
+image: images/NCVO mockup copy.jpg
+---

src/pages/what-we-are-doing.js

@@ -91,7 +91,7 @@ const WhatWeAreDoingPage = () => (
                   title
                   problem
                   solution
-                  subtitle
+                  client
                   image {
                     childImageSharp {
                       fluid(maxWidth: 768) {
@@ -119,7 +119,7 @@ const WhatWeAreDoingPage = () => (
                 id={slugify(project.frontmatter.title, '-')}
                 fluid={project.frontmatter.image.childImageSharp.fluid}
                 title={project.frontmatter.title}
-                subtitle={project.frontmatter.subtitle}
+                client={project.frontmatter.client}
                 imagePosition={index % 2 === 0 ? 'left' : 'right'}
                 problem={project.frontmatter.problem}
                 solution={project.frontmatter.solution}