Reformat and rename old product stories to fit new layout

unboxed · Sep 20, 2019 · ffa1d7f · ffa1d7f
1 parent 3d2c37c
commit ffa1d7f
Show file tree

Hide file tree

Showing 22 changed files with 443 additions and 1,182 deletions.
diff --git a/source/product-stories/petition-map.html.erb → ...-stories/2018-02-20-petition-map.html.erb b/source/product-stories/petition-map.html.erb → ...-stories/2018-02-20-petition-map.html.erb
@@ -1,5 +1,7 @@
 ---
 title: "Product Story - Petition Map"
+description: "Visualising UK petition signatures and open source data"
+image: "/assets/images/product-stories/petition-map.jpg"
 
 header:
   client: "Unboxed"
@@ -21,22 +23,22 @@ quote_1:
   source: "Cale Tilford, Developer, Unboxed"
   image: "/product-stories/petition-map/team/cale-tilford-full.png"
 
-about:
+paragraph_1:
   title: "A heat map of UK politics"
   content: "Petition Map is an interactive heat map, which allows users to visualise signatures of a UK petition on a real-time map of the United Kingdom. Following the redevelopment of the Parliament Petitions platform with GDS (Government Digital Service), our intern developer, Cale, spent innovation time during his summer here to explore, develop and build this heat map to support the Petitions platform for members of the public."
   image: "/product-stories/petition-map/map.jpg"
   image_description: "Close up of heatmap"
 
-statistics_1:
+highlight_1:
   title: "Petition Map in numbers"
-  number: "4,066,694"
-  text: "Sessions since launch"
-
-statistics_2:
-  number: "693,785"
-  text: "Peak number of daily active users"
-
-open_source:
+  project: "petition-map"
+  statistics:
+    - number: "4,066,694"
+      text: "Sessions since launch"
+    - number: "693,785"
+      text: "Peak number of daily active users"
+
+paragraph_2:
   title: 'Pulling open data for real-time visualisation'
   content: "Petition Map pulls the JSON data of each individual petition, allowing users to select from a list of active petitions to visualise, with the popular Javascript library D3 used to render the outline of each parliamentary constituency. Each instance a petition is loaded, the colour scale is calculated relative to the total number of signatures, with each constituency then coloured in relation to this."
   image: "/product-stories/petition-map/open-source.jpg"
@@ -46,20 +48,20 @@ quote_2:
   quote: "Petition Map has been built to work on both desktop and mobile so that petitions can be visualised even when on the move. The tool is constantly being iterated using the feedback we receive from our users."
   source: "Cale Tilford, Developer, Unboxed"
 
-public_following:
+paragraph_3:
   title: "Gaining a high public following"
   content: "Following a number of high-profile political topics, the map has begun to build up a public following, appearing in publications such as Mail Online and The Independent. Petitions such as ‘Block Donald J Trump from UK entry’ and the more recent four-million-signature receiving ‘EU Referendum Rules triggering a 2nd EU Referendum’ have caused a sharp surge in map users, with the number of session crossing four million since it launched."
   image: "/product-stories/petition-map/mac.jpg"
   image_description: "Petition Map on a Mac"
 
-statistics_3:
+highlight_2:
   title: "Petition Map in numbers"
-  number: "2,643,906"
-  text: "Individual users"
-
-statistics_4:
-  number: "5,904,720"
-  text: "Page views"
+  project: "petition-map"
+  statistics:
+    - number: "2,643,906"
+      text: "Individual users"
+    - number: "5,904,720"
+      text: "Page views"
 
 quote_3:
   quote: "Since the EU Referendum petition, by popular demand the map has been updated with a new colouring option – weighting each constituency with its population. Hovering over each constituency also shows you the percentage of constituents that have signed. These new features make Petition Map an even more useful tool for examining regional engagement with politics."
@@ -87,65 +89,3 @@ links:
     link: "/news/record-breaking-eu-2nd-referendum-petition-hits-3-9-million-signatures-and-rising-most-popular-parliament-petition-ever/"
 
 ---
