Pop-Up Surveys

[neom500]

Overview

Requirements (Functional/Nonfunctional): Surveys will capture a wide variety of feedback such as how users discovered our site or what improvements they wish to see. The first live survey will ask users why they came to our site and how they discovered our site. Cookies will be used so users who aren't using Incognito mode won't be asked to take the same survey they've already completed. However for every new survey, all users will see a survey message each time they visit our site until they complete it.

User Story: As a food seeker, I want to submit my feedback to help improve the site's user experience.

Acceptance Criteria:

• The pop-up survey message appears as soon as the results page loads in the bottom right of the results page (desktop/tablet) or bottom of the results page (mobile)
• A method, i.e. X button, of closing the pop-up survey message
• Survey UI resembles Qualaroo screenshots in Figma
• Users who have already completed a survey will not see the pop-up survey message unless it's a new survey iteration or they return using Incognito or a different web browser
• The pop-up survey message will include the following:

1. If they'd be willing to take a 2 question survey
2. Inform them the survey will open up in a new browser tab
3. Yes or No buttons. Selecting "Yes" takes them to the Google Forms survey. Selecting "No" closes the pop-up survey message. Alternatively they can close the survey with another method i.e. X button (mentioned in the 2nd Acceptance Criteria bullet above)

Link to first survey:

During the 8/17/23 Leads and PM meeting, we discussed the FOLA site's retention rates with surveys being one tool to help capture user experience feedback. First steps would be for Design and Research teams to create a survey for users asking questions such as "Are you a FOLA volunteer?" or "This is the nth time you've used this site, what draws you back to our site?"

Google Forms could be used to draft those questions. Additionally, Design/Research should be able to create/edit surveys without involvement from development after initial development phase of implementing survey is completed. Design/Research will share updates on 9/21/23 PM and Leads meeting.

Please refer to the links below for further context:

• 8/17/23 Meeting Notes (Under PM Team): https://docs.google.com/document/d/1uPO0_AJ1zn3IZXrhHBXub-ZfakIsx34jKHK3LIB8VmM/edit.
• Survey PRD - https://docs.google.com/document/d/1mFbh3-30JjwguLOc-3cHZTyFI-TSsTduvJXeMKKHSH4/edit
• Research Plan for Pop-Up Surveys

Figma whiteboard:

• UI sketches
• Survey comparisons
• Competitive / Industry audit (seeing other people's examples)
• UI designs
  https://www.figma.com/file/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?type=design&node-id=640-122&mode=design

Related issues

Dev team's issue for this feature

• Feature: Toast prompt for user feedback form #2165

[fancyham]

Here are some quick sketches:

Figma: https://www.figma.com/file/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?type=design&node-id=640-122&mode=design

[neom500]

One option is to have a survey, or popup asking the user if they wish to take a survey, generate when completing a call to action i.e. clicking details. Another could be a popup that generates if a user has spent a certain amount of time on our site.

[fancyham]

From a user-experience perspective, That coule be annoying to have a survey pop-up interrupting you when you're taking an action to do something else — it would also make me forget what I was in the middle of doing :)

I'd prefer we make it so that it's more 'ambient' — visible but also ignorable. 'non-blocking' is another way of describing that.

Can you pull together some ideas for that direction? You might also google around or screenshot non-interupting surveys (let's all do the same)

Example:

[fancyham]

Talked with Nate —

Nate will aim to put together a 1-2 page PRD describing the tool (what is it, why, audience, outline/vision of functionality) by ~Nov 20.

I'll use that to hand off to a designer on design team to work with Nate on how the UI looks and feels and works.

[fancyham]

Natalie (desiger) has joined the team - will be doing research into systems we might use, uis that are out there.

nate is working towards a PRD draft on Mon Nov 20.

we'll sync up on skack

thanksgiving break,

then check-in thurs nov 30

[GigiUxR]

I completed the sketch for the survey content flow, continuing off of @fancyham 's sketch in Figma. See here

Please note: Languages question will soon be added to this.

[fancyham]

Research Team’s survey plans are now linked in the issue description above: https://docs.google.com/document/d/18pzn3OMbDqXKmiTlO9EVS0zUQuadPtharKjMuyacvlU/edit

[fancyham]

Had a great talk with Nate today about a shortcut to a MVP (minimal viable product) — one of the roadblocks we're up against right now is 'which survey tool?'

To streamline, while we're still researching and deciding, we can simplify the problem by using Google Forms as a starting point. Google Forms is easy since we all have access to it, including being able to edit and view results.

As this is built, we'll learn what's possible, what's valuable, and add useful features and functions, but the goal is MVP

Once something is up and running, other survey tools we're considering can be plugged into what's already built pretty easily.

Here's what we discussed:

Concept

1. Link in bottom right corner of map or screen that asks user to take a survey: “Could you answer 1 question for us” (do something shorter). Could even be small animated thing.
2. Link links to a google form. Google form asks some question like “How many times have you used this site in the past 30 days?” And pick an option. This needs to work on mobile and desktop, can be in a new window or in an iFrame (that appears on top of our site)
3. When finished filling out form, display a thank you, and give option to close window or automatically close survey to return to what they were doing in FOLA

Requirements:

1. Display link on FOLA site. (optionally but ideally, display it randomly to 1/10(?) people to get a random sampling)
2. Link should disappear if it’s not answered after 15 seconds
3. Simple Google Form
4. iFrame or Window with ‘close’ button(?), or auto-close

People involved:

• Developer
  • Contact them with sketch of functionality, requirements (listed above)
  • Getting someone assigned to work on it with you
• Design
  • Make sure it looks and works good
  • To work with dev, also
• Research
  • What question to start with?
• Someone to create Google Form (someone on this team and/or research team — this is a good skill to know)
  • Single question survey form that feeds into a Google Sheet
  • Can make simple survey first, then ask Research to respond

Process (will depends on everyone's schedule):

A) Talk to design, bring a simple design or show them the above (a few days to a week?)
B) Create a simple Google Form (2 hours)
C) Sketch out minimal functionality with designer (a couple rounds of back and forth)
D) Show to Dev, get feedback and revise with designer (1 week to find dev and talk to them)
E) Ask Dev to build it and get it on to the private “dev site” (not live to the public yet) (2 weeks?)
F) Test it and revise if necessary on the private site (1 week of everyone playing with it)
G) Launch to public!

