Update questions and related copies of User Input Screens

[kuasha420]

Feature Description

To simplify the flow and encourage more users to complete the User Input question, the questions should be reduced to 3 according to the new Figma design.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The questions shown in the User Input Page and Settings Page should be updated to reflect copies in the latest Figma design.
• The questions, question hints and answer options must match the copy in the aforementioned design.
• The number and sequence of questions must also follow the design.
• Only the texts (copies) should be changed as part of this issue. The new designs will be implemented on #5890 and other issues.
• The arguments of POST:core/user/data/user-input-settings route should be updated to reflect the updated questions.

1. PURPOSE, formerly GOALS
2. POST_FREQUENCY
3. GOALS, formerly HELP_NEEDED

Implementation Brief

• If you take a look at the Figma designs linked in the ACs, you'll notice that the inputs have been reduced to 3 from 5, the remaining have been re-ordered, and their contents have been updated. Hence, in this issue, we want to remove all references to the old inputs, and update the existing ones (including constant names and properties using which they are saved to the back-end).

• In includes/Core/REST_API/REST_Routes.php:

  • In the get_routes() method, locate the route definition for core/user/data/user-input-settings. In this route definition, for the WP_REST_Server::CREATABLE method, update the args[data][properties][settings][properties] array:
    • Rename the role property to purpose.
    • Remove the helpNeeded and searchTerms properties.

• Across the assets/js/components/user-input/ folder:

  • Update the definitions and all usages according to the following:
    • USER_INPUT_QUESTION_GOALS => USER_INPUT_QUESTIONS_PURPOSE
    • USER_INPUT_ANSWERS_GOALS => USER_INPUT_ANSWERS_PURPOSE
    • USER_INPUT_QUESTION_HELP_NEEDED => USER_INPUT_QUESTIONS_GOALS
    • USER_INPUT_ANSWERS_HELP_NEEDED => USER_INPUT_ANSWERS_GOALS
  • Remove definitions and all usages of the following:
    • USER_INPUT_QUESTION_ROLE
    • USER_INPUT_ANSWER_ROLE
    • USER_INPUT_QUESTION_SEARCH_TERMS
    • USER_INPUT_ANSWER_SEARCH_TERMS
  • Update the definition and all usages of getUserInputAnwsers() to getUserInputAnswers().

• In assets/js/components/user-input/util/constants.js:

  • In the USER_INPUT_QUESTIONS_LIST array and object returned from getUserInputAnswers() function, re-order the remaining constants in the following order:
    • USER_INPUT_*_PURPOSE
    • USER_INPUT_*_POST_FREQUENCY
    • USER_INPUT_*_GOALS
  • In the getUserInputAnswers() function, update the copy of the answers according to the linked Figma designs in the ACs.

• In assets/js/components/user-input/UserInputQuestionnaire.js:

  • Remove the <UserInputQuestionWrapper /> components which do not contain the slug prop value included in the USER_INPUT_QUESTIONS_LIST array.
  • Re-order the <UserInputQuestionWrapper /> components according to their order of the slug prop value in the USER_INPUT_QUESTIONS_LIST array.
  • For the remaining <UserInputQuestionWrapper /> components:
    • Update the title and description props values according to the linked Figma designs in the ACs.
    • Update the questionNumber prop value according to its order of the slug prop value in the USER_INPUT_QUESTIONS_LIST array.

• In assets/js/components/user-input/UserInputPreview.js:

  • Remove the <UserInputPreviewGroup /> components which do not contain the options prop value included in the object returned from getUserInputAnswers().
  • Re-order the <UserInputPreviewGroup /> components according to their order of the options prop value in the object returned from getUserInputAnswers().
  • Update the questionNumber prop value and the second parameter of the goTo.bind function in the edit prop according to its order of the options prop value in the object returned from getUserInputAnswers().

Test Coverage

• Reflect the above changes in the following test suites:
  • assets/js/googlesitekit/datastore/user/user-input-settings.test.js
  • tests/e2e/specs/user-input-questions.test.js
  • tests/e2e/plugins/user-input.php
  • tests/phpunit/integration/Core/Util/User_Input_SettingsTest.php
• Fix any other failing tests.
• Update VRT references if required.

QA Brief

Changelog entry

[aaemnnosttv]

@kuasha420 this seems like a large change to update all the questions and the design in the same issue. It also might have problems by doing this separately from the changes to the API where the questions are also defined.

I would suggest we adjust the distribution of work between this and #5889 as follows:

• Make one issue about updating the questions, in the UI + the API
• Make the other issue only about implementing the new design, dependent on the first