-
-<%= partial 'shared/page_header', locals: current_page.data.header %>
-
-<div class="container" data-header-waypoint>
-  <%= partial 'shared/full_image', locals: current_page.data.header %>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.introduction %>
-
-  <section class="highlight--petition-map">
-    <h2 class="highlight__title">
-      <%= current_page.data.statistics_1.title %>
-    </h2>
-
-    <div class="highlight__tile--two">
-      <p class="highlight__large-text"><%= current_page.data.statistics_1.number %></p>
-      <p class="highlight__small-text"><%= current_page.data.statistics_1.text %></p>
-      <p class="highlight__large-text"><%= current_page.data.statistics_2.number %></p>
-      <p class="highlight__wide-text"><%= current_page.data.statistics_2.text %></p>
-    </div>
-  </section>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.about %>
-
-  <blockquote class="quote">
-    <aside class="quote__right-section">
-      <p class="quote__text--centered">
-        <%= current_page.data.quote_1.quote %>
-      </p>
-      <p class="quote__source">
-        <%= current_page.data.quote_1.source %>
-      </p>
-    </aside>
-    <img class="quote__source-image" src="<%= current_page.data.quote_1.image %>" alt="<%= current_page.data.quote_1.source %>"/>
-  </blockquote>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.open_source %>
-
-  <%= partial 'shared/quote', locals: current_page.data.quote_2 %>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.public_following %>
-
-  <%= partial 'shared/quote', locals: current_page.data.quote_3 %>
-
-  <%= partial 'shared/project_team' %>
-
-  <section class="highlight--petition-map">
-    <h2 class="highlight__title">
-      <%= current_page.data.statistics_3.title %>
-    </h2>
-
-    <div class="highlight__tile--two">
-      <p class="highlight__large-text"><%= current_page.data.statistics_3.number %></p>
-      <p class="highlight__small-text"><%= current_page.data.statistics_3.text %></p>
-      <p class="highlight__large-text"><%= current_page.data.statistics_4.number %></p>
-      <p class="highlight__small-text"><%= current_page.data.statistics_4.text %></p>
-    </div>
-  </section>
-
-  <%= partial 'shared/link_tiles' %>
-
-</div>
-
diff --git a/...e/product-stories/v-and-a-museum.html.erb → ...tories/2018-03-20-v-and-a-museum.html.erb b/...e/product-stories/v-and-a-museum.html.erb → ...tories/2018-03-20-v-and-a-museum.html.erb
@@ -1,5 +1,7 @@
 ---
 title: "Product Story - V&A"
+description: "Hosting and infrastructure delivery of new digital platform for world-leading V&A"
+image: "/assets/images/product-stories/v-and-a-museum.jpg"
 
 header:
   client: "V&A"
@@ -20,12 +22,12 @@ highlight_1:
   title: "V&A in numbers"
   project: "v-and-a-museum"
   statistics:
-  - number: "12,699,552"
-    text: "Online visitors during 2014-2015"
-  - number: "8%"
-    text: "Conversion rate from online to museum visitors"
+    - number: "12,699,552"
+      text: "Online visitors during 2014-2015"
+    - number: "8%"
+      text: "Conversion rate from online to museum visitors"
 
-infrastructure:
+paragraph_1:
   title: "Support and infrastructure for world-leading digital platform"
   content: "Founded in 1852, the Victoria and Albert Museum (V&A) is the world's leading museum of art and design, with over 60,000 collection items on permanent display. Following the delivery of a new digital platform, their Digital Media team required a partner to ensure this remained live during the critical website re-launch phase, along with efficient, scalable infrastructure and support for the future."
   image: "/product-stories/v-and-a-museum/devs2.jpg"
@@ -35,7 +37,7 @@ quote_1:
   quote: "The aim is for our website to bring the V&A to life online. With our new site ready for re-launch, it was time to invest in our digital infrastructure and support. Unboxed came highly recommended to us by our development partner."
   source: "Kati Price, Head of Digital Media, V&A"
 