This is similar to what Nate was already planning, so consider it as an input to the product management process as a possible streamlining option!

[neom500]

List of survey tool options Natalie Kiwan has researched:

https://www.figma.com/file/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?type=design&node-id=640-122&mode=design&t=5m9XwV2dYfmWISkw-0

[fancyham]

Adding updates from last meetings:

Pop-up team has added 'competitive audit' and added it to Figma file: examples of surveys in other apps. Thanks everyone. Very helpful.

Re: which survey tool to use —
Short term and for MVP and alpha testing: Google Forms seems like a MVP and a benefit is that it's available to all FOLA volunteers
Longer term: an ideal would be to show survey questions atop our interface as a layer, rather than in a new window, and two of the survey services that Natalie Kiwan put together seem to support this. This would be similar to other surveys out there. Google Maps did this particularly well, and could serve as a design pattern for us in the future.

Decided on User Interface

@ihorng has put together four design options, based on discussions with @neom500

@GigiUxR, research lead (and basically, the client for this feature), would like #4, but with an added time component — to have the prompt appear after X seconds so that it gives users time to get some of their task done first. Dev team thought this should be doable, and would take about a month, and would be lower priority than fixing any serious bugs with recent UI update.

@neom500 and @GigiUxR will determine that time delay based on looking at Microsoft Clarity, with the goal of getting good results but also not preventing people from accomplishing their task.

Gigi would also like to only allow a user to take a survey once, and if a user says 'No thanks' to the survey, that we'd ask them again on a future visit. Qiqi @qiqicodes and John @entrotech said that should be possible using cookies. Bryan @fancyham suggests possibly using the survey URL as the unique identifier, and if that doesn't work, serialize the surveys (1, 2, 3, etc.)

The surveys will link out to a Google Form in a separate window/tab for now, but a future ideal may be to have the survey appear on top of our UI in the same window.

Next steps

• Please also consider a user interface to set up the prompt — this could be really useful for Research to change the prompt and survey link without putting in a request to the dev team and waiting for the next push to the production server. @neom500, you might want to recruit someone like Ingrid and Gigi to flesh that out with you.
• Devs please review the designs/specs and get back to Nate and Gigi and me with questions and/or if you need more specificity/design documentation.

[fancyham]

Hey hey, can you post an update here — what’s the status and ETA for this? Thanks!

[fancyham]

This is related to, but not the same as this issue about surveys, but it shows up atop the search results rather than as a pop-up.

• Feature: Survey form on results screen to help us gather info #1655

[fancyham]

Posting the survey we worked on together (@jelenaUX , @GigiUxR , @neom500 ) :

The survey URL:
https://docs.google.com/forms/d/e/1FAIpQLSdAhi_nMKQfWVHjfpl1ZkmymBTt8BW7YNqVIOJ4JKYgSL4O3g/viewform?usp=sf_link

and the edit view: https://docs.google.com/forms/d/116paExG_ySSqmUJliUxmGZMEUWYmSyApu4iRA3rJ1XA/edit

Google can also show code for embedding as well from the Edit view > 'Send' button

[fancyham]

Latest designs

https://www.figma.com/design/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?node-id=7382-427&t=UEcdoTppIktAe6Pl-4

