Skip to content
Static site tool for generating product concepts
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.utils Add the google analytics domain to img-src Feb 28, 2019
.prettierrc initial commit Jan 24, 2019 Merge pull request #96 from mozilla/little-refactor Apr 12, 2019
gatsby-node.js remove auto trailing slashes Feb 27, 2019

Fx Concepts

Fx Concepts is a simple tool for building and testing value propositons for hypothetical future Firefox products and features.

Working With the Fx Concepts

This document explains how to create and update concept pages.


In order to add concepts to the Fx Concepts site, you'll first need to make sure you have the correct dependencies seet up on your computer:

  1. Make sure you have a GitHub account and have Git running and configured on your computer. docs.
  2. A text editor like VSCode.
  3. Modest familiarity with the Terminal app on your computer.
  4. The latest Version of Node. Install link
  5. The Gatsby command line interface. To install this, open your Terminal and paste npm install --global gatsby-cli. Make sure you've installed Node (step 4) before you do this.

Set Up Your Environment

Skip this section if you've already cloned the Fx Concepts repository.

  1. Probably a good idea to fork the Fx Concepts repo. You can do this from GitHub.
  2. cd to wherever you want your local build of Fx Concepts
  3. Clone your fork: git clone{YOUR-FORK}/concepts.git
  4. cd into your local Fx Concepts folder
  5. npm i


gatsby develop to run locally at localhost:8000. You can test GraphQL queries at localhost:8000/___graphql


Can be found here.

Adding Content

Product concepts can be found in the src/concepts directory. Each concept has the following basic structure:

├── images
│   ├── image-1.png
│   ├── image-2.png
│   └── image-{...n}.png
└── v{...n}.md

This directory structure is important to set up your experiment:

  • The root folder {concept-root-slug} will be the top level path for your experiment.
  • becomes the control branch
  • You can add variants by adding more markdown files. This will automatically create new pages so that, for example will become localhost:8000/{concept-root-slug}/v1
  • any images in the image directory will be accessible within the context of your project.


The copy-me folder in src/concepts should be used to bootstrap your concept. Gatsby ignores this directory at compile time so it doesn't produce any paths or content in, but if you copy it and change the name, Gaysby will pick up your new directory and generate a concept for you.

Overview of concept fields

Concept variants are built on Markdown frontmatter which is really just YAML. Gatsby and YAML are both sticklers for syntactic completeness and accuracy. Below is an annotated version of a concept page:

metaName: "Copy Me" // A human-readable name for your project. This should be the same across all variants.
metaCleanName: "copyme" // A URL-friendly name for your project used as a query parameter in your survey. This should be the same across all variants.
metaVariant: "control" // A URL-friendly variant name. This should be different for each treatment in your test.
metaPrimaryLink: "valid url" // A surveyGizmo URL or other
metaSecondaryLink: "valid url" // Link to a URL explaining this project, probably
metaDate: "creation date" // A human readable datestamp
concept: // The concept is what actually gets rendered onto the page
    cobrand: "Partner Name" // leave this blank if no partner
    cobrandIcon: "Partner Icon" // note there need needs to be a vilid icon pat here...nothing will show up if partner name is left blank
    hero: // The hero is the big top thing on your concept page.
        title: "Title"
        text: "Description"
        cta: "cta" // Button copy
        image: "./images/default-hero.png" // make this image a 1168 × 777 png
    facets: // facets pieces of the value propisiton. you can have as many of these as you like.
        title: "Facet Title"
        text: "Make as many facets as you like!"
        image: "./images/default-facet.png" // make this image a 692 × 692 png
        title: "Facet Title"
        text: "Make as many facets as you like!"
        image: "./images/default-facet.png"
        title: "Bottom Callout Title"
        text: "This is the thing at the bottom"
        cta: "secondary cta"

You can’t perform that action at this time.