Lovely, we're on it!

There are two things:

1. The input field isn't asking for the team name but for the product name so we can prefill the templates
2. In the preview, the team name does not change anything. So we will likely make the preview of the survey a bit more extensive than a single radio button. We will likely reuse one of the single question templates.

Actions:

• Penpot account created
• GitHub issue opened
• Will set up call once we have a working prototype

from design.

Hey @jobenjada, thanks for opening the issue and kick-starting the design initiative!

A couple of clarifying questions:

• Can we add a clear description of impact and metrics? I.e. how will having an onboarding impact the customer experience and the product? Especially unclear around adoption: how does having an onboarding flow with a screener benefit the end user?
• What kind of information do we want to gather and how exactly do we want to use if? I.e. how will knowing the role help us (but most importantly, the user)? Open for discussion, but want to hear you out as the issue owner.
• Do we have any stats on the widget customisation? Trying to find any mentioning of this in the user responses, and seeing how this is the only variable users can change, is it a high-value customisation that requires to be put upfront?

And a couple of things to consider:

1. Placement.
   Have we considered a different placement? For instance, we could greet the user upon onboarding instead of disrupting the onboarding itself. According to the insights, we are trying to improve the sign up flow, and this seems like an unnecessary blocker.

I drafted an idea quickly just to show what it might look like. The hypothesis is, by personalising this survey and displaying it upon onboarding, we will be sure to not disrupt the onboarding flow while collecting the right information from users who might be interested in completing it.

I've got a Penpot for it here, but I'm still trying to get used to it, so it's a bit sloppy.

Alternatively, we could surely block the entire flow, but also, communicate the benefit for the user clearly:

2. What do we do with this data?
   We need to link to our privacy policy, communicate how the data will be used, and inform the user that this is not mandatory. For self-hosted users, will we still want to implement it, and how will it help them?

Overall, let's try to answer these questions and link them to what we know about the users and our goals. This will help us design something that will work for everyone.

Cheers!

from design.

Hey!

Lots of fair points, I'll start from the top:

1. Impact & Metrics: The assumption is that a higher % of signed up users will successfully go through the activation funnel:
   
   By experiencing the core value of the product, they are more likely to achieve the goal they signed up for. I can digg up some research showing that onboarding done well increases retention, conversion to paid etc.

What I forgot to add in the ticket: In a third step, we will offer to start with a product with example data. Especially the tabs "People" and "Actions & Attributes" are hard to understand (and see the value of) if they are empty. It requires quite some setting up to get a full understanding of what Formbricks can do for you. It's not part of the first scope of the Onboarding because a community member will build it and the demo data element is quite complex.

2. How does more info help the user? This is the core dilemma of experience management surveys: Finding the right balance between friction and gathering information. Theoretically, it would be best for a user never to fill out a survey. But the information in the survey is essential for us to build a better product which then benefits the user.

Understanding the role (e.g. PM vs. Engineer) has lots of implications for the assumptions we can make about the users knowledge and experience. This informs decisions around wording, schemas to adopt for designing features, etc. As an open-source company, our user base will always be more technical than usual since especially developers care about open-source. However, we're not building a dev tool, so how to strike the balance is a key task in the design process.

Additionally, it helps us to segment our user base. We can see how PM's use Formbricks differently than Engineers or founders. If e.g. we see that 90% of our power users are PM's we should focus on their needs and learn from them the most.

Lastly, it helps us in our marketing efforts. Who to approach, how to approach, which blogs, newsletters, outlets, etc.

3. Customization stats: I have asked @mattinannt to have a look in the DB and compare how many users do not have the default brand color set anymore. If we only look at accounts who have at least 1 response, I'm sure the number is over 90% :)

4. What to do with the data? I've wrote about that above and I think we should add this to our ToS. We plan to run more surveys like that and should get the consent during sign up.

5. What about self-hosters? Good point! We'd likely not display it for self-hosters. @mattinannt what do you think?

Feedback on your suggestion

I wouldn't like to frame it as a request. At this point in the user journey, we have not yet provided value and asking for 2mins is a lot imo. Further, I have watched quite a few "thinking out loud" sessions to know that no one reads texts in user interfaces. I think the interface itself has to convey what we want from them, this is why I'm opening with a color picker an input. What I'm trying to say is, that the user wouldn't read the grey text and make a decision but rather dismiss the popup right away.

But I like the idea of letting the user dismiss the onboarding. We could and a X in the top right corner?

from design.

@jobenjada thanks for a detailed response!

Helping the user experience the core value of the product is a great point. How about, for instance, demonstrating that through stats then? As simple as demonstrating the value for a particular user category (and that we do data analytics) once they have submitted the response:

