Advice needed for onboarding / walkthrough of new feature

newfeature
onboarding

#1

I have designed a new feature for a very complex web app. I know the general rule of thumb is ‘if you need a tour or guidance for your product you’ve made it too complicated’ but our users aren’t very tech savvy and are on very tight deadlines in terms of learning new stuff.

We will be sending lots of emails telling them that this new feature they’ve asked for is coming, but when it is actually released I want a screen straight after they log in saying ‘this feature is here’, you can find it here, you do x, y and z, give us a shout if you have any problems or any feedback on it.

This is a desktop web application, we don’t have to worry about responsiveness here.

I was wondering if anyone has any advice for how to make it as short, but informative as possible. And does anyone have any examples of nice onboarding or walkthrough screens that they have seen / made?

Thanks in advance!


#2

hi @jacquidow
IMO one of the best walkthrough solution is the one provided by InVision App.
They’re using this approach, in a consistent way, to provide new features as well.
Unfortunately I can’t send you any screenshots because I already dismissed the latest feature hints.
If u sign in with a new account u will notice that at the first glance.


#3

Thank you, I’ll have a look and see if I have an account or not!

If you wouldn’t mind @dopamino this is a super quick mock up I put together of the screen. Would you mind having a look and seeing if you can give any pointers?

http://fhbcb7.axshare.com/#c=2

So far I have:

  • It’s too long
  • The screenshots don’t stand out enough

We tried to do some usability testing with this screen in place but we didn’t ask the users to log in beforehand and they thought they were giving all their feedback for the whole classroom selection feature on this one screen! Only after some prompting did they realise they had to click past this screen, so I don’t know if this is a real issue too or if they misunderstood the usability testing process!


#4

hi @jacquidow

I hope you do not mind if I split in two your comment.

Starting with “simple” stuff :slight_smile:

I think that without the log-in process your users were not able to fully understand the goal of the test

I agree, as you said, it looks like a complex journey and there’s a lot of stuff to read and learn

I agree, IMO, screenshots displayed in a static way are not engaging

I can give you an example according my experience.
For our platform (responsive and native), often, we release new features and to attract user focus we decided to use the progressive disclosure.
For example the new QR code payment functionality with the.
We decided to deliver the short tutorial only if you browse the pay section. The CTA of the feature has a “new” label and if you click/tap on it, for the first time, you receive a dialog with a brief description of the functionality.
The user is always in control and she/he can decide whether to keep the suggestion appears again or dismiss it putting check the option “I understand, do not show again.”

After many tests (both qualitative and quantitative), we noticed that the so-called “content on the go” is much less invasive and useful to users because it provides a specific piece of information when this is necessary to them to complete the task.

We decided to implement the feature starting with this JS library: http://introjs.com/
I don’t remember how we delivered the same in the native environments, if you’re interested in I can ask some developers.


#5

Ah, I probably should have said, this has to be a single static html page due to some developmenet restrictions.
Also the feature is relatively hidden away so wanted to make it obvious from the get go. So I’m looking for a short, snappy, engaging single page that may be able to make the end user smile and want to use the feature!

Also, the page itself is going to reusable, with dynamic content, so that we can use the same code for future features too. So this is going to work as a template too!

In some of our other apps we are looking at using http://bootstraptour.com/ to announce and show new features but unfortunately can’t use it here :frowning:


#6

why do not use a dialog with the pagination (dots)
My gut feeling is that providing content in chunks is more easy to read and understand. And the dialog is also easier to manage in terms of visibility (you can set it accroding timing and/or coockie based etc)

this is brilliant, go for it!

cool, more or less is the feature we started with


#7

I’m afraid it has to be one single page, the only button on it takes you to the homepage :frowning:


#8

and the main CTA is above the fold, as a user I’m forced to scroll till the bottom of the page :frowning:


#9

Yes, I did that to try and force the user to read what’s on the page :smiling_imp:I know it’s bad practice, which is why I would like to condense the page a lot.


#10

this is a great plan…maybe could be a good compromise, to avoid frustration and overload for users, to deliver a sticky footer (or container) with the CTA


#11

Sticky footer might be nice if I can do this with the legacy code base :slight_smile:


#12

if there’s a will there’s a way…bring some delicious sweet treats to your DEVs (according my experience they have sweet tooth) :slight_smile:


#13

Luckily I sit next to the sweetie table and can bake :slight_smile:


#14

do it and let us know about the revenue


#15

The chocolate truffles and a classic victoria sponge have gone down well in the past :cake:


#16

I just googled it! Now I am searching for some spots here in Zurich where I can have it!
Damn…


Cake!
#17

It’s a british classic! The last one I did for work had a hint of lavender in the jam and lots of buttercream, it quickly vanished! I’ve done one with whipped fresh cream and lots of homemade strawberry jam too!

I also do a mean triple chocolate cake, hint of coffee, melted chocolate in the sponge, covered in ganache and homemade truffles!

(Now I’m hungry!)

I’ve also updated the link, is it looking any better now? :slight_smile:


#18

are u Nigella Lawson?


#19

Not quite, but I do put on a good housewife act!

(It’s always good to know some classic bakes in case you need to bake an apology cake, which will heal all wounds!)


#20

you improved it a lot, I do like it!

Here’s a list of thoughts: