Create Figma wireframes for the template builder

[mariapraetzellis]

The Template Builder is the section of the application that allows administrators to create new templates and customize existing templates. Functionality needed for this area:

High-level functions

Template level functions

• Publish/unpublish
• Change visibility
• View history
• Edit title
• Preview template

Section level functions

• edit
• copy locally
• copy to another template
• remove sections
• publish/unpublish
• create new section
• move questions & sections around

Questions

• add new questions to a section- drag questions from the question library to the template
• change order in which questions appear
• create new questions
• edit existing questions

Additional requirements are described in the work plan and Edinburgh meeting notes

[mariapraetzellis]

Notes regarding building templates from the Edinburgh meetings:

We will utilize section and question banks to allow users to submit groups of questions all at once and edit and define preferences.

1. Template- includes 3 or 4 settings for the template level (visibility…) - includes sections, and questions with buttons to add new
2. Includes reordering of selections and questions
3. Add a new section to a template: opens the dialogue to select existing (with a filter, mark best practice) or custom. New sections are added to the org’s section library. After saving, it goes back to the home page of the template
   • Starting with existing or custom takes you to the pre-populated or empty dialogue box to define the template
   • Add questions to the section that becomes the default
4. Add a new question to the template:
   • Existing or custom>if custom includes settings if existing opens the dialogue box of the section settings
5. Question definitions>custom or library>if custom, then select the question type>Question text/settings/conditional logic/required/more complicated widget settings
6. We will add a new question type, “Update a plan.” This will trigger an email notification to user about updating their plan- new question type & add to the Basic template.

[cazinc]

@mariapraetzellis @briri @jupiter007 @fraserclark @andrewebdev here are some thoughts about how to break down the larger Template Builder process into more digestible chunks for wireframing and reviewing. I'm basing this on the bullet points in the description of the card, with an eye on related functionality and the relative scope of each bullet point, as well as how much discussion I think each bit of functionality will generate:

• Sprint: Publish/unpublish, Change visibility, Edit title, View history
• Sprint: Create section, Edit section, Remove section, Copy locally, Copy to new template, Publish/unpublish section
• Sprint: Add new questions to a section, change order of questions, edit existing questions
• Sprint: Create new questions, Move questions & sections around

[briri]

Thanks @cazinc I think that sounds like a good way to break things apart. Are you thinking they should be tackled in the order in which you've listed them here?

[mariapraetzellis]

Zach says we should do these in the order he mentions above. We can do user testing between sprints 2 & 3. Brian & Juliet will work on the build-out of 1&2 after user testing & while Zach works on 3&4.

@cazinc can you make tickets for these sprints?

1. Sprint: Publish/unpublish, Change visibility, Edit title, View history
2. Sprint: Create section, Edit section, Remove section, Copy locally, Copy to new template, Publish/unpublish section
3. Sprint: Add new questions to a section, change order of questions, edit existing questions
4. Sprint: Create new questions, Move questions & sections around

[cazinc]

Hi @mariapraetzellis given that this breakup into separate cards could end up making this bit of wireframing run over 4 x 2 week sprints, Fraser plan to tackle these together, cutting the total time in half. Does that sound OK?

Assuming it does, we are actually thinking that (for our purposes mostly!) it would make more sense to tackle them in reverse order: 4 → 3 → 2 → 1. We also think it might be easier for the testers if they test once all 4 sprints are done instead of in the middle, as that should result in more of a "finished project" and a bit more context within which to test things. Again - sound OK? I think in terms of timings, with us both working together, the schedule would be the same (i.e. after 2 sprints).

[fraserclark]

We have an initial draft of the Template builder finished.

There is a few discussions points which we can talk through on Thursday.

Video Walkthrough I have recorded a video walkthrough

https://www.loom.com/share/6a7b1bcdda9644f197bcd042f8eddc62?sid=bd70411b-076c-47ab-926d-b21a7c8987b8

Figma Prototype Mode You can press "R" to restart to beginning at anytime.

https://www.figma.com/proto/RRtoRLyr5Spf0KiyRfEclt/DMP-Explain?node-id=69-345&t=N2jvNbe3g9eOxDc7-0&scaling=min-zoom&page-id=6%3A66&starting-point-node-id=69%3A345

Discussion

• "New or Existing Template" - should we stack the deck with a less obvious "start from blank template"
• Adding Collaborators as part of the first steps of creating a template
• Do we need a specific way to set a maintainer when creating a template, or is it the owner"
• Does "Collaborator(s) = Maintainer(s)" - do they have different roles and permissions?
• History - Right now it is just a list more like a basic audit trail - does publish require a "comment" on the changes??
• Adding a new section - does it make sense to include the pre-built questions and does it it need a "maintainer" attributed to them? Do we need to separate it out like "Your sections" vs "Best practise sections"
• Email/Notifications - Need to clarify this again.
• Anatomy of question/section on the editing pages

Let me know us your thoughts/first impressions and look forward to chatting it through on Thursday.

@jupiter007 @mariapraetzellis @briri @cazinc @PaulaReeves @andrewebdev

[mariapraetzellis]

@fraserclark Thanks so much for the video! It made reviewing the wireframes much easier & great to see all the work you got through on this.

Here's our notes on the wireframe for the template builder:

• Start the deck with the "New or Existing template"- I'm unsure what you mean here.

