Create walk through to guide users through how to use the app

Right now our UX isn’t good enough to for the site to be self-explanatory to users, so we are going to use modal popups when users visit a new page to show them what the most important functions of that page are and how to use them.

There will be one modal for:

  • the Homepage (Reactjs)
  • the Local side (Reactjs)
  • the Global side (Discourse Plugin)
  • Categories/subcategories in the global side (Discourse Plugin)

The modal should walk users through the main choices for that page one at a time, so when a user visits one of those pages for the 1st time it will probably shadow out the rest of the screen and users will click through to read about the main functions of that page.

I think that should be enough.

Here’s a good possible example to create a walkthrough:

https://react-joyride.com/

It allows us to highlight elements in the React side and home page and explain to users how to interact with them.

I’d like to take on this task. So where should I start?

1 Like

Great! Here’s our Git for the Reactjs side

I’ll send an invite if you aren’t already in the team over there. Only the local (map) side of the project will load on a local version, and i’m ok with whatever package you want to use. We just want to be able to put text boxes on elements of the platform when a user 1st sees them, so we can explain how the platform works for new users. We’ll then use a plugin to do the same on the Global (forums) side.

You don’t need to worry about the homepage as that is being rebuilt right now and there should be a new live version by the end of the week.

Oh, all our text is imported via i18n add we have different platforms running the same codebase. Check out the i18n post in the documentation section here, it’s very simple :slight_smile:

16 posts were split to a new topic: NPM run error