MindApp PWA (Quiz Integration)

[cvanem]

Misc TODO Tasks

• Come up with new logo/image for the PWA app. This would be shown in the users mobile device on their home screen.
• start thinking of a domain name for the PWA wrapper. I think something like pwa.mindapps.org would work, or app.mindapps.org. We will need assistance from your IT department in setting this up and connecting the network records. Once the domain url is set up, then you can access the PWA in a web browser and install the PWA to the homescreen using the desired url.
• We will also need another github repository setup on the https://github.com/BIDMCDigitalPsychiatry account. This repository will store the PWA wrapper, which allows the app to be installed on mobile devices.
• We will also need a new Vercel account setup that will host the above wrapper. I am currently using my personal Github and Vercel accounts to host the PWA wrapper.
• Add auto scrolling
  • Scroll to top on next/back operations
  • Scroll to top on search/reset operations

Search Tasks

• Look into and integrate fuzzy searching by app name to improve search result matching, etc.
• Come up with new interface for using search in the PWA without actually using a search bar and header. Possibly just add an icon or popup window with search functionality.
• Connect quiz questions to existing filter logic.
• Add ability to view filters in the results header.
• Add ability to perform text search in the results header.

Quiz Tasks

• Each question should have a next/back button. If a question is NOT multiple choice, it can automatically take them to the next screen when an option is selected
• Since the multiple-choice filter behavior will mimic selecting multiple filters on the database, I think we will need to clarify that if the user selects more than one answer in a question (ie. If they select journaling AND mood tracking for coping skills), they are limiting their options to apps that contain BOTH, as opposed to seeing a subset of apps with just journaling, just mood tracking, or both.
• All questions should have the option to be skipped, we can discuss the best way to do this, either:
• Adding an answer option of "It doesn't matter" or "No preference" (or something along those lines) which results in 0 filter being selected
• Adding a skip button to each question
• As far as wording and who we address question to (client vs. patient vs. you) - I think this will take some group discussion to finalize. The term client is the most generalizable/applicable to clinicians and other users, so I agree it should be used. That being said, if clinicians are our main market, what is stopping us from using the word patient — definitely something we could use John's/other stakeholder insight on down the line.

Result Tasks

• Create new results page for showing results of quiz questions.
• Link existing view app pages and results grid with new UI. Minimize functionality and maximize mobile/tablet UI functionality/performance.

---

Quiz Questions

What type of device do you or your client have?

• Apple
• Android
• Both

Are you or your client able to pay for an app?

• No, I am only looking apps that are totally free (no download fee or in app payments)
• I am okay with paying a download fee, but no other fees
• I am okay with in app payments
• It doesn't matter to me
• Is it important to you or your client that the app has a privacy policy?
• Yes, I only want to be recommended an app with a privacy policy
• Not necessarily, I am okay with using an app that does not have a privacy policy

Are you looking for an app that targets a specific condition?

• Not necessarily
• Stress & Anxiety
• Biploar Disorder
• OCD
• Insomnia
• Substance Use
• (Etc.)

Do you want an app that offers a specific treatment approach?
Not necessarily

• Cognitive Behavioral Therapy
• Dialecital Behavioral Therapy
• Acceptance and Commitment Therapy
• Mindulness
• Exercise

What features/coping skills would benefit you or your client?

• Nothing in specific
• Journaling
• Medication tracking
• Sleep tracking
• Symptom tracking
• Mood tracking

[cvanem]

Example mockups:

[cvanem]

Old Quiz Questions (For Reference):

[cvanem]

• I combined the supporting evidence and crisis support questions into a single question since they share the same filter category and it simplifies the logic.
• For the condition target question, you listed "No Specific Condition" as an option. This particular filter has a 'Non-Specific' filter option, so selecting No Specific Condition will map to this filter option as opposed to not setting any filter value. I think we should leave this behavior as I described and then add another Skip button at the top that applies no filters.
• For the "Desired treatment approach" question, you listed "Nothing Specific" as an option. Selecting this option will correspond to not selecting any filters for the Treatment section. This particular filter section does not have a "Non-Specific' option, so the result would be selecting no filters. I think we should either rename this option to Skip or remove it and have the user hit the next button. Whatever we do, I think it should be similar to the above "No Specific Condition" question logic so we are consistent. Also, it should be similar to the below question as well. If we either add a Skip button or remove this option entirely and rely on the user to hit the next button to skip, that would work.
• The "Feature Included?" question has the same "Nothing Specific option as the above question. I think we should change this to Skip and apply no filters when this is selected or remove the button entirely.
• The "Desired treatment approach?" question had both an "Acceptance and Commitment" and "Acceptance and Commitment Therapay (ACT)" options. I removed the "Acceptance and Commitment" option as I think these are duplicates? If not, please let me know which questions correspond to which filters.

