-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Formbricks Onboarding #11
Comments
Hey @jobenjada, thanks for opening the issue and kick-starting the design initiative! A couple of clarifying questions:
And a couple of things to consider:
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:
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! |
Hey! Lots of fair points, I'll start from the top:
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.
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.
Feedback on your suggestionI 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? |
@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):
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 stepsWould be for us to agree on:
I can prepare the wireframes. Will you help get the questions & values you think we could demonstrate? Cheers! |
Agree: Objective as checkboxes is a good idea! 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:
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. |
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. |
Onboarding conceptIt 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. WalkthroughWelcomeWe 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).
💡 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. QuestionsFirst, 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: CustomisationFinally, 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 pageWe 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! |
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:
Other than that: great work, greats details! :) |
Hi @jobenjada, thanks for the feedback & good points. Here's my take, the rationale behind the solutions I propose, and the next steps: ChangesProduct nameFirst 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:
Questions orderNow, 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: So, essentially, the flow is simple:
💡 Basically, we start by asking the user if they would like to complete a survey first, and then:
Looking forward to hearing your thoughts on it. Proposed next steps
Onboarding case study
Design critique templateIf you want to comment on the design and propose an alternative, please make sure to include:
Looking forward to more ideas! Cheers! |
Lovely, we're on it! There are two things:
Actions:
|
Onboarding is now live 🎉 Will keep monitoring the performance and document in the case study file. Issue closed! |
Problem:
Solution Idea: Onboarding Flow
IKEA Effect MockUp
![grafik](https://user-images.githubusercontent.com/72809645/234255909-133b2b49-cc7a-4f77-9927-9d08382e3daa.png)
In the preview, the Product Name and Button Color are updated as the user adds this info.
Onboarding Survey
![grafik](https://user-images.githubusercontent.com/72809645/234256137-7449b82d-b048-4b6f-bcfe-f2232145b165.png)
Notes:
Open for discussion
Figma File (dont judge, it's quick and dirty work 😄):
https://www.figma.com/file/1dRfiKLQ3V8cqvb2tIFdne/Formbricks-Onboarding-Flow?node-id=0%3A1&t=oo41qFxz6pudl0Ft-1
The text was updated successfully, but these errors were encountered: