Design the new user guide modal and get feedback

[shreyaydi]

We’ve designed two flows to guide first-time users. Please check out these design Figma files:

1. Organization registered with IATI
2. Organization new to IATI

The key difference is on the first screen, where the publishing settings vary depending on whether the organization is already linked with the registry or needs to be linked.

cc: @praweshsth

[emmajclegg]

Thanks @shreyaydi, I like the design of these. I'll ask my IATI Support colleagues for feedback as well, but here are some initial comments:

• To check I understand how it works - a new user will see the "Welcome to IATI Publisher" pop-up the first time they log in after registering their organisation. Which version they see will depend on their registration route (new vs. existing publisher). Once they have skipped or finished the guidance, any user can access it again via their profile dropdown. Is that right?

• Step 1 looks to be the wrong way round for "My organisation is new to IATI" vs. "My organisation has registered with IATI" (it's the second case that needs an API token to be completed)

I've left a few comments in the Figma designs, and will add further ones after talking with colleagues tomorrow. It's definitely looking good though!

[emmajclegg]

@shreyaydi - after my comment above, I've spoken to colleagues to collect further feedback.

Our main reflection is - rather than the user exiting the wizard at each step to go to the relevant page in IATI Publisher, then having to find it again to continue, is there a way to keep them more within the wizard for steps 1-3? We feel it breaks up their user journey otherwise, and there's a risk they don't return to the wizard and remaining steps.

I'm open to ideas here, but ones I've suggested in the Figma comments:

• rather than a user exiting Step 1 to go to Publishing Settings and populate their API token, could they enter the API token directly in Step 1 of the wizard?
• rather than a user leaving Step 3 of the wizard to go to their Organisation Data, could they be prompted to publish the minimum core elements with the wizard still on screen?

This applies to steps 1-3, then I think it's fine for the user to exit to the Activity Data page at Step 4, as you've currently got in the design.

I've added some other minor Figma comments, mainly around wording.

Happy to discuss - any questions let me know.

[shreyaydi]

@emmajclegg Thank you for your feedback, we will look into them and update the designs accordingly.

[shreyaydi]

@emmajclegg The flow you've suggested will definitely help users quickly complete their necessary settings, but this might take more time than what we've estimated, as we will need to use different components for the settings to be done from that screen.

[emmajclegg]

Hi @shreyaydi - I think it's fine to spend a bit more design time on this at this point. On the development side, if this increases the complexity and time needed by a few days, I think that's fine - if we're talking more effort than that, then it's probably not worth doing.

I'll take your steer on what the lowest-effort way of adjusting the flow might be, with the main thing being making it easier for the user to pick the wizard back up at the point they left off.

[asminashrestha]

@emmajclegg

We’ve updated the design for the two flows to guide first-time users. Please check out these design Figma files:

1. Organization registered with IATI

2. Organization new to IATI

[emmajclegg]

Thanks @asminashrestha.

I've highlighted some typos in the Figma comments and suggested removing the completeness alert on the Default Values step, but otherwise the designs look great.

[asminashrestha]

hi @emmajclegg One more thing we wanted to share: Please take a look at this Error state. In step three of the onboarding process, users will encounter an error state if they attempt to publish before their email has been verified or if their account has not been verified on the Registry. This is crucial because publishing is not allowed until verification is confirmed. The error message displayed will clearly inform users of this requirement, ensuring they understand the necessary steps to proceed.

[emmajclegg]

Ok - that makes sense @asminashrestha. I've added some comments to the Figma design about wording, but otherwise all looks good.

[PG-Momik]

Closing this issue since the user story has been deployed to prod.

cc: @emmajclegg @BibhaT @asminashrestha @Yash-ftW