Left-hand product card lacks responsiveness for users with long names. Card does not adjust size to accommodate content length

Job

Establish the foundations for the Design System of Formbricks.

Note: Formbricks is using Tailwind

❓ Unknowns

• Are we using Figma or Penpot?
• Who will be the owner of the system?
• How will we review commits?
• How will we link the UI components in Figma to the code base?

Job

• The audit has been conducted: FigJam
• The items need to be organised in order of severity of impact (to be assessed) and vertical (UX, UI, design system, writing, etc.)
• Synthesis document to be included in the repo and action plan derived from there.

Problem Statement

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.

Hypothesis

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 and success metrics

• Impact: customer experience

• Success metrics: increased link survey usages

Output

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.

Revamp the survey settings experience

Problem

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.

Hypothesis

Improving the experience of adding and configuing the survey will help increase the number of surveys created on the platform.

Areas for improvement:

1. New survey creation: from the past studies, we know that users struggle to locate the "Create survey" button;
2. Audience tab: past studies and UX Audit confirm it to be confusing and not intuitive;
3. The audience tab content can be further improved as well.

Impact and success metrics

• Enhanced customer exprience;
• Increased number of surveys created on the platform.

Timeline

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.

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.

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

• Ideate: What would be useful to have?
• Research: Whats possible in other form tools? How do they solve this?
• Exploration: Mock up wire frames in FigJam
• Iterate
• Ticket: Draft ticket
• UI: Once Design System is there, provide UI mock up and hand over

Output
Here is the link to my FigJam File with the following:

• in-depth competitor research for Google Forms, Typeform and Tally
• first high-level assumption based on research how to approach it
• first wireframes (I utilized the design system a bit, but this is just a first try without the in-depth understanding on certain rules e.g. on how to use icons in combination with labels, hover text etc. or potential technical limitations e.g. cropping feature)

Job

We have identified the key competitors:

• Sprig
• Refiner
• SurveyMonkey
• Qualtrics
• Medallia
• InMoment
• Typeform

Users also mentioned:

• HotJar
• LimeSurvey
• Wispform

We need to perform:

• Comparative analysis: features the others have
• Pluses and deltas: who we can learn from and what can we do better

As a user I want to recall answers from previous questions in the question or description of subsequent ones.

Example

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

• Market Reserach: Reserach design approaches and feature complexity to get an overview of all possible flavours or Answer Recalling
• Create wire frames taking into account everything you've learned
• Go through feedback loops with Kristian and myself
• Scope it down for development
• Design a UI for the Formbricks Survey Editor

Screenshot

Job

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:

• Synthesise the writing research;
• Organise the insights in the order of severity;
• Fix the most urgent issues and unblock ourselves;
• Establish the core writing principles and guidelines;
• Start fixing it, string by string.

❓ Unknowns

• How are we going to track the writing issues? Shall we submit a lit of improvements separately or as a pull request?

Job

Start working on the improvements to the core customer journey.

⚠️ Dependencies

• UX audit
• Design System
• Market analysis (somewhat)
• Writing audit

Problem statement

Standalone and embedded surveys alike need to provide a clear purpose, privacy statement, and other information. Currently, Formbricks does not provide such functionality.

Hypothesis

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.

Impact and success metrics

• Impact: customer experience.
• Success metrics: increased link survey adoption, improved survey response rate.

Dependencies

None.

Output

Penpot files with:

• The end-to-end experience with adding and customising a welcome screen;
• Survey introduction screen UI for both an embedded and a link survey.

Problem statement

• Back button is missing in the Survey Creation screen, the Preview, and the actual survey. Users cannot return to the previous screen or submit another answer to the question.
• Optional and required fields are not marked in the survey. The progress bar is barely visible. As a result, users end up dropping the survey or providing poorly written answers to critical questions and focusing on optional questions, as seen in the recent user survey.

Hypothesis

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.

Impact and success metrics

• Impact: visibility of system status (progress), user control and freedom (back button), error prevention (optional and required fields)
• Success metrics: improved survey completion rate;

Dependencies

None.

Output

A Penpot file with:

• Improved survey container;
• Optional and required fields design (including error states);
• Improved progress bar (accessible and clear).

Problem:

• We are lacking insight into who is signing up for Formbricks and what they are trying to do
• Currently, we have no way to be informed immediately after a user is signed up. I'd love to reach out personally shortly after.
• The adoption of Formbricks could be higher i.e. the % of users who implement the widget (or create and share a link survey)

Solution Idea: Onboarding Flow

