Helping Customers Get Your SaaS Product Into Their End-Users Hands
Often the people buying and managing software are not the people that need to use it. Once you’ve got the sale, customer success becomes even more important, and the distribution of your product into the hands of the people that are actually the ones who need it is fundamental.
In 2014 I joined David Batey to co-found Nickelled, a SaaS platform helping online organisations onboard their users through step-by-step website tutorials (a.k.a guides).
Nickelled guides are really flexible. Make a guide for any website and share it with customers however you want to — email, instant messenger or live chat, help desk or website.
However, our customers are not the end-users. The end-users are the people using our customers’ websites. Now it all starts to become a bit meta. So for Nickelled’s customers to be successful, their website users have to be using our guides. Therefore distribution of our guides is very very important.
Nickelled’s competitors generally offer guides that work inside your web application, they allow users to interact with the page as they view a guide. This is a great way to distribute product guidance. At Nickelled we don’t do that. We made a conscious decision to stop offering in-app guides as a service because they are brittle. If your development team push a change, then the guides are liable to break. Not good.
Nickelled guides never break because we replicate the website the guide is created on, creating a snapshot for eternity until you choose to update it.
However, it became clear that there were 2 aspects to doing onboarding guides well: (1) the guides must never break, (2) the guides must be accessible from inside the website at the point of pain.
We were already doing #1 well but #2 needed some thought.
How could we provide indestructible onboarding guides exactly when they were needed?
We had to help our non-technical customers get guides to their users inside their web applications.
The fight for screen real estate
Before we jump in, it’s worth mentioning a major constraint that is currently weeding it’s way into the world of vendor products for SaaS — the very real fight for screen real estate.
In order to avoid cluttered and confusing user interfaces, website owners are ensuring that only the SaaS software providing maximum business value are displayed on their website. No-longer is your SaaS business simply competing with direct competitors (e.g. Live chat software: Intercom vs Drift), you’re now competing with any software that requires a user interface widget to be utilised (e.g. live chat vs surveys vs email signup vs FAQ search).
The Design Process
User interviews
As with most projects at Nickelled, we start by speaking to customers. Usually customers who have requested a specific feature or spoken to us about the problem we’re trying to solve. As we track and categorise all customer feedback at Nickelled, which aids us when planning our roadmap, we know who to reach out to directly.
We picked out a handful of customers wanting to run Nickelled guides in-app, got them on a Skype call, and asked them more about their feature requests and related problems.
Our customers had concerns…
- Their users couldn’t launch the guides from inside their websites;
- Their users didn’t know what to do to become successful;
Let’s help them.
Ideation
With the problems defined, we took to our sketch pads to navigate these issues.
This was actually not our first stab at a guide launcher, our Help Bubble, a widget combining in-app FAQ pages and in-app guides (yes, they ran on your webpage) was axed when we moved away from brittle in-app guides. However, user engagement with the Help Bubble was low due it’s low prominence on website user interface. It was hidden by a ‘Help’ link somewhere on the UI.
Based on this, we made the decision to make the guide launcher much more prominent on the user interface thus encouraging interaction. This subtle change in mindset opened the floodgates for interesting launcher user interfaces we could build.
Dog-fooding
As Nickelled is a SaaS business, and many of our customers are SaaS businesses, we use our own product daily. We added an experimental version of our guide launcher design to our own app and tracked the user response over the next 30-days. Results were positive.
The Results
Introducing The Mission Dock
On the back of our positive results, and a good response from our customers, we launched The Mission Dock. A simple JavaScript add-on, placing a user-friendly website tutorial launcher onto any webpage. Once the JavaScript snippet is placed on a webpage non-technical staff (marketing teams, customer success agents, product managers etc.) can easily add and customize up to 5 guides that lead and show their users how to achieve success.
See more about The Mission Dock here.
Winning the fight for screen real estate
An important consideration in the development of The Mission Dock was designing UI that plays nicely with the SaaS widget ecosystem. Additionally we needed The Mission Dock to be prominent so users actually engaged with it, but we also needed the dock to get out of the way when required.
With this in mind, The Mission Dock has three states. Initially it’s expanded, allowing users to see the full display of guides. However, a user can minimise the dock to view it at a later time. And finally once all guides have been viewed the training wheels will come off and the dock disappears.
The dock also floats, centered, at the bottom of the screen. This avoids the ‘clutter zone’ (the bottom right corner) which the majority of prominent SaaS companies use for their own elements.
Guide views radically increased
Customers that successfully add The Mission Dock to their website, radically increase their guide views, improve their trial-to-paid conversion and reduce their churn.
Roundup
Through a data-driven approach Nickelled launched The Mission Dock receiving customer praise.
The Mission Dock shows people how to be successful with any web application and tracks their progress to get there.
🙏 Thank you for reading. This is a story from Fraser Deans’ design portfolio — a digital product designer.
