MM-25003_Improve Onboarding screens for the desktop app - Intro Screen

[julmondragon]

Summary

Adding Intro Screen:

• For the first time user experience with the desktop app, user will be prompted with a splash screen that will act as a ‘bridge’ in to the product
• There are auto-advancing “slides” on a 4-second timer with controls to manually advance through the slides
• There will also be a “Get started” button below that will take them directly to the Add Server screen (which consists of the add server modal).

Ticket Link

https://mattermost.atlassian.net/browse/MM-25003

Checklist

• [ x] Added or updated unit tests (required for all new features)
• [x ] Has UI changes
• [ x] read and understood our Contributing Guidelines
• [x ] completed Mattermost Contributor Agreement
• [ x] executed npm run lint:js for proper code formatting

Device Information

This PR was tested on: macOs Big Sur 11.6.6

Screenshots

Dark mode

Light mode

Release Note

Adding Intro Screen for first time user experience.

[devinbinnie]

/update-branch

[mattermod]

Building app in separate branch.

[mattermod]

Successfully building:
https://circleci.com/gh/mattermost/desktop/21772
https://circleci.com/gh/mattermost/desktop/21771
https://circleci.com/gh/mattermost/desktop/21770

[julmondragon]

Successfully building: https://circleci.com/gh/mattermost/desktop/21772 https://circleci.com/gh/mattermost/desktop/21771 https://circleci.com/gh/mattermost/desktop/21770

build-linux-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-linux-x64.tar.gz

build-windows-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-win-ia32.zip tmp/artifacts/mattermost-desktop-5.2.0-develop.1-win-x64.zip

build-macos-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-mac-m1.dmg tmp/artifacts/mattermost-desktop-5.2.0-develop.1-mac-x64.dmg

[julmondragon]

@matthewbirtch

2. Can you make sure the 'Get started' button uses Open Sans Semi Bold as the font?

Done.

4. Can we increase the pause time for each of the slides in the carousel by 1 full second? It just feels not quite long enough.

Done.

5. If the user interacts with the dots or arrows, can we make it so we stop all auto-advancing?

Done

6. Can we add -webkit-font-smoothing: antialiased; to make the body text render a little smoother?

Done

7. When I click on one of the arrow buttons or the dots, a border appears on them. Can we disable that and only use the border when focused via keyboard tabbing for accessibility? I'm hoping we can remove the border when clicking with a mouse.

Done

9. In the PR description you've shown screenshots of the dark and light modes, but I'm only seeing the dark blue background version in this build. It doesn't seem to be changing when I switch my OS theme between dark and light.

Done.

[julmondragon]

@matthewbirtch

1. Is it possible to remove the 'no servers configured' dropdown instead of greying it out? And then just having 'Mattermost' in the middle of the app window bar? Once we have the first server configured then we could bring in the server dropdown and remove the 'Mattermost' title. Let me know what's possible here though.

Checking feasibility.

3. If I click 'Get started', but choose not add a server and close the app, the next time I open the desktop app I don't get the welcome screen. I'm wondering if we could/should always show the Welcome screen on launch if the first server is not yet configured. Thoughts?

Would this also include when removing all the servers?

8. It feels a little odd to have the Mattermost logo placed where it is now since there is nothing balancing it on the other side. Wondering if we should anchor it to the top-left corner?

Would this also apply for the New Server screen? Otherwise we could have the logo jumping to the left when going from the welcome to the new server screen.

[matthewbirtch]

5. If I click 'Get started', but choose not add a server and close the app, the next time I open the desktop app I don't get the welcome screen. I'm wondering if we could/should always show the Welcome screen on launch if the first server is not yet configured. Thoughts?

Would this also include when removing all the servers?

I think so, I'd be good with bringing back the welcome screen once you remove all servers.

8. It feels a little odd to have the Mattermost logo placed where it is now since there is nothing balancing it on the other side. Wondering if we should anchor it to the top-left corner?

Would this also apply for the New Server screen? Otherwise we could have the logo jumping to the left when going from the welcome to the new server screen.

Yes, I agree - we don't want the logo to jump around.

[mattermod]

Building app in separate branch.

[mattermod]

Successfully building:
https://circleci.com/gh/mattermost/desktop/21837
https://circleci.com/gh/mattermost/desktop/21836
https://circleci.com/gh/mattermost/desktop/21835

[julmondragon]