• IKEA Effect: Allow users to make Formbricks "their own" by setting product name and brand color early
• Onboarding Survey: Asking 2 questions:

IKEA Effect MockUp

In the preview, the Product Name and Button Color are updated as the user adds this info.

Onboarding Survey

1. What's your role? (Product Manager, Engineer, Founder, Marketeer, Other)
2. What is you goal or objective when using Formbricks? (Free Text Field)

Notes:

• "While you're waiting" adds friction so that the user is inclined to fill out survey
• We will pipe every submission incl. user email into our Slack so we can follow up

Open for discussion

• Should we add a third question to learn more about the user?
• Are these the right questions?
• Is this too much friction generally?

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

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.

Problem statement

As stated in the Stakeholder Survey Report, the current landing page has seen a conversion (sign up) saw a drop.

Hypothesis

By improving the page UX, writing, and UI, we can drive better conversion from landing to signing up to creating the first form.

Impact & success metrics

• Number of converted users (% of total number of visitors).

⚠️ Dependencies

• User research;
• UX audit;

Output

• A Figma/Penpot page depicting a new design for desktop and mobile screens (precise resolutions TBD);
• A detailed justification of the design choices with potential impact;
• A proposed success metrics (how are we going to know that the redesign is successful?);
• Effort estimation (what will it take to implement it?)

Based on the great market research and our own UX we propose to revamp the Question Card.

Problems:

1. By default the Card is too tall to fit on a regular laptop screen. This makes it more difficult to grasp how the survey editor works, that you can drag and drop questions etc. Its difficult to get an overview
2. Key actions (move, duplicate, delete) are hidden in a menu
3. Less important settings (required, show question ID) are on first layer

Design Proposal

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!

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:

1. Aggregated feedback for all question types (Single Select, Mulit Select, Free Text, etc):

2. Single Response Card with 1 or 2 responses and with 10 responses:

Tasks

1. I'm not aware of other tools offering something similar. So your reserach is likely confined to the screenshot tools and their UX.
2. Write up a list of all of the functionality that we would want, if this feature was complete.
3. Scope it down to a first version
4. Mock it up with Wireframes
5. Chat it through with Johannes 😃

Thanks!

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

1. Target users by when they were First Seen or Last Seen in an application. Formbricks tracks when a user is signing in and the date of the very first user action tracked per user is the "First Seen" date. The date of the most recent user action is the date for "Last Seen". It would be great if we could create a segment of users who were seen
2. Target users by responses in a previous survey. E.g. if you ran an NPS previously, you might want to create a segment of people who have an NPS of 9 or 10 so that you can prompt them to write a review for your product. Here it likely only makes sense to take into account the data from Single Select, Mulit Select, NPS, Rating Questions and Consent Questions.
3. Target by the amount of occurrences of a specific user action. Let's say your track the user action "Create Report" because it is one of the core value creating actions in your product. You then want to only display a survey if a user has already clicked "Create Report" 3 or more times so that you can be sure that this user experienced the value of your product several times.
4. Target by first occurence and last occurrence: Similar to above, we should be able to filter based on how many days ago it occurred.

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 :)

Hey team!

We need comprehensive filtering on the results summary and response page.

We need filters for:

• Answers to questions
• Time-based
• User Attribute-based
• Tab-based
• Completed or Not

All of these filters have to work together. The filtered data should be possible to pass to the CSV download.

Here is a mockup:

and mobile:

And this explains how the fields would work to achieve the expected filter result:

Open questions:

1. Completed Toggle: Not really consistent, not sure about the position. Could also be a dropdown next to the date range picker to make sure that this setting also influences the data for the CSV download

Super open for Feedback and suggestions 🙏

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:

1. It reassures the value of the product
2. It makes it credible with the image (some form of social proof)
3. It does not have any input fields which elict "sign up angsts"
4. It uses "Continue with..." wording to fight Sign Up Angst
5. Offers Google SSO

Next Actions
I'll do some more research and make a mock up on Pen Pot to discuss here.

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.

Screenshots

Tasks

1. Do some market research
2. Include how to embed the first question of a survey in an email
3. Make wirefires and iterate on them with our feedback
4. Scope out the dev work into several features
5. Assisst during the development by community members

Thanks a lot for picking this up! :))

An interview with core contributors

• Helps understand the product vision
• Establishes the connection
• Answers some of the questions about Formbricks

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

• Market Research: Research "Toast" experiences other tools offer
• Do 1 user interview with a founder who requested this feature :)
• Create Wireframes, discuss with Kristian and myself
• Scope it & hand over to dev

Thanks a lot! :))