How it works docs (growthbook#249)

Co-authored-by: Jeremy Dorn <[email protected]>

Author: Auz

packages/docs/pages/_app.tsx

@@ -22,6 +22,10 @@ const navLinks = [
     href: "/",
     name: "Docs Home",
   },
+  {
+    href: "/overview",
+    name: "How it works",
+  },
   {
     href: "/self-host",
     name: "Self-Host",

packages/docs/pages/overview.mdx

@@ -0,0 +1,109 @@
+# What is GrowthBook?
+
+GrowthBook is a modular platform. You can use it for either Feature Flags, Experiment Analysis, or both.
+
+[**Feature Flags**](/app/features) you create in the GrowthBook UI are published to our API as a JSON file. Pass this JSON into our SDKs and use the feature flags throughout your code. If a feature is running as part of an A/B test, we'll fire a tracking callback in the SDK so you can record that event in your data warehouse or analytics platform for later analysis.
+
+[**Experiment Analysis**](/app/experiments) queries your data warehouse for raw experiment data and runs it through our stats engine to produce a report. No raw user-level events or PII are ever sent to GrowthBook. We only get back aggregate info instead (mean, stddev, etc.).
+
+![GrowthBook: How it Works Diagram](/images/feature-flagging-experimentation-diagram-766.png)
+
+## Feature Flags
+
+[Feature flags](/app/features) are a very powerful developer tool. They give you deep control over how and when new functionality is released to your users.
+
+GrowthBook supports 4 types of features:
+
+- **Boolean (on/off)**
+- **Number**
+- **String**
+- **JSON**
+
+Using features in your code is easy. Here's an example from our Javascript SDK:
+
+```js
+// For boolean features
+if (growthbook.feature("my-feature").on) {
+  // ... Do something
+}
+
+// For number, string, and JSON features
+const value = growthbook.feature("other-feature").value;
+```
+
+GrowthBook also supports different environments, so you can, for example, have a feature enabled in **dev** but not **production**.
+
+You can also change the value of a feature with **Override Rules**. The following types of rules are supported:
+
+- **Targeted** - Choose a subset of users based on targeting attributes
+- **Percentage Rollout** - Use random sampling to pick a certain percent of users
+- **A/B Experiment** - Run an A/B test between different feature values
+
+You can pull feature definitions as a JSON file from the [API](/app/api) or setup a [Webhook](/app/webhooks) to push the same JSON to your servers automatically when something changes.
+
+This feature definitions JSON is passed into our [SDKs](/lib) along with [user targeting attributes](/app/features#targeting-attributes).
+
+Read more about [features here](/app/features).
+
+## Experiment Analysis
+
+GrowthBook needs to connect to your [Data Source](/app/datasources) in order to query experiment results. We support all of the popular SQL data warehouses in addition to Mixpanel and Google Analytics. GrowthBook is extremely flexible and can support almost any schema structure with a little bit of configuration.
+
+![Data warehouses supported by GrowthBook](/images/GrowthBook-supported-DB-766.png)
+
+Once connected to a data source, you need to build a re-usable library of [Metrics](/app/metrics). Metrics are what your experiments are trying to improve. Metrics are defined via SQL (if your data source supports it) or a simple query builder. The following types are supported:
+
+- **binomial** - simple yes/no conversion metrics (e.g. `started trial`, `bounce rate`, `purchased`)
+- **count** - when the number or magnitude of conversions matters (e.g. `downloads per user`, `points earned`)
+- **revenue** - the amount of revenue earned (e.g. `revenue per user`, `average order value`)
+- **duration** - the time it takes to do something (e.g. `page load time`, `time on site`)
+
+Once these are metrics are set up, you can import experiments and start analyzing the results. GrowthBook uses a [Bayesian statistics engine](/statistics) to determine the probability that a variation is better than the control, as well as how much better it is and how risky it is to stop the experiment now.
+
+![Results Table](/images/results-table.png)
+
+Your data team can drill down into results by custom [dimensions](/app/dimensions), view the raw SQL that GrowthBook is running on your data warehouse, and export results to a Jupyter notebook for even deeper analysis.
+
+Read more about [experiments here](/app/experiments).
+
+## Use Cases
+
+There are typically three reasons that teams use GrowthBook.
+
+### 1. Full Experimentation Platform
+
+In this use case, companies use Feature Flags and our SDKs to run experiments in their applications. Then they use our Experiment Analysis to look at the results and decide on a winner.
+
+This is best for companies that are either just starting with experimentation or want to completely switch away from their current way of doing things.
+
+### 2. Feature Flags Only
+
+In this use case, companies don't run experiments at all and just use GrowthBook feature flags within their engineering team.
+
+This is best for companies that don't have enough traffic to run full experiments, but still want all of the benefits that feature flags provide.
+
+### 3. Experiment Analysis Only
+
+In this use case, companies are already running experiments and analyzing results usually with either a home-built reporting system or by manually creating Jupyter notebooks. They use GrowthBook to automate and improve the analysis process to save time and make better decisions.
+
+This is best for companies that already have a robust process for running experiments and just need a little help analyzing results at scale.
+
+## Next Steps
+
+<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+  <a href="/self-host" class="no-underline" style={{ textDecoration: "none" }}>
+    <div class="p-4 rounded-lg text-white bg-gradient-to-b from-blue-400 to-blue-500 no-underline text-center">
+      How to Self-Host
+    </div>
+  </a>
+  <a href="/lib" class="no-underline" style={{ textDecoration: "none" }}>
+    <div class="p-4 rounded-lg text-white bg-gradient-to-b from-purple-400 to-purple-500 no-underline text-center">
+      SDK Docs
+    </div>
+  </a>
+  <a href="/faq" class="no-underline" style={{ textDecoration: "none" }}>
+    <div class="p-4 rounded-lg text-white bg-gradient-to-b from-purple-500 to-purple-600 no-underline text-center">
+      Frequently Asked Questions
+    </div>
+  </a>
+</div>