We can go as far as flashing out some actual templates here or tools that Formbricks has today for a particular group. You think we could map these?

Noted on the colour customisation. Would suggest having it as the last step: showing value first, customisation as the last step as to not scare the user away and add extra value, what do you say?

Would suggest making the "Objective" a multiple choice question as well, people rarely answer free text onboarding surveys.

So then, the flow would look as follows (we will need to do the mapping now though):

• What do you do? —> Wonderful, we have X, Y, and Z tools for people like you
• What are your goals? –> We have X, Y, and Z forms for your objective
• Customise your surveys –> Do now or later.

This way, even self-hosted users can benefit from having a survey, provided we can in fact prioritise relevant forms for them.

Agreed on not framing it as a request and instead offering help with getting started upon onboarding 💪

Next steps

Would be for us to agree on:

• The exact questions we want to ask + answers to choose from;
• How each of them will benefit the user: tools we can recommend, values to demonstrate, etc.
• Map these against each other.

I can prepare the wireframes. Will you help get the questions & values you think we could demonstrate?

Cheers!

from design.

Agree: Objective as checkboxes is a good idea!
Stats: Great idea! Would we just make them up until we have actual data?

Unclear: Im not sure what the flow would look like then. If they say PM, what do we show them? If its templates, do we prompt them out of the onboarding to setup a survey with a template? We could let them highlight templates as favorites so they find them at the top of their list? (We will have 50+ templates soon)

Template categorisation: A bit offtopic, but maybe relevant: Currently, we have clustered templates inconsistently by goal and category ( e.g. "Product Experience", "Increase Revenue" ). I'll be adding quite a lot of new templates when the last question type (rating) is built. I was planning to rethink that in the process.

Next Actions:

I suggest these questions:

1. What's your role? (Product Manager, Engineer, Founder, Marketeer, Other) -> see "unclear" part. Maybe link to Best Practices in our blog? But would add lots of distraction. Or let them select Best Practice tutorials to their own email for later reading? Maybe as a last question then before prompting them to create a survey now.
2. What is you goal or objective when using Formbricks? (Improve product experience, Increase conversion to paid, Enrich user profiles, Survey granular user segments, Other) -> Pre-sort templates based on answer, let them fave the ones they want to try out.

Right now, we don't have the "Other, please specific" functionality. I'll be just following up with people who say "Other" via email, to start the user conversation.

from design.

Thanks for listing these out! I have some ideas in my head I can put in a more visual format for us to look into. Let me assign this issue to myself then and get back with a flow.

We shouldn't make data up, but we can show the real stats. Let me visualise it first, might be easier to understand then.

On categorising the templates: I suggest running a card sort exercise to make sure we categorise them properly. Got to find the alternative to Optimal Workshop though.

Noted on the limitation.

from design.

Onboarding concept

It took a while to finalise the flow, especially given how I only wanted to use open source tech (and I'm still not comfortable with Penpot yet), but today this is what the end-to-end journey looks like.

👉 Click here for the Penpot prototype.

👉 You can also check out this Excalidraw file if you prefer free canvas. Download this file, unzip it, and upload to Excalidraw.

Below is a detailed walkthrough.

Walkthrough

Welcome

We bring the user to this page once they have verified their account. Notice how we display the user's name (provided we can fetch it).

1. We show the progress bar to help user locate themselves within the Onboarding process;
2. We allow the user to escape Onboarding and promise to do it later;
3. We let the user know that Onboarding will not take longer than 1 minute inside a main CTA;
4. Finally, we explain why we need to collect the data, and link our T&C.

💡 Notice that the progress bar does not start at 0. We're using the Goal-Gradient Effect to help the user feel like they are closer to the finish line that they really are.

Questions

First, we ask for the user's occupation:

💡 Once we have actual stats, we can bring them back and flash out once the user submits the response!

Next, the user's goal with Formbricks:

Customisation

Finally, the user customises their Formbricks appearance.

💡 Notice how the "Skip" button is gone now. It is because the user doesn't have to take an action at this stage.

Preview should update live and reflect how the user's survey will change. Notice how we're framing it visually to avoid any confusion with the real form's design.

Landing page

We are making the use of the information gathered at this point and redesigning the landing page: by reorganising the surveys ("Recommended for you") and making the landing page feel less empty. It does not have to be 100% accurate, but in "Recommended for you", we should display surveys that are recommended for the user's objective and occupation.

💡 If the user have skipped the Onboarding, we will not show "Recommended for you", but will still retain a similar design for the landing page:

Home Page Redesign

💡 The primary expected impact of the Landing Page redesign is the increase in the % of users who sign up & create surveys. The hypothesis is, a quick overview of available surveys will entice more users to start creating a survey. Some level of personalisation, on top of that, should entice the user even more by prioritising surveys that are relevant for the user (matching their objectives & occupation).

Now, in order to implement personalisation (thus bringing the core value to the Onboarding flow), we need to categorise the forms in the following format:

One survey can match to multiple occupations and objectives. @jobenjada we can either do it ourselves, or set up a Card Sort Exercise and ask the community to help us out.

Understanding that we will have more templates, we could identify at least 6+ templates that match user's objectives (and/or occupation) to add to the landing page as "Recommended".

I didn't have much time, unfortunately, to play a bit more with it, but given our end goal and the impact we want to make on the user experience, at this stage, this was the least invasive and the most effective solution I managed to come up.

Happy to jam more!

from design.

love it, I think it's super cool and love the idea to rework the home screen generally! currently, the empty survey list is a bit useless.

Two things I was wondering about:

1. Having the User enter the product name is quite essential. We use the product name to prepopulate alle templates, even in the preview.

2. Out of curiosity: why do you think it's better to have the product customization after the survey? My intuition tells me that as a user I would prefer to first customize (ad seeing the value of me doing it by seeing how the templates get prepopulated and the color adjusted) and then give away personal information. I would even be more likely to do so since I have already experienced that it enhances my product experience.

Other than that: great work, greats details! :)