• Adding collaborators to a template is helpful as sometimes users from different orgs work together on templates. This isn't done often, so there might be a better place to put this field.

• "Collaborator(s) are not the same as Maintainer(s)." Collaborators would be used to allow users from another organization to edit a template. For example, a data librarian at UCB is granted permission to edit a template from NIH. A maintainer can be from any organization and are users who either create or edit a template.

• Editing a template should not require a "comment" on changes.

• Pre-built questions sections do not need to be attributed to a maintainer & do not need to be separated out (Your sections" vs "Best practise section). I'm not sure what you mean by "Adding a new section - does it make sense to include the pre-built questions"

• We were confused with the "anatomy of a question" section & unclear how the areas were mapped.

Additional comments

• Let's discuss adding the ability to view/preview old versions of a template

[fraserclark]

Thanks @mariapraetzellis - just to clarify some of the confusion,

"New or Existing template"

Sorry if this wasn't clear, I offered 2 alternatives in the Figma

The first being this model of selection

The second I offered at the end of the video

As we built these, we weren't sure if the choice should be like the first one where its very clear "create from an existing template(eg duplicate in some way)" or start completely from scratch

As we talked more, it felt like you almost never want people to build from scratch, unless they really know what they are doing.

So the second option was trying to highlight the "hierarchy" and clear up perhaps some confusion on duplicating a template- the choice is either create using a previously created template OR build from a template made by DMP Tool, and finally "build from scratch"

[mariapraetzellis]

Notes on our discussion from the team meeting:

We've decided to record version history when a user publishes a template, rather than every time it is saved. Comments are optional. @fraserclark will modify the wireframes.

Move questions over when selecting existing sections.

Anatomy of a question:

• Change to include a link to preview for each question and section, which will take the user to the specific section/question of the template they are working on. I will make the preview button more prominent.
• Create a secondary button that allows the user to see a preview of where the question will display and include the order of fields.

[fraserclark]

Hey all,

Thanks for writing up those notes @mariapraetzellis

Figma link is same as before and it's interactive - I will clean things up a little, but wanted to get something started, while it was fresh in my mind

https://www.figma.com/proto/RRtoRLyr5Spf0KiyRfEclt/DMP-Explain?node-id=69-345&t=N2jvNbe3g9eOxDc7-0&scaling=min-zoom&page-id=6%3A66&starting-point-node-id=69%3A345

Start screen I swapped out that first screen with the following as seemed like people were in agreement that this is better than the old radio-button style. (Not deleted anything - still there if we decide to go back or revisit)

Updated add new section Just to make consistent, so you see your previously created ones first and then the DMP sections

Publish button It now opens a modal, almost like a "confirm you wish to publish".

We have a summary of what happens/consequences of publishing (I just put in some dummy content for now), we have an optional change log section

History simplified History just showing published dates and also added for now the changelog if entered

Anatomy of a question Remove/hidden this for now and added a preview button and experimenting with Brian's suggestion of having some kind of layout in a more tooltip approach

Sharing/collaborator

I have updated this too, but still very early.

[mariapraetzellis]

Hi @fraserclark thanks for the updates. Here's my comments:

1. Start screen: I like the new layout. I have one small change left: please change the wording on "Modify your existing templates" to "Modify existing templates." This is because most templates they will be modifying were created by the DMP Tool rather than the user.
2. Updated add new section: this looks good
3. Change text to read: "After publication, all new plans will use this version. In-progress or existing plans will not be updated. This plan will be available to all DMP Tool users OR this plan will only be shared by users from your organization." The change log looks good.
4. History looks good
5. Anatomy of a question: I'm still not sure about having both the preview and "How would this look." I'm okay with leaving both in and getting user feedback.
6. Sharing: this looks good so far. I'll have some text tweaks when it's ready.

[jupiter007]

Fraser has address 5/6 changes from above. He will address #6,Sharing: this looks good so far. I'll have some text tweaks when it's ready., by Thursday.

[fraserclark]

We have addressed the last of the changes from above.

We are listing all "collaborators" over 2 lists.

The first being the people in your organisation, so its very transparent who has access to edit.

And then underneath having additional external collaborators along with the invite a new person

I know there is some chat on the template picker card issue #31 about "maintainer" being visible, which I would expect to have some kind of control in this section too, but will update once that has been resolved

Let us know your thoughts,

@jupiter007 @mariapraetzellis @briri @cazinc @PaulaReeves @andrewebdev

[mariapraetzellis]

Rather than including a list of all administrators (which could be very long), we will include this message: "All administrators at ORGANIZATION NAME have access to edit this template."

I think the second question regarding "maintainer" is no longer relevant since we've decided to utilize "Last edited by" instead. The "Last edited by" should be visible on this page.

[mariapraetzellis]

@cazinc Have we resolved this issue? Are the notes from the comment above addressed in the wireframes?

[cazinc]

Yes @mariapraetzellis should be - screenshot attached just to double check. If you're happy with that it should be all good.

[bofstein]

I've written a few of my own comments here. They're all very minor, like wording changes or clarification points, no significant changes.

https://docs.google.com/document/d/1ZPY94V2okH3tupd-t7Fw-97jNWwGPt9s1jPJjgwu5ss/edit#heading=h.awo1lzchgxu6

[cazinc]

As discussed I've setup a dedicated card for feedback now: #625