-aws:
+paragraph_2:
   title: "Rails application deployed to AWS for peak traffic levels"
   content: "We began by deploying the application onto AWS (Amazon Web Services) to ensure accommodation for extra capacity at peak traffic levels. Meeting new levels of traffic demand was a key activity of preparation for V&A’s high profile re-launch. We evaluated a number of methods for the infrastructure build, settling on AWS CloudFormation to manage the AWS resource and CodeDeploy to co-ordinate application deployments."
   image: "/product-stories/v-and-a-museum/devs1.jpg"
@@ -46,7 +48,7 @@ quote_2:
   source: "Andrew White, CTO, Unboxed"
   image: "/product-stories/v-and-a-museum/team/andrew-white-full.png"
 
-server_load:
+paragraph_3:
   title: "Reducing the server load, automatically deploying"
   content: "Cloudfront, a Content Delivery Network, was implemented reducing the load of the system’s front-end CMS servers. The CMS was then separated from the front-end, ensuring an extra layer of security, and S3 selected for the backup and recovery of media and catalogue uploads – vital for support of the 5,000-page CMS. Automatically deploying to a preview environment when merging pull requests reduced development time."
   image: "/product-stories/v-and-a-museum/mac.jpg"
@@ -56,12 +58,12 @@ highlight_2:
   title: "V&A in numbers"
   project: "v-and-a-museum"
   statistics:
-  - number: "10.08%"
-    text: "Target online-to-visitor conversion rate for 2017/18"
-  - number: "5,000"
-    text: "Page CMS supported"
+    - number: "10.08%"
+      text: "Target online-to-visitor conversion rate for 2017/18"
+    - number: "5,000"
+      text: "Page CMS supported"
 
-digital_platform:
+paragraph_4:
   title: "Supported digital platform successfully re-launched"
   content: "With the re-launch of the platform a success, we are now responsible for the ongoing infrastructure services and application support. Multiple servers behind Elastic Load Balancing now allow for zero downtime deploys and AWS autoscaling is used to reduce running costs during lower capacity periods. The V&A is now in a position to continue growing their digital presence."
   image: "/product-stories/v-and-a-museum/iphone.jpg"
@@ -121,36 +123,3 @@ related:
     link: "https://unboxed.co/blog/andrew-white-s-technical-breakfast-club-what-s-coming-in-rails-5-0/"
 
 ---
-
-<%= partial 'shared/page_header', locals: current_page.data.header %>
-
-<div class="container" data-header-waypoint>
-  <%= partial 'shared/full_image', locals: current_page.data.header %>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.introduction %>
-
-  <%= partial 'shared/highlight', locals: current_page.data.highlight_1 %>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.infrastructure %>
-
-  <%= partial 'shared/quote', locals: current_page.data.quote_1 %>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.aws %>
-
-  <%= partial 'shared/quote_caricature', locals: current_page.data.quote_2 %>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.server_load %>
-
-  <%= partial 'shared/highlight', locals: current_page.data.highlight_2 %>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.digital_platform %>
-
-  <%= partial 'shared/quote', locals: current_page.data.quote_3 %>
-
-  <%= partial 'shared/project_team' %>
-
-  <%= partial 'shared/link_tiles' %>
-
-  <%= partial 'shared/related_tiles' %>
-
-</div>
diff --git a/source/product-stories/naturejobs.html.erb → ...ct-stories/2018-04-20-naturejobs.html.erb b/source/product-stories/naturejobs.html.erb → ...ct-stories/2018-04-20-naturejobs.html.erb
@@ -1,15 +1,16 @@
 ---
 title: "Product Story - Naturejobs"
-meta_description: "Recruitment site revitalisation for major scientific publishing group"
 meta_keywords: "Ruby on Rails, Ruby on Rails developer, Ruby on Rails developers, Ruby on Rails development, Ruby on Rails developer London"
+description: "Recruitment site revitalisation for major scientific publishing group"
+image: "/assets/images/product-stories/naturejobs-macmillan.jpg"
 
 header:
   client: "Naturejobs"
   introduction: "Recruitment site revitalisation for major scientific publishing group"
   image: "/product-stories/naturejobs/header.jpg"
   image_description: "Naturejobs"
 
-collaboration:
+introduction:
   title: "Close, early engagement fosters confidence and aligns interests"
   content:
     - "Streamlined website development by gaining stakeholder buy-in"
