UI / UX Overhaul - Redesign Term 1 2024

Top-level issue for the PCSC 2024 Term 1 Work Packages

Summary

Detailed Work Table below for all issues addressed in the MVP
See "Linked Issues" for more info on each issue
See This Spreadsheet for available billable hours and spreadsheet detail (copied below, but original is in this link)
See "Previous Notes and Discussions" for past notes, and "Want to have" and "Nice to have issues" we may want to pull forward.

Developers

Please apply work roughly according to the hours split in the Detailed Work Table below.
As you create sub-issues, please link them (as related issues) to one or more of the "Linked Issues" associated with this issue (consider this issue as a top level issue to keep them tied together).

Process for this document

(ongoing) add issues, comments, etc as work happens.
(weekly with Devs) Review updates + improvements, check off issues in Table below as they are completed.
(as needed) Review with OT (Nat) as updates happen.

Detailed Work Table

Work Package		56%
	Priority	Regen Score %	QSL %	Personnel	Est. Hours	Output	Description	Issue Link
☐	MVP	44%	56%	Manuel, Benoit		Vue 3 Deployed	Initial deploy of Vue 3 update to existing application	UI Implementation
☐	MVP	0%	100%	Everyone		Rights + Roles Design Doc	Design new rights, roles and permissions structure based on feedback (link to spreadsheet	Rights and Roles
☐	MVP	44%	56%	Greg, Aaron		Figma Updated	review and improve UI based on feedback (see miro feedback, highlight color, top left selector, etc.)	UI Implementation
☐	MVP	44%	56%	Aaron, Greg		Design Guide	Define front-end components (figma) and define expectations around components (Design Guide)	UI Implementation
☐	MVP	0%	100%	Brian, Manuel		Rights + Roles Implemented	Implement Roles / Visibility changes (backend)	Rights and Roles
☐	MVP	100%	0%	Brian, Manuel		Drafts UI Implemented	Integrate Drafts in updated UI	UI Implementation
☐	MVP	0%	100%	Brian, Manuel		Scripts UI Implemented	Review and, if needed, update Scripts for new UI	UI Implementation
☐	MVP	0%	100%	Brian, Manuel		No QS Data Accumulation	Turn off QS data accumulation (unless a discussion is had to achieve a low-effort alternative outcome).	Turn off QS Data Accumulation
☐	MVP	44%	56%	Aaron, Greg, Manuel		Feature / Work List Produced	Developer + Community review: how does the update functionality impact priorities and feature options for the next term, and what should we prioritize?	Developer + Community Review
☐	MVP	44%	56%	Manuel, Benoit		Component Library Produced	Build UI Component Library, using Storybook (if feasible)	UI Implementation
☐	MVP	44%	56%	Manuel, Benoit		Core SS UI Implemented	Update UI from new Component Library everywhere	UI Implementation
☐	MVP	44%	56%	Manuel, Benoit		Just-in-time Support Documentation Implemented	Create better screens to explain the core entities, especially with regards to rights and roles. Discussed options: a 'starting screen' when a user is creating an entity for the first time, 'walk through' popups on pages, etc. Feedback from several groups identified more explanation as required (part of MVP)
☐	Want	100%	0%	Manuel, Benoit		Results page Implemented	Update the Results page to the new UI in Figma
☐	Want	100%	0%	Manuel, Benoit		Sections, Progress, Images added	Add to Submission process Sections, Progress bar, and Images as background.
☐	Want	0%	100%	Aaron, Greg, Manuel		New user flow implemented	Create flow for new users to create a new group
☐	Want	0%	100%	Brian, Manuel		Implement export/import Survey UI	Improve survey export / import UI to make it easier to user

**Previous Notes and Discussions**

So far, meeting with Aaron from Terran Collective on the redesign. Notes are below in the comments.

Notes for features required for the current UI to work: Clean up #237 , add

if it's shared + split
use checklist formatting
add estimated hours
add simple description
create place for link for subtasks
make sure dev's link back to this issue via child items...

MVP

(done by 2-14-24) (blocker) (Greg, Brian, everybody, 1 - 2 weeks) Ensure we understand and agree on group behavior + roles + permissions
- (greg) talk with Nat and Vic... reorient around 'sharing methods, less share data'
  - Yes, sharing methods generally speaking. However, they still feel that sharing Surveys should not be implemented until a private survey option can be available. That's because until now, Survey sharing hasn't really been possible (besides the /edit hack) and that would confuse or upset users. They also liked the "Share Results" as a separate choice. That means:
  - In MVP, do not include
    - 'view only' option for surveys
    - 'copy to new survey' option for surveys. Optionally we may want to consider making it easier (coding) / more obvious (UI / documentation / informational pop-ups) to export / import using existing export/import.
    - ensure we turn off question set data accumulation, or make it a choice.
  - in MVP, do include:
    - additional option to choose who can see results.
- engage collabathon conveners, give opportunity to provide feedback
- Can submissions only go to the group the survey in.
- Can we use membership as the definition of submission rights (today it's admin membership only as a "pointer").
- Questions?
  - What combinations exist today? What do we already see?
  - What about data migration?
  - What use cases may cause issues?
  - What about future use cases (maybe sharing) that this could impact?
  - Are there submissions that don't belong to a group?
    - NO!
Aaron / Greg (2 weeks) review and improve UI based on feedback (see miro feedback, highlight color, top left selector, etc.)
- Review functionality of Drafts w/ Brian
(blocker) (Greg, Aaron; review w/ team) Define front-end components (figma) and define expectations around components (Design Guide)
- Review functionality of Drafts w/ Brian
Implement roles / visibility changes: https://docs.google.com/spreadsheets/d/19SqeZZXNWWttU1CYDGzE2lWW-hlA9yblDyxyAMP1XMI/edit?usp=sharing
Build component library
Integrate new updates to Drafts into the current UI.
- Review Drafts in new UI - what needs to be added/changed, etc.
- Remove ability for non-logged in users to save drafts, because currently they won't be able to come back to them anyway...
Don't allow QSs to accumulate data, because if results are not fully publicly visible but the question set results are (as they always should be), then that wouldn't fit user expectations.
- We haven't really tested if QS data accumulation is useful, but so far no one except us has actively used it. Ideally this is something we can 'turn off' and potentially turn back on later, or provide an option to enable it for those who want it. The other option (if it's easier) is to only accumulate from surveys that submit with the "Results Visibility" set to "anyone".
Review Scripts to ensure they work in the new UI
- option - make a copy and assign the copy to the respective survey group that the script is in. Then it shows up in the right list (group's scripts) and there's not failures (inability to edit a script used in my survey, mistakes in editing a script used in someone else's survey).
(Greg, Manuel) More comprehensive long-term review for reference implementation of Regen1 and QS Library features
- Better understand what the purpose of a reference implementation is
- decide the highest value things we should focus on
- review with OT, community (as needed) and internally (tech).
Update application UI everywhere except Results page and Sections/Progress bar.
- Talk w/ Aaron to see where he can plug in
- Changing the Theme / using Storybook
- Changing the controls
- Changing navigation / layout
- New pages (All Groups page, Group Landing page, Question Sets list page)
A 'start new survey with QS' endpoint to initiate a new survey w/ the QS embedded in it.
A 'create a new QS' endpoint to initiate a new QS. Needs to be able to also share with a group (current in-context group).

Want to have

Updating the Results page
We should add "Sections", "Progress update bar" and Images (as landscape objects) in Surveys as specified in the previous miro board.
- Complete Scoping
- Add to Figma / Design
(greg, dan, aaron) Create a flow to create a starting group for new users. This is needed because now users won't be able to easily see or access survey creation tools which is a 'My Starting Group' on user creation. This allows anyone to quickly and easily access survey creation tools for testing, otherwise it'll be hard to get started on the platform (path too long).
- I think if people can't see the actual results for many surveys, we may want to add the ability to provide estimated total submissions as well. This gives a sense of the quality of the survey via use, which they won't be able to get in many cases from the Results page now.
- (dan) doesn't like auto-creating a group with their name, but agrees someone needs a group. Can we help onboard them to create a group - what's that UI look like.
- (manuel) we need clarity on the user flows, to ensure people are seeing the onboarding flow in the right place and time and can learn.
Create a "View" (uneditable) option for submissions. This allows the My Submissions screen to include a "View" option to see results. This is both expected by the user, and also allows users to avoid the "Results" view which requires them to go to a different page. Potentially, this could be combined with the existing PDF output or a review of it as the structure could be similar (re. discussion with Brian). This could also be as simple as allowing them to open the survey but not edit it, especially if we improve the survey review screen.
- Allow view-only opening submission (w/out ability to submit)
- Improve survey Review screen.
Improve the export / import UI to make it easier to use.

Nice to have

We need the ability to create a new script in the builder - right now you can only do that in the Scripts search area.
Create a "View" (uneditable, /edit) option for surveys, question sets, and scripts. This allow users to view something easily without editing it.
- Allow view-only opening survey in editor (w/out ability to edit/save)
Create walk through guide (?) for key pages connected to the (?) button
- We could work on the tutorials themselves with the community success team at least
Create a "Tutorials" group which populates the templates list and can be easily filtered via the global or group contexts. Ensure that we can manage those and keep them up to date and deploy them to those UI locations easily.
- We could work on the tutorials themselves with the community success team at least.
I think we're going to want to have a "copy to new Survey" UI that allows users to also specify the group they are copying to, and then jump to that group context...
Implement "Sharing" to multiple groups and with Scripts.

Details and Notes

Current Concepts

"Active Group" - the group the user is currently viewing. Active group:
- Sets the visible pinned surveys in "Browse" and on the main screen
- Used to (but does not currently) assign any submissions occurring to the active group using meta.group.id and meta.group.path
- Proposed Change: Keep data structure but improve the UI to reduce failures.
"Default Group" - default group to submit a Survey to. Default Group:
- Assigns any submissions to the Default Group using meta.group.id and meta.group.path.
- Allows the admins of the Survey's "Default Group" to edit the Survey. This includes changing the "Default Group" itself.
- Proposed Change: Keep + Expand data structure but replace UI with "Sharing" dialogue.
"Entity Creator" - has rights to:
- edit, delete, reassign a survey or question set
"Group Admin"
- has rights to: edit, delete, reassign a survey or question which has 'Default Group' set to their group.
- causes group to appear in Active Groups list.
- allows submission for surveys marked 'submit by members only'.
- gives access to admin panel + associated tools / rights
- enables assignment of a survey's "Default Group" to this group
- Proposed Change:
  - Do not allow delete (reserved now for creator)
  - they also now have admin rights over scripts which can now also be similarly shared
"Group Member"
- causes group to appear in Active Groups list.
- allows submission for surveys marked 'submit by members only'.

Entity Sharing Recap

All entities below are public by default. Only the defined 'private' questions in submissions and drafts are not public. This means that there is no need to define a 'view only' role for any entities - they are 'view only' always by default.

How do we implement and reinforce the concept of "Sharing" entities, rather than the system of "Default Group" we have now (which only applies to Surveys and QSs, and not Scripts)?

Imagine I want to share a survey with Group B (also containing subgroups Group 1 and Group 2).
Feature: allow meta.group.id to allow multiple groups (array) or better yet to allow multiple groups and specify the share setting per group. Remove the 'Default group' option for Surveys and see below for new example implementation and options by entity type (follows google docs model).
Reinforce the idea of entity Creator and Sharing by 1) ensuring all entities have a Creator and have a Shared Groups field (this may already be true, but need to check), and 2) Ensuring Creator only (and Proxy Submitter only for drafts / submissions) has the right to delete.
CONCLUSIONS
- We could try to submit to multiple groups but that's probably not this strategy... we'd need to finish
- Punt on this for now. We may find we don't want sharing at this level because we're focused on QSLs as the primary mechanism for sharing
- We can review later after OT's collabathon with regards to entity sharing and commenting on shared surveys/scripts/qs's.
- We're ok with submissions having to be to the group the survey is in for now!

How do we address the problem of 'lost submissions' to groups that you aren't a member of?

Imagine I have a submission or draft in a group which I am not a member of.
Feature: Allow any group that you have non-deleted submissions or drafts in (ie the group is marked in meta.group.id) to show up in your My Groups list.
Users can then find these groups easily, click to go into the Group home page and find their surveys (just like any other group).
In addition - if users want to search and find public groups which allow for public or logged-in user submissions, they may also search in Find Groups, go to the groups page and submit a survey to their pinned or shared surveys. This is not the typical case, but important.
See example "Olive Commission" in Figma.
CONCLUSIONS
- for logged in users, it's infrequent that users want to follow back up with submissions to groups they aren't members of.
- for non-logged in users, they lose submissions and drafts anywauy.
- add a notification so people know what's happening. Have a generalized notifications option on submission
- note - also they have the option to download to keep a personal copy worst comes to worst
- Questions... how do we define ownership (currently through authorhsip + admin membership, but perhaps we should do it now through membership)... that would allow UI and API to be consistent (which they should)... maybe this enhances membership.

@gbathree Things I still need to do in UI

Questions for feedback

Get rid of "All my Drafts" and just always show all the drafts? In theory this could be awkward... but not sure if that would ever actually happen...
Where does superadmin go?
What does a white label look like, and does it work given all the new rules?

User Journeys

User who arrives via www.surveystack.io
User who is auto-joined to a group, and sent an invite via call for submissions
- This works. The are initiate the survey in the group context defined in the link.
Project Managers
- Main PM creating many subgroups, creating top-level surveys and assigning them to members in subgroups.
- Then the Subgroup PM creating subgroup survey
- Subgroup PM starts submission on behalf of subgroup member (proxy)
- Main PM wants to review that proxy submission
- Main PM resumits that proxy submission
White Label Manager
- ...
White Label user, auto-joined, filling out form
- ...
...

Future Notes / Features From Discussion

make sure we're not making it impossible to have private options
improve the ability for admins to communicate expectations with their members

Edited Apr 16, 2024 by Greg Austic