formbricks / design Goto Github PK
View Code? Open in Web Editor NEWFormbricks Design Team Repository.
License: MIT License
Formbricks Design Team Repository.
License: MIT License
Users want to add Images and Videos to questions.
Notes
I see two ways to do this: Have a new question type or allow people to "Add Media" the same way they can
"Add description". The latter would allow us to keep Question Type number lower and people could ask all kinds of question types (e.g. having a video with multiple or single choice.)
We should only allow uploads of a certain size and video embeds. I don't think we should allow people to upload their videos to Formbricks.
Tasks
Output
Here is the link to my FigJam File with the following:
Currently, the user targeting or pre-segmentation options on Formbricks are quite limited. All you can do to limit who a survey will be displayed to is adding filters based on User Attributes, like so:
This means, that only users who have the value "Free" for the attribute "Plan" will see the survey.
Further ways to target user segments
What are Segments / User Groups?
With the filters described above you are creating segments of your total user base. So the combination of filters targets a different user segment every time. Instead of asking our user to choose the same set of filters every time, we can offer them to "save" all the filters which target a specific segment. We would then call it "Target Group" or "Segment" or "Cohort".
Facebook Ads Manager works in the same way where you can create these target groups and save them for later reference.
@sirkotsky shared some slides with from the Grab Marketing Team:
Grab-Marketing Guide.pdf
Look at page 38ff for the targeting he designed. I like it a lot, it seems more natural and easy to use than what other survey tools offer.
If you'd like to play several use cases through to see what kind of targeting we need. I'm happy to hop on a call and do that togehter!
If you have futher questions, please let me know :)
@sirkotsky Feel free to expand on that :)
Is your feature request related to a problem? Please describe.
As a user, I want to embed Link Surveys full-screen on button click and slide out from the side.
Describe the solution you'd like
Build a more comprehensive embedding experience for link surveys.
Tasks
Thanks a lot for picking this up! :))
Problem
As a user, I want to use Formbricks targeting logic to display a toast (information banner) in-app to specific segments.
Solution
Formbricks is well positioned to display toasts as they are pretty much forms without inputs ;) Since teams already have Formbricks included, we should enable them to display a toast as well.
Tasks
Thanks a lot! :))
As stated in the Stakeholder Survey Report, the current landing page has seen a conversion (sign up) saw a drop.
By improving the page UX, writing, and UI, we can drive better conversion from landing to signing up to creating the first form.
Left-hand product card lacks responsiveness for users with long names. Card does not adjust size to accommodate content length
IKEA Effect MockUp
In the preview, the Product Name and Button Color are updated as the user adds this info.
Notes:
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
As a user I want to recall answers from previous questions in the question or description of subsequent ones.
Question 1: Whats your name? -> Bob
Question 2: Hey Bob, lovely too meet! What's your favorite book? -> Harry Potter
Question 3: Oh I love Harry Potter! What do you like about it most?
etc...
Tasks
Helps us understand what the users are struggling with.
We need at least 5-10 people to give detailed answers to some key questions about how they use Formbricks, some challenges they are facing, etc.
Survey launched on 19 Apr 2023, available here.
Based on the great market research and our own UX we propose to revamp the Question Card.
1: Bring Move, Duplicate and Delete on first layer. Most important settings at the top
2: Move "Required" to the bottom, move question ID to menu (only needed to niche use case of Formbricks). On "Show Question ID" Id open a Modal where you can also update it.
3. Surprisingly few questions come with a description. People don't like reading and keeping it short should be the key. Our UI shouldn't offer a description by default because people might just fill it. The less text, the higher the conversion (assumption). We also shorten the card quite a bit.
4. Reduce CTA size
5. Tone down the Logic feature a bit but keep it on first level. Been adding it to almost every template as it allows for more nuanced questioning. But since its more of an advanced feature, it doesnt need to be the main CTA.
Here is the PenPot: https://design.penpot.app/#/workspace/cdbb0844-1a10-813c-8002-696f8b948bc4/c86728dd-89fd-8169-8002-9e4497beef32?page-id=c86728dd-89fd-8169-8002-9e4497beef33
@sirkotsky I assigned you for some feedback, will implement once we talked it thorugh.
@Miiklyy thanks for the good reasearch!
The goal is to provide users with an alternative link survey option in addition to in-app micro-surveys so that they can cover the majority of their needs within one solution. However, we lack a clear understanding and overview of the key features and user experience offered by our link survey competitors to make an informed decision on how to improve our solution.
By analyzing the user experience and identifying key features of our key competitors for link surveys we are able to make better decision on which functions and UX/UI elements we need to improve in order to increase the usage of the survey.
Impact: customer experience
Success metrics: increased link survey usages
UX Competitor Analyse, documented in Notion. If you open the respective tab of the competitor in Notion, UX/UI highlights we can learn from are included with it.
How might we ensure that visitors can user keyboard to navigate Formbricks?
Look into focus states and tab order, consider accessibility standards for keyboard navigation. This will help improve customer experience and greatly contribute to enhancing the accessibility of Formbricks.
@peterleequigley will be leading this initiative, I'll be helping out.
Hey team!
We need comprehensive filtering on the results summary and response page.
We need filters for:
All of these filters have to work together. The filtered data should be possible to pass to the CSV download.
And this explains how the fields would work to achieve the expected filter result:
Open questions:
Super open for Feedback and suggestions ๐
While performing a UX Audit, we have identified a number of critical writing issues that may severely damage the user's experience (as a result, damaging the product's image and reputation).
We need to:
Problem: Feedback is locked into Formbricks. Sharing individual feedback both with the team or externally is not really possible.
Opportunity: Usually, people share very positive feedback. This is a great moment to position our brand, for two reasons: Positive moment and getting additional eyeballs when shared online. In the free plan, this will be branded :)
Solution: Allow people to create a stylized image from a response. Something like this tool Xnapper spits out:
This and other tools should work as inspiration of what they can do!
Challenges:
Usually, people don't want to share the complete feedback. So before we create the Shareable feedback image, we need a filtering / selection mask.
We need to design for quite a few cases:
Problem
We have a 66% drop off rate on the signup / login page:
Solution
Optimize conversion following best practices.
I came across this Sign Up Page:
I like it a lot because:
Next Actions
I'll do some more research and make a mock up on Pen Pot to discuss here.
An interview with core contributors
By adding a visible and distinct survey progress bar, a "Back" button, and marking optional and required field, we will significantly improve the customer experience and increase survey completion rate.
None.
A Penpot file with:
Establish the foundations for the Design System of Formbricks.
Note: Formbricks is using Tailwind
Today, the survey configuration is placed under the "Audience" tab. It is far from being intuitive, and the user stumbles upon many challenges. This inevitably impacts the number of surveys being launched successfully, as well as the user experience.
Improving the experience of adding and configuing the survey will help increase the number of surveys created on the platform.
It is a high-priority design job with high impact and relatively moderate scope. Upon closer examination, it might require a few more drastic changes than initially expected.
Start working on the improvements to the core customer journey.
Standalone and embedded surveys alike need to provide a clear purpose, privacy statement, and other information. Currently, Formbricks does not provide such functionality.
By providing an option for the users to add and customise a Survey Introduction Screen, we will increase the usage of standalone surveys, and improve the survey respondent's experience.
None.
Penpot files with:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.