@@ -19,40 +20,44 @@ collaboration:
   image: "/product-stories/naturejobs/naturejobs-website.jpg"
   image_description: "Naturejobs website screenshot"
 
-waterfall_to_agile_highlight: "The team took a product which had previously been worked on in a waterfall way and applied an Agile approach to it."
+highlight_1:
+  title: "The team took a product which had previously been worked on in a waterfall way and applied an Agile approach to it."
+  project: "naturejobs"
 
-technology:
+paragraph_1:
   title: "Upgrading the platform to use latest core technologies"
   content: "Core technologies were dated, with versions of software language and frameworks reaching end of life. This severely limited Naturejobs’ opportunity to utilise the latest framework innovations and increased security risk. We successfully planned and delivered upgrades of Ruby software, Rails framework and further business features."
   image: "/product-stories/naturejobs/team-meeting.jpg"
   image_description: "Naturejobs team meeting"
 
-collaboration_quote:
+quote_1:
   quote: "Unboxed were part of the team we were used to working with. I didn’t feel like we were customers."
   source: "David Bright, Head of Product Management — Naturejobs"
 
-user_journey:
+paragraph_2:
   title: "UX enhanced to benefit user journey"
   content: "With feedback of long and complicated user journeys on the current website, along with a high drop off rate, the user experience from start to finish was investigated and refined. Unnecessary stages in the user journey were removed, greatly reducing the drop-off rate. Every iteration was tested and assessed against real user data, resulting in a smoother and more concise journey."
   image: "/product-stories/naturejobs/ux-sketch.jpg"
   image_description: "UX design sketch"
 
-head_of_product_video:
+video:
   youtube_id: "VGu9hWOYIT0"
   image: "/product-stories/naturejobs/video-still.jpg"
   image_description: "Naturejobs Head of Product Management video"
 
-metrics:
+paragraph_3:
   title: "Establishing valuable metrics for success"
   content: "To gauge the site’s success, Naturejobs had previously been measuring page views and similar metrics. Customer feedback and studied site Analytics were reviewed to learn what users wanted and valued. Relevant metrics were then established, such as the number of CV uploads achieved and job searches conducted. From this, Naturejobs were able to remove many redundant and unused features, resulting in a reduction of their maintenance overheads."
   image: "/product-stories/naturejobs/workstation.jpg"
   image_description: ""
 
-mentality_quote:
+quote_2:
   quote: "The mentality was: 'We want to build great products together.'"
   source: "David Bright, Head of Product Management — Naturejobs"
 
-feedback_highlight: "At the end of fortnightly sprints, the team were able to get feedback that built momentum and trust with stakeholders."
+highlight_2:
+  title: "At the end of fortnightly sprints, the team were able to get feedback that built momentum and trust with stakeholders."
+  project: "naturejobs"
 
 team:
   title: "Unboxed team"
@@ -106,41 +111,3 @@ related:
       type: "product story"
       link: "/product-stories/plymouth-university"
 ---
-
-<%= partial 'shared/page_header', locals: current_page.data.header %>
-
-<div class="container" data-header-waypoint>
-  <%= partial 'shared/full_image', locals: current_page.data.header %>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.collaboration %>
-
-  <section class="highlight--naturejobs">
-    <h2 class="highlight__title">
-      <%= current_page.data.waterfall_to_agile_highlight %>
-    </h2>
-  </section>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.technology %>
-
-  <%= partial 'shared/quote', locals: current_page.data.collaboration_quote %>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.user_journey %>
-
-  <%= partial 'shared/full_video', locals: current_page.data.head_of_product_video %>
-
-  <%= partial 'shared/text_tile', locals: current_page.data.metrics %>
-
-  <%= partial 'shared/quote', locals: current_page.data.mentality_quote %>
-
-  <%= partial 'shared/project_team' %>
-
-  <section class="highlight--naturejobs">
-    <h2 class="highlight__title">
-      <%= current_page.data.feedback_highlight %>
-    </h2>
-  </section>
-
-  <%= partial 'shared/link_tiles' %>
-
-  <%= partial 'shared/related_tiles' %>
-</div>