Show a welcome / overview video as part of onboarding

[rgoj]

Introduction

We recently discussed showing a nice friendly video once a user enters the Maptio workspace, i.e. after the onboarding flow is finished, so that we get a chance to run a kind of introduction to the interface for the user's that might want that.

Some potential benefits:

• counteracting any problems we might see with UI issues preventing adoption (i.e. more quickly than by solving sometimes thorny UI issues!)
• highlighting the learning minisite currently hidden behind the "Help" link - and there's a treasure trove of content already there!
• it could also simply be nice for people to have a kind of tour by the founder as they start using Maptio - and get acquainted - in a semi-personal way - with the idea that help is available - and we could highlight again where and how it is available.

We agreed to first sanity check whether this would be as simple to do as I thought it would - and yes, it does seem so!

Next Actions

• Sanity check - draft a quick version and ship to staging
• (Romek) Write up a rough list of improvements it'd be good to make for this to ship
• (Tom) Decide whether this feels worth going for
• (Both) Then we'd need to agree on further next actions

• Here's what we agreed on (Monday 16 June):

• (Romek) Review remaining polishing tasks and ship something "good enough"
• (Both) Review together, are we happy with where this is at? Do we make any changes now? Only write up ideas for the future?

[rgoj]

Staging now has a super basic “proof of concept” / sanity check version of an onboarding video.