(we are talking about changing black text on white, and then [Yes] [No, thanks])

[fancyham]

First dev version is here (let's call it 'beta 1')... is currently on devla.foodoasis.net as of now:

• Feature: Toast prompt for user feedback form #2192

Had review meeting with design + research team, with dev.

Feedback and changes based on those are listed here... to be spec'd out in more detail, as requested by dev:
#2192 (comment)

[fancyham]

neom500 added this comment on Sep 8, 2024:

9/6/24 Feedback:

Toast Message:

• Toast message cuts off in mobile
• Toast message appears on the homepage - if we can't remove the toast from the landing page could we make some changes i.e. toast doesn't appear until after 30 seconds or we have adjust survey questions to account the toast appearing immediately on the homepage
• Toast message blocks "Learn about this site" in desktop view (Note as of 9/8/24 on Chrome, this doesn't seem to be the case but I haven't tested with other browsers)
• Instead of a black background, could we have black text on a white or grey background?
• Text feels chunky; could we incorporate how Google displays their popup surveys? (refer to Figma: https://www.figma.com/design/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?node-id=640-122)
• Can survey phrasing be changed on per survey basis and change "Complete Survey" to "Yes" or "Start" and "Opt out" to "No Thanks" or "Close"
• Would clicking "Opt out" mean users would never see that one survey or all future FOLA surveys?
• Toast seems same level of priority as "Use my location" when "Use my location" should be a higher priority action
• Toast seems too in your face even though its optional
• "Participate in quick survey" text looks like a button even though it's not
• Glow appears on Complete Survey when clicking on that button and toast message stays there instead of disappearing
• How does survey appear in 4 possible views: desktop, mobile, ipad, and embedded?

Inside and Post Survey

• Survey window should close automatically after exiting to take users back to FOLA site
• After finishing the survey, the FOLA page should automatically reload so the toast message disappears
• Could we set a cookie when submitting the survey? But if that's not possible, could we set the cookie when you click the "Yes" button on the toast message when doing the survey?
• Can we see the screen that changes the survey URL if we want to edit the URL?
• For the embedded version, if someone takes the survey we want the survey to close automatically so they return to FOLA (maybe we have our survey show up as iframe and in top/bottom say "close survey" button)

[fancyham]

ihorng added this comment on Sep 11, 2024:

9/11/2024
@neom500 @fancyham

Toast Message:

• Toast message should not appear on the homepage when the user has not used the website yet. Most of the questions on the survey is finding out how well the website works for them. We want the users to use the website for a bit so they have information to share. Otherwise, we wont gather as accurate as possible feedback. Is 30 seconds enough time for users to use the website? Do we have data for this, possibly from Microsoft Clarity (ex: average time spent?)
• Toast message should not have 2 buttons that are identical. "Yes" is the primary button. "No" is clickable text. It should follow the mock up design.
• Toast message should appear on listing/map screen since that would be consider the screen where the user flow ends. Also, allows the user to go through the entire experience.
• It looks like the toast message is using the "Helvetica" font which cannot be changed because it is the standard font that the entire website is using.
• I agree that toast message should say "yes/no" or "sure/later" (depending on how user/human friendly we want to sound) instead of "start/opt out."
• I don't completely agree that the toast message is too in your face, given the fact that most people don't answer surveys unless they receive an incentive for their time or is motivated. The user is in control to click "no" to close the toast message.
• As for colors, changing the toast color background to white blends in with the rest of the UI color which is predominantly white. The toast needs to catch the user's attention, otherwise there will be a high chance that it will be ignored. I can mock up other color options to see which one is the best fit after John's creates a design style guide.

Additional comments (Sept 13, 2024):

• Toast message should not have 2 buttons that are identical. "Yes" is the primary button. "No" is clickable text.
• Attached are additional color options for the toast background: navy and lightblue

[ihorng]

Disregard the above color options. I will be using the design style guide that John provided to come up with the color options.

[ihorng]

Figma link: https://www.figma.com/design/9hPmNSsyaH2VMGNz5mffmI/FOLA-Design-%232?node-id=640-122&t=wMNYmITyir6PhIbK-1

Additional comments:

• For the toast message, there should be a question mark at the end since the answers are yes/no. I feel the sentence can be a bit more humane to help motivate users to want to answer the survey. I've provided more options in the above figma file link, under "Toast message options."

Updates:

• I've created additional 3 color options for the toast message, above figma link under "Toast color options"
• I've mapped out the different flows and kept it separate. Each of them serves a purpose which is why I didn't combined them all in one in the above figma link under "Flows"

[fancyham]

Related Research issues about gathering info about our users and food-seekers. Adding them here to connect the issues as this tool will help us with those research projects.

• Conduct user insights survey for preliminary research on foodseekers #1525
• Gather demographics about our food seekers #1441