[cvanem]

• Change skip options to "It doesn't matter" for all questions.
• Make the question stick to the top of the page scroll
• Update Mind image to new non-blurry image
• (Pending) Update features filter to form OR operation instead of AND comparison. Update features question to support multi-select.
• Add landing page for PWA app:
  
• Create vertical/horizontal layouts. Hide app bar.
• Move back/next buttons next to or below progress bar on questions.
• Hide next button on results view.

[cvanem]

New filter/display logic for results display:

TODO

• Show all results with any matching filters
• Sort results by number of matching filters
• Add UI display for matches on Grid item (Meets 3/5 of your criteria or 60% match, etc and show corresponding matching filters)
• Only show at matches which match at least 2 criteria (or do a percent, maybe 20% of filters must match to show in the result grid).

[cvanem]

• Welcome page pop up
  • Increase font size of the "Welcome to MINDapps"
  • Increase font size of and "Answer a few questions..." text
  • Should still be slightly smaller than "Welcome to MINDapps"
  • Add a "Search" button next to the "Start Quiz!" button
    • Search bar use case for context: Patient tells clinician they are using an app and the clinician wants to learn about the app, so they directly search the name without taking the quiz → we are still toying around of exactly how this should appear on the welcome page, but wanted to pilot it for now
• Make all writing the same font size on question pages, particularly increase font size of...
  • Instruction text ie. "Select an option to continue"
  • Question X/7 font in the top middle (increase font size)
  • Text on all banner buttons → Restart Quiz, Search, Back, Next
• Disconnect the "restart quiz" and "search" button from the banner at the top
• Results page
  • Shrink each app card slightly so there is more white space behind them → we want to separate them so people know they can click on each one individually
  • Get rid of colored text box behind "X matches" so that it is just the text in white font
  • Change terminology from "X matches" to "Meets X/X Criteria"
  • Change background color of matching criteria bubbles to green (Right now they are all different colors → every bubble should be the same)
  • Get rid of search bar on results page now that it is on welcome page
  • Change “Is PHI shared” filter name to “PHI shared”
    • This can be changed on MINDapps website as well

[cvanem]

• Can you change Search button to say Search Apps
• Can you add an OR between the Start Quiz button and Search Apps button
  For this, can you make sure the Start Quiz and Search Apps buttons are the same size and still on the same line.
• I agree the filter chips should stay on the results page so that users can remove them as needed. Can you keep these even if you remove the search bar?
• Ideally, the results page could say: “My Search Criteria:” and then lists the filter tags (same format as the “Meets X/X Criteria” and then filter tags).
• For text box size questions...I think we should go with the easier solution and and just keep the Back/Next buttons a bit smaller throughout. Hopefully by doing this we can have this placement: <Back button on top left side → Question X/X text in middle between buttons→ Next> buttons on the right. If you need to play around with the font size for Question X/X, feel free to do whatever fits/looks best.
• Can we cap the results page at 5 apps ie. someone is never shown more than 5 apps that match/are close to their criteria.
  Ideally, these 5 apps could be pulled in order of most similar to their search and most recently updated on MINDapps. Since the database is regularly updated, this would ensure the same apps are not constantly resulting.
• For the search button on the question pages, can you change it say Search Now instead of just Search → we want to more clearly indicate that by pressing it, it will automatically search with the criteria you have inputted.
• On results page, for the blue box that shows “Meet X/X Criteria” —> can you shrink blue box vertically and add more white space between the apps?
• In general, it is still hard to tell that you can click on distinct app pages. Perhaps shrinking the app cards themselves and/or adding a good amount of white space would help indicate this.
• On question 7/7 “Features Included?,” can you align answer text options to the left side of the answer boxes so that the check boxes are aligned?
• On question pages, we are playing around with the idea of changing the question boxes to white with black font and the background of the page a dark blue. I have attached an image to give you an idea of what we mean - but the image is not updated to the top navigation bar, its just to give you an idea of the coloring.
• On the app pages, would it be possible to wrap the text for longer tags in the Ratings and Reviews section for each app? On smaller screens like phones, they often overflow the box that they are in causing the page to scroll horizontally. (See screenshot attached)