Instead of making it great (before we even decided whether it's worth shipping something like this to prod), let me write up some thoughts on what would be required/useful/great-but-perhaps-not-necessary for us to ship something like this (crossed out items are now either done/irrelevant or considered again below):

• Of course, we’d probably need to think about the content of the video itself, but for now I’m putting that aside, focusing on the technical feasibility and user experience - i.e. whether this kind of an onboarding video might be useful at all - perhaps it’s just a silly idea. For now, I just used the demo we've got on YouTube.
• At the moment the video is only visible in the workspace. I think that’s probably the right choice given that’s where people spend most of the time, but we could always put it elsewhere too.
• There’s no persistence of whether a user chose to close the window - though this will be trivial to add as we’ve already got mechanisms for that with the other onboarding messages.
• There is also nothing to prevent current users from seeing this. I believe when we introduced the onboarding messages, we didn't put in a mechanism in place (though I could be wrong and would have to check!) to ensure that only new users don't see the onboarding messages (and I believe only admin users see them, though again would have to double check!). It might be awkward for existing users to suddenly see an introductory video - though might be fun too - in any case something to make sure we at least spend a couple of minutes thinking about addressing one way or another, I guess.
  • UPDATE: We did make sure before to hide the onboarding messages for existing users, nice!
• A bit of experimentation with different screen sizes would be required, the window has a fixed size for now.
• It’s possible to resize it - there’s a handler for that in the lower right corner - but resizing breaks very easily and isn’t very visible (I’m not sure I’d see it if I didn’t know it was there)
• It’s also possible to move the window. I wanted to have this to enable a kind of experience where you can drag the window around and walk through the app’s interface (even using, closing, opening side panels. contacting us via intercom, etc.) while still watching / listening to the video - a kind of in-built mini tutorial. That seems to work surprisingly well even now (IMHO).
• The moving of the window happens only using the header. I’d love to remove the header (conserving precious space) and make the whole window draggable. That might conflict with the video controls (i,.e. it might pause the video, etc.), so this might not be perfect. And that would make placing the “close” button a little trickier, just a little. (Alternatively to removing the header, we could possibly reuse the onboarding message style. Hmm, just a thought.)
  * I ended up putting the video in the lower left corner as we seem to have the most space there for now (especially before the outliner is full of circles!). I spent 60 seconds trying to make it float above the intercom chat in the lower right corner… but my 60s didn’t produce results and I realised actually it’d be great for intercom to stay usable - and so, it feels like we can have all of the app usable with with the video visible - and if the video needs to be moved, it can be. So, it feels like that placement might actually work well (and I remember this is something we discussed and were worried about).
• I was also thinking of maybe even adding one of those three dot “context” buttons that would also allow you to directly go to the learning centre. (Not sure I like this idea and it might be better for the video to clearly explain how to get to the learning centre anyway, but just thought I’d write it up in case it sparks some other ideas for either of us - i.e. if we do get this onboarding video in, how can me make the best use of it? Could it be doing something more easily and usefully? Maybe "close for now" and "don't show again" buttons? Probably overkill, but simply brainstorming for now.)
• The code will need a bit of refactoring to fit the codebase and not add masses of junk, but that should be simple.
• Might be nice to polish the video controls - though that would be bottom of list of priorities, probably. (Though might again simply try to see how much work that'd be, it might be very simple to achieve a significantly more polished experience, in which case it might be worth going for this.)

[rgoj]

One more thing:

• Consider removing the onboarding messages.

[rgoj]

The onboarding video has now been shipped! Leaving this issue open until we get a chance to discuss it. Some potential points for discussion, some ideas, thoughts, etc. to potentially consider in the future:

• At the moment, the video is only shown in the workspace. It struck me that we could also show different videos elsewhere in the app to explain other aspects of maptio, just like we showed different onboarding messages in different parts of the workspace
• I've hidden the older onboarding messages... thought I went through a lot of back and forth on this! The thing that caught me out the most is that those older buttons had "learn more" buttons - without these, the discoverability of the learning site probably drops to an even lower level! Perhaps we should explicitly show or at least mention it in the video?
• I've hidden the header that was initially there in the first proof of concept. I really like not having the header there... but I am missing something that would explain to the user what they're looking at. I was thinking that maybe a header saying "Introduction to Maptio's interface" and overlaying the video (until hover) just like the controls are overlaying it might be nice?
  • Technical note to self: we could also use the poster property of the video tag itself to achieve a mix of the above and below very simply almost without any coding.
• Better (?) yet, we could have a nice "cover" (maybe reusing styles from the older onboarding messages) with buttons like "play video," "go to learning site," "mark as seen" in one corner and your face, Tom, reusing the photo we're already using in the onboarding flow to indicate "hey, I want to tell you something!"). I was thinking this could be nice... though as I started thinking about the details I couldn't quite work these out, so I dropped the idea for now, but perhaps it'd be worth coming back to at some point? Maybe this could be a nice way to make more of this onboarding widget? If we leave the older onboarding messages, then a "cover" like this, styled to look similar to those messages, would make for some lovely consistency!

Some thoughts to potentially consider about the video:

• Would be great to see, at least initially, your whole face, Tom.
• Perhaps we might want to explicitly point users towards the learning site? Maybe even show it?
• I wonder whether it wouldn't be nice to zoom in and out on the controls being shown? Perhaps something like https://screen.studio/ might be useful for this?

Remaining minor or relatively minor UX issues:

• Currently the "X" closing button appears and disappears differently than the video controls - this is because the video controls are native and the "X" button is added by me.
• It might be nice one day to use Angular Material for the video controls for a more consistent experience with the rest of the app... but really this feels like polish for a much later stage, maybe if I happen to need to do it elsewhere, if we decide to work with video a lot, etc. This isn't difficult, but also isn't trivial to get right - default controls will more likely to be accessible for example.
• The resizing could use some work. Currently, it's optimised really well for resizing if the video stays where it's been initially put. But the video is also draggable, to enable people moving it out of the way. When they then use the controls e.g. in the lower left corner... it's a little bit less obvious how the resizing should work there and tricky to get right. It would probably take me a while to get this to feel intuitive, so I left it as is. Should be perfect for 80% of cases, a bit weird and clunky, but still usable for the remaining 20%.

[rgoj]

First impressions from Tom:

Just tried it and it worked well. Two things come to mind…

1. I liked how the earlier demo had a title/header in the window which could say something like “Watch a 51 second demo” to give some context. It’s interesting because the starting frame of the video is basically exactly what they’re seeing in the main window but in miniature. It’s not immediately obvious what it is so some people might just press X immediately.
2. A very much nice-to-have feature would be when the window is closed it gives the impression of it being ‘minimised’ up to the free trial header, perhaps a button with a video icon and the word Demo. So if they close it but want to watch it later they know where it is. I wouldn’t want to spend too much time on this but wanted to log the idea.