This way, we should be able to go through the flow with the current design using the new questions, and then the other issue can be specific to the design only, and less about technical details.

[kuasha420]

My idea was to only update the question copies (question, description, hints and the answers) here. The new design should be implemented in #5890.

I think the confusion comes from me linking the Figma design and not mentioning copies explicitly. I will make that change.

However, I think based on your suggestion, I can add the API changes in this issue and close #5889. Then put the Cancel button on the #5890 and close #5892. Although I think we can parallelize a bit of work by keeping the cancel button issues separate as besides the button, there's some logic involved there as well.

[techanvil]

Hi @nfmohit, I have a couple of comments on the IB.

Looking at the questions as they now stand in Figma:

1. What is the main purpose of this site?
2. How often do you create new content for this site?
3. What are your top goals for this site?

This does not correlate well with the suggested reuse of the constants:

1. USER_INPUT_QUESTION_GOALS
2. USER_INPUT_ANSWERS_POST_FREQUENCY
3. USER_INPUT_QUESTION_HELP_NEEDED

Obviously USER_INPUT_ANSWERS_POST_FREQUENCY is OK, but the other two don't match the questions - in particular this is a problem for USER_INPUT_QUESTION_GOALS because the question about goals is now question 3. But, also USER_INPUT_QUESTION_HELP_NEEDED is no longer a good description for the question.

As a suggestion, how about an additional step in the IB:

• Rename USER_INPUT_QUESTION_GOALS to USER_INPUT_QUESTION_MAIN_PURPOSE.
• Rename USER_INPUT_QUESTION_HELP_NEEDED to USER_INPUT_QUESTION_TOP_GOALS.

Alternatively it might be better to rewrite the first bullet point more comprehensively. What do you think?

Note that other areas in the IB may also need a bit of tweaking to make sense following this change, so please review it and make any further changes as necessary.

One more thing, seeing as getUserInputAnwsers is mentioned, might as well add a note to fix the typo in the name :)

[nfmohit]

Very valid feedback, @techanvil! I have updated the IB, thanks!

[techanvil]

Thanks @nfmohit, LGTM!

IB :white_check_mark:

[sashadoes]

This ticked is stuck because of the timeout error in e2e tests here. Unfortunately, I am running out of solutions and need someone more experienced to look into it. cc @FlicHollis @aaemnnosttv @jimmymadon

[FlicHollis]

Thanks so much for the update @sashadoes if you want to hand this off to someone else please un-assign yourself and move the ticket to EB. Or alternatively, you can keep it assigned to you and wait for someone's support.

[aaemnnosttv]

I made some progress on this yesterday after speaking with @sashadoes about it. Will revisit today but should be able to get it unblocked soon I think.

[aaemnnosttv]

@kuasha420 as part of this I noticed a few places that still mention 5 questions but it looks like those were out of scope here. Do we have another issue which addresses these?

[kuasha420]

@aaemnnosttv Nice catch. No I don't think we have any open issue for updating the CTA as I envisioned it being updated as part of the Key metrics epic. Is it worth creating another issue to just update the copy here? Also, did you find any other place where it mentions 5 instead of 3? Cheers.

[wpdarren]

QA Update: ❌

@kuasha420 I have a number of observations, which maybe expected but didn't want to assume.

1. On my test site the text You can always edit your answers after your submission in Settings. appears but on Figma its suggesting that the copy should be You can always edit your answers later from Settings

2. In the first question, one of the options is Generate leads but I do not see that on figma design.

3. According to figma, when a site has more than one admin user, a message is to appear Your answers will apply to the entire WordPress site: any other admins with access to Site Kit can see them and edit them. but this does not appear on my test site. This might be expected at this stage but thought I would flag.

4. On my test site the text Choose up to X (X) answer appears but this does not appear on Figma design. I suspect that the figma design is inaccurate but wanted to flag.

[kuasha420]

@wpdarren Thanks for the detailed report. This issue is only about updating the questions, description of the questions and answers. The other copies will be handled as part of the redesign happening on #5890.

For that reason, only no. 2 should be tackled here from your list as I also don't see that option in Figma or the design doc. Other things will be handled in the aforementioned and other issues.

@sashadoes Can you create a follow up PR removing the "Generate Leads" option? Cheers

[wpdarren]

@kuasha420 - I did wonder if that was the case, thank you for checking! 👍

[aaemnnosttv]

Thanks @wpdarren – back to you for another pass 👍

[wpdarren]

QA Update: ✅

Verified:

• Checked the questionnaire. Only 3 questions are displayed as per the Figma designs.
• All other functionality renames the same.

Screenshots