Weekly update (#209)
* add new blog post * remove old weeklys --------- Co-authored-by: Johannes <johannes@formbricks.com>
|
After Width: | Height: | Size: 976 KiB |
@@ -0,0 +1,169 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import Tellform from "./tellform.png";
|
||||
import Tripetto from "./tripetto.png";
|
||||
import Ohmyform from "./ohmyform.png";
|
||||
import Snoopforms from "./snoopforms-how-it-began.png";
|
||||
import FormbricksSneak from "./formbricks-sneak.png";
|
||||
import Wrestling from "./wrestling.jpg";
|
||||
import TypeformValue from "./typeform-value-prop.png";
|
||||
import ResponsiveEmbed from "react-responsive-embed";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
export const meta = {
|
||||
title: "Why Qualtrics beats Typeform, especially Open-Source",
|
||||
description:
|
||||
"We kicked it off with a Typeform open-source alternative. As we build and learn, our focus is shifting. Read why:",
|
||||
date: "2023-03-24",
|
||||
};
|
||||
|
||||
<Image src={Wrestling} alt="Why we do it" className="rounded-lg" />
|
||||
|
||||
_In September, we kicked it off with a Typeform open-source alternative. As we build and learn, our focus is shifting. We talk about how we look at form and survey tools today, why experience management not only matters for enterprise and why the endgame looks a lot more like open-source Qualtrics. Qualtrics? What happened to Typeform?_
|
||||
|
||||
Let’s dive in 👇
|
||||
|
||||
## How it started
|
||||
|
||||
<Image src={Snoopforms} alt="How it began - snoopforms landing page" className="rounded-lg" />
|
||||
|
||||
Matti and I kicked off our work on [snoopForms](https://snoopforms.com) as the “Open source Typeform Alternative” - and we weren’t the first to try this:
|
||||
|
||||
<Image src={Ohmyform} alt="Ohmyform" className="rounded-lg" />
|
||||
<Image src={Tellform} alt="Tellform" className="rounded-lg" />
|
||||
<Image src={Tripetto} alt="Tripetto" className="rounded-lg" />
|
||||
|
||||
TellForm and OhMyForm were given up, Tripetto niched down to the WordPress ecosystem and are doing quite well selling $99 / year licenses.
|
||||
|
||||
The snoopForms launch went pretty well: Within a month, we accumulated 1k+ ⭐ on GitHub, over 1k signups and stirred up quite some interest on [HackerNews](https://news.ycombinator.com/item?id=32303986) and [ProductHunt](https://www.producthunt.com/products/snoopforms). We sold several Early Bird Deals for $179 a piece granting Early Birds 2.500 free monthly submissions for a lifetime. Since the launch in September we have processed several thousand submissions with a ca. 50/50 split between self-hosted instances and our Cloud.
|
||||
|
||||
# So what’s the problem?
|
||||
|
||||
All of the above looks good. And yet, we decided to move away from a general purpose no-code form builder. To understand why we have to look at three aspects and how they interact: 1) The appeal of open-source ssoftware (OSS), 2) the people we attracted and 3) the value Typeform offers. Let’s lay out the facts first:
|
||||
|
||||
1. **The appeal of “open source”**
|
||||
|
||||
We wrote about that in more detail in [Open source forms will save the world](https://formbricks.com/blog/open-source-forms-will-save-the-world) but in short, there are three benefits for customers: Data privacy when self-hosting, full customizability & extendability and a weaker lock-in.
|
||||
|
||||
2. **The people we attracted**
|
||||
|
||||
We attracted two groups of people: No Coders and Coders.
|
||||
|
||||
- For most No Coders “open source” means free. About 90% of the people we talked to in our Discord and in interviews find Typeform too expensive for what it does. They don’t care too much about data privacy or code-based customizability and are not really bothered about a lock-in as they usually operate in small organizations (1-10 people).
|
||||
- The more interesting group were the hackers and digital agencies taking snoopForms apart and building their own solutions with it. We had an agency building feedback functionality into an e-learning platform run by the State of Geneva (CH) and an online academy in Africa building an assessment center around forms. They loved that they could build their solutions in a fraction of the time, however it still required some custom development to achieve their goal.
|
||||
|
||||
The first group isn’t a tempting cohort to build for: They are very price-sensitive and quick to jump ship in a commoditized space. The latter are a better target group but we would run into an incentive dilemma sooner than later: The better the OS offering, the wider the distribution but the harder it gets to monetize. More on why the play book for commercial open source wouldn’t play out well for the Typeform case later on.
|
||||
|
||||
3. **The value of Typeform**
|
||||
|
||||
Typeform makes forms look pretty and thereby claims to achieve a higher conversion rate than other form tools. Here is the key value proposition from typeform.com (24.03.23):
|
||||
|
||||
<Image src={TypeformValue} alt="Why we do it" className="rounded-lg" />
|
||||
|
||||
The average conversion rate of an emailed out Typeform is 5%. In-app surveys for example average out at [30% so 6x better.](https://news.ycombinator.com/item?id=30377349) Typeforms are the most pretty forms out there and likely to convert better than a Google Form but are by no means the best way to get insights from your audience.
|
||||
|
||||
Secondly, according to our user interviews, the people using Typeform aren’t really happy with it. It's too expensive for a form builder and not specialized enough to solve a specific business problem. Rarely do product managers want “more pretty forms” but rather “understand what users think about their product” or “generate leads”. Typeform isn’t specifically built for that. Using Typeform it is still YOUR job to research and implement the best approach for getting the right insights from the right users. This means:
|
||||
|
||||
- Coming up with the right set of questions
|
||||
- Create the form without leading answers
|
||||
- Identifying and reaching the correct user cohort
|
||||
- Analyzing and interpreting the data, preparing a report
|
||||
- Drawing the correct conclusions from the data to make a better decision
|
||||
|
||||
Doing it once requires a lot of skill, knowledge and manual work. Doing it repeatedly and with consistency - especially in larger companies - is really hard.
|
||||
|
||||
Typeform makes pretty forms and is kind of stuck doing so because they have to keep serving all kinds of different users building forms for different purposes. One-size fits all fits no one really.
|
||||
|
||||
### Why OS Typeform can work as a business (but not at venture scale)
|
||||
|
||||
The Commercial Open-Source Software playbook in a nutshell is this: Grow with community and then sell into enterprise bottom up. Let's look at how the Typeform case would do:
|
||||
|
||||
**The first part is doable:** Grow a community with a largely free and open-source Typeform clone. We might even make money offering a hosted version for No Coders and people who don't want to self-host. It would be one of many form builders with a capped upside, when Tally.so offers 95% of Typeforms features for free - and then charges $29 / month.
|
||||
|
||||
For coders to be able to hack around with the code, it needs to be largely MIT licensed. With AGPL it wouldn't be allowed to build a proprietary solution on top of it and monetize it. MIT is great for distribution but really hard to make money with.
|
||||
|
||||
So you have to **monetize with enterprise or government licenses.** But why would an enterprise or government customer pay $$$ for a self-hosting license? They already have a generic form builder - it’s not as pretty, but does the same thing. And by the way, both Typeform and Jotform offer self-hosting for enterprise clients. What’s the differentiator that allows you to drive outsized returns to become the unicorn investors bet on?
|
||||
|
||||
It certainly can be a nice lifestyle business to sustain a small team. It’s not a venture scale opportunity.
|
||||
|
||||
# Bye Form Creation. Hola Experience Management?
|
||||
|
||||
And yet, the yawning gap for an open-source form and survey tool kept us engaged. So we dug deeper. Before we zoom in, let’s zoom out for context:
|
||||
|
||||
Broadly speaking, forms fall into two categories: 1) Processing information usually when digitizing a previously analog process. And 2) looking into your customers’ or employees' brains to make better business decisions.
|
||||
|
||||
The first category is less interesting to us mostly because no one used snoopForms for it and only a handful of people named it as their objective in user interviews. Also, [anecdotal](https://medium.com/san-francisco-digital-services/how-to-make-a-form-d1d1b67d95d7) [evidence](https://medium.com/@jgee/what-i-learned-in-two-years-of-moving-government-forms-online-1edc4c2aa089) suggests that getting analog institutions to use digital tools doesn’t sound like fun.
|
||||
|
||||
The second category is more broadly referred to as “Experience Management” (XM) popularized by Qualtrics. Qualtrics made $1.46B in revenue in 2022 (Typeform will make something between 100M and 120M). Both are impressive numbers **and** a good indicator that generic form creation does not create as much value as helping companies improve customer experiences to grow their business. Both tools are built on “forms”, so what’s the difference exactly?
|
||||
|
||||
<Callout title="How Qualtrics is different" type="note">
|
||||
Qualtrics took the business objective of their customers and productized an opinionated, research-based
|
||||
solution that excels at analyzing large amounts of qualitative data in a way that guides decision-making.
|
||||
</Callout>
|
||||
|
||||
Typeform makes pretty forms. It’s no surprise that especially large companies are willing to pay $5000+ / month for Qualtrics while you hear complaints about the $49 / month Typeform charges all too often.
|
||||
|
||||
The conclusion is obvious: OS Qualtrics is the real opportunity here.
|
||||
|
||||
## Qualtrics for the modern growth stack
|
||||
|
||||
Coming up with such a vision is easy. But how do we get there? A wise man once compared a large, successful company with a hole which is both wide and deep:
|
||||
|
||||
_So you have two choices about the shape of hole you start with. You can either dig a hole that's broad but shallow, or one that's narrow and deep, like a well. […] Nearly all good startup ideas are of the second type._ - [_Paul Graham_](http://paulgraham.com/startupideas.html)
|
||||
|
||||
Experience management covers four areas of experiences: Customer, Employee, Product and Brand. To be able to digg deep, we decided to focus on Product Experiences first as the other three are less relevant when the product sucks.
|
||||
|
||||
### Product analytics leave a blind spot
|
||||
|
||||
To manage Product you constantly need data on things: What are people doing, and why are they doing it. Quantitative analytics tools like Amplitude or PostHog give a very good insight into what people are doing: You can track every click, watch users move through funnels, etc. But they leave a blind spot: Why are users doing what they do?
|
||||
|
||||
To answer this question, product managers should talk to their customers. Everyone knows it, some do it. Especially in larger companies, it gets increasingly difficult. Other things become more important, customers grow more heterogeneous. Organizing who talks to which customers is hard, a lot of work is redundantly done in different teams, many survey or interview requests are untargeted and spammy.
|
||||
|
||||
This is where Formbricks comes into play.
|
||||
|
||||
## Take what’s good, update what’s old
|
||||
|
||||
When we redesigned Formbricks, we came up with a set of characteristics the solution needs to pack:
|
||||
|
||||
- Fits into modern product / growth stack: Sits between product analytics, CRM and messaging systems like customer.io
|
||||
- Easy to get started but mighty for power users
|
||||
- Value increases when the user base grows (revenue expansion)
|
||||
- Keep “qualitative data for better product decisions” at heart
|
||||
- Packs multiplayer mode from the start
|
||||
- Has moments of delight (surprise 🤫)
|
||||
- Has virality built in (survey links)
|
||||
- Allows simple generic form building (good for OS traction and sales argument to replace Typeform / SurveyMonkey / other form tool with self-hosted alternative)
|
||||
|
||||
In a direct comparison to Qualtrics, this is how we position Formbricks:
|
||||
|
||||
| The incumbent way | → The OS way |
|
||||
| ---------------------------------------- | ------------------------------------------------- |
|
||||
| Make self-hosting impossible | → Make self-hosting really easy |
|
||||
| Keeping business objective in mind | → Keep, that’s gold |
|
||||
| Support managing analog experiences | → Excel at digital experiences first |
|
||||
| Limit customizability | → Enable 100% customizability |
|
||||
| Large set of extensions and integrations | → Same, working well |
|
||||
| Prohibitively expensive | → Give away for small teams use (make devs happy) |
|
||||
| Only has value when used in enterprise | → Make useful for SMB as well |
|
||||
|
||||
# What have we been building?
|
||||
|
||||
We did sit a lot in our office, coding away quietly. During the launch of the previous iteration we learned that a limited product neither serves us nor our early adopters well: It doesn’t really help when the prototype is so inflexible that adjusting it to our customers' needs requires custom coding every single time.
|
||||
|
||||
And we learned that the best developer experience is no developer experience. In other words: The less time a dev spends on implementing Formbricks, the better.
|
||||
|
||||
So we built that. We built a visual form creator, event tracking, user attribute management and an analysis dashboard built for SaaS products. Users can implement Formbricks via NPM or by copying a snippet into the head of their products HTML. That's it.
|
||||
|
||||
With the new Formbricks you can **trigger any micro-survey on any event in your web app.** Very soon you can **filter based on user attributes to survey exactly and only the segment of your user** base which offers signal instead of noise.
|
||||
|
||||
You can create events either in your code base or with our No Code Event creator. Yep, even a non-technical person can copy the Formbricks code snippet into the `<head>` tag and use our UI to create events to granularly trigger surveys in the web app. **And they can do so in minutes.**
|
||||
|
||||
There is so much you can do with it, here is a sneakpeek:
|
||||
|
||||
<Image src={FormbricksSneak} alt="Formbricks Sneak Preview" className="rounded-lg" />
|
||||
|
||||
What all of this looks like in action we’ll share in a product walkthrough video soon. We are super excited to get the new Formbricks into your hands asap.
|
||||
|
||||
### Until then, enjoy your weekend!
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
After Width: | Height: | Size: 278 KiB |
|
After Width: | Height: | Size: 579 KiB |
|
After Width: | Height: | Size: 279 KiB |
|
After Width: | Height: | Size: 319 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 34 KiB |
@@ -1,166 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
|
||||
import Chart1 from "./chart-1.webp";
|
||||
import Chart2 from "./chart-2.webp";
|
||||
import Chart3 from "./chart-3.webp";
|
||||
import Results1 from "./results-1.webp";
|
||||
import Results2 from "./results-2.webp";
|
||||
import Crowd from "./crowd-dev-1.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 2nd Dec 2022",
|
||||
description:
|
||||
"And it is December! This week was dominated by working on the Formbricks HQ, Formbricks Charts and the YC interview. Let’s look at it in detail.",
|
||||
date: "2022-12-02",
|
||||
};
|
||||
|
||||
_And it is December! This week was dominated by working on the Formbricks HQ, Formbricks Charts and the YC interview. Let’s look at it in detail 👇_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
# Highlights
|
||||
|
||||
- Formbricks HQ almost ready 🚢
|
||||
- Formbricks Charts 📈
|
||||
- YC Interview 🍊
|
||||
|
||||
Let's dive in!
|
||||
|
||||
##
|
||||
|
||||
# Product
|
||||
|
||||
### Formbricks HQ (launching next week)
|
||||
|
||||
We made very good progress with the new Formbricks HQ. We rebuilt the use case of the Swiss government adding native feedback functionality into an existing app - super smooth!
|
||||
|
||||
<Callout title="Modular is the way" type="note">
|
||||
The Swiss pulled snoopForms apart to build their feedback feature. A few more early users did that which led
|
||||
us to build a modular set of tools: they work independently but are well integrated e.g. by the use of a
|
||||
shared data schema.
|
||||
</Callout>
|
||||
|
||||
Here is a quick run-through to show how our modular setup plays out:
|
||||
|
||||
### Step 1: Build the form with Formbricks React
|
||||
|
||||
Within a few minutes we spun up the right form. Look how easy radio buttons can be in React, styled with Tailwind CSS 😍
|
||||
|
||||
```tsx
|
||||
import { Form, Radio, Submit, sendToHq, Textarea } from "@formbricks/react";
|
||||
|
||||
...
|
||||
<Form formId="clb4yr1m90000XXXXXXXX" hqUrl="http://localhost:3000" onSubmit={sendToHq}>
|
||||
<Radio
|
||||
name="evaluate"
|
||||
label="Evaluate the online course you just completed"
|
||||
legendClassName="mb-3 font-bold text-slate-800 text-xl"
|
||||
labelClassName="font-regular text-slate-500 text-lg"
|
||||
options={["Perfect", "Very satisfactory", "Satisfactory", "Not very satisfactory", "Useless"]}
|
||||
/>
|
||||
<Textarea
|
||||
name="feedback"
|
||||
label="Would you like to send us a comment, an opinion, a correction?"
|
||||
help="Only you and us can see your answer."
|
||||
labelClassName="font-bold text-slate-800 text-xl"
|
||||
innerClassName="mt-3"
|
||||
cols={50}
|
||||
rows={4}
|
||||
/>
|
||||
<Submit
|
||||
label="Answer"
|
||||
inputClassName="flex items-center justify-center rounded-md border border-transparent
|
||||
bg-gradient-to-r from-purple-600 to-indigo-600 bg-origin-border px-3 py-2 text-base
|
||||
font-medium text-white shadow-sm hover:from-purple-700 hover:to-indigo-700"
|
||||
/>
|
||||
</Form>
|
||||
```
|
||||
|
||||
<Image src={Chart1} alt="Weekly Update Demo Custom Native Feedback Function" className="rounded-lg" />
|
||||
|
||||
### Step 2: Pipe it up with Formbricks HQ
|
||||
|
||||
We hooked it up with the Formbricks HQ to store the data. The React Lib sends a data schema along with the submission to assure a complete picture of the data. Read more about schemas in our [docs](/docs/formbricks-hq/schema):
|
||||
|
||||
```tsx
|
||||
<Form
|
||||
formId="clb4yr1m90000yzaXXXXXXXX"
|
||||
hqUrl="http://localhost:3000"
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
```
|
||||
|
||||
<Image src={Results1} alt="Weekly Update Demo Custom Native Feedback Function" className="rounded-lg" />
|
||||
|
||||
### Step 3: Display the results right after submission
|
||||
|
||||
They were looking for a polling functionality so showing the enduser the results right after they submitted their answer. We built Formbricks Charts to enable that with a single line of code:
|
||||
|
||||
```tsx
|
||||
import { Bar } from "@formbricks/charts";
|
||||
|
||||
...
|
||||
|
||||
<h2 className="mx-auto mb-3 text-lg font-bold text-slate-800">
|
||||
Thanks a lot for your feedback
|
||||
</h2>
|
||||
<p className="mb-5 text-lg text-slate-500">
|
||||
Here you can see what other people answered.
|
||||
</p>
|
||||
|
||||
/* Visualize Submission using Formbricks Charts Library */
|
||||
<Bar
|
||||
submissions="{submissions}"
|
||||
schema="{schema}"
|
||||
fieldName="evaluate"
|
||||
color="#4f46e5"
|
||||
/>
|
||||
```
|
||||
|
||||
<Image src={Chart3} alt="Weekly Update Demo Custom Native Feedback Function" className="rounded-lg" />
|
||||
|
||||
### Formbricks Charts
|
||||
|
||||
Formbricks charts is a package to display form data collected with Formbricks React or the upcoming Visual Form Builder. It’s leveraging the great [Recharts](https://recharts.org) package.
|
||||
|
||||
With a single line of code you can display your form data wherever you need it:
|
||||
|
||||
```tsx
|
||||
<Bar submissions={submissions} schema={schema} fieldName="fieldToVisualize" />
|
||||
|
||||
/* or */
|
||||
|
||||
<Table submissions={submissions} schema={schema} fieldName="fieldToVisualize" />
|
||||
```
|
||||
|
||||
We also use the same package to display our charts in Formbricks HQ:
|
||||
|
||||
<Image src={Results2} alt="Formbricks HQ Demo Custom Native Feedback with Charts" className="rounded-lg" />
|
||||
|
||||
# Community
|
||||
|
||||
We had a few great in-depth chats with builders looking to use Formbricks. Special shout out to jetsoms, LD and kiran for sharing so much about their pain points with other solutions.
|
||||
|
||||
Here is a little overview of our crowds activity on GitHub and Discord over the past week:
|
||||
|
||||
<Image src={Crowd} alt="Weekly Update Demo Custom Native Feedback Function" className="rounded-lg" />
|
||||
|
||||
## YC Interview
|
||||
|
||||
Last night we had our YC interview.
|
||||
|
||||
Our experience was surprisingly relaxed, Nicolas just tried to understand what we’re building, why and what we have learned about our users over the past couple of months.
|
||||
|
||||
We talked about how we see Formbricks develop from solving form infrastructure to becoming an open source alternative to Qualitrcs, what happened with snoopForms and more.
|
||||
|
||||
Some say you hear from YC within a few hours in case they want to invest. On the website it says they'll get back to us within a day or two - let's see how it shakes out.
|
||||
|
||||
Generally, it was super exciting to be invited and look at what we have done and are planning to do through the YC lens 🚀 We got a lot more pumped about size of the opportunity ahead of us!
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 732 KiB |
|
Before Width: | Height: | Size: 23 KiB |
@@ -1,139 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import HeroAnimation from "@/components/shared/HeroAnimation";
|
||||
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
import Eating from "./eating.gif";
|
||||
import FeedbackBox from "./feedback-box.png";
|
||||
import Integrations from "./integrations.png";
|
||||
import OnboardingSurvey from "./onboarding-survey.png";
|
||||
import Stripe from "./stripe.png";
|
||||
import UserView from "./user.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 3rd Feb 2023",
|
||||
description:
|
||||
"We converted our first customer via the waitlist! Apart from that: Another Feedback Box in production, PMF self-serve in the making and more dogfood for us 🐶",
|
||||
date: "2023-02-03",
|
||||
};
|
||||
|
||||
_We converted our first customer via the waitlist! Apart from that: Another Feedback Box in production, PMF self-serve in the making and more dogfood for us 🐶_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
## TLDR:
|
||||
|
||||
- New customer (first one via waitlist) 🎉
|
||||
- Self-serving PMF survey 🏗️
|
||||
- Landing Page
|
||||
- Onboarding segmentation survey
|
||||
- Payment embedded
|
||||
- Bug fixing
|
||||
- Dogfooding Formbricks 🐶
|
||||
- Feedback Box in production on question-aid.com 🤓
|
||||
|
||||
## First customer via waitlist 🎉
|
||||
|
||||
We are currently not promoting the landing page. Nonetheless, we have several people per day filling out our waitlist survey (189 in 2 weeks).
|
||||
|
||||
Yesterday, the first person bought the Early Bird subscription after filling out the form:
|
||||
|
||||
<Image src={Stripe} alt="Stripe Screenshot" className="rounded-lg" />
|
||||
|
||||
## Self-serve PMF survey 🏗️
|
||||
|
||||
While onboarding people for the PMF survey, we noticed the following:
|
||||
|
||||
- The setup still required a lot of manual support which was a lot harder to provide for non-open source companies (couldn’t access code ourselves, long time to production)
|
||||
- Prospects required some material to share within the team to assess if Formbricks adds value
|
||||
- Some were slow to book the onboarding call, requested self-serve
|
||||
|
||||
This is why we decided to improve the self-serve experience.
|
||||
|
||||
### Funnel Design Considerations
|
||||
|
||||
This is how we plan to build an effective funnel:
|
||||
|
||||
1. **Shortest way to experience value**
|
||||
1. Live demo with dummy data
|
||||
2. Video walk-through to provide more context (native embedding, open source)
|
||||
2. **Try tech before you buy + validation**
|
||||
1. Feedback Widget is free to implement and use
|
||||
2. Hard paywall for PMF survey (value experienceable in Demo)
|
||||
3. **Buying pressure**
|
||||
1. 50% off for first year for first 20 buyers
|
||||
2. Waitlist members can get in a day before everyone else
|
||||
|
||||
###
|
||||
|
||||
### What we have built so far
|
||||
|
||||
✅ Landing Page for PMF survey (to be released)
|
||||
|
||||
✅ Onboarding segmentation (frontend)
|
||||
|
||||
✅ Added payment to app
|
||||
|
||||
##
|
||||
|
||||
### What we'll build next week
|
||||
|
||||
▶️ Launch live demo with dummy data
|
||||
|
||||
▶️ Add video walk-through
|
||||
|
||||
▶️ Write docs
|
||||
|
||||
▶️ In-app inline survey (Integrations)
|
||||
|
||||
##
|
||||
|
||||
## Dogfooding Formbricks 🐶
|
||||
|
||||
<Image src={Eating} alt="Eating Dogfood" className="rounded-lg" />
|
||||
|
||||
With the launch of the waitlist we started using Formbricks on a daily basis. So far, from a UX perspective, it’s a pretty standard survey data dashboard: Look at individual responses or aggregated views. Obviously, we aren’t done here.
|
||||
|
||||
### Building Formbricks into Formbricks
|
||||
|
||||
All respondents of the waitlist are fed into a database of users. For each user we create a profile where we gather all additional qualitative data points…
|
||||
|
||||
<Image quality={100} src={UserView} alt="Stripe Screenshot" className="rounded-lg" />
|
||||
|
||||
… like the reponses of the onboarding survey:
|
||||
|
||||
<Image src={OnboardingSurvey} alt="Stripe Screenshot" className="rounded-lg" />
|
||||
|
||||
<Callout title="Data-driven" type="note">
|
||||
Over 50% of waitlist respondents (n=189) requested Onboarding Segmentation. We’re building it into
|
||||
Formbricks to gather more qualitative user data and show users what it could look like in their products 👀
|
||||
</Callout>
|
||||
|
||||
Additionally, we survey users as they explore the product:
|
||||
|
||||
<Image src={Integrations} alt="Stripe Screenshot" className="rounded-lg" />
|
||||
|
||||
Together with the usage data from PostHog we get a very good understanding of how **and - most importantly - why** users came to try out Formbricks.
|
||||
|
||||
Spinning up and implementing these surveys is quick and easy. It is a great way to survey users contextualized to the product experience. Especially in larger products, well-positioned micro-surveys are another powerful tool in the belt of product managers.
|
||||
|
||||
### Working with the user view
|
||||
|
||||
And the best part? Once we’ve released an integration, we can filter our user base according to their answers and communicate highly targeted.
|
||||
|
||||
For products with a larger user base and a more comprehensive set of tools, you can pipe the micro-survey responses to HubSpot / [customer.io](http://customer.io). This allows you to approach current and churned users in a much more granular way because you understand them better.
|
||||
|
||||
## Feedback Box spotted in the wild 🤓
|
||||
|
||||
We spotted another Feedback Box in the wild at [question-aid.com](https://question-aid.com)
|
||||
|
||||
<Image src={FeedbackBox} alt="Stripe Screenshot" className="rounded-lg" />
|
||||
|
||||
## Enjoy your weekends! 🍰
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 79 KiB |
@@ -1,68 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import HeroAnimation from "@/components/shared/HeroAnimation";
|
||||
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
import BestPractices from "./bp.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 3rd March 2023",
|
||||
description:
|
||||
"Working closely with design partners and a new UX approach in the making. Let’s have a not so close look 😉",
|
||||
date: "2023-03-03",
|
||||
};
|
||||
|
||||
_Working closely with design partners and a new UX approach in the making. Let’s have a not so close look 😉_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
## TLDR
|
||||
|
||||
- Working closely with 3 customers
|
||||
- New UX approach
|
||||
- Status Quo
|
||||
|
||||
## Close collaboration with design partners
|
||||
|
||||
We’re working closely with three customers to get the most insights out of their user base. To understand best what they need, we’re doing a lot of manual PM work to weave user research into their products that complements product analytics.
|
||||
|
||||
These collaborations showed us that the current tight focus on Best Practices is not flexible enough. While the general idea of Best Practices resonates well, the technical approach to exactly one way of implementing them is a limitation. To be more flexible, we're reiterating on the technical approach, while sticking with the messaging 👇
|
||||
|
||||
## New UX/DX approach
|
||||
|
||||
Based on these insights and the overall feedback of the ProductHunt launch, we’re reitarting a little bit. While the Best Practice messaging works really well (~500 waitlist signups) the technical approach is limiting. They were hardly adjustable so fitting them to the specific needs of our customers caused quite some technical overhead.
|
||||
|
||||
### Do less while doing more
|
||||
|
||||
Initially, we built a Feedback Box widget and a separate PMF Survey widget. We also built custom dashboards for each survey type. Maintaining both slowed us down and with the Onboarding Survey and Interview Prompt coming up next, we would keep adding to the complexity and move slower with every Best Practice.
|
||||
|
||||
Also, the developer experience wasn’t great. Users had to embed the widgets separately, trigger them separately, etc. This has to be much smoother, easier. After all, the best DX is copy + pasting a code snippet and forgetting about it.
|
||||
|
||||
That’s what we’re building now. A universal widget. A universal dashboard. A solid basis to experiment with.
|
||||
|
||||
### Whats happening with Best Practices?
|
||||
|
||||
<Image src={BestPractices} alt="Best Practices" className="rounded-lg" />
|
||||
|
||||
The Best Practice approach is really popular and resonates well. We’re evaluating different options on how we can bring these specific use cases onto the Formbricks platform. As a truly open-source forms and survey platform, a WordPress-like App Store could be cool. This would have lots of benefits:
|
||||
|
||||
- Users can add specific functionality as they need it. It doesn’t make sense to clutter the UI with 50 different form and survey use cases, if you only need 3.
|
||||
- The community can build custom plugins to add functionality they need. Think about custom UIs for in-app surveys, managing industry-specific responses, custom exports, integrations, etc.
|
||||
- Specific functionality (e.g. like managing 1:1 interviews with an auto-interview scheduler) could live in it’s own space instead of being dragged through the whole product from the start.
|
||||
|
||||
Such an app store is certainly something for the medium-term. However, we’re excited about the prospect of housing a large variety of in-app survey needs while keeping the core product fast and nimble.
|
||||
|
||||
## Status Quo
|
||||
|
||||
We’ve sketched out the UI, sorted all features for the next and subsequent version and dove in building it out. While we have most of the pieces ready, some might take a couple of days to build (e.g. setting up events inside the Formbricks interface to trigger in-product surveys).
|
||||
|
||||
Really cool stuff coming up, stay tuned!
|
||||
|
||||
## Happy Friday 🎉
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 284 KiB |
|
Before Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 7.9 KiB |
@@ -1,101 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import ResponsiveEmbed from "react-responsive-embed";
|
||||
|
||||
import Result from "./feedback-result.png";
|
||||
import Pipeline from "./feedback-pipelines.png";
|
||||
import CalcomPreview from "./calcom-integration-preview.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 6th Jan 2023",
|
||||
description:
|
||||
"Happy new year to all of you (and happy birthday to Johannes 🎂). The Feedback Box turned out to be more tricky to embed with a truly native look & feel. Let’s have a look in detail 👇",
|
||||
date: "2023-01-06",
|
||||
};
|
||||
|
||||
_Happy new year to all of you (and happy birthday to Johannes 🎂). The Feedback Box turned out to be more tricky to embed with a truly native look & feel. Let’s have a look:_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
## Highlights
|
||||
|
||||
- Config for styling Feedback Box pop-up shipped
|
||||
- Pipelines added to XM Dashboard
|
||||
- PR for [cal.com](http://cal.com) Feedback Box (prototype)
|
||||
- Right now: Separating wrapper from content
|
||||
- Johannes moving to Kiel
|
||||
|
||||
## Styling the Feedback Box via config
|
||||
|
||||
We see potential in building Formbricks as embedded SaaS: Unlike Typeform, we do not try to stand out with a recognizable UI but allow our customers to natively embed the user touch points into their UIs. We do this for two reasons:
|
||||
|
||||
- It feels more targeted which leads to higher conversion rates (to be proven)
|
||||
- Product-minded founders don’t like cluttering their UI
|
||||
|
||||
A first start is styling the feedback Box with the config. Here is an example:
|
||||
|
||||
```tsx
|
||||
config: {
|
||||
hqUrl: "http://localhost:3000", // or Formbricks Cloud
|
||||
formId: "clcg4dewt0000yz267XXXXXX",
|
||||
contact: {
|
||||
name: "Matti",
|
||||
position: "Co-Founder",
|
||||
imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
|
||||
},
|
||||
customer: { // are dynamically replaced dependent on respondent
|
||||
id: "test@formbricks.com", // helps merging data with analytics insights
|
||||
name: "Test Customer", // helps to address users personally in subsequent surveys
|
||||
email: "test@formbricks.com", // helps to follow up fast
|
||||
},
|
||||
style: {
|
||||
brandColor: "#00C4B8",
|
||||
headerBGColor: "#E5E7EB",
|
||||
headerTitleColor: "#4B5563",
|
||||
boxBGColor: "#F9FAFB",
|
||||
textColor: "#374151",
|
||||
buttonHoverColor: "#F3F4F6",
|
||||
},
|
||||
```
|
||||
|
||||
The config above spits out the following feedback box. Play around with it!
|
||||
|
||||
It's working, feel free to submit your feedback :)
|
||||
|
||||
## Pipelines added to XM Dashboard
|
||||
|
||||
Reacting rapidly on user feedback gives companies an edge. Until we have built more functionality for handling feedback in our dashboard we added pipelines. Now it’s possible to forward feedback you receive to any destination using email or webhooks.
|
||||
|
||||
<Image src={Pipeline} alt="Feedback Pipelines" className="rounded-lg" />
|
||||
|
||||
_After all, the modules we built for Formbricks come in handy here and there :)_
|
||||
|
||||
## PR at [Cal.com](https://cal.com) repo for Feedback Box
|
||||
|
||||
We’ve embedded the prototype of the feedback box into Cal.com and will open a PR in the coming days to get feedback from the team. We aren’t fully satisfied with the result yet: it still feels like an alien element in the UI. To tackle that, we start working on a task we planned for the next use case: separating the form content from the wrapper (see next point).
|
||||
|
||||
<Image src={CalcomPreview} alt="Calcom Preview" className="rounded-lg" />
|
||||
|
||||
## Seperating wrapper from content
|
||||
|
||||
We have to do more tweaking to get to a result which is
|
||||
|
||||
- easily embedabble in any web UI and
|
||||
- easily adaptable to any look & feel
|
||||
- maintainable
|
||||
|
||||
To achieve this, we have to do quite a bit of the groundwork we hoped to postpone until we build out the next best practice: The Product-Market Fit Survey survey. We’ll now separate the content from the wrapper to gain flexibility. Many SaaS products have a standard wrapper we want to be able to easily use for a consistent look & feel.
|
||||
|
||||
## Moving to Kiel
|
||||
|
||||
Johannes will spend at least two months in Matti’s home town Kiel. While remote work works when it’s very clear what the tasks and goals are, we both felt that it will be beneficial to work closely together to get Formbricks on track.
|
||||
|
||||
##
|
||||
|
||||
# All the best for 2023 🎆
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 26 KiB |
@@ -1,103 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
|
||||
import HQ1 from "./hq-1.webp";
|
||||
import HQAPI from "./hq-api.webp";
|
||||
import HQOverview from "./hq-overview.webp";
|
||||
import HQSummary from "./hq-summary.webp";
|
||||
import NPS1 from "./NPS-filled-out.webp";
|
||||
import NPS2 from "./NPS-feedback-summary.webp";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 9th Dec 2022",
|
||||
description:
|
||||
"We launched the Formbricks HQ - and with it our Cloud offering is back! Apart from that, we’re building use cases to get you the insights that you need.",
|
||||
date: "2022-12-09",
|
||||
};
|
||||
|
||||
_We launched the Formbricks HQ - and with it our Cloud offering is back! Apart from that, we’re building use cases to get you the insights that you need. But let’s look at it 👇_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
### Highlights
|
||||
|
||||
- We launched [Formbricks HQ](https://hq.formbricks.com) 🤸
|
||||
- Native NPS survey use case built 📊
|
||||
- YC Interview Round 2 coming up 🍊
|
||||
|
||||
##
|
||||
|
||||
# Formbricks HQ is live!
|
||||
|
||||
<Image src={HQ1} alt="Formbricks HQ Screenshot" className="rounded-lg" />
|
||||
|
||||
The Formbricks HQ - and with it the Formbricks Cloud - is here. What is it and what can you do with it?
|
||||
|
||||
Let’s find out:
|
||||
|
||||
- Pipe data from any type of form to the API
|
||||
- View submissions
|
||||
- Forward submissions via Email
|
||||
- Forward submissions via Webhook
|
||||
|
||||
Here is an [in-depth comparison to a similar tool](/vs-formspree), which is not open source.
|
||||
|
||||
Have a look:
|
||||
|
||||
<Image src={HQAPI} alt="Formbricks HQ Screenshot" className="rounded-lg" />
|
||||
After you created a form you get an API to POST any form data to.
|
||||
|
||||
<Image src={HQOverview} alt="Formbricks HQ Screenshot" className="rounded-lg" />
|
||||
If you send a [schema](/docs/formbricks-hq/schema) along, Formbricks HQ will chart your data.
|
||||
|
||||
<Image src={HQSummary} alt="Formbricks HQ Screenshot" className="rounded-lg" />
|
||||
You can also view all submissions in a table.
|
||||
|
||||
## How are Formbricks and snoopForms different?
|
||||
|
||||
In our Discord we were asked how Formbricks and the first iteration called _snoopForms_ are different. In a nutshell:
|
||||
|
||||
**Formbricks is more modular **and** more specific.**
|
||||
|
||||
How is that possible? And why are you building it that way?
|
||||
|
||||
After we launched snoopforms, a typical monolythic solution, we found that engineers took it apart to build use cases different to what we had in mind. Which is great! We decided to do two things:
|
||||
|
||||
1. Build a modular infrastructure to allow maximum flexibility for engineers
|
||||
2. Build more specific use cases on top of it to move closer to the Job To Be Done
|
||||
|
||||
In practice, this means that instead of building “one solution for all use cases” (which is what Typeform is) we are building a set of LEGOs for engineers to build **specific solutions for specific problems.** Examples are Bug Report Forms, Feature Request Widgets, Docs Feedback or User Polling - to name a few.
|
||||
|
||||
The beauty of open source is that you are able to build exactly what you need, natively integrated into your app.
|
||||
|
||||
##
|
||||
|
||||
# Native NPS Survey build with Formbricks
|
||||
|
||||
After live user polling, we’ve dogfooded our own tech to build an NPS survey natively. We wrote more about it in our launch blog post yesterday. Check it out for all the details, here is a sneak peak:
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-1">
|
||||
<div>
|
||||
<Image src={NPS1} alt="NPS natively embedded into app" className="rounded-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<Image src={NPS2} alt="Results summary" className="rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
[Here is a detailed description of how we built it.](/blog/weekly-update-021222)
|
||||
|
||||
##
|
||||
|
||||
# YC Interview Round 2
|
||||
|
||||
YC isn’t done with us yet. They invited is for a second interview early next week. Let’s see if we can convince a different set of partners of the potential of Formbricks 🤞 Keep you posted!
|
||||
|
||||
### Until then, enjoy your weekend!
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 428 KiB |
@@ -1,71 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import HeroAnimation from "@/components/shared/HeroAnimation";
|
||||
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
import OnboadingSurvey from "./onboarding-survey.png";
|
||||
import OnboadingNotification from "./onboarding-notification.png";
|
||||
import IntegrationSurvey from "./integration-survey.png";
|
||||
import DemoDashboard from "./demo-dashboard.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 10th Feb 2023",
|
||||
description:
|
||||
"We converted another customer and continued to productize the Product-Market Fit survey. Check out our new demo dashboard 🕺",
|
||||
date: "2023-02-10",
|
||||
};
|
||||
|
||||
_We converted another customer and continued to productize the Product-Market Fit survey. Check out our new demo dashboard 🕺_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
## TLDR:
|
||||
|
||||
- We acquired a new paying customer 🎉
|
||||
- New Onboarding Survey embedded in Formbricks
|
||||
- New inline survey to learn what integration to build first
|
||||
- Try before you buy with our new demo dashboard
|
||||
- New docs are online 📗
|
||||
|
||||
## New Onboarding Survey embedded in Formbricks
|
||||
|
||||
We are staying true to our approach to using Formbricks to learn more about our users.
|
||||
This week, we embedded an Onboarding Survey that gives us insights about every user who signs up to Formbricks and surfaces these insights us in our team's Slack workspace.
|
||||
|
||||
<Image src={OnboadingSurvey} alt="New Formbricks Onboarding Survey" className="rounded-lg" />
|
||||
|
||||
<Image
|
||||
src={OnboadingNotification}
|
||||
alt="Slack notification for new onboarding responses"
|
||||
className="rounded-lg"
|
||||
/>
|
||||
|
||||
## New inline survey to learn what integration to build first
|
||||
|
||||
One of the next big steps for Formbricks is to make it fit perfectly into existing tech and analytics stack. It should be possible to import user corhorts and other analytics data from tools like Posthog, enrich it with results from targeted micro-surveys you run with Formbricks, and sync your user profile with Hubspot to optimize your sales process.
|
||||
To learn what tools our customers are using and what integrations we need to build first, we built an inline survey in the integrations tab. The results are neatly summarized by Formbricks and also sent to our team's Slack workspace.
|
||||
|
||||
<Image src={IntegrationSurvey} alt="New Formbricks Integration Survey" className="rounded-lg" />
|
||||
|
||||
## See Formbricks in action before you buy
|
||||
|
||||
We want to show our users the power of Formbricks before they start a survey on their own. That’s why this week we have built a demo dashboard that shows you what a Product Market Fit survey in Formbricks looks like and allows you to play with the data and draw conclusions and actions for this fictional case. You can play around with the demo dashboard at [https://app.formbricks.com/demo](https://app.formbricks.com/demo)
|
||||
|
||||
<Image src={DemoDashboard} alt="Formbricks Demo Dashboard" className="rounded-lg" />
|
||||
|
||||
## New docs are online
|
||||
|
||||
We have rewritten our docs to help users embed Formbricks into their apps. Formbricks supports all major frontends with it's plain javascript widgets, but also supports customization. Check out our new documentation at [https://formbricks.com/docs](https://formbricks.com/docs)
|
||||
|
||||
## What's next?
|
||||
|
||||
In the last two weeks we have come a long way in polishing Formbricks and we are ready to onboard more users. Next week we will be onboarding most of our current waitlist subscribers to the Product Market Fit survey - we are super excited to gather more feedback on the current product.
|
||||
|
||||
## Enjoy your weekends! 🍰
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 310 KiB |
|
Before Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 168 KiB |
@@ -1,34 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import HeroAnimation from "@/components/shared/HeroAnimation";
|
||||
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import Ship from "./ship.gif";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 10th March 2023",
|
||||
description: "🚢🚢🚢",
|
||||
date: "2023-03-10",
|
||||
};
|
||||
|
||||
_🚢🚢🚢_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
## TLDR
|
||||
|
||||
- 🚢
|
||||
- 🚢🚢
|
||||
- 🚢🚢🚢
|
||||
|
||||
## We're making good progress on all parts, stay tuned!
|
||||
|
||||
<Image src={Ship} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
## Enjoy your weekends 🎉
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 3.5 MiB |
|
Before Width: | Height: | Size: 13 KiB |
@@ -1,79 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import ResponsiveEmbed from "react-responsive-embed";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
import CrowdDev from "./crowddev-feedback-box.png";
|
||||
import SlackPipeline from "./slack-pipeline.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 13th Jan 2023",
|
||||
description:
|
||||
"The year kicked off and with it, we’re picking up momentum again. Our niche of B2B SaaS looks promising, we see first signs of validation. Let’s have a closer look 👇",
|
||||
date: "2023-01-13",
|
||||
};
|
||||
|
||||
_The year kicked off and with it, we’re picking up momentum again. Our niche of B2B SaaS looks promising, we see first signs of validation. Let’s have a closer look 👇_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
## TLDR
|
||||
|
||||
- Feedback Box in production 😍
|
||||
- Slack Notification Pipeline 🚀
|
||||
- More founder conversations, problem validation progressing
|
||||
- Roadmap set for next few weeks
|
||||
|
||||
## Feedback Box in production
|
||||
|
||||
Yesterday, [crowd.dev](http://crowd.dev) merged our PR and put the first ever Formbricks feedback box live! It's really cool to see it out in the wild 🐅
|
||||
|
||||
<Image src={CrowdDev} alt="Feedback Box on crowd.dev" className="rounded-lg" />
|
||||
_Go check it out at [crowd.dev](http://crowd.dev) - signing up is a good idea anyways 😉_
|
||||
|
||||
We opened a PR in another repo today and have several more conversations going. It’s great working with other open source companies because we can implement the tech ourselves and learn what’s working.
|
||||
|
||||
We plan to release a self-serve version of the Box in the coming weeks. Right now our approach remains the “Stripe installation” to keep learning fast.
|
||||
|
||||
<Callout title="The Stripe Installation" type="note">
|
||||
Infamously, the Collison brothers took the laptops of their fellow YC founders and installed Stripe
|
||||
manually. This allowed them to get it live fast and experience the short-comings of Stripe's developer
|
||||
experience first-hand.
|
||||
</Callout>
|
||||
|
||||
## Slack Notification Pipeline
|
||||
|
||||
<Image
|
||||
src={SlackPipeline}
|
||||
alt="Pipe Feedback into the Slack channels of your choice"
|
||||
className="rounded-lg"
|
||||
/>
|
||||
_We want to make the feedback collected via the widget as easily accessible as possible._
|
||||
|
||||
On request from crowd.dev, we added a new Pipeline to the Formbricks HQ: Now you can receive a notification for new feedback submissions directly into Slack workspaces.
|
||||
|
||||
It's a best practice to react on user feedback as quickly as possible. Piping it into Slack is an easy way to notify the team about incoming feedback.
|
||||
|
||||
## More founder conversations, problem getting sharper
|
||||
|
||||
We talked to more founders and learned quite a bit about the current approaches for gathering qualitative user feedback. It is a mostly manual process which is often completely decoupled from the in-app experience.
|
||||
|
||||
We’re building more and more conviction that the product we have in mind will add significant value in several stages of building a SaaS product. It’s cool to see that niching down to one target group and their problems allows us to go deep. This wasn’t possible while building general form infrastructure.
|
||||
|
||||
What’s remarkable is that pretty much **every** founder we talk to ran the Product-Market Fit Survey survey. The tooling and reliabilty of results differ quite a bit. In all cases, it’s a manual, error-prone and time-consuming process 👀
|
||||
|
||||
## Roadmap set for next weeks
|
||||
|
||||
Now that we both live in the same city, it’s easier to align. With traction building up and an eye towards raising a pre-seed, we walked backwards from where we would like to be with the product to keep the fundraising process short.
|
||||
|
||||
Next up is updating our public communitcation and building the PMF survey with our design partners while dogfooding our product. Stay tuned!
|
||||
|
||||
##
|
||||
|
||||
# Enjoy your weekends!
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 46 KiB |
@@ -1,69 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
|
||||
import FBBox1 from "./feedback-box-1.png";
|
||||
import FBBox2 from "./feedback-box-2.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 16th Dec 2022",
|
||||
description:
|
||||
"Happy Friday! Another week is over, another YC interview done 😄 We decided to niche down, found two design partners and with them secured the first MRR. What happened exactly?",
|
||||
date: "2022-12-16",
|
||||
};
|
||||
|
||||
_Happy Friday! Another week is over, another YC interview done 😄 We decided to niche down, found two design partners and with them secured the first MRR. What happened exactly?_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
### Highlights
|
||||
|
||||
- Niching down: Building Feedback Box first
|
||||
- $100 MRR for collaboration with two SaaS companies 🎉
|
||||
- Second YC Interview
|
||||
|
||||
### Niching down: The Feedback Box
|
||||
|
||||
Next week we’ll release a longer article on our journey from “Typeform OS” to “Modular Form & Survey Infrastructure” to “Survey needs of SaaS companies”. For now, let’s have a look at the mock-up of the Feedback Box we are building:
|
||||
|
||||
<Image src={FBBox1} alt="Feedback Box Mock Up" className="rounded-lg" />
|
||||
|
||||
### First two customers acquired, first MRR 🎉
|
||||
|
||||
We acquired two SaaS companies as customers with a set of different survey needs. The overall objective is to open up and maintain a continuous channel to learn from users. Both are in need of a conversion-optimized Feedback widget they can self-host. Here were the requirements and how we address themthem:
|
||||
|
||||
- Very little dev attention needed for setup and maintenance
|
||||
|
||||
**→ One snippet to embed**
|
||||
|
||||
- Gives respondents the feeling that they are listened to and the feedback is acted upon
|
||||
|
||||
**→ Founder / Head of Product as recipient**
|
||||
|
||||
- Makes users reply in a polite way
|
||||
|
||||
**→ Highlighting that there are people on the other end**
|
||||
|
||||
- Have users share positive feedback to be used as testimonial (and increase team morale)
|
||||
|
||||
**→ “I like something” option**
|
||||
|
||||
- Easy to act upon
|
||||
|
||||
**→ One click to email back with template, later integration with Linear / GitHub issues**
|
||||
|
||||
<Image src={FBBox2} alt="Feedback Box Mock Up 2" className="rounded-lg" />
|
||||
|
||||
### 2nd YC Interview
|
||||
|
||||
On Tuesday night we had our second YC interview. This time, we didn’t prepare too much and it went similar to the last one: It was a friendly chat about what we are building and why.
|
||||
|
||||
We haven’t yet heared back from them, you’ll hear about the decision in the next Weekly 😃
|
||||
|
||||
### Until then, enjoy your weekend!
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 18 KiB |
@@ -1,72 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import HeroAnimation from "@/components/shared/HeroAnimation";
|
||||
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
import AI1 from "./ai-1.jpg";
|
||||
import AI2 from "./ai-2.jpg";
|
||||
import PH from "./ph.jpg";
|
||||
import Superhuman from "./superhuman.jpg";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 17th Feb 2023",
|
||||
description:
|
||||
"ProductHunt launch of the Product-Market Fit survey, UI improvements, Superhuman Report, AI considerations. Let’s have a closer look:",
|
||||
date: "2023-02-17",
|
||||
};
|
||||
|
||||
_ProductHunt launch of the Product-Market Fit survey, UI improvements, Superhuman Report, AI considerations. Let’s have a closer look:_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
## TLDR:
|
||||
|
||||
- Launched on ProductHunt with PMF survey, ranked #6
|
||||
- User tests and UI improvements
|
||||
- Superhuman reshaped as report
|
||||
- AI considerations
|
||||
|
||||
## Product-Hunt launch of PMF survey
|
||||
|
||||
Yesterday, we launched the [PMF survey on ProductHunt.](https://www.producthunt.com/posts/product-market-fit-survey-by-formbricks) We ended up 6th for the day with 145 upvotes - an alright result:
|
||||
|
||||
<Image src={PH} alt="Product Hunt Launch" className="rounded-lg" />
|
||||
|
||||
We got some inbound from VC, a lot of valuable feedback and new users signing up testing out the product. We added artificial friction by requesting people to add their creditcards to be able to test the Product-Market Fit survey.
|
||||
|
||||
Here is the [Landing Page](https://formbricks.com/pmf) and the [Demo dashboard](https://formbricks.com/demo) we used to convert users.
|
||||
|
||||
## User tests, UI improvements, Superhuman as a Report
|
||||
|
||||
We performed a few user tests with the PMF dashboard and improved the UI. We also reworked the Superhuman Dashboard to be understood more as a report. We auto-select the segment with the largest share of “very disappointed” users and display the insights accordingly to seperate the signal from the noise.
|
||||
|
||||
<Image src={Superhuman} alt="Superhuman PMF Report" className="rounded-lg" />
|
||||
|
||||
_This is a riff of how we understand the difference between Qualtrics (experience management) and Typeform (form generation): We guide our users to get the insights they need to make a business decision vs. allowing them to make pretty forms. [See it live here.](https://formbricks.com/demo)_
|
||||
|
||||
## AI-cing on the cake
|
||||
|
||||
(excuse the pun).
|
||||
|
||||
We tinkered a bit on how AI can make our dashboard more informative. Sooner or later we want to leverage Matti's extensive background in machine learning.
|
||||
|
||||
It’s a bit of a slippery slope as most product teams want full control over the data they gather. This forbids letting AI take over core tasks product managers and founders want to do themselves.
|
||||
|
||||
But it can support the process, especially with large amounts of qualitative data:
|
||||
|
||||
**Summarize the main benefit users derive from a product:**
|
||||
|
||||
<Image src={AI1} alt="How AI can make Formbricks better" className="rounded-lg" />
|
||||
|
||||
**Identify top improvements to work on:**
|
||||
|
||||
<Image src={AI2} alt="How AI can make Formbricks better 2" className="rounded-lg" />
|
||||
|
||||
## Enjoy your weekends! 🤸♀️
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 49 KiB |
@@ -1,96 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import Mockup from "./demo mockup for formbricks hq open source form and survey tool.png";
|
||||
import NewLogo from "./formbricks new logo mockup community feedback.png";
|
||||
import Community from "./community feedback logo and name.png";
|
||||
import Storybook from "./storybook for formbricks survey form builder.png";
|
||||
import HeaderImage from "./weeklyupdate.png";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 18th Nov 2022",
|
||||
description:
|
||||
"Every week, we’ll share an update about all things Formbricks. We’ll look at what we did on the product end as well as what’s new in the community 👋 Let’s get going!",
|
||||
date: "2022-11-18",
|
||||
};
|
||||
|
||||
_Every week, we’ll share an update about all things Formbricks. We’ll look at what we did on the product end as well as what’s new in the community 👋 Let’s get going!_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
# Product
|
||||
|
||||
### Formbricks React
|
||||
|
||||
Matti has been working on the first release of the Formbricks React Library. Here are the objectives:
|
||||
|
||||
- Make it as easy as possible to build forms in react even with more complex components like ratings or color pickers.
|
||||
- Allow component-based approach to building forms like so:
|
||||
|
||||
```jsx
|
||||
<TextArea name="firstname" label="What's your first name?" validation="required” />
|
||||
```
|
||||
|
||||
- Keep rerenders at a minimum
|
||||
- Keep package size at a minimum while offering more than HTML inputs out of the box
|
||||
|
||||
**Challenge**: Tree-shaking has been tricky. We want to offer input types like sliders and date pickers out of the box. To keep the library performant these components should only be included in the build when they are actually used. The tree-shaking has been tricky, but Matti made good progress yesterday.
|
||||
|
||||
### Formbricks “HQ”
|
||||
|
||||
Since down the line there will be apps running on our platform we decided to call our own application “Formbricks HQ”. Here is a demo of the first iteration, it’ll look like this:
|
||||
|
||||
<Image
|
||||
src={Mockup}
|
||||
alt="Mockup of Formbricks HQ to manage form and survey data self hosted open source"
|
||||
className="rounded-lg"
|
||||
/>
|
||||
|
||||
**In the first version of the HQ you will be able to:**
|
||||
|
||||
- Receive form submissions from any form
|
||||
- View & manage submissions
|
||||
- Webhook submission data where you need it
|
||||
- Email submission data where you need it
|
||||
|
||||
### SEO
|
||||
|
||||
We have created 5 long-taily SEO pages to drive organic traffic to Formbricks in the medium-term. It can take a couple of months to rank high and we want to be up there when the public beta is ready 🚀
|
||||
|
||||
If you’re curious you find them [here](/best-react-form-library-2023), [here](/vs-formspree), [here](/vs-google-forms), [here](/vs-ohmyform) and [here](/vs-react-hook-form). We added them to the sitemap but do not yet link to them on our website because the product isn’t there yet.
|
||||
|
||||
##
|
||||
|
||||
# Community
|
||||
|
||||
Shoutout to [@Ari](https://twitter.com/aridutilh) from buildersgroop and Dylan from Canu for sharing feedback on the Logo:
|
||||
|
||||
<Image src={Community} alt="Screenshot from Discord with Community Feedback" className="rounded-lg" />
|
||||
|
||||
We heard you and Matti and his wife made it their weekend project to come up with a slicker one:
|
||||
|
||||
<Image src={NewLogo} alt="Formbricks new and old logo" className="rounded-lg" />
|
||||
|
||||
### Exploring Storybook
|
||||
|
||||
Johannes is exploring Storybook. In the medium-term we want to provide you guys with a well-documented set of UI components to build your form solutions faster.
|
||||
|
||||
Additionally, it will make community contributions a lot easier and more valuable to the rest of the community since the look & feel will be consistent.
|
||||
|
||||
Thirdly, in the long-term we want to encourage other builders to build apps to cover specific use cases around working with qualitative data on top of Formbricks.
|
||||
|
||||
Setting things up correctly now will save everyone time down the line.
|
||||
|
||||
<Image src={Storybook} alt="Formbricks new and old logo" className="rounded-lg" />
|
||||
|
||||
### Twitter
|
||||
|
||||
We started being more active on Twitter again. [Say Hi 👋](https://twitter.com/formbricks)
|
||||
|
||||
Let’s hope Elon doesn’t break it too soon.
|
||||
|
||||
## Have a great weekend!
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 20 KiB |
@@ -1,107 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import ResponsiveEmbed from "react-responsive-embed";
|
||||
import HeroAnimation from "@/components/shared/HeroAnimation";
|
||||
|
||||
import hackPMF from "./hackPMF-2.png";
|
||||
import Waitlist from "./waitlist.png";
|
||||
import pmfMock from "./pmfmock.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 20th Jan 2023",
|
||||
description:
|
||||
"We’ve been 🚢ing: Big landing page update, new survey engine, PMF prototype in the making. Let’s have a closer look at what we worked on this week.",
|
||||
date: "2023-01-20",
|
||||
};
|
||||
|
||||
_We’ve been 🚢ing: Big landing page update, new survey engine, PMF prototype in the making. Let’s have a closer look at what we worked on this week 👇_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
### TLDR
|
||||
|
||||
- Big update on the landing page to reflect niching down
|
||||
- Survey engine v0.1
|
||||
- New validation approach implemented, waitlist built
|
||||
- PMF survey prototyped
|
||||
|
||||
<HeroAnimation />
|
||||
|
||||
## Landing Page Update
|
||||
|
||||
We’ve talked about niching down in our Weekly for some time already, but it wasn’t reflected on the landing page. As we are reaching out to more and more potential design partners, we revamped the landing page. Most obvious changes:
|
||||
|
||||
- Directly address pains and gains of target audience
|
||||
- Removed everything related to “Open source Form and Survey Infrastructure”
|
||||
- Added Waitlist survey (built with survey engine)
|
||||
|
||||
<Image src={hackPMF} alt="Landing Page Update" className="rounded-lg" />
|
||||
_Addressing technical founders and growth engineers._
|
||||
|
||||
## New validation approach
|
||||
|
||||
Instead of making our prototypes available to the public we decided to add a layer of friction. It doesn’t help us when people create an account, click around and never come back.
|
||||
|
||||
Instead, we’re going into a deeper conversation with users who fit our target persona - and ask everyone else to hold out until we’ve built a product which provides substatial value for a small set of users. What does it mean in practice?
|
||||
|
||||
<Image src={Waitlist} alt="Screenshot Landing Page Waitlist" className="rounded-lg" />
|
||||
|
||||
_If they don’t fill out this survey, they don’t have a pressing problem._
|
||||
|
||||
In practice this means that we took down the public sign up and added a waitlist survey. The waitlist contains quite a few questions which is intentional: If people are not willing to take 5 minutes to answer a few questions, they are unlikely to take up with the additional time and attention of being a design partner. Only if they have a pressing problem, we should take their feedback into account.
|
||||
|
||||
## Survey engine v0.1
|
||||
|
||||
We’ve developed an engine which can generate surveys based on a schema. This engine will be the technical foundation for all upcoming surveys. It allows us to:
|
||||
|
||||
- Decouple the content of the surveys from the user interface in which they are shown. We can standardize the survey content in our backend and stay flexible on how customers want to put the surveys in front of their users.
|
||||
- Later on, we can rather quickly build a visual survey builder to manipulate the schema. This way, customers can change survey content in the Formbricks dashboard instead of having to dive into their frontend code.
|
||||
|
||||
```tsx
|
||||
{
|
||||
id: "rolePage",
|
||||
config: {
|
||||
autoSubmit: true,
|
||||
},
|
||||
elements: [
|
||||
{
|
||||
id: "role",
|
||||
type: "radio",
|
||||
label: "How would you describe your role?",
|
||||
name: "role",
|
||||
options: [
|
||||
{ label: "Founder", value: "founder", frontend: { icon: FounderIcon } },
|
||||
{
|
||||
label: "Product Manager",
|
||||
value: "productManager",
|
||||
frontend: { icon: LaptopWorkerIcon },
|
||||
},
|
||||
{ label: "Engineer", value: "engineer", frontend: { icon: EngineerIcon } },
|
||||
],
|
||||
component: IconRadio,
|
||||
},
|
||||
],
|
||||
},
|
||||
```
|
||||
|
||||
_A glimpse into the schema, [see the whole thing here.](https://github.com/formbricks/formbricks/blob/main/apps/formbricks-com/pages/waitlist.tsx)_
|
||||
|
||||
### PMF Prototype in the making
|
||||
|
||||
With the new survey engine at hand, we’re proceeding to building the first proper survey. We’ll focus on the Product-Market Fit Survey survey as a lot of SaaS founder ran it in the past with a subpar experience.
|
||||
|
||||
The survey is built quick. Getting that native look & feel with the product will require some investigation. We haven’t yet determined the right balance between custom frontend code built by the user and easy implementation of prestyled components.
|
||||
|
||||
<Image src={pmfMock} alt="PMF Mock Up" className="rounded-lg" />
|
||||
|
||||
_Most founders email out their surveys. We focus on delivering a 10x better conversion rate to get people to try out Formbricks._
|
||||
|
||||
##
|
||||
|
||||
# Check out our [new Landing Page!](https://formbricks.com)
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 15 KiB |
@@ -1,50 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import HeroAnimation from "@/components/shared/HeroAnimation";
|
||||
|
||||
import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
import Tagging from "./tagging.png";
|
||||
import UserActions from "./useractions.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 24th Feb 2023",
|
||||
description: "Submission tagging, user actions and bug fixes. Let's have a closer look:",
|
||||
date: "2023-02-24",
|
||||
};
|
||||
|
||||
_Submission tagging, user actions and work on universal widget. Let's have a closer look:_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
## TLDR:
|
||||
|
||||
- Submission tagging
|
||||
- User actions
|
||||
- Universal widget
|
||||
|
||||
## Submission tagging
|
||||
|
||||
Early user requested a better way to organize submissions. You can now tag submissions and filter accordingly. This is useful if you want to group submissions by a certain attribute:
|
||||
|
||||
<Image src={Tagging} quality={100} alt="Submission Tagging" className="rounded-lg" />
|
||||
|
||||
## User actions
|
||||
|
||||
To keep your user base tidy, you can now delete users. Additionally, you can send them an email with the click of a button.
|
||||
|
||||
As soon as we have built the in-app interview prompt, you can invitie single users to take part in a 1:1 interview via an in-app prompt.
|
||||
|
||||
<Image src={UserActions} quality={100} alt="User Actions" className="rounded-lg" />
|
||||
|
||||
We're currently working on a universal widget to create any kind of in-app survey. This allows us to cater to more use cases and provide a more flexible solution.
|
||||
|
||||
We'll keep you posted ✌️
|
||||
|
||||
## Enjoy your weekends! 🤸♀️
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 49 KiB |
@@ -1,111 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeroAnimation from "@/components/shared/HeroAnimation";
|
||||
import HeaderImage from "./weeklyupdate.png";
|
||||
import POC from "./proof-of-concept.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 25th Nov 2022",
|
||||
description:
|
||||
"Every week, we’ll share an update about all things Formbricks. This week we shipped, wrote docs, talked about a feedback app built on top of snoopForms and prepped for the YC interview! 👉",
|
||||
date: "2022-11-25",
|
||||
};
|
||||
|
||||
_This week we shipped Formbricks React v0.1 and v0.2, wrote lots of docs, talked about a feedback app built on top of snoopForms and prepped for the upcoming YC interview! 🤸_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
# Highlights
|
||||
|
||||
- shipped Formbricks React 🚢
|
||||
- met devs who built a feedback solution with snoopForms 🦝
|
||||
- got invited to YC interview 🍊
|
||||
|
||||
Let's dive in!
|
||||
|
||||
##
|
||||
|
||||
# Product
|
||||
|
||||
### Launched Formbricks React Library 🥳
|
||||
|
||||
We launched v0.1 and v0.2 of the Formbricks React Library.
|
||||
|
||||
- **Why?** Make it as easy as possible to build forms in React
|
||||
- **How?** Offering all essential form functionality out of the box
|
||||
- **What?** Lots of input components, validation, easy styling, easy multi-step forms, i18n, a11y and everything else you need when building forms in React.
|
||||
|
||||
Have a look at this example:
|
||||
|
||||
```jsx
|
||||
import { Form, Text, Email, Checkbox, Submit } from "@formbricks/react";
|
||||
import "@formbricks/react/styles.css";
|
||||
|
||||
export default function WaitlistForm() {
|
||||
return (
|
||||
<Form onSubmit={({ data, schema }) => console.log("data:", data, "schema:", schema)}>
|
||||
<Text name="name" label="What's your name?" validation="required" />
|
||||
<Email
|
||||
name="email"
|
||||
label="What's your email address?"
|
||||
placeholder="you@example.com"
|
||||
validation="required|email"
|
||||
/>
|
||||
<Checkbox
|
||||
name="terms"
|
||||
label="Terms & Conditions"
|
||||
help="To use our service, please accept."
|
||||
validation="accepted"
|
||||
/>
|
||||
<Submit label="Let's go!" />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
A lot more information in the [Docs, check them out!](/docs/react-form-library/introduction)
|
||||
|
||||
### What's next for Formbricks React?
|
||||
|
||||
In the upcoming week we're not planning to add more features to it. We'll first ship a version of the Formbricks HQ to offer an end-to-end solution from form creation to submission handling to analysis 👇
|
||||
|
||||
## Formbricks HQ Demo
|
||||
|
||||
With the YC interview coming up next week, we decided to build an end-to-end demo. We're not focussing on production readiness for now. Expect to get your fingers on it the week after!
|
||||
|
||||
<HeroAnimation />
|
||||
|
||||
## Feedback tool for the State of Geneva, Switzerland
|
||||
|
||||
We were delighted to find out that a digital agency built a POC for a feedback functionality in an e-learning offer from the state of Geneva, Switzerland.
|
||||
|
||||
In the call we learned a lot about why they chose snoopForms (privacy-first), how their developer experience has been (pretty good) and what they need in the future.
|
||||
|
||||
They are working on a more comprehensive offer for forms & surveys for the Swiss market built on top of Formbricks!
|
||||
|
||||
So exciting for us to see that our product and positioning resonates so well 😊
|
||||
|
||||
<Image src={POC} alt="SCreenshot from feedback tool built with snoopforms" className="rounded-lg" />
|
||||
|
||||
##
|
||||
|
||||
# Community
|
||||
|
||||
Shoutout to octalpixel and [Akshu](https://twitter.com/Akshu_on_github) from the EddieHub community for sharing feedback on the React Library. Highly appreciated 🙏
|
||||
|
||||
## Listmonk
|
||||
|
||||
We chose [Listmonk](https://listmonk.app/) as our Newsletter tool as it is a promising open-source option. So far the setup has been pretty good!
|
||||
|
||||
You can sign up to our "Build in Public" list at the bottom of this article to not miss a single one of them 😉
|
||||
|
||||
## YC Interview
|
||||
|
||||
We got invited! This is obviously very exciting so we spent some time getting our answers crisp. We're talking some alumns to learn from their experience 🤞
|
||||
|
||||
## Have a great weekend!
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 75 KiB |
|
Before Width: | Height: | Size: 53 KiB |
@@ -1,68 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import HeroAnimation from "@/components/shared/HeroAnimation";
|
||||
import PmfDummy from "@/components/docs/PmfDummy";
|
||||
|
||||
import PMFDashboard from "./pmf-dashboard.png";
|
||||
import Waitlist from "./waitlist-cr.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 27th Jan 2023",
|
||||
description:
|
||||
"Great landing page conversion, PMF survey in beta testing and encouraging insights from interviews 👇",
|
||||
date: "2023-01-27",
|
||||
};
|
||||
|
||||
_January is almost over, time flies! What happened this week? Great landing page conversion, PMF survey in beta testing and encouraging insights from interviews 👇_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
## TLDR
|
||||
|
||||
- 14,5% conversion rate on landing page -> waitlist 🤸
|
||||
- 90 quality leads collected 👀
|
||||
- PMF survey widget in vanilla JS shipped 🚢
|
||||
- PMF dashboard incl. filtering shipped 🚢
|
||||
- Stumbled over 2 custom-built micro-surveying solution in the wilderness
|
||||
|
||||
## Landing page & waitlist work great
|
||||
|
||||
Last Friday we shipped our new landing page. Since then we had 1.4k unique visitors on our page of which 203 clicked through to our waitlist form (14.5%). We are quite satisfied with the conversion rate and were able to gather 90 leads incl. email this week.
|
||||
|
||||
<Image src={Waitlist} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
Our waitlsit survey is quite extensive and gives us a lot of insight on which of the Best Practices we list on the landing page are demanded most. The waitlist is also cool because:
|
||||
|
||||
- **Allows us to pre-segment people we talk to in person**
|
||||
- **The information informs decision process on what to build next**
|
||||
- **We started using our own product daily which is super insightful**
|
||||
|
||||
## Product-Market Fit survey in testing
|
||||
|
||||
We’ve built the PMF survey as well as the according dashboard to analyze the results. It’s not yet publicly available as we are still testing edge cases. Similar to the Feedback Box it can be styled, sends partial submissions and can be triggered on click or if a condition is true.
|
||||
|
||||
<PmfDummy />
|
||||
|
||||
**Key for running the PMF survey correctly is pre-segmentation** (asking only the right subset of the user base). So far, this requires a bit of custom-coding but the processing by the widget works great!
|
||||
|
||||
<Image src={PMFDashboard} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
We desinged the dashboard specifically for the PMF survey. All other tools only offer a generic dashboard. Some **founders and PMs built custom dashboards in Google Sheets or Excel** to properly understand the data and share the insights with the team.
|
||||
|
||||
What's really cool is the interactivtiy. Key to the PMF method by Superhuman is to identify the segment in which the "very disappointed" score is the highest. We make this really easy. **We have also played around with GPT to make this smooth and continuous.** Mattis extensive experience with ML will come in super handy down the line :)
|
||||
|
||||
## Ongoing convos with PMs and founders
|
||||
|
||||
We keep talking to product managers and founders from our extended network. Additionally, the On Deck directory and Polywork have been a valuable source to find impressively skilled people to talk to. The cool part?
|
||||
|
||||
This week we talked to two people who are custom-building a micro-surveying tool to gather feedback from users in-app. In the first case, 3rd-party SaaS wasn’t an option due to compliance issues. In the other, the needs are too specific for one of the general purpose NPS tools out there.
|
||||
|
||||
A **self-hostable and freely customizable soultion** would saved both teams **days of developer attention 👀**
|
||||
|
||||
### #opensourceFTW
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 6.1 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 7.1 KiB |
|
Before Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 34 KiB |
@@ -1,113 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import LayoutMdx from "@/components/shared/LayoutMdx";
|
||||
import NewsletterSignup from "@/components/shared/NewsletterSignup";
|
||||
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
|
||||
import ResponsiveEmbed from "react-responsive-embed";
|
||||
|
||||
import CDetail from "./customer-detail.png";
|
||||
import CXM from "./customers-xm.png";
|
||||
import Box1 from "./feedback-box-1.png";
|
||||
import Box2 from "./feedback-box-2.png";
|
||||
import Box3 from "./feedback-box-3.png";
|
||||
import FXM from "./formbricks-xm.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Weekly Summary - 30th Dec 2022",
|
||||
description:
|
||||
"Holidays, illness and iterations: The Feedback Box is ready in plain JS and the MVP for the XM dashboard stands. Let’s have a look!",
|
||||
date: "2022-12-30",
|
||||
};
|
||||
|
||||
_Holidays, illness and iterations: The Feedback Box is ready in plain JS and the MVP for the XM dashboard stands. Let’s have a look!_
|
||||
|
||||
<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />
|
||||
|
||||
### Highlights
|
||||
|
||||
- Feedback Box in Vanilla JS
|
||||
- Prototype for Formbricks XM
|
||||
- Illness and testing setup
|
||||
|
||||
<ResponsiveEmbed
|
||||
src="https://www.tella.tv/video/clbxj4vgj00hj0fjrckk42fw6/embed"
|
||||
allowFullScreen
|
||||
className="rounded-lg"
|
||||
/>
|
||||
|
||||
## Feedback Box in Vanilla JS
|
||||
|
||||
We first built the Feedback Box in React (as seen in the video) and then rebuilt it in plain JavaScript. We ran several tests and are currently working on the customizable config for colors, contact person and CTAs before we deploy it.
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-1">
|
||||
<div>
|
||||
<Image src={Box1} alt="Feedback Box Open Source 1" className="rounded-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<Image src={Box2} alt="Feedback Box Open Source 2" className="rounded-lg" />
|
||||
</div>
|
||||
<div>
|
||||
<Image src={Box3} alt="Feedback Box Open Source 3" className="rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
## Prototyping Formbricks XM
|
||||
|
||||
We forked the Formbricks HQ to facilitate the product changes needed for an opinionated XM solution for SaaS startups. This is the first draft of the dashboard to manage user feedback:
|
||||
|
||||
<Image src={FXM} alt="Experience Management for SaaS" className="rounded-lg" />
|
||||
|
||||
So far, the meta data you get is:
|
||||
|
||||
- Category: Idea, Love, Bug
|
||||
- Time of Feedback
|
||||
- User incl. Email / uuid
|
||||
- Device Info
|
||||
- Page
|
||||
|
||||
And you can act on it by:
|
||||
|
||||
- Sending an email (simple mailto: link)
|
||||
- Archive
|
||||
|
||||
A key insight from user interviews is that the feedback shared with the founders or product team is **always the starting point of a deeper conversation**. To facilitate that we can build category-specific actions:
|
||||
|
||||
- Idea / Love: Issuing an in-app interview prompt to schedule a time for this specific user
|
||||
- Bug: Linear and GitHub projects integrations
|
||||
- Bug: Integration to open support ticket
|
||||
- Love: Prepare testimonial for quick share on Social / Landing Page
|
||||
- All: Templates to reply faster
|
||||
- All: Segment Integration to enrich user profiles
|
||||
|
||||
<Image src={CXM} alt="Customer Overview" className="rounded-lg" />
|
||||
|
||||
The feedback box allows to send along as much meta data as you need. Doing so, it’s possible to build up a customer profile over all micro-survey touchpoints in the SaaS app.
|
||||
|
||||
<Image src={CDetail} alt="Customer Detail View Open Source Hotjar" className="rounded-lg" />
|
||||
|
||||
Over time, the properties in the user profiles can be used to create cohorts for contextualized micro-interactions like 1-on-1 interview prompts, handing out SWAG or Product-Market-Fit surveys.
|
||||
|
||||
## Influenza and test setups
|
||||
|
||||
Unfortunately we have not been spared from an influenza infection, which slowed us down a bit. We took the time to look at the hypotheses we’re building the experience management solution for SaaS startups on. Here are the critical ones:
|
||||
|
||||
- **Problem Risk:** SaaS founders recognize that they don’t know enough about their users
|
||||
- **Value Risk:** SaaS founders see the value of a systematic, productized approach for continuous in-app discovery and are willing to pay for it
|
||||
- **Feasibility Risk:** Even with a small amount of responses we can create sufficient value to keep founders from churning out of Formbricks after a few months
|
||||
- **Solution Fit:** Natively embedded surveys drive higher conversion than “bottom right pop-ups”
|
||||
|
||||
### Current status of validation
|
||||
|
||||
- **Problem Risk** 🟢 **-** Based on our own experience, 11 interviews with the target group and extensive desk research we can say: The majority of SaaS operators know that they don’t know enough about their users.
|
||||
- **Value Risk** 🔴 **-** Even though we have two paying customers it is too early to assess. To build more conviction we’ll setup a landing page with a waitlist survey. We’ll also go into direct sales to find 8 more beta users to pay $49 / month.
|
||||
- **Feasibility Risk** 🔴 **-** We’re building the prototype right now. Once implemented we will go through a few iterations before we can assess if Formbricks XM provides value for 200 WAUs and up.
|
||||
- **Solution Fit** 🟠 **-** On average, in-app surveys convert 6x higher than standalone surveys. However, we do not know yet how natively embedded (inline) surveys perform in comparison.
|
||||
|
||||
To gather sufficient data we’re employing a mix of pretotyping (landing page + waitlist survey), prototyping (with customers) and user interviews.
|
||||
|
||||
# Guten Rutsch!
|
||||
|
||||
See you in 2023🤸
|
||||
|
||||
<NewsletterSignup />
|
||||
|
||||
export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
|
||||