Successfully building: https://circleci.com/gh/mattermost/desktop/21837 https://circleci.com/gh/mattermost/desktop/21836 https://circleci.com/gh/mattermost/desktop/21835

build-linux-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-linux-x64.tar.gz

build-windows-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-win-ia32.zip tmp/artifacts/mattermost-desktop-5.2.0-develop.1-win-x64.zip

build-mac-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-mac-m1.dmg tmp/artifacts/mattermost-desktop-5.2.0-develop.1-mac-x64.dmg

[julmondragon]

@matthewbirtch All feedback has been addressed.

[mattermod]

Building app in separate branch.

[mattermod]

Successfully building:
https://circleci.com/gh/mattermost/desktop/21872
https://circleci.com/gh/mattermost/desktop/21871
https://circleci.com/gh/mattermost/desktop/21870

[julmondragon]

Successfully building: https://circleci.com/gh/mattermost/desktop/21872 https://circleci.com/gh/mattermost/desktop/21871 https://circleci.com/gh/mattermost/desktop/21870

build-linux-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-linux-x64.tar.gz

build-windows-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-win-ia32.zip tmp/artifacts/mattermost-desktop-5.2.0-develop.1-win-x64.zip

build-mac-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-mac-m1.dmg tmp/artifacts/mattermost-desktop-5.2.0-develop.1-mac-x64.dmg

[julmondragon]

@devinbinnie @saturninoabril Test cases updated with corresponding Zephyr Scale. Thanks to @stevemudie!

[devinbinnie]

@julmondragon Ran into two more issues while testing:

1. There's a little '0' visible when the Welcome Screen is visible.

2. On Windows (and presumably Linux) you can't open the 3-dot menu when there are no servers configured. This should definitely be allowed.

[mattermod]

Building app in separate branch.

[mattermod]

Successfully building:
https://circleci.com/gh/mattermost/desktop/21970
https://circleci.com/gh/mattermost/desktop/21969
https://circleci.com/gh/mattermost/desktop/21968

[julmondragon]

Successfully building: https://circleci.com/gh/mattermost/desktop/21970 https://circleci.com/gh/mattermost/desktop/21969 https://circleci.com/gh/mattermost/desktop/21968

build-windows-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-win-ia32.zip tmp/artifacts/mattermost-desktop-5.2.0-develop.1-win-x64.zip

build-linux-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-linux-x64.tar.gz

build-mac-pr: tmp/artifacts/mattermost-desktop-5.2.0-develop.1-mac-m1.dmg tmp/artifacts/mattermost-desktop-5.2.0-develop.1-mac-x64.dmg

[julmondragon]

@julmondragon Ran into two more issues while testing:

1. There's a little '0' visible when the Welcome Screen is visible.
2. On Windows (and presumably Linux) you can't open the 3-dot menu when there are no servers configured. This should definitely be allowed.

@devinbinnie Solved both issues.

[julmondragon]

Thanks @julmondragon, I'll unblock this as all major issues are resolved. 2 more that I found that can be addressed at a later date:

1. Opening the 3-dot menu and going to Windows > Show Servers pops the dropdown menu even though it should be disabled.
2. On Windows, when you click the 3-dot menu and then click off of it, the button stays focused no matter where else you click

Thank you @devinbinnie ! Regarding the two issues, it looks like these are present in v5.1.1, should then be handled in bug tickets?

[devinbinnie]

Thanks @julmondragon, I'll unblock this as all major issues are resolved. 2 more that I found that can be addressed at a later date:

1. Opening the 3-dot menu and going to Windows > Show Servers pops the dropdown menu even though it should be disabled.
2. On Windows, when you click the 3-dot menu and then click off of it, the button stays focused no matter where else you click

Thank you @devinbinnie ! Regarding the two issues, it looks like these are present in v5.1.1, should then be handled in bug tickets?

Yeah those would be fine.

[julmondragon]

Thanks @julmondragon, I'll unblock this as all major issues are resolved. 2 more that I found that can be addressed at a later date:

1. Opening the 3-dot menu and going to Windows > Show Servers pops the dropdown menu even though it should be disabled.
2. On Windows, when you click the 3-dot menu and then click off of it, the button stays focused no matter where else you click

Thank you @devinbinnie ! Regarding the two issues, it looks like these are present in v5.1.1, should then be handled in bug tickets?

Yeah those would be fine.

Created https://mattermost.atlassian.net/browse/MM-46424 for No.2. I think I can cover No.1 as part of the current work in https://mattermost.atlassian.net/browse/MM-45981