from design.

Hi @jobenjada, thanks for the feedback & good points. Here's my take, the rationale behind the solutions I propose, and the next steps:

Changes

Product name

First of all, thanks for bringing up the product name requirement. I have redesigned the form to reflect that & included the Product name as a required field. Note that ideally, @imwiththou should be designing the input fields as part of the design system endeavour, but for now, it's a quick solution that should work.

Also note the copy changes. If you create a Penpot account, I can invite you to the file, you can grab the code & the copy directly from it!

💡A quick idea: personalise the team name placeholder! For people who have answered the previous questions, we can personalise it by naming their team accordingly. It has little practical value, but demonstrates how we are using the data and adds a little playfulness to the experience. It could look something like this:

• Marketing Specialist: {{USERNAME}}'s marketing team
• Engineer: {{USERNAME}}'s development squad
• Founder: {{USERNAME}}'s unicorn
• Project Manager: {{USERNAME}}'s project space
• Other: {{USERNAME}}'s project

Questions order

Now, I took some time to think about the order of the questions, the flow, and how others handle it. Since we don't have Market Research documents yet, had to do some work guerilla-style.

👉 For instance, here's how Hubspot is handling it:

👉 And here is Typeform:

So, essentially, the flow is simple:

💡 Basically, we start by asking the user if they would like to complete a survey first, and then:

• If they agree, we start with the survey, and then bring them to the product page (Product name) –> new home page;
• If they do not agree, we bypass the survey, but still bring them to the product page –> new home page (without personalisation).

Looking forward to hearing your thoughts on it.

Proposed next steps

• @jobenjada (and other engineers involved) to create a Penpot account, @sirkotsky to add them to our design project;
• @jobenjada to create an issue in the main Formbricks repo & link this issue there to maintain transparency and visibility;
• @sirkotsky to create a separate .md document in this repo with Onboarding case study (see below);
• @sirkotsky or @jobenjada to share our progress in Discord & invite other engineers to comment, @sirkotsky proposes a comment template (see below);
• Finally, suggest we have a call with @jobenjada and the engineers involved in onboarding + anyone from the community who would want to join and jam + have some sort of desk check before Onboarding goes live! 😉

Onboarding case study

• Our objectives: what do we want to achieve;
• User's pains we are resolving;
• Design process: market research, early wireframes;
• Main flow and features + how they help up achieve our goals;
• Success measure: what are we tracking and how we are going to know we have succeeded.

Design critique template

If you want to comment on the design and propose an alternative, please make sure to include:

• Key point: a tl;dr of what you want to comment on + your take;
• Your suggested solution & impact: if you have a solution, propose an alternative + what impact on the product and the user will it make;
• Rationale: explain why you think your solution works better;
• Self-crit: take a moment and think about why your solution can actually fail, and why. Use this as an opportunity to not dismiss your idea, but to help us make it even better!
• Definition of success: what shall we measure to know that your solution has succeeded (i.e. conversion increased by X%);
• Proposed next steps.

Looking forward to more ideas! Cheers!

from design.

Onboarding is now live 🎉

Will keep monitoring the performance and document in the case study file. Issue closed!

from design.